Gatsby完全マスターガイド！React製の爆速サイトジェネレーターで最高のWebサイトを作ろう

プログラミング・IT

「WordPressは重いし、でも静的HTMLは面倒…」 「Reactは好きだけど、SEO対策が大変そう」 「ブログもポートフォリオも、とにかく表示速度を速くしたい！」

こんな悩みを一気に解決してくれるのがGatsby（ギャツビー）です。

GatsbyはReactベースの静的サイトジェネレーター。ビルド時にHTMLを生成するので爆速表示が可能で、しかもSEO対策もバッチリ。企業サイトから個人ブログまで、世界中で使われています。

この記事では、Gatsbyの基本から実践的な使い方、デプロイまで、初心者でも今日から始められるように分かりやすく解説していきます！

スポンサーリンク

Gatsbyとは：静的サイトジェネレーターの革命児

そもそもGatsbyって何？

Gatsbyは、Reactをベースにした静的サイトジェネレーター（SSG）です。

静的サイトジェネレーターとは：

  • ビルド時にHTMLファイルを事前生成
  • データベースへのアクセスが不要
  • CDNから配信できて超高速

Gatsbyの仕組み

従来のWebサイト（WordPress等）：

ユーザーアクセス → サーバー → DB検索 → HTML生成 → 表示
（毎回この処理が発生 = 遅い）

Gatsby：

ビルド時にHTML生成済み → ユーザーアクセス → 即表示
（事前に準備済み = 爆速）

Gatsbyの5つの特徴

1. 爆速表示

  • Lighthouse スコア100点も夢じゃない
  • 画像の最適化も自動
  • プリフェッチで体感速度もアップ

2. React の恩恵をフル活用

  • コンポーネントベース開発
  • 豊富なエコシステム
  • モダンなJavaScript

3. GraphQL でデータ管理

  • あらゆるデータソースから取得可能
  • Markdown、JSON、CMS、APIなど
  • 統一的なクエリ言語

4. プラグインが豊富

  • 2500以上のプラグイン
  • SEO、画像最適化、PWAなど
  • 簡単に機能追加

5. 優れた開発体験

  • ホットリロード
  • エラーメッセージが分かりやすい
  • 充実したドキュメント

他のツールとの比較：Next.js、Hugo、Jekyllとの違い

Next.js との比較

Next.js：

  • SSR（サーバーサイドレンダリング）も可能
  • 動的なサイト向き
  • APIルートも作れる
  • より柔軟だが設定が複雑

Gatsby：

  • SSG（静的サイト生成）に特化
  • ビルド時にデータ取得
  • プラグインで機能追加
  • ブログやポートフォリオに最適

どっちを選ぶ？

  • リアルタイムデータが必要 → Next.js
  • 高速な静的サイト → Gatsby

Hugo との比較

Hugo：

  • Go言語製で超高速ビルド
  • シンプルで軽量
  • 学習コストが低い
  • テンプレート言語を使用

Gatsby：

  • Reactの知識を活かせる
  • プラグインエコシステムが充実
  • GraphQLでデータ管理
  • より高機能

Jekyll との比較

Jekyll：

  • Ruby製の老舗SSG
  • GitHub Pagesと相性良好
  • シンプルなブログに最適
  • プラグインは少なめ

Gatsby：

  • JavaScript/React製
  • より高速で機能的
  • モダンな開発環境
  • 大規模サイトにも対応

環境構築：5分で始めるGatsby開発

必要な環境

前提条件：

  • Node.js 18.0.0以上
  • npm または yarn
  • Git（推奨）

Gatsby CLIのインストール

# npmの場合
npm install -g gatsby-cli

# yarnの場合
yarn global add gatsby-cli

# 確認
gatsby --version

新規プロジェクトの作成

スターターを使って作成：

# デフォルトスターター
gatsby new my-gatsby-site

# ブログスターター
gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blog

# ポートフォリオスターター
gatsby new my-portfolio https://github.com/LekoArts/gatsby-starter-portfolio-cara

開発サーバーの起動

cd my-gatsby-site
gatsby develop

ブラウザで http://localhost:8000 を開くと、サイトが表示されます！

GraphiQL（グラフィカル）： http://localhost:8000/___graphql でGraphQLエクスプローラーが使えます。

基本構造：Gatsbyプロジェクトの中身を理解する

