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

microCMSのリッチエディタ（生HTML）をReactのコンポーネントにパースしてみた

<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年の振り返り

<h2 id="h8d027c8ed3">はじめに</h2><p>おはこんばんは。英単語の品詞をクイズ形式で学べる「<a href="https://part-of-speech-quiz.com/" target="_blank" rel="noopener noreferrer">品詞クイズ 📝</a>」を作ってみました！<br><span style="color:#0d0d0d">英語弱者な私が英単語の品詞を判別することが苦手で、他の似たようなサイトを利用していたのですが、</span>単語の意味が無かったり、読み方を音声で再生出来なかったりして、少し不便に感じたので作ってみました。<span style="color:#0d0d0d">はい、ただそれだけです。</span><br></p><h2 id="h5a9df7cbfb">品詞クイズとは？</h2><p>英単語の品詞判別をクイズ形式で学べることが出来ます。単語の最後を見ると品詞を推測する事が可能な接尾辞のパターン網羅しています。またその単語の意味や読み方も音声で確認することが可能です。<br><br>まず出題方法は問題順かランダムかを選択し、「Start」を押します。<br><img src="https://images.microcms-assets.io/assets/7758ea7c4c9e428cbf0a23d966011ccb/46f3b6db7cef4b87ab7ef72d41c5ea30/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-12-29%201.50.58.png" alt=""><br><br>すると問題が出題されます。音声を確認したい場合は音声マークを押すと再生されます。<br><img src="https://images.microcms-assets.io/assets/7758ea7c4c9e428cbf0a23d966011ccb/9fa6c317aed84888ae9827c65c7825a9/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-12-29%2018.35.33.png" alt=""><br><br>選択肢を選び、「解答」を押すと結果が表示されます。<br><img src="https://images.microcms-assets.io/assets/7758ea7c4c9e428cbf0a23d966011ccb/338f54114fcf477e92604335d5ec61a9/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-12-29%2018.18.43.png" alt=""><br><br>全問解答すると以下のように解答結果が表示されます！<br><img src="https://images.microcms-assets.io/assets/7758ea7c4c9e428cbf0a23d966011ccb/552b460cf2ae448d855b3627ab651ec0/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-12-29%2018.21.15.png" alt=""><br></p><h2 id="h80c274ebdd">使用したライブラリ・インフラ・ツールなど</h2><p>主に以下になります。<br></p><ul><li><a href="https://nextjs.org/" target="_blank" rel="noopener noreferrer">Next.js</a></li><li><a href="https://chakra-ui.com/" target="_blank" rel="noopener noreferrer">Chakra UI</a></li><li><a href="https://cloud.google.com/text-to-speech" target="_blank" rel="noopener noreferrer">Text-to-Speech(google)</a></li><li><a href="https://vercel.com/" target="_blank" rel="noopener noreferrer">Vercel</a></li><li><a href="https://microcms.io/" target="_blank" rel="noopener noreferrer">microCMS</a></li><li><a href="https://www.figma.com/" target="_blank" rel="noopener noreferrer">Figma</a></li></ul><p>機能は多くないので、色々とは使っていません。よく利用する <a href="https://nextjs.org/" target="_blank" rel="noopener noreferrer">Next.js</a>,  <a href="https://vercel.com/" target="_blank" rel="noopener noreferrer">Vercel</a>,  <a href="https://chakra-ui.com/" target="_blank" rel="noopener noreferrer">Chakra UI</a> でフロントは構築しています。テキストの音声再生のために <a href="https://cloud.google.com/text-to-speech" target="_blank" rel="noopener noreferrer">Text-to-Speech(google)</a> で音声情報を生成しています。<a href="https://microcms.io/" target="_blank" rel="noopener noreferrer">microCMS</a> では英単語のコンテンツ管理をしています。最後にデザインを作るのに <a href="https://www.figma.com/" target="_blank" rel="noopener noreferrer">Figma</a> を利用しています。<br></p><h2 id="hff0a69ee28">工夫したこと</h2><h3 id="haf78e85f56">音声再生</h3><p>英単語の音声再生は以下のように実装しました。</p><ol><li>音声再生には400 万文字までで毎月無料の <a style="background-color:#ffffff" href="https://cloud.google.com/text-to-speech" target="_blank" rel="noopener noreferrer">Text-to-Speech(google)</a>を利用</li><li>ビルド時に登録されているを全ての英単語を1.で音声情報を取得し、MP3にして保存</li><li>2. を利用して再生</li></ol><p><br>音声再生毎に <a style="background-color:#ffffff" href="https://cloud.google.com/text-to-speech" target="_blank" rel="noopener noreferrer">Text-to-Speech(google)</a> を叩かれてしまうと無料の範囲を超えてしまう可能性があるので、ビルド時のみ音声情報を取得するようにしています。<br></p><h3 id="hb570a6676d">デザイン</h3><p>普段、デザインは一切しないのですが、デザイナーの方の気持ちを理解するために <a style="background-color:#ffffff" href="https://www.figma.com/" target="_blank" rel="noopener noreferrer">Figma</a> でデザインを作ってみました。デザインで意識したことは以下になります。<br></p><ul><li>暗記に良い？と言われる青色をメインカラーにした</li><li>実装の手間を無くすために<a href="https://chakra-ui.com/" target="_blank" rel="noopener noreferrer">Chakra UI</a> のデザインシステムを準拠する</li><li>暗記の妨げにならないよう表示内容はシンプルで簡潔にする</li></ul><p><br>感想としては、デザインセンスが無い私がこの分野を磨くためにはかなりの労力が必要だな再認識できました... デザイナーの方は本当に凄い！！！また <a style="background-color:#ffffff" href="https://www.figma.com/" target="_blank" rel="noopener noreferrer">Figma</a> は普段閲覧のみの利用なので使い方に苦戦しましたw この辺フォローしてくれた <a style="color:inherit" href="https://twitter.com/MykiiTech" target="_blank" rel="noopener noreferrer">@MykiiTech</a><span style="color:inherit"> さんありがとうございました！！！</span><br><br><span style="color:inherit">雑魚なのでデザインはスクショだけw</span><br><img src="https://images.microcms-assets.io/assets/7758ea7c4c9e428cbf0a23d966011ccb/f0ba1a895864467eb19ede95eca0ed20/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-12-29%2020.23.55.png" alt=""><br></p><h3 id="ha4f9001402">コスト</h3><p>今回はドメイン代だけです！基本的に自分が勉強するためだけに実装したので、無料で実装できるようにしました。世の中、無料で扱えるものが多くて最高ですね！<br></p><h2 id="h1afe451c43">さいごに</h2><p>簡単なものでも作ってみると結構学びがあって良いですね！ただ、これ作る時間あるなら英単語覚えた方がよかったかもですw<br><br>サイト：<a href="https://part-of-speech-quiz.com/" target="_blank" rel="noopener noreferrer">https://part-of-speech-quiz.com/</a><br>ソース：<a href="https://github.com/IshinoJun/part-of-speech-quiz" target="_blank" rel="noopener noreferrer">https://github.com/IshinoJun/part-of-speech-quiz</a><br></p>

