<p>ブログを作り直しました。<br>1年ほど前にGatsby.jsで作ったブログがあったのですが、それを今回Next.jsで作り直しました。理由は、見た目とコードがショボくていじる気が失せてたためです。<br>一年前はまだ仕事でReact/TypeScriptを書いた経験がなく、今見返すと良いコードとは言えないものでした。<br>転職もして、仕事で毎日React/TypeScriptを書いてる今ならもっとまともなものが作れるなと思い、勢いで作り替えました。<br></p><h2 id="h683a3334db">主な技術スタック</h2><ul><li>Next.js</li><li>Chakra UI</li><li>microCMS</li></ul><h2 id="h135ab76aa0">前回のブログとは変えた点</h2><ul><li>Zennのフィードも表示するようにした</li><li>記事一覧のページネーションをやめた</li><li>動的OGPをimgixのAPIを使って生成するようにした</li><li>記事検索機能を追加した</li><li>プロフィールページをNotionで管理するようにした</li></ul><p>などです。<br><br>作るにあたって工夫した点はあまりなくて、ひたすら楽をして作りたいという気持ちで作りました。<br>見た目に関してはChakra UIのコンポーネントをそのまま使って色を変えてるだけですし、ページネーションについては実装がめんどくさいので1ページに全記事表示するようにしました。<br>というかJAMStackなんだからビルド時に全記事のデータ取得するしページネーション作ってページを分けて表示する必要ってあるんでしょうか？<br>何千記事とかあるなら話は変わってくると思いますが(サーバーから取得するHTMLのサイズが膨れ上がるので)、100記事にも満たないこのブログではページネーションは不要だと判断しました。<br>使う側としても1ページに全記事載ってる方が嬉しくないでしょうか？InstagramとかTwitterもそうですけど、ひたすら縦にスクロールしていく無限スクロール/ローディングのUIが今では当たり前な感じがします。<br>Zennのフィード表示はRSSを使って実現しています。<br>動的OGPについて、以前作ったブログでは、<a href="https://www.npmjs.com/package/node-ogp-creator" target="_blank" rel="noopener noreferrer">node-ogp-creator</a>という自作のパッケージを使ってビルド時にOGP画像を生成してたのですが、Next.jsと相性が良くない気がして(public配下にwriteFileするのってあんま見かけないし気が進まなかった)使うのをやめました。<br>その代わりにmicroCMSのブログで紹介されていたimgixのAPIを使ってOGP画像を生成する方法に変えました。使い方は<a href="https://blog.microcms.io/imgix-ogp/https://blog.microcms.io/imgix-ogp/" target="_blank" rel="noopener noreferrer">microCMSのブログ記事</a>を見ていただければなんとなくわかると思います。はっきりいってimgixは動的OGP生成の救世主です。めちゃくちゃ便利だし、今後も使いたいと思いました。APIがちょっと理解しづらい気がするのが難点ですが。<br>あと、記事検索機能についてですが、Algoliaのような外部サービスは使いませんでした。<br>Next.jsのstatic propsで全記事のタイトルを渡すようにしておいて、それに対して入力された文字列で部分一致で検索をかけるようにしています。</p><pre><code>import { SearchIcon } from '@chakra-ui/icons';
import {
  Box,
  Heading,
  Input,
  InputGroup,
  InputRightElement,
} from '@chakra-ui/react';
import { GetStaticProps, InferGetStaticPropsType, NextPage } from 'next';
import { NextSeo } from 'next-seo';
import React, { useState } from 'react';
import FeedCard from '../components/FeedCard';
import Layout from '../components/Layout';
import PostCard from '../components/PostCard';
import { getAllContents, isMicrocmsPost } from '../lib/microcms';
import { getZennFeedItems } from '../lib/zenn';
import type { PostListResponse, PostResponse, ZennFeedItem } from '../types';
import { sortByDate } from '../utils/arrayHelpers';