フォルダ構成

my-gatsby-site/
├── src/
│   ├── pages/        # ページコンポーネント
│   ├── components/   # 再利用可能コンポーネント
│   ├── templates/    # ページテンプレート
│   ├── images/       # 画像ファイル
│   └── styles/       # CSSファイル
├── static/           # 静的ファイル
├── gatsby-config.js  # サイト設定とプラグイン
├── gatsby-node.js    # ビルド時の処理
├── gatsby-browser.js # ブラウザAPI
└── package.json

ページの作成

src/pages/about.js：

import React from "react"
import { Link } from "gatsby"

const AboutPage = () => {
  return (
    <div>
      <h1>About Us</h1>
      <p>私たちについてのページです。</p>
      <Link to="/">ホームに戻る</Link>
    </div>
  )
}

export default AboutPage

ファイルを作成するだけで、自動的に /about ページが生成されます！

コンポーネントの作成

src/components/Header.js：

import React from "react"
import { Link } from "gatsby"

const Header = () => {
  return (
    <header>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/blog">Blog</Link>
      </nav>
    </header>
  )
}

export default Header

GraphQLでデータを取得：Gatsbyの心臓部

GraphQLの基本

Gatsbyでは、すべてのデータをGraphQLで管理します。

ページクエリの例：

import React from "react"
import { graphql } from "gatsby"

const HomePage = ({ data }) => {
  return (
    <div>
      <h1>{data.site.siteMetadata.title}</h1>
      <p>{data.site.siteMetadata.description}</p>
    </div>
  )
}

export const query = graphql`
  query {
    site {
      siteMetadata {
        title
        description
      }
    }
  }
`

export default HomePage

StaticQuery と useStaticQuery

コンポーネント内でデータ取得：

import React from "react"
import { useStaticQuery, graphql } from "gatsby"

const Header = () => {
  const data = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return <h1>{data.site.siteMetadata.title}</h1>
}

プラグインシステム：機能を簡単追加

必須プラグイン5選

1. gatsby-plugin-image

npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-transformer-sharp

画像の最適化、遅延読み込み、プレースホルダー表示。

2. gatsby-plugin-react-helmet

npm install gatsby-plugin-react-helmet react-helmet

SEO対策のためのメタタグ管理。

3. gatsby-source-filesystem

npm install gatsby-source-filesystem

ローカルファイルをGraphQLで扱えるように。

4. gatsby-transformer-remark

npm install gatsby-transformer-remark

MarkdownファイルをHTMLに変換。

5. gatsby-plugin-sitemap

npm install gatsby-plugin-sitemap

サイトマップの自動生成。

プラグインの設定

gatsby-config.js：

