<p>今年も振り返りしておきます！</p><h2 id="hb52e6bbc10">仕事</h2><p><span style="color:#24292e">2019年7月から </span><a style="color:#24292e" href="https://www.kepple.co.jp/" target="_blank" rel="noopener noreferrer">株式会社ケップル</a><span style="color:#24292e">に所属し、あっという間に2年半くらいが経ちました。</span><br><br>前半は、主に要求仕様が複雑な機能の開発をしていました。<br>複雑な仕様を理解し、それを実装に落とし込むことは難しいことですが、脳を使いまくっている感があって楽しかったかなと思います。あまり頻繁にはやりたくないけどw<br><br>後半は、以前から希望していた 0-&gt;1 の開発を行うこととなりました 🎉<br>ただ、まさかのフロント 〜 インフラまで全て1人で開発することとなってしまったので、怒涛の日々を送っていました。その分、開発の立ち上げや認証まわり(OAuth)など 0-&gt;1 ならでは経験が出来ており、とても有意義でした。<br>今のところ予定位通り開発出来ているので、このままリリース出来るように頑張りたいと思います！！！<br></p><h2 id="h24a4d124d1">プライベート</h2><h3 id="hd033fd2d27">引っ越し</h3><p>この世に生まれてからずっと都内に住んでいたのですが、ほぼ会社に出社することもないので少し郊外へ引っ越しました。部屋も広くなったので、より仕事に集中出来そうです。<br></p><h3 id="h18f67c3fee">OSS活動</h3><p>後半から<a href="https://github.com/frouriojs/create-frourio-app" target="_blank" rel="noopener noreferrer">create-frourio-app</a>の開発を少しお手伝いしていました。普段の書いているコードとは全く異なり、とても勉強になることが多かったです。（めっちゃむずいけど）<br>今年はあまりコミット出来ませんでしが、来年は出来そうなので、もう少し貢献していきたいなと思います。<br></p><h3 id="h715aa40308">英語</h3><p>11月くらいから英語弱者なので、英語をまた学び直しています。ドキュメントなどを読む際に苦労しないくらいの英語力は最低限身につけていきたいです。<br></p><h3 id="h6cfaa47bdb">ブログ</h3><p>毎月は書けてはいないですが、今年は12記事書けました。頻繁に書けてないですが、継続出来たのは良かったなと思います。来年も最低限このペースをキープしていきたいです。<br></p><h2 id="h1afe451c43">さいごに</h2><p>今年は初めてやることが仕事とプライベートの共にあり、あっという間の1年でした。<br>来年はラスト20代なので、悔いがないように積極的に色々なことに挑戦していきたいと思います！！！<br><span style="color:#222222">それでは、みなさま、どうぞ良いお年をお迎えください！</span></p>

2021年の振り返り