type StaticProps = {
  postOrFeedList: (PostResponse | ZennFeedItem)[];
};
type PageProps = InferGetStaticPropsType&lt;typeof getStaticProps&gt;;
const Search: NextPage&lt;PageProps&gt; = ({ postOrFeedList }) =&gt; {
  const [value, setValue] = useState('');


  const handleChange = (e: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
    setValue(e.target.value);
  };


  const hitList =
    value === ''
      ? []
      : postOrFeedList.filter((v) =&gt; {
          const searchTarget = v.title.toLowerCase();
          return searchTarget.includes(value.toLowerCase());
        });


  return (
    &lt;&gt;
      &lt;NextSeo title="記事検索" description="記事検索ページです" /&gt;
      &lt;Layout&gt;
        &lt;InputGroup&gt;
          &lt;Input placeholder="記事タイトルを検索" onChange={handleChange} /&gt;
          &lt;InputRightElement&gt;
            &lt;SearchIcon /&gt;
          &lt;/InputRightElement&gt;
        &lt;/InputGroup&gt;
        &lt;Box marginTop="10"&gt;
          {hitList.length !== 0 ? (
            &lt;Heading as="h1" color="blue.700"&gt;
              検索結果
            &lt;/Heading&gt;
          ) : value !== '' ? (
            &lt;Box&gt;記事が見つかりませんでした。&lt;/Box&gt;
          ) : null}
          &lt;Box marginTop="5"&gt;
            {hitList.map((postOrFeed, i) =&gt;
              isMicrocmsPost(postOrFeed) ? (
                &lt;PostCard key={postOrFeed.id} post={postOrFeed} /&gt;
              ) : (
                &lt;FeedCard key={i} feedItem={postOrFeed} /&gt;
              )
            )}
          &lt;/Box&gt;
        &lt;/Box&gt;
      &lt;/Layout&gt;
    &lt;/&gt;
  );
};


export const getStaticProps: GetStaticProps&lt;StaticProps&gt; = async () =&gt; {
  const allPostList = await getAllContents&lt;PostListResponse&gt;('post');
  const postList = allPostList.flatMap((postList) =&gt; postList.contents);
  const zennFeed = await getZennFeedItems();
  const postOrFeedList = [...postList, ...zennFeed];
  postOrFeedList.sort(sortByDate);


  return {
    props: {
      postOrFeedList,
    },
    revalidate: 60,
  };
};


export default Search;


</code></pre><p><br>最後に、プロフィールページについてはmicro CMSでプロフィールのコンテンツを管理するのをやめました。プロフィールって割と頻繁に更新する可能性のあるコンテンツだと思うので、気軽に編集できることが望ましいです。<br>microCMSでもスマホから編集できないことはないですが、UIとか操作性、ネイティブアプリの有無などを考えて、Notionでプロフィールを管理することにしました。ブログにはNotionの公開ページのリンクを貼るだけにしています。<br>これからはプロフィールを編集したくなってもスマホのNotionのアプリからお手軽に編集できるのでちゃんと内容を更新できそうです。前のブログでは転職したのに半年近く放置してしまってました。<br>以下が今回新しく作成したNotionのページです。<br><a href="https://hallowed-axolotl-164.notion.site/093e624f4786477f94ac2d2f28de5988" target="_blank" rel="noopener noreferrer">https://hallowed-axolotl-164.notion.site/093e624f4786477f94ac2d2f28de5988</a><br><br>こんな感じで新しいブログは大体3〜4日くらいでリプレイスできました。<br>普段から使い慣れてるNext.jsとUIで楽するためのChakra UIを使ったことでかなり早く実装できた気がします。<br>見た目に関しても自分の好きなインディゴっぽいカラーで雰囲気を統一することができて満足です。<br>ドメインもdev.eringiv3.comからeringiv3.devに変更しました。やっぱdevドメインの方がエンジニアのブログ感出ていいですよね。<br><br>ソースコードも公開してるので気になる方は見ていただければと思います。<br><a href="https://github.com/EringiV3/devBlog_V2" target="_blank" rel="noopener noreferrer">https://github.com/EringiV3/devBlog_V2</a><br><br>古い記事の中で他の記事を参照してるリンクがリンク切れしてしまっていますが、今は直す気力がないので多分しばらくこのままです…。気が向いたら直します。</p>

ブログを作り直した