module.exports = {
  siteMetadata: {
    title: `My Gatsby Site`,
    description: `素晴らしいGatsbyサイト`,
    author: `@yourname`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`,
      },
    },
  ],
}

Markdownでブログを作る：実践編

ブログ記事の作成

content/blog/my-first-post.md：

---
title: "初めてのGatsbyブログ"
date: "2025-01-20"
description: "Gatsbyでブログを始めました"
---

## はじめに

Gatsbyでブログを作るのは簡単です！

### 特徴

- Markdownで記事を書ける
- 自動的にHTMLに変換
- SEO対策もバッチリ

ブログ一覧ページ

src/pages/blog.js：

import React from "react"
import { Link, graphql } from "gatsby"

const BlogPage = ({ data }) => {
  return (
    <div>
      <h1>ブログ記事一覧</h1>
      {data.allMarkdownRemark.edges.map(({ node }) => (
        <div key={node.id}>
          <Link to={node.fields.slug}>
            <h2>{node.frontmatter.title}</h2>
          </Link>
          <p>{node.frontmatter.date}</p>
          <p>{node.excerpt}</p>
        </div>
      ))}
    </div>
  )
}

export const query = graphql`
  query {
    allMarkdownRemark(sort: { frontmatter: { date: DESC } }) {
      edges {
        node {
          id
          excerpt
          frontmatter {
            title
            date(formatString: "YYYY年MM月DD日")
          }
          fields {
            slug
          }
        }
      }
    }
  }
`

export default BlogPage

画像最適化：gatsby-plugin-imageの威力

最適化された画像の使い方

import React from "react"
import { GatsbyImage, getImage } from "gatsby-plugin-image"
import { graphql } from "gatsby"

const ImagePage = ({ data }) => {
  const image = getImage(data.file)
  
  return (
    <div>
      <h1>最適化された画像</h1>
      <GatsbyImage image={image} alt="説明文" />
    </div>
  )
}

export const query = graphql`
  query {
    file(relativePath: { eq: "hero.jpg" }) {
      childImageSharp {
        gatsbyImageData(
          width: 1200
          placeholder: BLURRED
          formats: [AUTO, WEBP, AVIF]
        )
      }
    }
  }
`

自動的に実行される最適化：

  • 適切なサイズにリサイズ
  • WebP、AVIF形式に変換
  • 遅延読み込み
  • ぼかしプレースホルダー

デプロイ：世界に公開する

Netlifyでデプロイ

最も簡単な方法：

  1. GitHubにプッシュ
  2. Netlifyでリポジトリを連携
  3. ビルド設定：
    • Build command: gatsby build
    • Publish directory: public
  4. 自動デプロイ完了！

Vercelでデプロイ

# Vercel CLIをインストール
npm i -g vercel

# デプロイ
vercel

GitHub Pagesでデプロイ

gh-pagesパッケージを使用：

npm install --save-dev gh-pages

package.jsonに追加：

{
  "scripts": {
    "deploy": "gatsby build && gh-pages -d public"
  }
}

npm run deploy

パフォーマンス最適化：さらなる高速化

Lighthouse対策

100点を目指すための設定：

  1. 画像の最適化
    • gatsby-plugin-imageを適切に使用
    • 適切なサイズ指定
  2. フォントの最適化
// gatsby-browser.js
import "@fontsource/noto-sans-jp/400.css"
import "@fontsource/noto-sans-jp/700.css"
  1. 不要なJavaScriptの削除
    • Tree Shakingを活用
    • 動的インポートで分割

PWA化

npm install gatsby-plugin-manifest gatsby-plugin-offline

gatsby-config.js：

plugins: [
  {
    resolve: `gatsby-plugin-manifest`,
    options: {
      name: `My PWA Site`,
      short_name: `PWA`,
      start_url: `/`,
      background_color: `#ffffff`,
      theme_color: `#663399`,
      display: `standalone`,
      icon: `src/images/icon.png`,
    },
  },
  `gatsby-plugin-offline`,
]

よくあるトラブルと解決法

ビルドエラー

「Cannot query field…」エラー：

  • GraphQLクエリのタイポをチェック
  • GraphiQLで正しいクエリを確認
  • gatsby cleanでキャッシュクリア

画像が表示されない

解決方法：

gatsby clean
rm -rf node_modules
npm install
gatsby develop

ホットリロードが効かない

対処法：

  • .cache フォルダを削除
  • 開発サーバーを再起動
  • ブラウザのキャッシュをクリア

実践プロジェクト例

企業サイト

特徴：

  • 高速表示でSEO対策
  • CMSと連携（Contentful、Strapi）
  • 多言語対応

個人ブログ

特徴：

  • Markdownで簡単執筆
  • タグ・カテゴリー機能
  • RSSフィード生成

ポートフォリオ

特徴：

  • 作品ギャラリー
  • スムーズなアニメーション
  • お問い合わせフォーム

まとめ：Gatsbyで最高のWebサイトを作ろう！

Gatsbyマスターへの道：

初心者がまずやること：

  1. gatsby-cli をインストール
  2. スターターでプロジェクト作成
  3. ページを1つ追加してみる
  4. Netlifyでデプロイ

覚えておくべきポイント：

  • 静的サイト生成で爆速表示
  • Reactベースでモダンな開発
  • GraphQLでデータ管理
  • プラグインで機能追加
  • 自動最適化でSEO対策

学習のコツ：

  • 公式チュートリアルを完走
  • スターターを改造して学ぶ
  • 小さなプロジェクトから始める
  • コミュニティで質問

最後に：

Gatsbyは最初は難しく感じるかもしれませんが、一度理解すれば最高の開発体験が待っています。

特にReactを知っている人なら、すぐに慣れるはずです。まずは公式スターターを使って、簡単なサイトを作ってみてください。

爆速サイトを作る快感を、ぜひ体験してくださいね！

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました