シェア
はてブ
目まぐるしくトレンドが変化するフロントエンドの世界。フロントエンドの開発を加速させるフレームワークの選択肢も多様化しており、どのライブラリを選ぶかはプロジェクトの成功に大きく影響します。
最近はNext.jsが次々と新機能を発表し、飛ぶ鳥を落とす勢いで人気を集めています。しかし、Next.js以外にも優れたフレームワークは存在し、ユースケースによっては他のフレームワークの方が適している場合もあります。
今回は、そのうちの静的サイトジェネレータのフレームワークであるGatsbyに焦点を当て、Gatsbyが好きな理由を取り上げます。この記事を読んでくださる方に新たな視点や選択肢を提供できれば幸いです。
著者について
Findy Engineer Labをご覧の皆様はじめまして。大石貴則(@bicstone_me)と申します。
普段は、物流業界のDXに挑むベンチャー企業で、ソフトウェアエンジニアとして「2024年問題」を始めとした物流業界の課題解決に正面から向き合っています。
主にフロントエンド側を中心に、技術選定をはじめアーキテクチャ設計、開発、運用などを担当しています。
静的サイト生成(SSG)とは
まず初めに、フロントエンドのレンダリングモデルの1つである静的サイト生成(Static Site Generation, SSG)について簡単に説明します。
この手法は、静的サイトジェネレータ(Static Site Generator)がビルド時にソースコードへCMSなどから取得したコンテンツを埋め込み、静的なHTML、JavaScript、CSSファイルなどを生成します。
生成された静的ファイルを静的ホスティングサービスにデプロイし、コンテンツ配信ネットワーク(Content Delivery Network, CDN)を通じてユーザーに直接配信します。このアーキテクチャはJamstack(JavaScript/API/Markup Stack)とも呼ばれています*1。
CDNは、クライアントサイドからのアクセスに対して静的ファイルをそのまま配信します。動的な処理がないため、高いパフォーマンスとセキュリティリスクを軽減できる利点があります。
一方で、コンテンツの更新にはビルドとデプロイが必要であり、リアルタイムでの更新には向いていません。また、サイトが大規模になるとビルド時間が長くなる課題もあります。
これらの特性から、ランディングページ、ブログ、ポートフォリオサイトなど、更新頻度が低いウェブサイトに適しています。
静的サイトジェネレーターのトレンド
Node.js製の静的サイトジェネレータとして知られているフレームワークには、Next.js、Nuxt、Gatsby、Astroなどがあります*2。
2024年現在、特にNext.jsが注目されており、SSGとしてだけでなく、多くの開発ケースで選ばれています。Next.jsは他のフレームワークと比べて柔軟な機能を提供し、多様なユースケースに対応できるためです。
さらには、Partial PreRendering (PPR)という新たなレンダリング手法がNext.jsから発表され、進化が続いています*3。
npmのダウンロード数を比較すると、2019年まではGatsbyがNext.jsよりもダウンロード数が多かったものの、2020年以降はNext.jsが逆転し、差を広げています*4。
また、Astroなど新しいフレームワークも登場し、Gatsbyは他のフレームワークとの競争に押され、人気が低下しています。
Gatsbyとは
Gatsbyは2015年に登場した老舗の静的サイトジェネレータです。主要な特徴としては、様々なデータソースが一元化したデータレイヤーに抽象化され、GraphQLを使用して取得できることにあります。さらには、スターター、テーマやプラグインのエコシステムにより、実装量を減らせることが挙げられます。
目に見えて人気が低下しているGatsbyですが、筆者はそれでも好きなフレームワークの1つとしてGatsbyを挙げます。私がGatsbyを好きな7の理由を紹介します。
Gatsbyが好きな理由・好きなところ
迅速にウェブサイトを構築できる
Gatsbyはスターターが豊富に提供されています。
特に、ランディングページやブログなどのSSGに適したユースケースにおいては、豊富にスターターが提供されています。これらを活用することで、迅速にウェブサイトを構築できます。
スターターに加えて、一般的なユースケース向けに設定をボイラープレート化された「テーマ」が提供されています。これを活用することで、初期設定の手間すらも省くことができ、開発スピードや保守性を向上できます。
豊富なエコシステム
Gatsbyには、3,000を超えるプラグインが提供されています。これらのプラグインを活用することで、わずかな実装で機能を追加できます。
例えば、データソースの追加には、WordPressや各種ヘッドレスCMSと連携する公式プラグインを活用できます。その他にもesa.ioやnotionなどから取得できるサードパーティ製のプラグインも充実しています。
また、SEO・サイトマップ・画像最適化など、ウェブサイトに必要な機能を追加するプラグインも豊富にあります。これらを活用することで、簡単に機能を追加可能です。
一方で、プラグインに依存することによる保守性の問題を指摘されることがあります。しかし、基本的にはGatsbyやCMS企業によって公式に管理されているプラグインでカバーできます。これらの公式プラグインを選定することで、保守性を維持しつつ開発効率を高めることができます。
データソースが一元管理される
Gatsbyはデータソースをデータレイヤーに抽象化しており、GraphQLを通じてデータを取得できます。
データソースとしては、前述のWordPressやヘッドレスCMSだけでなく、MarkdownやJSONなどのファイルベースも利用できます。これらはすべてデータレイヤーで一元管理され、GraphQLを使用してまとめて取得できます。
多様なソースからのデータが統合されているため、ソースコードの見通しが良くなります。また、それぞれのAPIの仕様を知る必要がないため、開発がスムーズに進められます。
パフォーマンスが高められる
Gatsbyは、Gatsbyは、SSGとしての役割に特化しているため、ビルド後のサイトのパフォーマンスがとても高いです。
開発時にはパフォーマンスの最適化についてあまり考慮する必要はなく、Gatsbyが自動的にコード分割を含む様々な最適化を行うため、高速なページロードを容易に実現できます。また、画像最適化などのベストプラクティスも公式プラグインの導入のみで完結します*5。
また、リンクによるプリロードの機能も提供されています。次のページが事前に読み込まれるため、ユーザーがリンクをクリックした際には、ほぼ一瞬で次のページが表示されます*6。
さらには、JavaScriptが無効な環境や低速な回線でもウェブサイトを表示できるため、アクセシビリティの観点からも優れています。
副次的な効果として、検索エンジンのクローラーがクロールしやすいサイトとなっているので、SEO対策にも有利です。
フロントエンドの開発に専念できる
Gatsbyは、SSGに特化したフレームワークであるため、サーバーサイドやインフラの考慮や実装が不要です。すべてのソースコードはクライアントサイドで実行されるため、Reactの知識のみで開発できます。これにより、フロントエンドの開発に集中することが可能になります。
また、Gatsbyは静的ファイルを生成するため、ホスティング先への依存もありません。Netifly、Vercel、GitHub Pages、Firebase、AWS、Azureなど、使い慣れた好みのサービスを選定できます。そのため、新たなホスティングサービスを学ぶ必要もありません。
キャッシュ機能が強力
静的サイト生成のアプローチにおける課題として、ビルド時間の長さが挙げられます。サイトが成長するにつれて、データソースの増加やページ数の増加によりビルド時間が伸びがちです。
Gatsbyはこの問題に対処するため、強力なキャッシュ機能が備わっています。これにより、画像の最適化も含めた様々なリソースがキャッシュされるため、ビルド時間の増加が抑えられます。キャッシュ機能については特に設定や実装をする必要がないため、意識することなくビルド時間を短縮できます。
エコシステムを支えるコミュニティが活発
Gatsbyのコミュニティはとても活発です。本体だけでなく、スターター、テーマ、プラグインなど様々な形でコントリビュートを行えます。
コントリビューターに対するサポートも充実しています。初心者向けのガイドがあったり、貢献に応じて公式グッズをもらえるなど、コントリビュートしやすい環境が整っています。
開発者向けのドキュメントも充実しているため、プラグイン開発も手軽に行えます。私自身も1週間でプラグインを開発し、1年間で7万回以上ダウンロードされています。
このような活発なコミュニティの存在が、Gatsbyのエコシステムをさらに豊かにしています。
まとめ
本記事では、Gatsbyの好きな理由を7つのポイントで掘り下げました。静的サイトジェネレーターに特化したGatsbyは、適切なユースケースでは優れているフレームワークであるとわかったのではないでしょうか。
充実したエコシステム、データソースの一元管理、パフォーマンスの高さ、SEOとアクセシビリティの最適化、ホスティングの自由度は、Gatsbyの大きな特徴です。これらの特徴を活かすことで、ユーザーにとって使いやすいウェブサイトを迅速に構築できます。
通常、パフォーマンスを高めたり機能を追加しようとすると開発効率の低下を招くことがありますが、Gatsbyはこれらをバランスよく両立できます。適切なユースケースでGatsbyを選定できれば、開発効率を犠牲にすることなく、ユーザーにとって使いやすいウェブサイトを提供できます。
今後もGatsbyの進化に期待し、その動向を見守っていきます。
*2:https://jamstack.org/generators/
*3:https://nextjs.org/blog/next-14#partial-prerendering-preview
*4:https://npmtrends.com/astro-vs-gatsby-vs-next-vs-nuxt
*5:https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/
*6:https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-link/