<p>microCMSには、ステータスが「下書き中」になっている記事を取得できる機能が用意されています。<br>今回は、その機能を利用してブログのプレビューページを作りました。<br></p><h2 id="hac84e4e38d">モチベーション</h2><ul><li>執筆中の記事の見栄えを公開前に確認したい</li><li>このブログはJamstackな構成でできているので、記事公開 → デプロイ → ページ生成 されるまで実際の表示が確認できず、リスキー</li><li>デプロイすることなくプレビュー可能な仕組みが必要</li></ul><p><br></p><h2 id="h47d2486890">大まかな方針</h2><p>プレビュー用のページをGatsbyのsrc/pages配下に用意しておき、クエリパラメータで指定されたcontentId, draftIdに一致するコンテンツをmicroCMSからクライアントサイドで取得します。<br>取得した記事のデータをReact コンポーネントに渡してクライアントサイドでレンダリングします。<br></p><h2 id="h31d727ccda">準備</h2><p>microCMSの管理画面から、プレビューボタン押下時の遷移先URLを設定しておきます。<br><img src="https://images.microcms-assets.io/assets/702dbaa8dfa34d1195fd2644792b2156/e78223554c28f01be016f9d2207fc8cf/6ca0c36044fe9183e259e861dbf6dee8.png" alt=""><br>上記画像のblogPostPreviewにあたる文字列が、Gatsbyのプレビュー用ページのファイル名と一致することになります。<br><br>クエリパラメータからcontentIdとdraftIdを取得する必要があるため、クエリパラメータから値を取得するためのパッケージを追加しておきます。<br><code>yarn add gatsby-query-params</code></p><h2 id="h922edff87b">実装</h2><h3 id="h2fd565797a">プレビューページの追加</h3><p>src/pages配下にblogPostPreview.jsというページファイルを追加しました。今回は、ブログ投稿専用のプレビューページであることを明示したかったのでこのようなファイル名にしました。<br></p><h3 id="h2ea49f6295">下書き状態のコンテンツを取得する</h3><p><code>gatsby-query-params</code>から<code>getSearchParams</code>をimportし、contentId, draftIdを取得します。<br>contentId, draftIdを使って、下書き状態のコンテンツを取得するためのクエリを組み立ててfetchします。</p><pre><code>const { contentId, draftKey } = getSearchParams()
    const [postData, setPostData] = useState(null)
  
    useEffect(() =&gt; {
      if (!contentId || !draftKey) return
      fetch(
        `https://xxxxxxxxxxxxxxx.microcms.io/api/v1/blog/${contentId}?draftKey=${draftKey}`,
        {
          headers: {
            "X-API-KEY": "xxxxxxxxxxxxxxxxxxxxxxxx",
          },
        }
      )
        .then(response =&gt; {
          if (response.ok) {
            return response.json()
          }
        })
        .then(json =&gt; {
          if (json) {
            setPostData(json)
          }
        })
    }, [contentId, draftKey])</code></pre><p>APIキーがむき出しになってしまいますが、個人開発の用途であること・とりあえず早くプレビュー機能を使える状態にしたかったためこのままでいきます。<br>getの操作でした使用されないAPIキーなので、フロントエンドで見える状態になっていても特に問題ないかなと思います。<br>気になる方は、microCMSの公式ブログにNetlify Functionsを使ってサーバサイドで下書き状態の記事のデータを取得する実装が紹介されているのでこちらを参考にすると良さそうです。<br>Nuxt.jsでの実装例が掲載されてますが、使っているフレームワークによらず参考にできそうな実装です。<br><a style="color:#6b46c1" href="https://microcms.io/blog/nuxt-jamstack-preview" target="_blank" rel="noopener noreferrer">microCMSとNuxtでプレビュー画面を作成する</a></p><h3 id="h5e13b1fe61">レンダリング</h3><p>データが取得できたらもう殆ど完成です。最後は記事詳細ページですでに使用されているPostHeader, PostBodyコンポーネントに記事のデータをpropsで渡してあげるだけです。<br>ここまでの作業でできたファイルは以下となります。（jsx のsyntax highlightが壊れてる問題がまだ解決できてなくてめちゃくちゃ不便）<br><a style="color:#6b46c1" href="https://github.com/EringiV3/devBlog/blob/master/src/pages/blogPostPreview.js" target="_blank" rel="noopener noreferrer">https://github.com/EringiV3/devBlog/blob/master/src/pages/blogPostPreview.js</a><br><br>記事の公開日時のデータについて、SSGするときはgraphqlのクエリでフォーマット指定してリクエストを行っているため自分で公開日時のフォーマットは行っていません。<br>ただ、プレビューではgraphqlは使わずにfetchで取得しているのでフォーマットの指定はできません。そのためフォーマットされていないプレーンな状態の日時文字列をそのまま表示しています。<br>（プレビューだから対応する気が起きなかった）<br><br><br><br>以上でプレビュー機能の実装が一通り完了したので、microCMSのプレビューボタンを押してみてプレビューができてるかを確認します。<br><br>「画面プレビュー」ボタンを押して...<br><img src="https://images.microcms-assets.io/assets/702dbaa8dfa34d1195fd2644792b2156/3bf14804775feb649718a3b95f382900/f2a40858f338aed1cae5facea463598b.png" alt=""><br>プレビューページ用のURLで下書き状態の記事のプレビューができました！！<br>これで完成です！<br></p><h2 id="ha214098e44">まとめ</h2><p>microCMSのプレビュー画面機能を使用して、Gatsby上に動的なプレビューページを作りました。<br>プレビュー機能はブログには必須と言えるレベルの機能だと思うので、自作ブログを構築して早い段階で用意できて安心です。</p>

