ブログ兼ポートフォリオを新しくした
2022年11月23日
Gatsby 5のリリースとともに、ブログ兼ポートフォリオを新しく組み直しました。
なぜ？
Gatsby 5のリリース前に、Gatsby 5の動作環境はNode v18系になるという告知があり、ビルド環境をNode v18に更新したらはまりました。
GatsbyのGitHubにもissueが立っており、こちらではsource-mapのベータ版の使用、当時ベータ版だったGatsby 5への更新などが案内されており、それらを試したのですがエラーは解消されませんでした。
時は流れGatsby 5がリリースされたのですが、その後にGatsby 5の正式版をインストールするも、やはりエラーが出て進めませんでした。
このブログはGatsby v1からv2への移行期辺りのコードを引きずっている箇所がみられ、TypeScriptも念頭においておらず(よくわかっていない所が多くありました)、リンターなども動作しておらず原因不明のままで放置している、というひどい有様でした。
ということでGatsby v5に合わせて作られたスターターを元に、現在の技術でサイトを再構築しつつ、ついでにただのブログからポートフォリオも兼ねたものに変えてしまおう、という計画になりました。
どんな感じ？
まずnpm init gatsbyで作られるサンプルは、Gatsby 5公開時点でGatsby 5を使うものに差し替えられていました。ブランチを切って、全ファイルを生成されたサンプルのものと置き換えました。
そのままゴリゴリと実装していってもよいのですが、TypeScriptのことがよくわかっていなかったのでサバイバルTypeScriptを読み込んだり、GatsbyのTypeScriptのドキュメントを適当に流さずに読むことを心がけました。それでもGraphQLを使っている場所で、Typegenとの折り合いでまだエラーが残っていたり、コンポーネントの返り値の型にanyを指定したりしています。型がきちんと付いている部分では、明らかにおかしなコードを書くと警告が出るようになりますし、JavaScriptの数字と文字列まわりの謎の挙動も静的型付けで解決できるため、かなり開発体験はよくなりました。
また実装をはじめる前にリンターの設定を行ってみました。ESLint+Prettierの環境ですが、これは動作していなかったと思っていたのは結局Visual Studio Codeの適切な設定がされていなかっただけで、VSCode側の設定を変えることでPrettierが保存時に作動するようになり、その際にESLintも走るようになりました。若干括弧まわりを雑に書いてもPrettierがすぐに整形してくれるので、この辺りはかなり楽になったと感じています。
あとは実装を進めていくだけでした。効率の悪いGraphQLクエリがあったのでそれを良い形にできたこと、シンタックスハイライトをShikiからPrismに乗り換えて、最近気に入っているカラースキームのCatppuccinのカスタムテーマを作って適用したこと、以外は、結局以前のものと大きな違いはないものになっていきました。
現時点での不具合らしい不具合はGatsby Cloudでのビルドがやけに遅いことぐらいで、キャッシュがない状態からだとこの規模のブログで5分かかります！以前は2分ほどだったので、何かがおかしいとは思うのですが現時点で原因はわかっていません。
何か変わった？
見ていただいている方からは、たぶん何も変わっていません！フィードも切ることも考えましたが結局維持することになり、パーマリンクも当然そのままで、記事個別ページのデザインも変わったのは色味ぐらいのものです。
強いて言えばトップページの構成が変わり、ブログというよりは個人のページという具合になりました。大したものはありませんが、ポートフォリオ風の場所もあります！
このブログは今後も技術的なものに限らずアウトプットの場としてどんどん書いていきます！今後ともよろしくお願いいたします。