Webサイト高速化のための 静的サイトジェネレーター活用入門
【特典付き! 】Webサイト高速化のための 静的サイトジェネレーター活用入門 (Compass Booksシリーズ)
マイナビ出版
著名：エビスコム
はじめに
本書の構成
ページ構成
ダウンロードデータ
イントロダクション
INTRO 1 今どきのWebページ&Webサイトに求められること
高速化&最適化
メタデータ
UX（ユーザーエクスペリエンス）
INTRO 2 CMSの利用と問題
INTRO 3 静的サイトジェネレータ（SSG）という選択
INTRO 4 Gatsbyという選択
INTRO 5 Gatsbyを学ぶために
INTRO 6 制作するサンプルについて
第1部 基本的なWebサイトの構築
第2部 ブログの構築
第1部 基本的なWebサイトの構築
Chapter1 ページの作成
STEP 1-1 下準備
COLUMN SETUP1 開発環境の準備
COLUMN yarnの場合
COLUMN npmとyarn
COLUMN gatsby new
STEP 1-2 トップページを編集してみる
STEP 1-3 JSX
STEP 1-4 トップページを取り込む
COLUMN HTML to JSXを使った交換
COLUMN 装飾目的の画像のaltの記述について
STEP 1-5 画像の表示
STEP 1-6 CSSを適用する
STEP 1-7 できあがったサイトを公開してみる
Chapter2 画像の最適化
STEP 2-1 Gatsbyで画像を扱うための準備
STEP 2-2 画像を最適化した設定に置き換える
COLUMN queryの構造
STEP 2-3 Fragmentに置き換える
COLUMN Fragment（フラグメント）
STEP 2-4 残りの画像も最適化した設定に置き換える
COLUMN 画像の遅延読み込み（Lazy Load）
STEP 2-5 gatsby-imageで画像を切り抜いて表示する
STEP 2-6 SVGをインライン化する
COLUMN SVGのコードについて
STEP 2-7 背景画像をgatsby-imageで表示する
STEP 2-8 staticの画像を削除する
STEP 2-9 パフォーマンスを確認する
COLUMN 固定サイズの画像を最適化する
Chapter3 パーツのコンポーネント化
STEP 3-1 ページを増やす準備
STEP 3-2 ヘッダーをコンポーネント化する
STEP 3-3 フッターをコンポーネント化する
STEP 3-4 レイアウトコンポーネントを作成する
COLUMN Gastbyにおけるスタイルの適用
Chapter4 ページを増やす
STEP 4-1 アバウトページを作成する
STEP 4-2 Font Awesomeでアイコンを表示する
COLUMN アイコン名とスタイル
STEP 4-3 フッターのSNSメニューをアイコンで表示する
STEP 4-4 リンクを設定する
STEP 4-5 404ページを作成する
COLUMN 開発用の404ページ
Chapter5 メタデータの設定
STEP 5-1 基本的なメタデータの追加
STEP 5-2 メタデータの値
STEP 5-3 ページごとにメタデータの値を変える
COLUMN 論理演算子
COLUMN 三項演算子
COLUMN テンプレートリテラル
COLUMN Reactコンポーネントとprops
STEP 5-4 ページのURLを明示する
STEP 5-5 OGPを追加する
COLUMN URLの末尾に付ける/（トレイリングスラッシュ）について
STEP 5-6 OGP画像を追加する
COLUMN 分割代入でコードをすっきりさせる
STEP 5-7 PWA対応
STEP 5-8 アクセシビリティやSEOのスコアを確認する
第2部 ブログの構築
Chapter6 ブログのコンテンツを用意する
STEP 6-1 コンテンツの管理方法
COLUMN Gastbyで扱えるデータソース
STEP 6-2 ブログの構造
STEP 6-3 Contentfulの準備
STEP 6-4 GraphQLでContentfulのデータを扱うための準備
COLUMN 環境変数
Chapter7 ブログの記事ページを作成する
STEP 7-1 記事ページを作成する
STEP 7-2 記事のタイトルを表示する
STEP 7-3 記事の投稿日を表示する
STEP 7-4 記事のカテゴリーを表示する
STEP 7-5 記事のアイキャッチ画像を表示する
STEP 7-6 記事の本文（リッチテキスト）を表示する
STEP 7-7 リッチテキスト内の見出しにアイコンを付ける
STEP 7-8 リッチテキスト内の画像を表示する
STEP 7-9 リッチテキスト内の改行を
に変換する
COLUMN 記事データの扱い（AST）
Chapter8 ブログの記事ページを自動生成する
STEP 8-1 記事ページを自動生成する
COLUMN gatsby-node.js
COLUMN Promiseとasync/await
STEP 8-2 前後の記事へのリンクを設定する
STEP 8-3 記事ページのメタデータを設定する
COLUMN メタデータが認識されることを確認する
Chapter9 ブログの記事一覧ページを作成する
STEP 9-1 記事一覧ページを作成する
STEP 9-2 記事のタイトルを表示する
STEP 9-3 記事のアイキャッチ画像を表示する
STEP 9-4 リンクを設定する
STEP 9-5 メタデータを設定する
STEP 9-6 １ページの記事の表示数を変える
STEP 9-7 複数ページに分けた記事一覧ページを生成する
STEP 9-8 ページネーションを追加する
STEP 9-9 ナビゲーションメニューに記事一覧へのリンクを追加する
STEP 9-10 トップページに最新記事を表示する
Chapter10 カテゴリーページの作成
STEP 10-1 カテゴリーページを作成する
STEP 10-2 ページネーションなしでカテゴリーページを生成する
STEP 10-3 カテゴリーページの見出しとメタデータを設定する
STEP 10-4 ページネーションを元に戻す
STEP 10-5 カテゴリーページにアクセスできるようにする
STEP 10-6 パフォーマンスを確認する
APPENDIX
APPENDIX A gatsby-imageを簡単に扱えるようにする
APPENDIX B Googleアナリティクス
APPENDIX C サイトマップ
APPENDIX D RSS
APPENDIX E Google Fonts
＜ｌｉｎｋ ／＞で設定
フォントデータのセルフホストで設定
フォントデータのセルフホストと先読みで設定
COLUMN Typography.js
APPENDIX F IE11対応
索引
Gatsby CLIのコマンド