英単語の品詞をクイズ形式で学べる「品詞クイズ 」を作ってみた

<h2 id="h9707d3a59a">概要</h2><p><a href="https://github.com/nestjs/nest" target="_blank" rel="noopener noreferrer">NestJS</a> のログにスタック情報を追加します。<br><br>デバック時にどこで落ちているか確認をする際、ログからスタック情報を参照出来るのと便利です。<br><br>なお、今回は<a style="background-color:#ffffff" href="https://github.com/nestjs/nest" target="_blank" rel="noopener noreferrer">NestJS</a> の環境が構築されている前提でご説明します。<br></p><h2 id="hf031c5e696">実装方法</h2><h3 id="h3ce1a51dc0">HttpExceptionsFilter を実装</h3><p>NestJSの <a href="https://docs.nestjs.com/exception-filters" target="_blank" rel="noopener noreferrer">Exception filters</a><span style="color:#222222">は例外処理をキャッチし、その例外処理にカスタムの機能を追加することができます。</span><br><br>今回は その <a style="background-color:#ffffff" href="unsafe:[object Object]" target="_blank" rel="noopener noreferrer">Exception filters</a>を用いて、例外が発生する度にスタック情報をログに出力するようにします。<br></p><pre><code>import { ArgumentsHost, Catch, HttpException, Logger } from '@nestjs/common';
import { BaseExceptionFilter } from '@nestjs/core';

