依存ライブラリのメンテナンスなども兼ねて１年と半年ぶりに大きく更新しました。

デザインを新しくしました

一番作りたいページからコーディングした後、「残ページどうしよう‥」となったものを何とか整えるという行き当たりばったりフローがこれまで。今回はできるだけそれを避ける為、 Figma で各ページのデザインを考えてから実装というフローで進めました。

デザイン作成

Figma では全体を俯瞰でき、ページ間の結び付きが分かるプロトタイプを作りました。これを「これでいくか」となる完成形に近い形になるまで続けました。流行りのライト・ダークテーマ機能も載せたかったので、その辺含めてまで色々試行錯誤しました。

ただ細かい値の部分（マージン値やフォントサイズとか）は結構その場のノリとなりました。

SNS 共有用の画像生成

Twitter などでシェアする際の画像を旧では別サービスのものを使っていたので、自作のものに変えてみました。良くタイトルが画像に入っているものを目にするので、それを参考にしました。

AWS Lambda, API Gateway, Cloudfront を使ってます。

CMS のお引っ越し

Contentful という CMS の無料プランを使っていましたが、プランの上限に引っかかるようになってしまった為、次のアクションが必要になってしまいました。リニューアルの動機はほぼこれです。有料プランにするか、はたまた別の CMS へ行こうか悩んだあげく、ノートの各記事（ポスト）は GitHub Issues 管理、その他（この Change Log など）は microCMS に移行することにしました。

GitHub Issues メインに移行

Contentful では、ノートとポストという 2 つのコンテンツで管理をしていました。ノートには複数参照というフィールドを置き、ノート１つに複数のポストを添えるような構造です。特に複数参照の、参照（ポスト）は自分の好きな並びにできるという特徴を好んで使っていました。

この管理は microCMS でもできそうなものではありましたが、結局の所、 長期的にほぼ無料なGitHub Issues を選びました。もちろんそのまま CMS の代わりとして使うのは不便ですが、色々工夫すれば自分の好きな方法でデータを管理できたり柔軟に運用できます。（Contentful からデータをエクスポート後、再整理に時間が掛かったことやサービスの仕様変更が怖いなどの理由も）

複数参照のような機能が無いだろうと思うかもしれませんが、それは GitHub の Project を代用しました。本来これはタスク管理ツールですが、 Issues を紐付けることができ、それらの並び替えも自由自在に行えます。

いくつかの問題はありましたが（例えば Issue がどの Project にあるのかを調べる必要があったが、それを一度に取得できる API が無い事、 その為の API を実行しまくってしまうと余裕で個人アクセストークンの利用制限を超えてしまう事など）、ファイルでキャッシュして API の実行回数を減らしたり、GitHub App で発行できるトークンの 5,000 回と GitHub Actions 発行のトークンの 1,000 回に使用を分散したりで何とか形にはなりました。

Issue を作成したり、更新や削除、その他関連の操作をした後、 1 分ほどでその内容をプレビューできるようにはできたので、個人的には良いかなという形にはできました。

依存ライブラリを更新・見直し

next@9.4.x から next@10.0.x

これは以下のような事を行いました。

• getInitialPropsを廃止し、v9.3 から可能だったgetStaticProps & getStaticPropsとgetServerSidePropsに置き換えました

• v9.3 から可能だった Preview Mode を導入してみました

• v10.0 から可能になった多言語化機能を実験的に導入中

• v10.0 から可能になった next/image を導入（ついでに画像の .webp 化）

ついでに React も v17 へ上げました。

styled-components から tailwindcss

2019 ~ 2020 年前半は、「styled-components」「styled-components」言ってましたが、 2020 年前半 ~ 2021 年は「tailwindcss」「tailwindcss」ばかり言っているほど、その生産性にどっぷり浸かってます。

旧バージョンではスタイルのほぼ全てが styled-components でしたが、今回はそれを全て tailwindcss に変更しました。といってもデザインから変えているので単に 1 から作っただけですが。

tailwindcss は結局の所ただの CSS なのが良いと思います。大量の汎用クラスは使うことになりますが、生成ルールはあるので、別プロジェクトでもたじろぐ事もあまり無いです。（コーディングを補助してくれるエディター用プラグインもある！）

また、ライブラリのメジャーアップデートでこれまで書いていた書き方で大量の警告が出るようになる心配もする必要が無くて良いです。

redux から recoil

あまり扱う状態が無いのでどっちでも良いというのもあり、折角なので最近出てきたステート管理ライブラリの recoil も導入しました。 Redux というよりは Redux Toolkit に近いかなという感じで、React Hooks の様に使えるので、学習コストも小さいくて良いですが、若干まだ不安定かなという印象でした。

bit.dev

今回から bit.dev という主に UI コンポーネントを管理する為のサービスを使ってみました。 Git の Submodule 周りの機能に lerna の機能（公開など）を加えたような感じ（だけど管理するのはディレクトリ）で UI コンポーネントを管理できて便利です。ただはまる問題が沢山であまり人にオススメしずらい感じです。（しかも多分僕の使い方はオレオレが入っている）

今後は bit.dev/nju33/com 辺りに UI を貯めていって、 新しいサイトを作る場合はそれらを使って、 *.nju33.com は UI を統一しようと考えてたりしています。