先日、ブログのシステムが古くなっているという話をしましたが、一念発起してメンテナンスしました。以前はGatsby 4で作っていて、ちょっとエコシステムが閉じちゃってるなあと思っていたこともあり、フレームワークごと移行を検討していました。しかし、記事周りの処理を移行するのを考えると結構面倒だったので、結局Gatsbyをバージョンアップすることにしました。
今回の移行でやろうと思ったのが、次のとおりです：
- Gatsby 5へ移行
- 可能な限りTypeScriptへ移行
- 簡単なコード整理
TypeScriptへの移行は、Gatsby 5へ移行する際についでにやろうとずっと考えていて、サクッと終わらせたいと思っていました。どちらかというとその先のコード整理のほうが主眼だったのですが、実際には色々とトラブルが有り、時間がかかってしまいました……。
まず、Gatsby 5への移行はnpmで--legacy-peer-depsを使うことで（色々モヤッとするものの）楽にできたのですが、TypeScriptへの移行作業中にtwin.macroの動きがおかしくなって、styleのあたり方がおかしくなってしまいました。いろいろ試しても直らなかったので、仕方なくtwin.macroは剥がして、素のTailwindを書くことにしました。よくよく考えてみるとtwin.macroは大して使いこな せておらず、あまりメリットを感じてなかったので、まあいいかな、と。
計画としてはtwin.macroを剥がし素のTailwindを適用して、というのを一ファイルずつ行うというのを考えていて、一時的にtwin.macroと素のTailwindと同居させるつもりでした。しかし、実際やってみたところ、なぜかdev serverでGatsbyが無限にビルドを繰り返すという珍事が発生して、開発どころではなくなってしまいました。
何が原因なのかはっきりとはわからないのですが、素のTailwindが使うGlobal CSSをはずしたら、とりあえず止まりました。これでは開発ができないというか非常にやりづらいので、急遽Storybookを用意して、コンポーネントごとに開発できるようにしました。
Storybookを入れたことで、開発フローが結構はっきりしました。具体的にはまずtwin.macroでの記述を素のTailwindに書き直し、型をつけ、Storyを書き、必要に応じてコード整理する、といった感じで進めることができました。コンポーネントごとにコーナーケースのデザインくずれを簡単に確認できるので、なかなか重宝しました。
コンポーネントが出来上がったらあとはStorybookは使わず、いつも通り全体的に調整する感じにしました。こんなところで初めてStorybookを使うことになるとは思わなかったんですが、こういう簡易的な使い方でも便利ですね。
また、MDXの扱いですが、GatsbyがESMに対応していないということでremark-gfmのバージョンを大幅に落とさざるを得ない、ということもありました。間にラッパを噛ませてもよいと公式サイトにはあるのですが、メンテナンスがめんどくさいのでやめました。もっと言えば、実はgatsby-plugin-mdxの更新によって中 の挙動が変わり、ソースコードブロック周りが色々ぶっ壊れたりもしたのですが、なんとなく誤魔化してます。
……とまあ、色々と問題はあるのですがなんとか形にはなりましたし、作成中の愚痴がここで書けたのでスッキリしました。コードはデザイン含めて今後もちょこちょこと整理していきたいですね。