@Catch(HttpException)
export class HttpExceptionsFilter extends BaseExceptionFilter {
  private readonly logger = new Logger(HttpExceptionsFilter.name);

  catch(exception: HttpException, host: ArgumentsHost): void {
    super.catch(exception, host);
    const status = exception.getStatus();

    if (status &gt;= 500) {
      this.logger.error(exception.stack);
    } else {
      this.logger.warn(exception.stack);
    }
  }
}</code></pre><p><br>exceptionにはエラー情報が含まれます。その情報にスタックが含まれるので、それをログに出力するようにしています。ステータスが500以下は重要度的にも<span style="color:#303030">LogLevelを</span><code>warn</code>にしています。<br></p><h3 id="h012d97d4c5">MainにHttpExceptionsFilterを設定</h3><p>HttpExceptionsFilter をグローバルに適用するようにします。<br></p><pre><code>const { httpAdapter } = app.get(HttpAdapterHost);
app.useGlobalFilters(new HttpExceptionsFilter(httpAdapter));</code></pre><p><br></p><h3 id="h45437cb5d5">実行結果</h3><p>以下のようにエラー発生すると以下のログが出力されていれば成功です！</p><pre><code>[Nest] 2513&nbsp; - 2021/10/31 14:31:08&nbsp; &nbsp; WARN [HttpExceptionsFilter] UnauthorizedException: Unauthorized
... エラー箇所のスタック</code></pre><p><br></p><h2 id="ha214098e44">まとめ</h2><p><a style="background-color:#ffffff" href="https://github.com/nestjs/nest" target="_blank" rel="noopener noreferrer">NestJS</a> のログにスタック情報を追加する方法をご紹介しました。デバックが楽になるので良かったら追加してみてください。<br></p>

NestJS で LogにStack情報を追加する

<h2 id="h9707d3a59a">概要</h2><p><a href="https://github.com/nestjs/nest" target="_blank" rel="noopener noreferrer">NestJS</a> のログにリクエスト情報を追加します。<br><br>デバック時にどんなクエリで不具合が起きているのか確認をする際、ログからリクエスト情報を参照出来るので便利です。<br><br>なお、今回は<a style="background-color:#ffffff" href="https://github.com/nestjs/nest" target="_blank" rel="noopener noreferrer">NestJS</a> の環境が構築されている前提でご説明します。<br></p><h2 id="hf031c5e696">実装方法</h2><h3 id="he47cc28ec8">LoggerMiddleware を実装</h3><p>NestJSの <a style="background-color:#ffffff" href="https://docs.nestjs.com/middleware" target="_blank" rel="noopener noreferrer">Middleware</a><span style="color:#222222">はルートハンドラーの前に呼び出される関数です。コントローラーのエンドポイントへの処理前に特定の処理を挟めます。</span><br><br>今回は その<a style="background-color:#ffffff" href="https://docs.nestjs.com/middleware" target="_blank" rel="noopener noreferrer">Middleware</a>を用いて、リクエスト毎にリクエスト情報をログに出力するようにします。<br></p><pre><code>import { Injectable, Logger, NestMiddleware } from '@nestjs/common';
import { Request, Response } from 'express';

@Injectable()
export class LoggerMiddleware implements NestMiddleware {
  private readonly logger = new Logger(LoggerMiddleware.name);

  use(req: Request, _: Response, next: () =&gt; void): void {
    this.logger.log(this.createMessage(req));
    next();
  }

  private createMessage(req: Request): string {
    const { body } = req;
  
    const msg = `api request [url=${req.url}, method=${
      req.method
    }, body=${JSON.stringify(body)}, ip=${req.ip}]`;
    return msg;
  }
}</code></pre><p><br>NestJSの <a style="background-color:#ffffff" href="https://docs.nestjs.com/middleware" target="_blank" rel="noopener noreferrer">Middleware</a>はRequestを取得出来るので、その情報を元に今回は<code>method</code>, <code>body</code>, <code>clientIp</code> を出力するようにしています。<br></p><h3 id="hd6aa6878c1">AppModuleにLoggerMiddlewareを設定</h3><p><code>AppModule</code>に先ほど実装した <code>LoogerMiddleware</code>を設定します。これでリクエストの度に<code>LoogerMiddleware</code>が呼び出されるはずです。<br></p><pre><code>export class AppModule {
  configure(consumer: MiddlewareConsumer): void {
    consumer.apply(LoggerMiddleware).forRoutes('');
  }
}</code></pre><p><br></p><h3 id="h45437cb5d5">実行結果</h3><p>以下のようにエンドポイントを叩くと、<code>method</code>, <code>body</code>, <code>clientIp</code> が出力されていれば成功です！</p><pre><code>[Nest] 98030&nbsp; - 2021/10/30 22:23:55&nbsp; &nbsp; &nbsp;LOG [LoggerMiddleware] api request [url=/sample, method=GET, body={}, ip=::1]</code></pre><p><br></p><h2 id="ha214098e44">まとめ</h2><p><a style="background-color:#ffffff" href="https://github.com/nestjs/nest" target="_blank" rel="noopener noreferrer">NestJS</a> のログにリクエスト情報を追加する方法をご紹介しました。デバックが楽になるかもなので良かったら追加してみてください。<br><br>ただ、本番環境で上記ログを出すとパスワードといった情報も出てしまうので、以下のようにマスクをする処理を挟む必要があるかもです。（もう少し良いやり方ありそう）</p><pre><code>const { body } = req;
const nextBody = { ...body };
if ('password' in nextBody) {
  nextBody.password = '********';
}</code></pre><p><br></p>

NestJS で LogにRequest情報を追加する

<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を連携する方法

NestJSにMikroORMの導入手順。CRUDのAPIを実装するまで。

<p>最近、自分のコードレビューがイケてないなーっと思うことがあったので、今後気をつけることをメモがてらにまとめようと思います。<br></p><h2 id="h411400a885">コードレビューを依頼するときに気をつけること</h2><p>単純にレビューを依頼しただけではスムーズに終わらないケースもあるので、以下のポイントを気をつけていきます。<br></p><h3 id="h0f0da1c3d8">最終的なコードと動作のチェックを2度する</h3><p>ケアレスミスや動作確認をしていれば気づける不具合の指摘は、レビュワーの負荷にもなるので、減らせるように気をつけていたいと思います。<br>特に私は1度ミスするタイプの生き物なので、時間を置いて2度確認することで見落としを減らしていきたいです。<br></p><h3 id="hfda16f269d">相手の立場に立ったPRの説明をする</h3><p>最近、「〇〇だから△△した理解で合っているよね？」っと聞かれるケースが何度かあったのですが、これは「どのように解決したのか」という観点の説明が浅いせいだなっと最近思うこの頃です。<br>相手の立場に立って、疑問を持たれない説明になっているか考えながら説明を書くように気をつけたいと思います。<br></p><h3 id="h25f6a3cea7">より見てほしいところはコメントをする</h3><p>コード量が多かったりするとレビュワーも見切れないケースがあるので、</p><ol><li>動作に不安がある箇所</li><li>もうちょっと上手く書けないか相談したい箇所</li></ol><p>など、より見て欲しいところはコメントで主張していきたいと思います。<br></p><h2 id="h2b1f87d3db">コードレビューをするときに気をつけること</h2><p>自分が思っていることと相手の受け取り方が全然違ったりするので、以下のポイントを気をつけていきます。<br></p><h3 id="h4758d631db">自分の意見を伝えた上で質問する</h3><p>「これは必要ですか？」のように質問だけで終わらせるのはちょっと冷たい印象で捉えられるのと、議論が進みにくいコメントだなっと最近思うこの頃です。<br>「自分だったらこうするけど、これは必要ですかね？」のように自分の意見を伝えた上で質問した方が議論が進みやすそうなので、気をつけていきます。<br></p><h3 id="hc57e36d66d">優先順位を伝える</h3><p>コメントの数が多いと、どのコメントから対応したらいいか困るケースが自身でありました。<br>なのでコメントは、修正が必須か推奨か、それともただ質問なのか明確に伝えることを気をつけていきます。<br></p><h3 id="h31d4b6e301">否定的な伝え方をしない</h3><p>「〇〇にしてください」のような伝え方は否定的に捉えられやすいです。「〇〇のようにすると良いかもですね」のように否定的な伝え方にならないように気をつけていきます。<br></p><h2 id="ha214098e44">まとめ</h2><p>レビューする側・される側に共通することは「相手の立場で考える」だと思います。この辺りを十二分に意識して、相手を敬いながら生きていきます！！！</p>

