静的サイトの表示速度に悩んだら、Gatsbyという選択肢があった

はじめに

「ブログやコーポレートサイトを作るのに、毎回Reactでルーティングやデータ取得を一から組むのは大変」「表示速度を上げたいけど、SPAだと初回ロードがどうしても重くなる」――そんな悩みを抱えたことはないでしょうか。

Gatsbyは、Reactをベースにした静的サイトジェネレーター（SSG）です。ビルド時にHTMLを生成しておくことでページの表示速度を最大化しつつ、GraphQLという統一されたインターフェースでMarkdownファイルやヘッドレスCMS、APIなど、あらゆるデータソースを扱えるようにしてくれます。GitHubでは55,000以上のスターを獲得しており、React系SSGの草分け的存在として長く使われ続けています。

この記事では、Gatsbyの特徴からインストール方法、基本的な使い方、実践的なユースケースまで解説していきます。

Gatsbyとは

Gatsbyは「React-based framework with performance, scalability, and security built in.」を掲げるオープンソースのフレームワークです。開発時はReactコンポーネントとしてページを組み立て、ビルド時にはNode.js環境でそれらを静的なHTML・CSS・JSに変換します。生成後のページはReactによってハイドレーション（動的な機能を後付けする処理）され、通常のReactアプリと同じようにクライアント側の遷移もできるようになります。

最大の特徴は、データ取得の窓口をGraphQLに統一している点です。Markdownファイル、WordPress、Contentful、Shopifyなど、データソースがどれであっても同じGraphQLクエリの書き方でページに取り込めます。

主な特徴

GraphQLによる統一データレイヤー - ソースプラグイン経由で取り込んだデータを、単一のGraphQL APIとしてクエリできる
豊富なプラグインエコシステム - ソース・トランスフォーマー・機能追加まで、数千規模のプラグインが公開されている
ビルド時の画像最適化 - gatsby-plugin-imageがリサイズ・遅延読み込み・WebP変換までを自動化
パフォーマンス最適化が標準装備 - コード分割、リンクのプリフェッチ、Critical CSSの抽出などが初期状態で有効
段階的なレンダリング戦略 - 全ページ静的化（SSG）に加えて、サーバーサイドレンダリング（SSR）や差分静的生成（DSG）も選択できる

インストール方法

Node.jsがインストールされていることを前提に、Gatsby CLIを使ってプロジェクトを作成します。

# Gatsby CLIをグローバルインストール（任意）
npm install -g gatsby-cli

# 新規プロジェクトを作成
npx gatsby new my-gatsby-site

# 開発サーバーを起動
cd my-gatsby-site
npm run develop

対話形式でCMSやスタイリングツール、TypeScriptの利用有無などを選択できます。既存のスターター（テンプレート）から作りたい場合は、URLを指定して作成することも可能です。

npx gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blog

基本的な使い方

src/pages配下にコンポーネントを置くだけで、ファイル名がそのままルーティングになります。

// src/pages/index.js
import * as React from "react"
import { Link, useStaticQuery, graphql } from "gatsby"

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

  return (
    <main>
      <h1>{data.site.siteMetadata.title}</h1>
      <p>ようこそ、Gatsbyサイトへ</p>
      <Link to="/about">Aboutページへ</Link>
    </main>
  )
}

export default IndexPage

useStaticQueryはビルド時にGraphQLクエリを実行し、結果をコンポーネントに埋め込みます。ページ遷移には<a>タグではなくLinkコンポーネントを使うことで、リンク先ページのプリフェッチが自動的に行われます。

実践的なユースケース

Markdownでブログサイトを構築する

gatsby-source-filesystemとgatsby-transformer-remarkを組み合わせると、リポジトリ内のMarkdownファイルをブログ記事として扱えます。ページの動的生成にはgatsby-node.jsのcreatePages APIを使います。

// gatsby-node.js
const path = require("path")

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions

  const result = await graphql(`
    query {
      allMarkdownRemark {
        nodes {
          fields {
            slug
          }
        }
      }
    }
  `)

  result.data.allMarkdownRemark.nodes.forEach((node) => {
    createPage({
      path: node.fields.slug,
      component: path.resolve("./src/templates/blog-post.js"),
      context: { slug: node.fields.slug },
    })
  })
}

// src/templates/blog-post.js
import * as React from "react"
import { graphql } from "gatsby"

const BlogPost = ({ data }) => {
  const post = data.markdownRemark
  return (
    <article>
      <h1>{post.frontmatter.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.html }} />
    </article>
  )
}

export const query = graphql`
  query ($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
      }
    }
  }
`

export default BlogPost

Markdownファイルを追加するだけで、対応するページがビルド時に自動生成される仕組みです。

ヘッドレスCMSと連携する

WordPressやContentfulなどのヘッドレスCMSをソースプラグインで接続すれば、非エンジニアの担当者がCMS側で記事を更新するだけでサイトに反映できます。

// gatsby-config.js
module.exports = {
  siteMetadata: {
    title: "My Gatsby Blog",
  },
  plugins: [
    {
      resolve: "gatsby-source-contentful",
      options: {
        spaceId: process.env.CONTENTFUL_SPACE_ID,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
      },
    },
  ],
}

接続後は、CMS側のコンテンツもMarkdownと同じGraphQLインターフェースでクエリできるようになります。データソースが増えても、フロントエンド側の書き方を変える必要がないのが利点です。

画像を最適化する

gatsby-plugin-imageを使うと、レスポンシブな画像配信・遅延読み込み・ぼかしプレースホルダーの表示までを自動でやってくれます。

import * as React from "react"
import { StaticImage } from "gatsby-plugin-image"

const Hero = () => (
  <StaticImage
    src="../images/hero.jpg"
    alt="トップページのヒーロー画像"
    placeholder="blurred"
    layout="fullWidth"
  />
)

export default Hero