<p><span style="color:#24292e">おはこんにちばんは。最近、</span>NextJS が出力したOpenAPI (Swagger)  によって記述された API 定義ファイルをもとに、Next.js でTypeScript の型や API クライアントを自動生成したいと思ったのですが、意外とまとまった資料がなかったのでその方法をご紹介します。今回は、openapi generator typescript-axios を元に利用します。<br><br>サンプルはこちら。（<a href="https://github.com/IshinoJun/nextjs-example-openapi-generator" target="_blank" rel="noopener noreferrer">フロント</a>、<a href="https://github.com/IshinoJun/nestjs-example-openapi-generator" target="_blank" rel="noopener noreferrer">バック</a>）<br></p><h2 id="hed900658dc">環境</h2><ul><li>Node.js v12.18.0</li><li>macOS Big Sur</li></ul><p><br></p><h2 id="hb40c68615d">NextJS でAPIを用意</h2><p>こちらに関しては、前回ご紹介した <a href="http://localhost:3000/blogs/nestjs-mikroorm-tutorial" target="_blank" rel="noopener noreferrer">NestJSにMikroORMの導入手順。CRUDのAPIを実装するまで。</a> で利用した<a href="https://github.com/IshinoJun/nestjs-mikroorm-example-app" target="_blank" rel="noopener noreferrer">リポジトリ</a>を修正していきます。<br></p><h3 id="h9133ad7bea">パッケージの導入</h3><p>APIの定義ファイルを出力する必要があるので、<code>Swagger</code> を導入します。</p><pre><code>yarn add @nestjs/swagger swagger-ui-express</code></pre><p><br>次に<code>main.ts</code>に以下の設定情報を追加します。</p><pre><code>./src/main.ts

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  const config = new DocumentBuilder()
    .setTitle('Example API')
    .setDescription('The Example API description')
    .setVersion('1.0')
    .build();

  const options: SwaggerDocumentOptions = {
    operationIdFactory: (_: string, methodKey: string) =&gt; methodKey,
  };

  const document = SwaggerModule.createDocument(app, config, options);
  SwaggerModule.setup('api', app, document);

  await app.listen(8080);
}</code></pre><p><br>OpenAPI Generatorは API クライアントを生成する際に OperationId を参照しています。一方で nestjs/swagger は OperationIdを<span style="color:#333333">「Controller名 + メソッド名」で出力します。</span><br>なので、 API クライアントでアクセスする際、呼び出しが<code>exampleApi.controller.method</code> となり少しくどくなります。そこで<code>exampleApi.method</code><span style="font-family: Monaco, Courier New, monospace">と</span><span style="color:#333333">するために以下を行なっています。</span></p><pre><code>const options: SwaggerDocumentOptions = {
  operationIdFactory: (_: string, methodKey: string) =&gt; methodKey,
};</code></pre><p><br>最後にコントローラー毎にインスタンスを区切るためにタグを以下のように追加しましょう。</p><pre><code>./src/example/example.controller.ts

@ApiTags('example')
export class ExampleController {
...</code></pre><p><br>これでNestJS側の最低限の設定は以上になります。<br></p><h2 id="h5d6dce4d37">Next.jsにopenapi generator typescript-axios を導入</h2><p>次にNext.js側の設定を行なっていきます。<br></p><h3 id="h702d09d558">プロジェクトを作成</h3><pre><code>yarn create next-app --typescript</code></pre><p><br></p><h3 id="hb15c49acba">パッケージを導入</h3><pre><code>yarn add -D openapitools/openapi-generator-cli

yarn add axios gulp</code></pre><p><br></p><h2 id="h872930db14">openapi generator typescript-axios の設定</h2><p>以下の設定ファイルを追加します。</p><pre><code>./openapiConfig.yml

withSeparateModelsAndApi: true
apiPackage: 'api'
modelPackage: 'dto'
modelPropertyNaming: 'camelCase'
supportsES6: true
withInterfaces: true</code></pre><p><br></p><ul><li>withSeparateModelsAndApi<ul><li>API と model を別々にしたかったので true にしています。</li></ul></li><li>apiPackage<ul><li>api が格納されるフォルダ名を api としたかったので api にしています。</li></ul></li><li>modelPackage<ul><li>model が格納されるフォルダ名を model としたかったので model にしています。</li></ul></li><li>modelPropertyNaming<ul><li>キャメルケースで出力したかったためです。</li></ul></li><li>supportsES6</li><li>withInterfaces<ul><li>使ってもいいかなっと思ったので追加しています。（雑）</li></ul></li></ul><h3 id="h74216feda6"><br>出力するコマンドを追加</h3><p>APIエンドポイントの TypeScript の型 と API クライアント 自動生成するコマンドを追加します。<br>openapi generator は <code>openapi-generator-cli generate -g typescript-axios -i &lt;OpenAPI定義ファイル&gt;&nbsp;-o &lt;出力先&gt;</code>のようなコマンドで出力します。ただ、OpenAPI定義ファイルの出力先が本番や開発環境で変わる可能性があるので、<code>gulp</code> を利用して環境変数から出力先を変えられるようにします。gulpの使い方については省略します。<br><br>以下のファイルを追加します。</p><pre><code>./gulpfile.ts
import * as cp from "child_process";

import { loadEnvConfig } from "@next/env";
import gulp from "gulp";

loadEnvConfig(process.env.PWD ?? "");

gulp.task("generate-example-client", (done) =&gt; {
  cp.spawnSync(
    "openapi-generator-cli",
    [
      "generate",
      "-g",
      "typescript-axios",
      "-i",
      `${process.env.API_JSON_URL ?? ""}`,
      "-o",
      "./openapi-generator/example-api",
      "-c",
      "./openapiConfig.yml",
    ],
    {
      stdio: [process.stdin, process.stdout, process.stderr],
      shell: true,
    }
  );
  done();
});</code></pre><p><br>環境変数には以下を追加します。</p><pre><code>./.env

API_JSON_URL=http://localhost:8080/api-json</code></pre><p><br>最後にコマンドを追加します。</p><pre><code>./package.json
"scripts": {
  "generate-example-client": "gulp generate-example-client"
},
....</code></pre><p><br></p><h3 id="h9d756a342d">openapi generator typescript-axios で出力</h3><p>先ほど追加したコマンドを実行します。</p><pre><code>yarn generate-example-client</code></pre><p><br>以下が出力されれば完了です。</p><pre><code>################################################################################
# Thanks for using OpenAPI Generator.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #
# Please consider donation to help us maintain this project 🙏&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;#
# https://opencollective.com/openapi_generator/donate&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #
################################################################################
Finished 'generate-example-client' after 3.55 s</code></pre><p><br></p><h3 id="hd0b0994538">APIクライアント まとめるクラスを追加</h3><p>エンドポイント毎に設定を渡す必要があるので、集約するクラスを定義しておきます。basePathにはバックエンド側のURLを指定します。</p><pre><code>./clients/ExampleClient.ts

import { Configuration, ExampleApi } from "../openapi-generator/example-api";

export class ExampleClient {
  private config = new Configuration({
    basePath: process.env.NEXT_PUBLIC_API_BASE_URL || "/api",
  });