コードレビューで今後気をつけること

<p>おはこんばんは。最近、CodeceptJSでE2Eテストを書くことが増えたのですが、CodeceptJSでHandsontableの項目名セルをクリックするのに少し苦戦したので、対策についてご紹介しようと思います。<br></p><h2 id="hc69c85bcf9">背景</h2><p>CodeceptJSでは、<code>I.click(locator)</code>でlocatorに指定されたリンクやボタンのクリックを実行します。ただ、Handsontableの項目名セルを指定するとうまくクリックが実行されませんでした。<br><br>Handsontableの項目名セルが検知しているイベントとCodeceptJSが<code>I.click(locator)</code>で発火しているイベントが違うみたいです...恐らく...<br></p><h2 id="hb109fbdd18">対策</h2><p>今回はCodeceptJSのI.click(locator)は利用せず、mouseEventでmousedownを発火して対応するようにしました。<br><br>以下のように該当のセルにmousedownを発火するメソッドを定義します。</p><pre><code>e2e/configs/components/Handsontable.ts  

export = {
  /**
   * I.clickではHandsontableの項目セルがクリックされないので独自で定義している
   * @param row 該当セルの行
   * @param line 該当セルの列
   */
  clickCell: async function (row: number, line: number): Promise&lt;void&gt; {
    await I.executeScript(
      (row, line) =&gt; {
        const trElement = document.querySelectorAll(".ht_master table tr");
        if (trElement?.length &lt; row) return;
        const tdElement = trElement[row-1].childNodes;
        if (tdElement?.length &lt; line) return;
  		
        const mousedownEvent = new MouseEvent("mousedown", {
          bubbles: true,
          cancelable: true,
        });
        tdElement[line-1].dispatchEvent(mousedownEvent);
      },
      row,
      line
    );
  },
}</code></pre><p><br>そしてCodeceptJSで上記を呼び出せるように設定ファイルへ追記してあげます。</p><pre><code>codecept.conf.js

include: {
  Handsontable: "./e2e/configs/components/Handsontable.ts",		
}</code></pre><p><br></p><pre><code>steps.d.ts

type Handsontable = typeof import("./e2e/configs/components/Handsontable");
				
declare namespace CodeceptJS {		
  interface SupportObject {
    Handsontable: Handsontable;	
  }
}</code></pre><p><br>これでCodeceptJSで利用できるようになったので、以下のように呼び出してあげればOKです。お疲れ様でした。</p><pre><code>Scenario(
  "test",
  async ({ Handsontable }) =&gt; {
    await Handsontable.clickCell(1, 1);
  }
);</code></pre><p><br></p><h2 id="h1afe451c43">さいごに</h2><p>CodeceptJSでHandsontableのセルをクリックする方法をご紹介しました。CodeceptJSとHandsontableは闇があったりするので、ちょっと苦戦しますね。<br><span style="color:#24292e">今回の記事が誰かの参考になれば幸いです。</span></p>

CodeceptJSでHandsontableのセルをクリックする方法

<p>おはこんばんは。最近、Next.js（React）で<span style="color:#24292e">アイコンの</span>リサイズ<span style="color:#24292e">機能を実装してみたのですが、意外とまとまった記事が無かったので実装方法をご紹介しようと思います！</span><br><br><span style="color:#24292e">今回はこんな感じのを実装します。</span><a style="background-color:#ffffff" href="https://github.com/IshinoJun/next-icon-editor" target="_blank" rel="noopener noreferrer">サンプルはこちら。</a><br><br><img src="https://images.microcms-assets.io/assets/7758ea7c4c9e428cbf0a23d966011ccb/b8cddbc6a6ea40c2ad53a7905edd1408/5b1553b4096b9320849cd7c3f5b59568.gif" alt=""><br></p><h2 id="hfe5a8eaaf7"><span style="color:#24292e">実行環境</span></h2><ul><li>next 10.0.9</li><li>react 17.0.1</li><li>react-modal 3.12.1</li><li>react-avater 3.10.0</li><li>react-avater-editor 11.1.0</li><li>rc-slider 9.7.1</li><li>pica 6.1.1</li></ul><p><br></p><h2 id="h3397385dbf">機能説明</h2><p>今回の機能は主に以下となります。これを順に紹介していきます。<br></p><ol><li>アイコンの表示</li><li>画像のアップロード</li><li>アイコンのプレビュー表示</li><li>アイコンのサイズ・切り取り範囲の変更</li></ol><p><br></p><h2 id="h6ead2eb18d"><span style="color:#24292e">アイコンの表示</span></h2><p>まずは、最初の画面でアイコンを表示できるようにします。今回は<a href="https://github.com/sitebase/react-avatar" target="_blank" rel="noopener noreferrer"><code>react-avater</code></a>を利用します。画像が無い際のデフォルト表示や画像の円形表示をしてくれるお手軽ライブラリです。</p><pre><code>yarn add react-avatar</code></pre><p><br>次に表示用とプレビュー用のStateを定義します。このStateで画像を管理します。</p><pre><code>./page/index.tsx

const [icon, setIcon] = useState&lt;File | null&gt;(null);
const [previewIcon, setPreviewIcon] = useState&lt;File | null&gt;(null);</code></pre><p><br>そして以下みたいに利用すれば表示してくれます。ただ、まだ画像が無いので、デフォルト表示になるかと思います。</p><pre><code>./page/index.tsx

&lt;Avatar
　size='160'
　name="アイコン"
 round
 color="#ddd"
 alt="アイコン"
 src={icon ? URL.createObjectURL(icon) : ''}
/&gt;</code></pre><p><br></p><h2 id="h4ba79d7ad3">画像のアップロード</h2><p>では、早速画像のアップロードをできるようにします。今回はボタンを押されたら画像がアップロードされるようにします。<br><br>ページ上に表示されない input を以下のように定義し、ref を取得出来るようにします。</p><pre><code>./page/index.tsx

const iconInputRef = useRef&lt;HTMLInputElement | null&gt;(null);

&lt;input
  type="file"
  accept="image/*"
  style={{ display: 'none' }}
  ref={iconInputRef}
  onChange={handleChangePreviewIcon}
/&gt;</code></pre><p><br>先ほど、取得した inputのref がボタンのクリックイベントでクリックされるようにします。これで画像選択が可能になります。</p><pre><code>./page/index.tsx

const handleClickChangeIcon = useCallback(() =&gt; {
if (!iconInputRef || !iconInputRef.current) return;
iconInputRef.current.click();
}, []);

&lt;button
  type="button"
  onClick={handleClickChangeIcon}
&gt;</code></pre><p><br>最後にプレビューのStateを選択された画像を更新するようにします。<code>e.currentTarget.value = "''</code>をしているのは、同じ画像を連続で選択された際、イベントが実行されないので、valueをリセットして再実行可能とするためです。</p><pre><code>./page/index.tsx

const handleChangePreviewIcon = useCallback(
  (e: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
    if (!e.target.files?.length) return;
    setPreviewIcon(e.target.files[0]);
    e.currentTarget.value = '';
  },
  [],
);</code></pre><p><br></p><h2 id="h0c81c97bfe">アイコンのプレビュー表示</h2><p>プレビューの表示では、<a href="https://github.com/reactjs/react-modal" target="_blank" rel="noopener noreferrer"><code>react-modal</code></a>を利用します。お手軽にモーダルが実装できるライブラリです。</p><pre><code>yarn add react-modal</code></pre><p><br><code>previewIcon</code>に値がセットされたらモーダルが開くようにしています。</p><pre><code>./components/IconEditor.tsx

&lt;Modal
  isOpen={!!previewIcon}
  onRequestClose={handleCloseIsOpen}
  ariaHideApp={false}
  overlayClassName={{
    base: styles.overlayBase,
    afterOpen: styles.overlayAfter,
    beforeClose: styles.overlayBefore,
  }}
  className={{
    base: styles.contentBase,
    afterOpen: styles.contentAfter,
    beforeClose: styles.contentBefore,
  }}
  closeTimeoutMS={500}
