<h2 id="h8d027c8ed3">はじめに</h2><p>おはこんにちばんは。<br>Webのエンジニアに転身してそろそろ1年になるので、ポートフォリオ 兼ブログを作ってみた。<br>主にWeb周りの技術で色々と触った結果などをゆる〜く書こうかな。<br></p><h2 id="h696e98ee0a">自己紹介</h2><p>スタートアップで働く27歳。フロントとバック共に触っている。<br>詳しくは以下を見てもらえると。<br><a href="/profile" target="_blank" rel="noopener noreferrer">https://ji23-dev.com/profile</a></p>

エンジニアかもなので、技術ブログはじめてみた

<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>