  public exampleApi = new ExampleApi(this.config);
}</code></pre><p><br></p><h3 id="h39017e0df9">インスタンスをどこでも扱えるようにする</h3><p>最後に <code>ExampleClient</code> をどこでも扱えるようにします。今回は <code>context</code> を利用します。ここでは細かい説明は行いません。<br></p><pre><code>./contexts/ExampleClientContext.ts

import React from "react";

import type { ExampleClient } from "../clients/ExampleClient";

export const ExampleClientContext = React.createContext&lt;
  ExampleClient | undefined
&gt;(undefined);</code></pre><p><br></p><pre><code>./pages/_app.tsx

const exampleClient = new ExampleClient();

function MyApp({ Component, pageProps }: AppProps) {
  return (
    &lt;ExampleClientContext.Provider value={exampleClient}&gt;
      &lt;Component {...pageProps} /&gt;
    &lt;/ExampleClientContext.Provider&gt;
  );
}</code></pre><p><br></p><pre><code>./hooks/useExampleClient.ts

import { useContext } from "react";

import type { ExampleClient } from "../clients/ExampleClient";
import { ExampleClientContext } from "../contexts";

export const useExampleClient = (): ExampleClient =&gt; {
  const exampleClient = useContext(ExampleClientContext);
  if (!exampleClient)
    throw new Error("useExampleClient must be inside a Provider with a value");

  return exampleClient;
};</code></pre><p><br>以下のようAPIをアクセスできるようになれば完了です。</p><pre><code>  useEffect(() =&gt; {
    void (async () =&gt; {
      console.log(await exampleClient.exampleApi.findAll());
    })();
  });</code></pre><p><br>これで終わりです。お疲れ様でした。<br></p><h2 id="h3bcda3e6b0">最後に</h2><p>OpenAPI Generator typescript-axios を使ってNext.js と NestJSを連携する方法をご紹介しました。TypeScript の型や API クライアントを自動生成されるので便利ですね。ただ、ドキュメントなどはあまり揃ってないので、利用するにはある程度の覚悟が必要かなっと思います。</p>

OpenAPI Generator を使ってNext.js と NestJSを連携する方法

<p><span style="color:#24292e">おはこんにちばんは。</span><a href="https://github.com/IshinoJun/nextjs-microcms-contact" target="_blank" rel="noopener noreferrer">Next.js + microCMSで問い合わせ機能</a>を実装してみました。<br></p><h2 id="h8d027c8ed3">はじめに</h2><ul><li>実装方法について触れています。特にAPIキーを隠蔽せずに実装している記事が見受けられてたので、その辺は注意して触れていきます。</li><li>Next.js や microCMSとは？っといった概要には触れません。</li></ul><p><br></p><h2 id="h38c8766536">microCMSの設定</h2><p>この辺は他のサイトで触れてるところがあったので雑に説明します。<br></p><h3 id="h2c9414f5a4">コンテンツ（API）の追加</h3><p>API名とエンドポイントを入力し、コンテンツ（API）を追加します。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B1.png" alt=""><br><br>続いて、POSTが使えるリスト形式を選択します。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B2.png" alt=""><br><br>必要なAPIスキーマーを設定すれば終了です。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B3.png" alt=""><br><br>なお、以下も忘れずに実施ください。</p><ol><li>POSTリクエストを有効にする（<strong>API設定 &gt; HTTPメソッド設定）</strong></li><li>APIリファレンスから<strong>X-WRITE-API-KEY</strong>を作成して控えておく</li></ol><p><br></p><h2 id="h131d3691cd">Next.jsで問い合わせ機能を実装</h2><p>フォーム機能を実装していきます。<br></p><h3 id="h2ce7c28a66">問い合わせ用の関数を作成</h3><p>Next.jsにはサーバーレス関数を起動できるAPI Routes機能があります。<br>その機能を利用し、サーバサイド経由でAPIキーを隠蔽してリクエストを送るようにします。<br><br>まず、環境変数を利用するために<strong>.env.local</strong>を作成し、先ほどメモしたX-WRITE-API-KEYを記載します。<br>NEXT_PUBLIC_を変数の前にを付けるとフロント側にも公開されてしまうので、APIキーなどでは付けない方が良さそうですね。</p><pre><code>WRITE_API_KEY="メモしたX-WRITE-API-KEY"</code></pre><p><br>次に以下のような関数とクエリをチェックするタイプガード を用意します。<br>詳しくはリンクのコード見てもられば！<br><br><a href="https://github.com/IshinoJun/nextjs-microcms-contact/blob/master/src/pages/api/contact.ts" target="_blank" rel="noopener noreferrer">/</a><a style="color:#454545" href="https://github.com/IshinoJun/nextjs-microcms-contact/blob/master/src/pages/api/contact.ts" target="_blank" rel="noopener noreferrer">pages/api/</a><a href="https://github.com/IshinoJun/nextjs-microcms-contact/blob/master/src/pages/api/contact.ts" target="_blank" rel="noopener noreferrer">contact.ts</a></p><pre><code>  // クエリとAPIキーのチェック
  if (!isContact(req.body) || typeof WRITE_API_KEY === "undefined") {
    return res.status(404).end();
  }

