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 1ページの記事の表示数を変える
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
 <link />で設定
 フォントデータのセルフホストで設定
 フォントデータのセルフホストと先読みで設定
 COLUMN Typography.js
APPENDIX F IE11対応

索引
Gatsby CLIのコマンド