概要

GatsbyJS で高速・PWA 対応の実用 Web サイトを構築する

想定読者

HTML/CSS の知識はあるが React や JavaScript フレームワークに不慣れで、静的サイトジェネレーターを使ったモダンな Web 制作を始めたい Web デザイナー・フロントエンドエンジニア

こんな人には向いていない

• React と GraphQL をすでに実務で扱っている開発者には基礎説明の比重が大きく、応用的なトピックは少ない
• Gatsby v4 以降(v5 を含む)の最新 API や App Router 相当の機能を求める読者には、2020 年刊行のため記述が古い
• Headless CMS 設計や高度なデータレイヤー最適化を学びたい中上級者には内容が入門止まりになる

読了後にできるようになること

• GatsbyJS のプロジェクト構成と GraphQL データレイヤーの基本的な仕組みを理解できる
• gatsby-image を使った画像最適化(WebP 自動変換・遅延読み込み)を実装できる
• React コンポーネントを HTML/CSS ベースのデザインから段階的に組み立てる手順が身につく
• Netlify + GitHub によるデプロイ自動化と Contentful ヘッドレス CMS との連携ができる
• PWA 化(Service Worker・manifest)と OGP 等のメタデータ設定を実践レベルで行える
• サイトマップ生成・Google アナリティクス連携など公開後の運用設定まで一通り習得できる

本書のキー概念(章解説)

• イントロダクション — 静的サイトジェネレーターの役割と Gatsby の位置づけを整理する導入章。既にモダン Web に詳しければ読み飛ばし可
• 第 1 章 第1部: 基本的な Web サイトの構築 — トップページ・アバウトページの作成を通じ、画像最適化・PWA 化・メタデータ設定までを一巡する。本書のコアパート
• 第 2 章 第2部: ブログの構築 — Contentful から外部データを取得してブログ記事・一覧・カテゴリページを自動生成する。GraphQL データレイヤーの実践的な活用例
• 第 3 章 APPENDIX — gatsby-image の簡易利用法・Google アナリティクス・サイトマップ・IE11 対応・microCMS 連携ガイドを収録。公開後の運用設定として参照価値がある

ハイライト

• HTML&CSSで作成したベースとなるページを元に、サンプルのサイトを作成していきます。ReactやJavaScript（ECMAScript）に自信が無くても、実用レベルのWebサイトを構築できるようになることを目標にしています。(React 未経験でも着手できるというアプローチ方針が端的に示されている箇所)
• 画像の最適化、高速化、メタデータの設定、PWA化などの設定を行います。各ページはベースとなるページを元に、外部からコンテンツデータを読み込んで形にしていきます。(高速化のための具体的な実装項目が列挙されており、本書のスコープを把握しやすい)

編集メモ

Qiita 言及記事 0 件 / Rakuten ランキング情報なし。2020 年刊行で Gatsby v2-v3 世代を対象としており、現時点での外部シグナルは確認できない。入門書として一定の需要は想定されるが、定番指標となる外部エビデンスは取得できていない

読む前に押さえておきたいこと

• HTML/CSS によるページ作成の基礎経験(本書はこれを前提としている)
• Node.js のインストールと npm/yarn コマンドの基本操作
• Git の基本操作(clone・commit・push)と GitHub アカウント

学習のコツ

• 第1部を手を動かしながら通読してから第2部に進む構成になっているため、サンプルプロジェクトのダウンロードを最初に済ませておくと詰まらない
• React や JSX に初めて触れる場合は、書中で使われる ES6+ 構文(アロー関数・分割代入・テンプレートリテラル)を別途確認しながら読むと理解が深まる
• APPENDIX の microCMS 対応ガイドは特典 PDF として配布されており、Contentful の代替として国産 Headless CMS を試したい場合に活用できる
• 2020 年刊行のため Gatsby v5 の変更点(Script API・Slice API 等)は本書の範囲外。実務適用前に公式マイグレーションガイドを併読することを推奨する