  const content = await fetch(`https://xxxxxx.microcms.io/api/v1/contacts/`, {
    headers: { "X-WRITE-API-KEY": WRITE_API_KEY },
    body: JSON.stringify(req.body),
  })
    .then(() =&gt; "Created")
    .catch(() =&gt; null);

  // CMS側で正しく作成されたかチェック
  if (content !== "Created") {
    return res.status(401).json({ message: "Unauthorized" });
  }

  res.status(200).json({ message: "OK" });

  res.end("Contact enabled");
};</code></pre><p><br><a href="https://github.com/IshinoJun/nextjs-microcms-contact/blob/master/src/utils/TypeGuardUtils.ts" target="_blank" rel="noopener noreferrer">/utils/TypeGuardUtils.ts</a></p><pre><code>const isContact = (item: unknown): item is Contact =&gt; {
  const target = item as Contact;

  return (
    "name" in target &amp;&amp;
    typeof target.name === "string" &amp;&amp;
    !!target.name &amp;&amp;
    "email" in target &amp;&amp;
    typeof target.email === "string" &amp;&amp;
    !!target.email &amp;&amp;
    "body" in target &amp;&amp;
    typeof target.body === "string" &amp;&amp;
    !!target.body
  );
};

</code></pre><p><br>これで&nbsp;<strong> `/api/contact` </strong>でこの関数を起動できるようになりました。<br>処理としては、以下のチェックをし、問題無ければ200を返すようにしています。問題があればエラーを返します。</p><ol><li>クエリとして渡されるオブジェクトが期待通りのオブジェクトか</li><li>実際にmicroCMSのAPIを呼び出して正しく作成されたか</li></ol><p><br>microCMSのAPIの呼び出し処理はラッパーなりを用意した方が無難かもですね。keyの設定なりを毎回しなくてはいけないので。<br></p><h3 id="h782dc6ea91">ページ側の作成</h3><p>今回はフォームバリデーションライブラリの <a href="https://github.com/react-hook-form/react-hook-form" target="_blank" rel="noopener noreferrer">react-hook-form</a>（<a href="https://github.com/jquense/yup" target="_blank" rel="noopener noreferrer">yup</a>）とUIライブラリの<a href="https://material-ui.com/" target="_blank" rel="noopener noreferrer">Material-UI</a>を利用しています。<br>上記ライブラリについて詳しくは触れませんが、react-hook-formは公式に記載通り以下の点で優秀だなっと思った最近この頃。<br></p><ul><li>再レンダリングが最小に抑えられている</li><li>コードの記述量が少ない</li><li>外部 UI コンポーネントライブラリとの統合が容易</li></ul><p><br>ページとしては以下の３つを作成します。量が多いので必要なとこだけ説明します。<br><br><a style="color:#454545" href="https://github.com/IshinoJun/nextjs-microcms-contact/blob/master/src/pages/contact/index.tsx" target="_blank" rel="noopener noreferrer">pages/conatct/index.tsx</a></p><pre><code>  const onSubmit = async (contact: Contact): Promise&lt;void&gt; =&gt; {
    try {
      await fetch(baseUrl + "/api/contact", {
        method: "POST",
        headers: {
          "Content-Type": "application/json; charset=utf-8",
        },
        body: JSON.stringify(contact),
      }).then((res) =&gt; {
        if (!res.ok) {
          throw Error(`${res.status} ${res.statusText}`);
        }
      });

      void router.push("/contact/success");
    } catch (err) {
      void router.push("/contact/error");
    }
  };</code></pre><p><br>フロント側から上記のように叩くことで先ほど作成した問い合わせ用の関数を起動させています。<br>これでサーバサイド経由でAPIキーを隠蔽し、リクエストを送るよう出来ました。<br><br>「何故フロントからだとAPIキーが隠蔽されないのか」は<a href="https://microcms.io/blog/nuxt-secure-api-key/" target="_blank" rel="noopener noreferrer">このサイト</a>で詳しく解説されておりました。<br><br><a style="color:#454545" href="https://github.com/IshinoJun/nextjs-microcms-contact/blob/master/src/pages/contact/success/index.tsx" target="_blank" rel="noopener noreferrer">pages/success/index.tsx</a><br><a style="color:#454545" href="https://github.com/IshinoJun/nextjs-microcms-contact/blob/master/src/pages/contact/error/index.tsx" target="_blank" rel="noopener noreferrer">pages/error/index.tsx</a><br>上記は、問い合わせの成功時と失敗時の画面です！<br><br>これで実装としては完了です。<br><span style="color:#454545">実装後に作成したフォームで送信してみて、</span>microCMSでその結果が表示出来ていれば完成です！！！<br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B5.png" alt=""><br><br>最後に通知が必要な方は、<strong>Webpack &gt; API設定</strong>でSlackやメール通知などが可能なので設定しておくと良いでしょう。<br></p><h2 id="ha214098e44">まとめ</h2><p>Next.js と microCMS を問い合わせ機能しました。APIキー周りの管理は基本的に自己責任となるので注意が必要ですね。（てかブログ書くの大変）</p>

