gatsby.js とは？初心者でもわかる静的サイト生成入門共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

gatsby.js とは？

gatsby.js は React をベースにした静的サイト生成ツールです。ウェブサイトをビルド時に静的なHTMLファイルとして作成し、ユーザーが訪れるときには既に用意されたファイルを配信します。これにより初回表示が速くなり、検索エンジンにも有利です。

従来のサーバーサイドでHTMLを組み立てる方法と比べ、gatsby.js は「ビルド時にすべてを事前生成」する点が大きな特徴です。サイトのデータは一般的にマークダウンファイルやCMS、API など複数のデータソースから集められ、GraphQL というデータ取得の仕組みを通じてページに渡されます。

主な特徴

・高い表示速度: 静的ファイルの配信と自動的なコード分割により、初回読み込みが速くなります。

・SEO に強い: 初期のHTMLがクライアントサイドでのレンダリングを待たずに表示されるため、検索エンジンにとって理解しやすい構成です。

・豊富なプラグイン: 画像最適化、PWA 化、 MDX 対応、データソースの統合などを小さな部品として追加できます。

・良い開発体験: コンポーネント指向の開発、ホットリロード、スターターというテンプレートが初心者にも使いやすい設計です。

仕組みと用語の簡単な解説

まず「データ層」です。gatsby-source 系のプラグインが外部データを取り込み、最終的に GraphQL というデータの取り出し方でページに渡します。次に「ビルド」です。gatsby develop を使えばローカル開発サーバーが立ち、gatsby build で本番用の静的ファイルを作成します。開発からデプロイまでの流れを短く保てる点が魅力です。

始め方の一例

以下は初心者が始めるときの基本的な流れです。1) Node.js をインストールします。2) ターミナルで npm i -g gatsby-cli を実行して Gatsby の CLI を入れます。3) 新しいプロジェクトを作成します。例: gatsby new my-site https://www.gatsbyjs.com/starters/ 4) ルートディレクトリに移動して gatsby develop を実行します。5) ブラウザで http://localhost:8000 を開くと自分のサイトが動いています。

構成と基本的なファイル

典型的な Gatsby プロジェクトには gatsby-config.js、gatsby-node.js、src/pages が含まれます。src/pages に置いたファイルは自動的にページとして公開され、src/components に部品を作って再利用できます。データの取り込みにはプラグインを活用します。例えば MD ファイルをページにするには gatsby-transformer-remark と gatsby-source-filesystem を組み合わせます。

メリットとデメリットを表で見る

メリット	高速な表示、SEO 対応、ビルド後の静的配信、豊富なプラグイン、安定した運用
デメリット	初期設定の学習コスト、データの頻繁な更新時のビルド時間、リアルタイム性が必要な場合の適性
始め方の目安	Node.js 環境を整え、公式スターターやチュートリアルを使うと習得が早い

こんな人におすすめ

ウェブサイトを速さ重視で構築したい人、SEO を大事にしたいマーケティングサイトやブログ運営者、データを複数 sources から集約して表示したい場合などです。反対に、頻繁にリアルタイムで更新されるダッシュボードのような用途には向かないことがあります。もっと動的な機能を重視するなら Next.js など他の選択肢も検討しましょう。

デプロイのポイントとしては、静的ファイルを配布するためのホスティングとして Netlify や Vercel、GitHub Pages などが使えます。ビルド後のファイルをアップロードするだけで、CDN 経由の高速配信が可能です。

初めて Gatsby を体験する人は、公式のスターターを使って動作を確かめるのが最も手っ取り早いです。

gatsby.jsの同意語

Gatsby.js: Reactをベースにした静的サイト生成ツールで、ビルド時にHTML/CSS/JSを静的ファイルとして出力します。データはGraphQL経由で取得でき、サイトの表示を高速化します。
Gatsby: Gatsby.jsの略称・口語表現。記事や会話で短く呼ぶ際に使われます。
GatsbyJS: Gatsby.jsの別表記。公式以外の文献やパッケージ名で見かける表記ゆれの一つ。
Gatsby.js（別表記）: Gatsby.jsと同義の表現。表記の揺れの例です。
Reactベースの静的サイト生成ツール: Gatsbyの機能説明を指すカテゴリ名。Reactのコンポーネントを用いて静的サイトを生成する点が特徴です。
JAMstack対応の静的サイト生成ツール: GatsbyがJAMstackの原則に適した静的サイト生成ツールであることを表す表現。

gatsby.jsの対義語・反対語

