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

ブログを作り直した

ShopifyのStorefront APIを使用してNext.js製のECフロントを構築した

<p>Next.jsをTypeScriptで使用するときのテンプレートを作りました。<br><a href="https://github.com/EringiV3/nextjs-with-typescript-template" target="_blank" rel="noopener noreferrer">nextjs-with-typescript-template</a><br><br>Reactを使った素振りでなにか作るときにNext.jsで始めるということが今後増えていきそうという理由で作った、よく使いそうなツールをまとめた自分用のテンプレートです。<br></p><h2 id="hcb7debd359">型チェック</h2><p>tscで型チェックを行います。<br>設定のベースは、<code>create-next-app</code>の<code>with-typescript</code>テンプレートです。一部理解できていないオプションもあります。</p><pre><code>  // tsconfig.json
  {
  	  "compilerOptions": {
  	    "allowJs": true,
  	    "alwaysStrict": true,
  	    "esModuleInterop": true,
  	    "forceConsistentCasingInFileNames": true,
  	    "isolatedModules": true,
  	    "jsx": "preserve",
  	    "lib": ["dom", "es2017"],
  	    "module": "esnext",
  	    "moduleResolution": "node",
	    "noEmit": true,
	    "noFallthroughCasesInSwitch": true,
	    "noUnusedLocals": true,
	    "noUnusedParameters": true,
	    "resolveJsonModule": true,
	    "skipLibCheck": true,
	    "strict": true,
	    "target": "esnext"
	  },
	  "exclude": ["node_modules"],
	  "include": ["**/*.ts", "**/*.tsx"]
}</code></pre><h3 id="h55f399465c">上記のオプションについて</h3><h4 id="hb039bf5c37">allowJs</h4><p>ts, tsxファイル以外のimportの許容。</p><h4 id="hd47cceef11"><br>alwaysStrict</h4><p>各ファイルへ"use strict"をつけて出力することを保証する。出力されたJSファイルはECMAScriptのStrictモードで実行される。<br>Strictモードについては以下を参照。<br><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Strict_mode" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Strict_mode</a></p><h4 id="h3409ec6782"><br>forceConsistentCasingInFileNames</h4><p>ファイル名の大文字小文字を区別する。</p><h4 id="h41e78fccb6"><br>jsx</h4><p>jsx構文がどのようにファイルに出力されるかを制御するオプション。preserve, react, react-nativeがありpreserveではJSXを変更することなく.jsxファイルを出力する。</p><h4 id="h2429723d62"><br>lib</h4><p>コンパイルする際に使用する組み込みのJS API型定義や、ブラウザ上で使用されるAPIの型定義のライブラリを指定する。</p><h4 id="h569853fc43"><br>module</h4><p>出力されるJSのモジュールの形式を指定する。CommonJS形式（exports.<em>*</em>）かESModules（export ***)かを指定。</p><h4 id="h013bb79419"><br>noEmit</h4><p>JavaScript ソースコード、ソースマップ、型定義のファイルを出力しないようにします。型チェック機能だけを使用する場合にtrueにする。Next.jsはtscを使わずに内部でBabelでコンパイルしているらしい。</p><h4 id="h81f34f443a"><br>noFallthroughCasesInSwitch</h4><p>switch 文において、次の case へ処理を持ち越した場合にエラーを報告する。 switch 文内の空でない case 句が、<code>break</code>または<code>return</code>を含むことを確約する。</p><h4 id="h3f05325621"><br>noUnusedLocals&nbsp;</h4><p>利用されていないローカル変数について、エラーを報告する。</p><h4 id="h073eff5af4"><br>noUnusedParameters</h4><p>利用されていない関数のパラメータについて、エラーを報告する。</p><h4 id="h1d3b2652d5"><br>resolveJsonModule</h4><p>.json拡張子のファイルをモジュールとしてimportできるようにする。</p><h4 id="h4d18de3828"><br>skipLibCheck</h4><p>型定義ファイルのチェックをスキップすることで、コンパイル実行時間を短縮する。</p><h4 id="h60a8fab09d"><br>strict</h4><p>プログラムの正しさを強く保証するための幅広い型チェックの挙動を有効化する。<code>strictBindCallApply, strictFunctionTypes, strictNullChecks, strictPropertyInitialization</code>オプションの有効化と等価。</p><h4 id="he608e7281d"><br>target</h4><p>出力されるJSのバージョンの指定。<br></p><h3 id="h3daed9a170">理解できていないオプション</h3><ul><li>isolatedModules</li><li>moduleResolution</li><li>esModuleInterop</li></ul><p><br></p><h2 id="h16cfc26709">linter, formatter</h2><p>ESLint + Prettierの構成です。</p><pre><code>// .eslintrc.json
{
	  "parser": "@typescript-eslint/parser",
	  "extends": [
	    "plugin:@typescript-eslint/recommended",
	    "plugin:react/recommended",
	    "plugin:prettier/recommended",
	    "plugin:prettier/react",
	    "plugin:prettier/@typescript-eslint"
	  ],
	  "plugins": ["@typescript-eslint", "react", "prettier"],
	  "rules": {
	    "react/react-in-jsx-scope": "off"
	  },
	  "globals": {
	    "React": "writable"
	  }
}</code></pre><h3 id="hc4b37ec9fa">上記の設定について</h3><h4 id="h4d3db041c2">parser</h4><p>ESLintがTypeScriptをパースできるようにするためのパーサの指定。</p><h4 id="h39efb78aba"><br>extends</h4><p>pluginによって提供されるルールを使用することによって設定を拡張するという理解。「plugin:{プラグイン名}/{設定名}」という形で指定する。<br></p><ul><li><strong>plugin:@typescript-eslint/recommended</strong></li></ul><p>			TypeScript用のESLintルール<br><br></p><ul><li><strong>plugin:react/recommended</strong></li></ul><p>			React用のESLintルール<br><br></p><ul><li><strong>plugin:prettier/recommended</strong></li></ul><p>			ESLintとPrettierを共存させるためのルール。ESLintのフォーマットに関する設定を全てOFFにし、フォーマットに関してはESLintの中からPrettierにすべて任せる<br><br></p><ul><li><strong>plugin:prettier/react</strong></li></ul><p>			eslint-plugin-reactのフォーマットに関するルールをOFFにする。<br><br></p><ul><li><strong>plugin:prettier/@typescript-eslint</strong></li></ul><p>			競合するESLintのルールを無効化する。最後に書く必要があるっぽい。</p><h4 id="h189bb9ce89"><br>plugins</h4><p>eslint-plugin-xxxのxxxの部分を指定する（eslint-plugin-は省略可能なため）。xxxに関する設定の塊みたいな認識。</p><ul><li>@typescript-eslint</li><li>react</li><li>prettier</li></ul><h4 id="h4fe0a49a06"><br>rules</h4><p>特定のルール（最小単位）のON/OFFを切り替える。</p><ul><li><strong>react/react-in-jsx-scope</strong></li></ul><p>			Next.jsでは各jsx/tsxファイル内でReactをimportする必要がないので、OFFにする。</p><h4 id="h1955b7641d"><br>globals</h4><p>実行時に追加するグローバル変数の追加の指定。writableを指定することで変数に対しての書き込みも可能になる。</p><ul><li><strong>React</strong></li></ul><p>			Next.jsでは各jsx/tsxファイルでReactをimportしないため。<br><br><br>フォーマットに関する設定は.prettierrcに書く。</p><pre><code>// .prettierrc
{
	  "semi": true,
	  "singleQuote": true
}</code></pre><p><br></p><h2 id="h63ad3943f9">テスト</h2><p>jestでユニットテストを実行します。</p><pre><code>// jest.config.js
module.exports = {
	  roots: ['&lt;rootDir&gt;/src'],
	  testMatch: [
	    '**/__tests__/**/*.+(ts|tsx|js)',
	    '**/?(*.)+(spec|test).+(ts|tsx|js)',
	  ],
	  transform: {
	    '^.+\\.(ts|tsx)$': 'ts-jest',
	  },
	};</code></pre><p><br>今回作ったテンプレートでは「<strong>tests</strong>」というディレクトリを作って、その中に「xxx.test.ts」のようなファイルを作って<code>yarn test</code>でテストを実行するようにしています。<br></p><h2 id="h193252ff15">precommit</h2><p>huskyを使用して、precommitのhookで型チェック・lint・テストを回しています。<br>規約を破るソースコードはpushさせないという思想です。<br></p><h2 id="hfdbb292dd3">テンプレートを作ってみた感想</h2><ul><li>設定が多い。とはいえ、Next.jsがBabelやwebpackの設定を隠蔽してくれているので楽な方なんだと思う。</li><li>ESLintは特に複雑に感じる。ただ、今回テンプレートを作ってみたことでESLintへの理解度は上がった。</li><li>大変だけど、最初にこのへんの設定をセットアップしておけば後から設定の中身を変更することは大変じゃないのでテンプレートを作った価値はあった。特にリントツールは初期に導入を済ませておくことに価値があるはず。</li><li>このテンプレートを使ってNext.jsの素振り頑張る。</li></ul><p><br></p>

eringiv3.dev

Category: Next.js

ブログを作り直した

ShopifyのStorefront APIを使用してNext.js製のECフロントを構築した

Next.jsのTypeScriptテンプレートを作った