【特典付き! 】Webサイト高速化のための 静的サイトジェネレーター活用入門 (Compass Booksシリーズ)

著者 : エビスコム

• マイナビ出版 (2020年6月1日発売)

作品紹介・あらすじ

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。

感想・レビュー・書評

[songupさんの感想 · 2021年10月7日]

7章まで読んだ。Reactは触ったこと無かったが、１〜２章を読んだら何となく分かるように書かれていた。

Webページからブログ記事の作成までサンプルコードを基に説明されており実践的である。

著者プロフィール

エビスコム
さまざまなメディアにおける企画制作を世界各地のネットワークを駆使して展開。コンピュータ、インターネット関係では書籍、デジタル映像、CG、ソフトウェアの企画制作、WWWシステムの構築などを行う。 主な編著書： 『作って学ぶ　Next.js/React　Webサイト構築』マイナビ出版刊『作って学ぶ HTML&CSSモダンコーディング』『HTML5＆CSS3デザイン　現場の新標準ガイド【第２版】』『Webサイト高速化のための 静的サイトジェネレーター活用入門』 『CSSグリッドレイアウト デザインブック』『WordPressレッスンブック 5.x対応版』、ソシム刊『フレキシブルボックスで作るHTML5&CSS3レッスンブック』『CSSグリッドで作るHTML5&CSS3レッスンブック』『HTML&CSS コーディング・プラクティスブック 1～7』、エビスコム電子書籍出版部刊『グーテンベルク時代のWordPressノート テーマの作り方（入門編）』『グーテンベルク時代のWordPressノート テーマの作り方（ランディングページ＆ワンカラムサイト編）』

「2023年 『作って学ぶ　WordPress ブロックテーマ』 で使われていた紹介文から引用しています。」