Gatsby のバージョンを v3 から v4 に上げた

2021/11/07

Gatsby v4.0.0 がリリースされていたのでアップデートしてみた。 このブログの前回の記事は「Gatsby のバージョンを v2 から v3 に上げた」なので、投稿を全くしないまま Gatsby のメジャーバージョンが上がってしまった。

アップデートして何がいいの?

What’s New in Gatsby 4 の記事によると、大きく下記の2つ。

  • レンダリングオプションが増えた
  • ビルド時間短縮

増えたレンダリングオプションというのは、

  • Deferred Static Generation (DSG)
  • Server-Side Rendering (SSR)

で、Gatsby Cloud などサーバーで Gatsby を実行するときのもの。 Gatsby をヘッドレス CMS のフロントエンドとして利用している人にとっては大きなアップデートだと思う。 DSG と SSR の違いは、「What’s New in Gatsby 4」の記事中の図解を見るとわかりやすい。

このブログでは Netlify 上で gatsby build を実行して、生成された HTML ファイルをそのまま Netlify でホストしているので恩恵はない。

また、ビルドプロセス中の GraphQL の実行を並列に行うことで、ビルド時間を短縮できたみたい。

アップデート手順

公式ドキュメントの Migrating from v3 to v4 を見ながらやった。

v2 から v3 のときと同様に、ディレクトリ構造や API の大きな変更はなかったので、以下の手順ですんなりとアップデートできた。

  1. Gatsby とそのプラグインのパッケージの最新バージョンをインストール
  2. ビルドエラーに該当するものを Migrating from v3 to v4 から探して修正

v2 から v3 のときもそうだったが、remark-custom-blocks が remark の最新バージョンをまだサポートしていなかった。 前回はそのために gatsby-transformer-remark をアップデートしなかったが、その間に remark のメジャーバージョンが2つ上がっていたので、今回は gatsby-remark-custom-blocks を使わないことにした。

もともと技術検証のために試していたものなので、このブログではなくなってもまあいい。 スタイルガイドとしての「吹き出しのブロックを挿入する」の記事中でスタイル崩れが発生しているくらい。

諸々エラーを修正して、gatsby build が実行できるのを確認して終了。


morishitter

フリーランスのデザイナー。デジタルプロダクトのUIデザインを中心に、ブランディングからユーザー体験設計、ビジュアルデザインをおこなう。

© 2021, Masaaki Morishita