当サイトをGatsby v3にアップデートしました

blog-hero-img今月リリースされたGatsby v3にアップグレードして、サイト開発、そしてサイト表示スピードが大きくアップしました

pen-icon2021.03.25rewrite-icon2021.11.19

Profile Pic

この記事の筆者:三好アキ(エンジニア)


ウェブデザイナーから『エンジニア』『プログラマー』へ成長したい人、独学で進んでいきたい人を応援しています。 HTMLとCSSの知識だけでアプリ開発を始められる入門書を多数執筆中📕📗👇


ウェブ制作の教本『はじめてつくるReactアプリ』など複数冊を執筆。



React、Next.js、TypeScriptなどのお役立ち情報や実践的コンテンツを、ビギナー向けにかみ砕いて配信中。登録はこちらから → 無料メルマガ登録

Gatsby v3のリリース

(*2021年11月追記: 本サイトはGatsby v4に移行しました。)


今月(2021年3月)のはじめにGatsby v3がリリースされたのに合わせ、本サイトもv3に移行しました。

v3

ウェブ上で最速のサイト」と豪語するGatsbyらしく、今回のバージョンアップも高速化に焦点が当てられており、本サイトもv3アップグレード後はスピード(Performance)が上がり、90以上のスコアを維持できるようになりました。

score

Gatsby v3の特徴

v2のリリースが2018年9月だったので、おおよそ3年ぶりのメジャーリリースとなった今回のv3。

v3はエンジニア、コンテンツ担当者、そしてユーザーというウェブサイトに関係する全ステークホルダーに高速化のメリットをもたらすことを目指しています。

具体的には以下の点が改善されています。


• 開発時のbuildsスピードを80%高速化

• Incremental Buildsによってbuildプロセスを高速化

• 画像最適化を進化させてサイト表示を高速化

参考: https://www.gatsbyjs.com/blog/gatsby-v3


v3と同時にGatsby Hostingの提供開始も発表されました。

これまでGatsby Cloudでしか利用できなかったIncremental Buildsがデフォルトで利用可能になったこと、そして画像最適化を行うGatsby Imageのアップグレードが今回のリリースの目玉かと思います。

Gatsby Imageはこれまでgatsby-imageプラグインから、<Img/>コンポーネントを読み込んで使っていましたが、v3では名前がgatsby-plugin-imageに変わり、<StaticImage/><GatsbyImage/>の2つのコンポーネントが使えるようになりました。

<StaticImage>はレンダー時に毎回同じ画像を表示するコンポーネント、そして<Gatsby Image>はレンダーごとに違う画像を表示するコンポーネントでの仕様が想定されており、これは例えばページごとに表示する画像が違うHeroコンポーネントや、読み込むデータによって画像が変わるテンプレート的なコンポーネントのことです。

gatsby-image-pluginに合わせてGraphQLのクエリも、フラグメントを使ったこれまでの ...GatsbyImageSharpFluildからgatsbyImageDataに変わっています。

gatsbyImageDataには次のように各種の設定を渡せるようになっているので、使いやすくなりました。


export const pageQuery = graphql`
 BlogQuery {
   blogPost {
     author
     avatar {
       childImageSharp {
         gatsbyImageData(
            width: 300
            placeholder: BLURRED
            formats: [AUTO, WEBP, AVIF]
         )
       }
     }
   }
 }
`

AVIFという、WebPよりも軽く、そして高画質な保存形式にも対応しているのは驚きです。

AVIFフォーマットについては、次の記事で詳しく紹介しています。

なお、gatsby-image-pluginで設定可能な全項目は以下のリンクで紹介されています。

https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image

当サイトのv2からv3への移行

当サイトはこれまでGatsby 2.20.8で開発を行ってきました。

今回v3のリリースに合わせて、Gatsby CLIとともにすべてのパッケージのバージョンも一気に上げたのですが、移行作業は案外早く終わり数時間でデプロイまで完了しました。

何かトラブルやエラーが出るだろうと思っていたので、これは意外でした。

早く済んだ理由の一つは、当サイトの画像の9割近くがサイト軽量化の目的でsvgを使っており、それらをimportでコンポーネントに読み込んでいたので、Gatsby ImageやGraphQLの変更の影響を受けなかったためです。

また有志の開発によるプラグイン(community plugin)への依存が低く、v3リリースと同時にアップグレードされた各オフィシャルプラグインの導入だけで作業が済み、バージョンのコンフリクトが発生しなかったことも要因です。

(唯一gatsby-plugin-mailchimpがv3で動くかが心配でしたが、今のところ問題は発生していません。)

gatsby-imageからgatsby-plugin-imageの移行にはgatsby-codemodsというパッケージが用意されていますが、私は使いませんでした。

くわしくは以下の公式移行ガイドを参考にしてください。

https://www.gatsbyjs.com/docs/reference/release-notes/image-migration-guide

v3移行の恩恵

v3移行で本サイトのbuilds時間は大幅に短くなりました。

またサイトのスピードもより高速化し、Lighthouseのパフォーマンスで安定的に95以上のスコアが出るようになりました。

score

Gatsbyに興味のある人は次の記事も参考にしてください。