動的サイト生成: サイトをリクエスト時にデータを取得して動的に生成する仕組み。Gatsby.js はビルド時に静的なHTMLを生成するのに対し、動的サイト生成はリクエストごとにページを組み立てます。
SSR（サーバーサイドレンダリング）: ページをサーバー側で生成して完成したHTMLをクライアントに返す方式。初期表示が動的かつ最新データを反映しやすい一方、ビルド済み静的サイトとは異なります。
CSR（クライアントサイドレンダリング）: ブラウザ上のJavaScriptでコンテンツを組み立てる方式。初期HTMLは最小限で、受信後にデータを取得して描画します。Gatsbyの静的プリレンダリングとは対照的です。
ダイナミックCMS連携: 動的なコンテンツ管理システムと連携して、データ更新時にページが動的に表示される構成。Gatsbyは静的ビルド中心ですが、CMS連携を使えば動的要素を取り入れやすくなります。
リアルタイムレンダリング: データが更新されるとほぼリアルタイムでコンテンツを生成・表示する仕組み。静的ビルドを前提とする Gatsby とは性質が異なります。
サーバーサイド生成型ウェブアプリ: ページ生成をサーバー上で行い、HTMLを返すタイプのアーキテクチャ。静的生成よりも動的なデータ反映に強いです。
動的コンテンツ主導型ウェブ: データベースやAPIから動的にデータを取得し、表示が頻繁に変わるサイトのこと。Gatsby の静的プリレンダリングと対照的です。
クライアント中心のウェブレンダリング: レンダリングの主な責任をクライアント（ブラウザ）に置くアプローチ。初期表示の軽量化などの利点がありますが、静的生成とは異なる設計思想です。

gatsby.jsの共起語

React: GatsbyはUIを構築するためのJavaScriptライブラリReactを使います。
GraphQL: データ取得のクエリ言語で、GatsbyはGraphQLを通じてデータを統合してページを作成します。
Static Site Generator: 静的サイトを生成するツールで、サーバー側のレンダリングが不要な高速サイトを実現します。
MDX: MarkdownとJSXを組み合わせたファイル形式で、Gatsbyでもコンポーネントを埋め込んだ投稿が作れます。
Markdown: ブログ投稿などのコンテンツを記述する軽量マークアップ言語です。
gatsby-config.js: Gatsbyの設定ファイルで、プラグインの追加やサイトの基本設定を行います。
gatsby-node.js: ビルド時に実行されるNode.js APIで、データの取り込みやページ作成を制御します。
gatsby-browser.js: クライアントサイドの挙動を設定するファイルです。
gatsby-ssr.js: サーバーサイドレンダリング時の挙動を設定するファイルです。
gatsby-plugin-image: 高パフォーマンスな画像処理と最適化を提供する公式プラグインです。
gatsby-plugin-sharp: Sharpを使った画像処理機能を提供するプラグインです。
gatsby-transformer-sharp: 画像データの変換を支援するプラグインです。
gatsby-source-filesystem: ローカルファイルをデータソースとして取り込むプラグインです。
gatsby-plugin-react-helmet: SEO用にheadタグを管理する機能を提供するプラグインです。
Gatsby Cloud: 公式クラウドサービスで、ビルドとデプロイを最適化します。
Netlify: 静的サイトをデプロイできる人気のホスティングサービスです。
Netlify CMS: 静的サイト向けのCMSで、編集をUIで行えます。
Gatsby Starter: すぐに使えるテンプレートで、開発を早く始められます。
Gatsby Theme: 再利用可能なテーマ機能で、機能を手軽に組み合わせられます。
SEO: 検索エンジン最適化の取り組み。GatsbyでのSEO対策にも触れます。
Image Optimization: 画像を自動で最適化してサイトの表示を速くします。
Pre-rendering: 事前にHTMLを生成して、初回表示を高速化します。
Build: サイトの静的ファイルを生成する工程です。
Deployment: 公開する作業。ホスティングへアップロードします。
Performance: 表示速度や体感速度を向上させるための指標や対策です。
Page: Web上の1つの表示単位。src/pagesから自動生成されることが多いです。
Link: 内部リンクを作るためのコンポーネントで、ページ間の遷移を高速化します。
Frontmatter: Markdownファイルのメタ情報（タイトルや日付など）を格納します。
GraphQL Schema: データの型定義。GraphQLの構造を決める設計です。
Remark: MarkdownをHTMLへ変換するライブラリの一部です。
Plugins: 機能を追加する拡張機能。Gatsbyは多数の公式・非公式プラグインを提供します。
MDXProvider: MDX内で使えるカスタムコンポーネントを定義する設定です。
Contentful: ヘッドレスCMSの一つで、データをGatsbyへ取り込む際に使われます。

gatsby.jsの関連用語

Gatsby.js: Reactをベースにしたオープンソースの静的サイトジェネレーター。ビルド時にHTMLを生成し、パフォーマンスとSEOを向上させることを目的としています。
Gatsby CLI: Gatsbyプロジェクトの作成・開発・ビルドをコマンドラインで管理するツール。
React: ユーザーインターフェースを構築するためのJavaScriptライブラリ。Gatsbyはこの上で動作します。
GraphQL: データ取得のためのクエリ言語。Gatsbyはデータ層としてGraphQLを利用し、複数ソースからデータを統一して取得します。
gatsby-config.js: サイトの設定ファイル。プラグインの追加・サイト情報・データソースの設定などを記述します。
gatsby-node.js: ビルド時のカスタマイズやページ作成など、Node APIを使ってGatsbyの挙動を拡張するファイルです。
gatsby-browser.js: ブラウザ側のレンダリング時の挙動を定義するファイルです。
gatsby-ssr.js: サーバーサイドレンダリング時のカスタム挙動を定義するファイルです。
gatsby-plugin-image: 高性能な画像最適化と遅延読み込みを提供する公式プラグイン。
gatsby-plugin-sharp: Sharpを用いた画像処理機能をGatsbyに取り込むプラグイン。リサイズ・圧縮などをサポートします。
gatsby-source-filesystem: ローカルのファイルをデータソースとして取り込むプラグイン。
gatsby-transformer-remark: MarkdownをHTMLに変換するプラグイン。記事作成を容易にします。
gatsby-transformer-sharp: 画像データの変換処理を可能にするプラグイン。高品質な画像処理を実現します。
Gatsby Starter: 初期設定済みのテンプレート。すぐに開発を始められるよう基本構成が用意されています。
Gatsby Theme: 再利用可能なデザイン・機能をまとめたテーマ。複数サイトでの一貫性を高めます。
Gatsby Cloud: 公式のホスティング・ビルドサービス。高速ビルド・プレビュー・CDNなどを提供します。
Netlify: 静的サイトのデプロイに広く使われるホスティングサービス。Gatsbyとも相性が良いです。
Vercel: 高速なデプロイとプレビュー環境を提供するホスティングプラットフォーム。
Static Site Generator: 事前にHTMLを生成して配信するタイプのサイト構築ツール。Gatsbyはこのタイプの代表例です。
Jamstack: JavaScript/API/Markupの組み合わせで構築するモダンウェブのアーキテクチャ。GatsbyはJamstackの実装例です。
SEO最適化: 検索エンジンの評価を高めるための対策。Gatsbyはプリレンダリングやメタ情報の管理でSEOに有利です。
gatsby-plugin-react-helmet: ページのタイトル・メタ情報を動的に操作するReact用統合プラグイン。SEOにも効果があります。
react-helmet: Reactでhead要素を動的に管理するライブラリ。gatsby-plugin-react-helmetはこれを統合します。
sitemap: サイト全体のURL構造をXMLで表したファイル。検索エンジンにサイトを正しく伝えます。
gatsby-plugin-sitemap: サイトマップを自動生成してSEOを支援する公式プラグイン。
gatsby-plugin-google-analytics: Google Analyticsのトラッキングコードをサイトに組み込むプラグイン。
gatsby-plugin-manifest: PWA対応のWeb App Manifestを生成するプラグイン。インストール案内などに影響します。
MDX: MarkdownとJSXを統合して執筆できる形式。gatsby-plugin-mdxで対応します。
Incremental Builds: 変更分だけを再ビルドする機能。大規模サイトのビルド時間を大幅に短縮します。
Data Layer: GraphQLを介してデータを取り扱う、Gatsbyのデータ層。
Create Page API: gatsby-node.jsでプログラム的に新しいページを作成するためのAPI。
Link Component: 内部リンク用のリンクコンポーネント。プリフェッチ機能でナビゲーションを高速化します。
Prefetching: リンク先のデータを事前に読み込み、スムーズな遷移を実現する技術です。
Gatsby Image: 画像最適化と表示の最適化を提供する概念。実装はgatsby-plugin-imageと組み合わせて使います。
Performance: 表示速度とユーザー体験の最適化。静的生成・画像最適化・プリフェッチ等で実現します。
Sourcing Data: CMS・データベース・ファイルなど外部データを取得してサイトへ組み込む作業です。
GraphQL Queries: データ取得のクエリ。ページごとに必要なデータを明示的に取得します。
Reusable Components: 再利用可能なUI部品を設計して効率的にサイトを構築します。
Build: 静的HTML・JS/CSSを生成するビルドプロセス。最終的に配信可能な状態にします。
Development Server: ローカルでサイトをプレビューする開発サーバー。gatsby developで起動します。
Environment Variables: ビルド時の環境設定。APIキーなどを安全に扱うために使います。
Gatsby Ecosystem: 公式・コミュニティのプラグイン・テーマ・スターターなど、Gatsby周辺のエコシステム全体です。