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

この記事の筆者:三好アキ(ウェブエンジニア)
「売り上げが伸びない」、「ウェブサイトから問い合わせが来ない」など、ウェブでお困りのお客さまの課題解決を、最新の知見を活かして行なっています。海外滞在が長く、日本語の情報が少ないJamstackやヘッドレスCMSなど最新のウェブテクノロジー、ウェブマーケティングに精通。事業について詳しくはこちらをご覧ください。
ウェブ制作の教本『はじめてつくるReactアプリ』など複数冊を執筆。本に関するインタビュー記事はこちら。
Gatsby v3のリリース
(*2021年11月追記: 本サイトはGatsby v4に移行しました。)
今月(2021年3月)のはじめにGatsby v3がリリースされたのに合わせ、本サイトもv3に移行しました。
「ウェブ上で最速のサイト」と豪語するGatsbyらしく、今回のバージョンアップも高速化に焦点が当てられており、本サイトもv3アップグレード後はスピード(Performance)が上がり、90以上のスコアを維持できるようになりました。
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リリースと同時にアップグレードされた各オフィシャルプラグインの導入だけで作業が済み、バージョンのコンフリクトが発生しなかったことも要因です。
JMAstackガイド本フリー配布ページで使っているプラグイン、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以上のスコアが出るようになりました。
Gatsbyに興味のある人は次の記事も参考にしてください。
monoteinはGatsbyを使ったJamstackサイト制作を専門としています。
ストレスフリーでサクサク動き、高いCV率を実現するJamstackサイトに興味のある方は、コチラより遠慮なくお問い合わせください。
ユーザーからの問い合わせを増やしたい、アイテムの購入率を高めたい等の「ビジネスのゴール」から逆算した効果的なウェブサイトを制作するmonotein。
monoteinについての案内資料の無料ダウンロードはこちら。
「これまでのホームページでは成果が出なかった」、「結果の出るウェブサイトが欲しい」、「JamstackやヘッドレスCMSなどの最新テクノロジーに移行したい」など、ウェブに関してお困りのことがありましたら、お気軽にご相談ください。
無料相談