Gatsby で microCMSのプレビュー機能対応

<p>エンジニア歴2年目に突入し、もう半年ほど経ちそうです。<br>最近になって、本業では使わない（使えない）技術スタックを身につけるためにプライベートの時間を使って勉強する習慣がついてきました。<br>が、やはり仕事で使わないとすぐ頭から抜けてしまうので、理解したことを記録しておくためにこのブログを作ることにしました。<br>あと自作ブログをやってみたかったというのも理由としてはあります。</p><h3 id="h7d0aeafefc">筆者のスキルセット</h3><ul><li>まともに書ける言語の中ではPHP歴が一番長い（7系しか書いたことないです。仕事ではPHP7.4使ってます）</li><li>CSSは最低限かける。複雑なアニメーションとかは厳しい。</li><li>jsは仕事ではノンフレームワークなvalilla jsでしか書いたことない</li><li>Reactは独学で初めて2~3ヶ月くらい</li></ul><p><br>自分のスキルセットはこんな感じです。<br>このレベル感の人間がGatsbyで自作ブログ構築するにあたって、学習の流れや難しかったところ・ハマったところ等を書こうと思います。</p><h3 id="hcdab8eedf6">学習の流れ</h3><p>Gatsby.jsは、ページの表示に必要なデータをGraphqlで一気に取得して、それをReactコンポーネントに流し込むことでSSG(ServerSideGenarating)してくれる静的サイトジェネレータです（という理解です）。<br>そのため、GraphqlとReactの理解は必須となります。<br><br>GraphqlはUdemyで1本講座を買って勉強しました。この方の動画はTypeScript入門で買ったことがあるのですが、わかりやすかったです。<br><a style="color:#6b46c1" href="https://www.udemy.com/course/graphql-with-react/" target="_blank" rel="noopener noreferrer">フロントエンドエンジニアのためのGraphQL with React 入門</a><br><br>その後に、「Webサイト高速化のための静的サイトジェネレーター活用入門」という本を読みました。Gatsby本とか呼ばれてるらしいです（？）<br>この本を手を動かしながらやりきると、Gatsby + Contentful製のブログが一本出来上がります。<br>このブログもそれをベースにカスタマイズして作りました。<br>ページネーションやSEOの実装まで丁寧に解説してくれています。<br><a style="color:#6b46c1" href="https://www.amazon.co.jp/%E3%80%90%E7%89%B9%E5%85%B8%E4%BB%98%E3%81%8D-%E3%80%91Web%E3%82%B5%E3%82%A4%E3%83%88%E9%AB%98%E9%80%9F%E5%8C%96%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE-%E9%9D%99%E7%9A%84%E3%82%B5%E3%82%A4%E3%83%88%E3%82%B8%E3%82%A7%E3%83%8D%E3%83%AC%E3%83%BC%E3%82%BF%E3%83%BC%E6%B4%BB%E7%94%A8%E5%85%A5%E9%96%80-Compass-Books%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA/dp/4839973008" target="_blank" rel="noopener noreferrer">Webサイト高速化のための静的サイトジェネレーター活用入門</a><br><br>Reactそのものに関しては、話すとボリュームが大きくなりそうなので省略します。</p><h3 id="h8c1ceaa430">Gatsby + microCMSでのブログ実装</h3><p>実現する機能としては以下のような感じです。</p><ul><li>コンテンツはすべてmicroCMSで管理</li><li>シンタックスハイライト</li><li>記事のカテゴライズ</li></ul><p><br>まずは、Gatsby本をやってできたブログから、Contentful依存の実装を剥がすしてmicroCMSでの実装に置き換えるところからはじめました。<br>microCMSを選んだのは、管理画面が日本語でUIもContentfulよりわかりやすいと感じたからです。<br>Gatsby本ではContentful依存の実装の剥がし方・microCMSへの乗り換え方まで付録で解説しくれていたのでこのステップでは特に困りませんでした。</p><h3 id="h610e988ca2">microCMSで用意するAPI</h3><p>ブログAPI、カテゴリAPI、aboutページ用APIを用意しました。<br>gatsby-source-microcms という、gatsbyでmicroCMSからGraphqlでデータ取得できるようにするためのプラグインが用意されているのでこちらにAPIの設定を記載します。</p><pre><code>
        // gatsby-config.js
        {
            resolve: "gatsby-source-microcms",
            options: {
              apiKey: process.env.microCMS_API_KEY,
              serviceId: "eringiv3devblog",
              apis: [
                {
                  endpoint: "blog",
                  query: {
                    limit: 100,
                  },
                },
                {
                  endpoint: "category",
                  query: {
                    limit: 100,
                  },
                },
                {
                  endpoint: "about",
                  format: "object",
                },
              ],
            },
        },
   </code></pre><p>リスト形式のレスポンスか、オブジェクト形式のレスポンスを返すかで、formatオプションの値を変える必要がある点に注意が必要です。<br>ドキュメントにきちんと記載されているのですが、見落としてしまいハマりました。<br>デフォルトでは、<code>format: "list"</code>が指定されるようで、オブジェクト形式のレスポンスを返すAPIで明示的に<code>format: "object"</code>を指定しないとビルドが失敗します。</p><h3 id="h5ead4ef981">コードにシンタックスハイライトを効かせる</h3><p>「Gatsby syntax highlight」とかでググっても、gatsby-remark-prismjsというプラグインを使ってmarkdownで入稿する前提でハイライトを効かせる方法ばかりヒットします。<br>「静的サイトジェネレータを使って技術ブログを開設する」という目的に対しては多くの場合、ContentfulやmicroCMSのようなヘッドレスCMSを使わなくても、markdownファイルにコンテンツを書き込んでgit pushすれば済む話なので、そもそもAPIのレスポンスの中に含まれるHTML文字列からシンタックスハイライトを効かせられるようにするというモチベーションが発生しないのだと思います。<br>ただ、今回はどうしてもmicroCMSを使ってみたかったのでmarkdownは使わずに済む方法を考えました。<br><br>レスポンスのHTML文字列からシンタックスハイライトを効かせる手順は以下のようにしました。</p><ol><li>microCMSの繰返し項目機能を使って、ブログコンテンツに繰返し項目（リッチエディタ項目 or HTML項目を設定）をもたせる</li><li>レスポンスに含まれる繰返し項目の項目IDで何の項目かを判別し、HTML項目の場合はHTMLとしてパースしReactコンポーネントに変換する</li><li>Prismjsを使って、useEffectでクライアント側でハイライトを行う</li></ol><p><br>コードはこんな感じになりました。<br><a style="color:#6b46c1" href="https://github.com/EringiV3/devBlog/blob/master/src/components/post-body.js" target="_blank" rel="noopener noreferrer">https://github.com/EringiV3/devBlog/blob/master/src/components/post-body.js</a><br><br>繰返し項目にHTML入力用の項目を設ける理由は、prismjsに言語の種類を識別させてハイライトして貰う必要があるためです。pre要素のclassに<code>language-xxx</code>を指定すると、xxx言語の構文として解釈してくれます。<br>ただ、問題点があってprismjsとjsxの相性が良くないみたいで自分の手元ではjsxのシンタックスハイライトを効かせることができていません。すぐには解決できなそうだったので今後の課題です。<br><br>繰返し項目のIDで処理を分岐させるのは、microCMSのブログに実装例があったのでそれを真似しました。<br><a style="color:#6b46c1" href="https://microcms.io/blog/update-repeater-field" target="_blank" rel="noopener noreferrer">繰り返しフィールドが追加されました</a></p><h3 id="hcc1af24286">スタイリング</h3><p>Gatsby本では外部のcssファイルにクラス指定でスタイルを当てていましたが、それをやめてstyled jsxを使ってみることにしました。CSS in JSのライブラリは種類が多くてどれを選択すればいいか迷ったのですが、グローバルな領域にスタイルを書き込んでいくのはどうしても嫌・styledComponentはコンポーネントが増えてなんか嫌という理由でstyled jsxを選びました。軽量かつ、<code>&lt;style jsx&gt;&lt;/style&gt;</code>で囲むだけでコンポーネントに対してscopedなスタイルを当てることができてシンプルなのがいいなと思いました。記法も普通のCSSと同じなのでとっつきやすかったです。<br>基本的にはすべてscopedにして、ページネーション等の複数のjsxファイルにまたがるクラスに対してのスタイルは<code>&lt;style jsx global&gt;&lt;/style&gt;</code>でグローバルな領域のスタイルとして記述しました。<br></p><h3 id="h9dcc071ccd">デプロイ</h3><p>Netlifyを使っています。GitHub, microCMSと連携してmasterへのコミットや、CMSで管理されているコンテンツの更新でデプロイされます。<br></p><h3 id="ha739b3b8f6">その他</h3><p>Google Analyticsやサイトマップの設定も、プラグインが用意されており、gatsby-config.jsにちょこっと設定を書き足すだけだったので自分でやることはほぼありませんでした。<br></p><h3 id="h4ddd7d9be8">計測</h3><p>トップページをLighthouseで計測してみたら4項目すべて100点でした！<br><img src="https://images.microcms-assets.io/assets/702dbaa8dfa34d1195fd2644792b2156/eed9428f979e15fcda16f05bc5af5273/lighthouse.png" alt=""><br><span style="color:#2d3748">まだ1記事しか存在していないのでいい点数が出やすいのは当然だと思うので、今後記事が増えても点数が下がらないように気をつけます。</span><br><span style="color:#2d3748">ちなみに、記事詳細ページで計測したらもう少し低いスコアになりました。</span><br><img src="https://images.microcms-assets.io/assets/702dbaa8dfa34d1195fd2644792b2156/2185222d9e6ab3bc2e1f56b7890125e9/lighthouse_blogpost.png" alt=""></p><h3 id="ha214098e44">まとめ</h3><p>Gatsby + microCMSという構成で、コンテンツはすべてmicroCMS管理かつシンタックスハイライトも効かせられる最低限の技術ブログができました。<br>今後の改善点として以下があります。</p><ul><li>シンタックスハイライトについて、現在はクライアントサイドで実行するようになっているがGatsbyのメリットを活かせていない気がするので、サーバーサイドでハイライトした状態のHTML文字列を返すようにしたい</li><li>TypeScript導入</li><li>microCMSのプレビュー機能対応</li></ul><p><br>TypeScriptはできれば最初から入れたかったのですが、初めて触るフレームワーク（Gatsby）、初めて触るCMS（microCMS）という構成だったので、カオスになるのを防ぐために、とても使いこなせるとは言えないレベルの習熟度のTypeScriptを入れるのは先送りとしました。<br>とりあえず公開するところまでたどり着けたのは「Webサイト高速化のための静的サイトジェネレータ活用入門」とmicroCMSの運営の方（Twitterでつまづいているところをつぶやいたら助けてくれた！）のおかげだと思います。<br>アウトプットのために作ったブログなのでこれで満足しないようにしたいです。</p>

eringiv3.dev

Category: microCMS

ブログを作り直した

Gatsby で microCMSのプレビュー機能対応

Gatsby.js + microCMSで技術ブログを構築しました