&gt;
  &lt;div className={styles.header}&gt;
  &lt;/div&gt;
&lt;/Modal&gt;</code></pre><p><br></p><h2 id="h6d0a8a7b52">アイコンのサイズ・切り取り範囲の変更</h2><p>画像のリサイズには<a href="https://github.com/mosch/react-avatar-editor" target="_blank" rel="noopener noreferrer"><code>react-avater-editor</code></a>と<a href="https://github.com/schrodinger/rc-slider" target="_blank" rel="noopener noreferrer"><code>rc-slider</code></a>を利用します。<br></p><pre><code>yarn add react-avater-editor rc-slider</code></pre><p><br><code>AvatarEditor</code>ではrefを渡すことでリサイズした画像データを取得出来ます。scaleで画像の拡大が可能です。その調整は<code>rc-slider</code>を用いて行います。</p><pre><code>./components/IconEditor.tsx

  const editorRef = useRef&lt;AvatarEditor | null&gt;(null);
 const [scale, setScale] = useState(1);

&lt;AvatarEditor
  ref={editorRef}
  image={previewIcon ? URL.createObjectURL(previewIcon) : ''}
  width={ICON_WIDTH}
  height={ICON_HEIGHT}
  borderRadius={100}
  color={[0, 0, 0, 0.6]}
  scale={scale}
  rotate={0}
/&gt;

&lt;Slider
  onChange={handleChangeScale}
  min={1}
  max={1.5}
  step={0.01}
  value={scale}
/&gt;</code></pre><p><br>ただ、<code>AvatarEditor</code>のwidthとheightがコンポーネントのサイズになるのですが、これが実際にリサイズされる画像の大きさになります。これを必ずしもそうしたくないケースがありますよね。そういった場合は、<a href="https://github.com/nodeca/pica" target="_blank" rel="noopener noreferrer"><code>pica</code></a>を利用します。</p><pre><code>yarn add pica</code></pre><p><br></p><pre><code>  const handleClickFileSave = useCallback(async () =&gt; {
    if (!editorRef.current) return;

    const img = editorRef.current.getImage();
    const canvas = editorRef.current.getImageScaledToCanvas();
    canvas.width = ICON_WIDTH;
    canvas.height = ICON_HEIGHT;
    const picaCanvas = await pica().resize(img, canvas, { alpha: true });

    picaCanvas.toBlob((blob) =&gt; {
      const nextFile = new File([blob], previewIcon.name, {
        type: previewIcon.type,
        lastModified: Date.now(),
      });
      onChangeIcon(nextFile);
      handleCloseIsOpen();
    });

  }, [previewIcon, onChangeIcon]);</code></pre><p><br>これで期待する画像にリサイズが出来ます。お疲れ様でした。<br></p><h2 id="h1afe451c43">さいごに</h2><p>今回は、Next.jsでアイコンのリサイズ機能を実装する方法をご紹介しました！Reactは色々とライブラリがあって便利ですね。今回の記事が誰かの参考になれば幸いです。</p>

microCMSのリッチエディタ（生HTML）をReactのコンポーネントにパースしてみた

2021年の振り返り

英単語の品詞をクイズ形式で学べる「品詞クイズ」を作ってみた

NestJS で LogにStack情報を追加する

NestJS で LogにRequest情報を追加する

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

NestJSにMikroORMの導入手順。CRUDのAPIを実装するまで。

コードレビューで今後気をつけること

CodeceptJSでHandsontableのセルをクリックする方法

Next.js（React）でアイコンのリサイズ機能をサクッと実装する方法

microCMSのリッチエディタ（生HTML）をReactのコンポーネントにパースしてみた

2021年の振り返り

英単語の品詞をクイズ形式で学べる「品詞クイズ 」を作ってみた

NestJS で LogにStack情報を追加する

NestJS で LogにRequest情報を追加する

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

NestJSにMikroORMの導入手順。CRUDのAPIを実装するまで。

コードレビューで今後気をつけること

CodeceptJSでHandsontableのセルをクリックする方法

Next.js（React）でアイコンのリサイズ機能をサクッと実装する方法

英単語の品詞をクイズ形式で学べる「品詞クイズ」を作ってみた