【Next.js】 microCMSで問い合わせ機能を実装してみた

<h2 id="h9707d3a59a">概要</h2><p><a href="https://microcms.io/" target="_blank" rel="noopener noreferrer">microCMS</a> ではブログなどの記事データをリッチエディタで入稿することが可能です。ただ、<span style="color:#16161d">APIではそれらが</span>生HTML<span style="color:#16161d">で返ってきます。</span><br><br><code>dangerouslySetInnerHTML</code> に渡せばレンダリングされますが、以下のようなケースもあると思います。<br></p><ul><li>Chakra UI などの定義されているコンポーネントを利用したい</li><li><span style="color:#16161d">class指定して</span>グローバルCSSを書きたくない</li><li>XSSの危険性があるから<code>dangerouslySetInnerHTML</code>を利用したくない</li></ul><p><br>今回はこれらを解決する<a href="https://github.com/remarkablemark/html-react-parser" target="_blank" rel="noopener noreferrer">html-react-parser</a>を利用していきます。サンプルコードは<a href="https://github.com/IshinoJun/next-html-react-parser" target="_blank" rel="noopener noreferrer">こちら</a>。microCMSの取得処理は省略しています。<br></p><h2 id="hfe5a8eaaf7">実行環境</h2><p>サンプルとして、<a href="https://nextjs.org/" target="_blank" rel="noopener noreferrer">Next.js</a> と <a href="https://chakra-ui.com/" target="_blank" rel="noopener noreferrer">Chakra UI</a> を利用します。<br></p><h2 id="h941dee673d"><a style="background-color:#ffffff" href="https://github.com/remarkablemark/html-react-parser" target="_blank" rel="noopener noreferrer">html-react-parser</a>とは</h2><p><a style="background-color:#ffffff" href="https://github.com/remarkablemark/html-react-parser" target="_blank" rel="noopener noreferrer">html-react-parser</a> はReactで生HTMLを自由に加工することが可能になります。例としては、以下のように生HTMLをReactのコンポーネントに変換できます。</p><pre><code>parse('&lt;p id="replace"&gt;text&lt;/p&gt;', {
  replace: domNode =&gt; {
    if (domNode.attribs &amp;&amp; domNode.attribs.id === 'replace') {
      return &lt;Text&gt;replaced&lt;/Text&gt;;
    }
  }
});</code></pre><p><br></p><h2 id="h49acf03970">microCMSのリッチエディタ（生HTML）に対応</h2><p>それでは、microCMSのリッチエディタ（生HTML）に対応していきます。<br></p><h3 id="hd8d793506b">インストール</h3><p>公式を参考に<a href="https://github.com/remarkablemark/html-react-parser#install" target="_blank" rel="noopener noreferrer">インストール</a>してください！<br></p><h3 id="h78fb6bf512">リッチエディタ（生HTML）をコンポーネントにパース</h3><p>コンポーネントを以下のように定義し、<code>parse</code>の処理を追加します。</p><pre><code>export const Markdown = (): JSX.Element =&gt; {
  return (
    &lt;Box &gt;
      {parse(source, options)}
    &lt;/Box&gt;
  );
};</code></pre><p><br>次に<code>parse</code> のoptionsについて説明します。optionsには、<code>replace</code> <span style="color:#24292f">と </span><code>domToReact</code>を利用します。<code>replace</code>はある要素をコンポーネントへ置き換えることができます。<code>domToReact</code>はその要素の子要素も再起的にコンポーネントへ置き換えることができます。<br><br>サンプルでh1だと、下記でコンポーネントに変換が可能です。こんな感じで良しなに変換内容の定義ができます。以上です。</p><pre><code>const options: HTMLReactParserOptions = {
  replace: (domNode) =&gt; {
    if (domNode instanceof Element &amp;&amp; domNode.type === 'tag') {
      const props = attributesToProps(domNode.attribs);

      if (domNode.attribs &amp;&amp; domNode.name === 'h1') {
        return (
          &lt;Text as='h1' {...props}&gt;
            {domToReact(domNode.children, options)}
          &lt;/Text&gt;
        );
      }
     ...
    }
  },
};</code></pre><p><br></p><h2 id="ha214098e44">まとめ</h2><p>microCMSのリッチエディタ（生HTML）をコンポーネントに変換する方法をご紹介しました。生HTMLを自由に加工出来ると拡張性が高くなるので良いですね。（このブログも対応したい）</p>