<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のコンポーネントにパースしてみた

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

Chakra UI

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

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

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