Ｗｅｂサイト高速化のための静的サイトジェネレーター活用入門　ＧａｔｓｂｙＪＳで実現する高速＆実用的なサイト構築

ＧａｔｓｂｙＪＳ×ＧｉｔＨｕｂ×Ｎｅｔｌｉｆｙ×Ｃｏｎｔｅｎｔｆｕｌによるサイト構築をステップバイステップで解説。「高速化＆最適化」「メタデータ対応」「ＳＰＡやＰＷＡへの対応」など、これからのＷｅｂサイトに求められる要素に対応するために。

GatsbyJSで実現する、高速＆実用的なサイト構築


「高速化＆最適化」「メタデータ対応」「SPAやPWAへの対応」など、これからのWebサイトに求められる要素に対応するための、静的サイトジェネレーターの活用書。
本書は「GatsbyJS（Gatsby）」を使って、「ReactやJavaScript（ECMAScript）に自信が無くても、実用レベルのWebサイトを構築できるようになる」ことを目標にしています。サンプルサイトを制作しながら、ステップ・バイ・ステップで解説していきます。
Gatsbyへのアプローチ方法は色々と考えられますが、本書ではHTML&CSSで作成したベースとなるページを元に、サンプルのサイトを作成していきます。
書籍の構成として、大きく2部構成になっています。
「イントロダクション」では、今どきのWebサイトに求められることや、静的サイトジェネレータの解説、Gatsbyについてまで解説しています。
「第1部　基本的なWebサイトの構築」では、トップページとアバウトページを作成し、基本的なWebサイトを構築します。それぞれベースとなるページを元に形にしていき、画像の最適化、高速化、メタデータの設定、PWA化などの設定を行います。
「第２部　ブログの構築」では、ブログを構築して、第１部で作成したサイトに記事ページと記事一覧ページを追加します。各ページはベースとなるページを元に、外部からコンテンツデータを読み込んで形にしていきます。第１部と同様に画像の最適化などの設定も行います。
巻末の「APPENDIX」では、gatsby-imageを簡単に扱えるようにする方法、Googleアナリティクスの設定、gatsby-plugin-sitemapプラグインによるサイトマップ作成、Internet Explorer11への対応など、Gatsbyに関する便利なトピックを紹介しています。

本書に沿って実際に手を動かして作っていくことで、「GatsbyJS」の主要機能と使い方をマスターできることでしょう。
また、GitHub、Netlify、Contentful、GraphQL、React、Node.jsなど、制作に関わるさまざまなツールや技術も適宜使用していきます。
ぜひ本書で、これからのWeb開発を体感してみてください。
なお、本書のサンプル制作で使用する素材、プロジェクトデータ、コンテンツデータはダウンロード可能です。

【特典】
以下の2つの特典PDFをダウンロードできます！
・セットアップPDF：Node.js、GitHub、Netlify、Contentfulなど開発環境の準備などをまとめたPDF。
・microCMS対応ガイド：ブログの記事管理にヘッドレスCMSのmicroCMSを利用する方法をまとめたPDF。

目次

イントロダクション
INTRO 1　今どきのWebページ&Webサイトに求められること
INTRO 2　CMSの利用と問題
INTRO 3　静的サイトジェネレータ（SSG）という選択
INTRO 4　Gatsbyという選択
INTRO 5　Gatsbyを学ぶために
INTRO 6　制作するサンプルについて

第1部　基本的なWebサイトの構築
Chapter1　ページの作成
STEP 1-1　下準備
STEP 1-2　トップページを編集してみる
STEP 1-3　JSX
STEP 1-4　トップページを取り込む
STEP 1-5　画像の表示
STEP 1-6　CSSを適用する
STEP 1-7 できあがったサイトを公開してみる

Chapter2　画像の最適化
STEP 2-1　Gatsbyで画像を扱うための準備
STEP 2-2　画像を最適化した設定に置き換える
STEP 2-3　Fragmentに置き換える
STEP 2-4　残りの画像も最適化した設定に置き換える
STEP 2-5　gatsby-imageで画像を切り抜いて表示する
STEP 2-6　SVGをインライン化する
STEP 2-7　背景画像をgatsby-imageで表示する
STEP 2-8　staticの画像を削除する
STEP 2-9　パフォーマンスを確認する

Chapter3　パーツのコンポーネント化
STEP 3-1　ページを増やす準備
STEP 3-2　ヘッダーをコンポーネント化する
STEP 3-3　フッターをコンポーネント化する
STEP 3-4　レイアウトコンポーネントを作成する

Chapter4　ページを増やす
STEP 4-1　アバウトページを作成する
STEP 4-2　Font Awesomeでアイコンを表示する
STEP 4-3　フッターのSNSメニューをアイコンで表示する
STEP 4-4　リンクを設定する
STEP 4-5　404ページを作成する

Chapter5　メタデータの設定
ほか

本の帯に関して

帯つきでの出荷はお約束しておりません。
商品ページに、帯のみに付与される特典物等の表記がある場合でも、確実に帯つきでの出荷はお約束しておりません。
また、帯は商品の一部ではなく「広告扱い」のため、帯の有無・破損による交換や返品は承っておりません。

版・表紙について

版・表紙（カバー）のご指定は承っておりません。ご注文いただくタイミングによっては、お届けする商品の版や表紙が商品ページ上のものとは異なる場合がございます。
また、初版にのみにお付けしている特典（初回特典、初回仕様特典）がある商品は、商品ページに特典の表記がされている場合でも、無くなり次第終了となります。