10月28日追記
Gatsbyブログについて、初noteを書きました。
【完全版】爆速GatsbyでWordPressちっくなブログを作る全手順

こんにちは、筋肉めがねです。

爆速（Blazing fast）で有名なGatsbyを使ってブログを作りたい、でも日本語での纏まった情報がないのでどこから手をつければ良いか分からない、そんな悩みを解決してくれる本がようやく出版されました。

以下はGatsby本を書いた背景について、著者の方が書かれたブログです。 GatsbyJSの本を書いた理由

僕自身、Gatsbyを使い始めてもうすぐ半年が経ちます。これまで、様々な方のブログを参考にしながらGatsbyブログを作ってきました。GraphQLの扱い方、Gatsbyのコンセンプトが理解できず遅々として中々進まなかった事の方が多いように思いますが、それでも何とかここまで進めてこれました。

そんなGatsby愛好者の背中を押してくれる良書（しかも日本語！）が発売された、という事で、ブロガーの端くれとして書評を書こうと思います。

イントロ、そして第1部のChapter2まで読みましたので、先ずはそこまでの内容です。

イントロ

イントロでは、昨今のWebサイトに求められている事は、高速化、最適化とし、またそれ以外にも様々な事を考慮する必要がある、と書かれています。

一例をあげると、

• svgの活用
• WebPの活用
• メタデータ
• SPA
• PWA
• Jamstack

これらのポイントを押さえながら、webサイトを作っていく事が求められている、と。

そして、静的サイトジェネレーター、中でもGatsbyを使う事で、それらを解決し、さらにはセキュリティが高く、Jamstack構成のサイトを作れる、との事です。Jamstackという言葉は最近良く目にしますね。これは、JavaScript, API, Markupの頭文字をつなげ、stackと合わせた造語だそうです。

Jamstackの公式サイト

公式ページによるJamstackの説明をdeepLを使って和訳すると、

ファイルを事前にレンダリングし、CDNから直接配信することで、Webサーバーの管理や運用の必要性を排除し、高速で安全なサイトやアプリを配信します。

Jamstackとは「高速で安全なサイトやアプリを作れる」と理解しておけば問題ありません。

svgは、特にヘッダーやフッターのロゴに使われている画像フォーマットです。特徴としては、拡大、縮小しても画質が劣化しない点です。また、WebPはGoogleが開発した画像フォーマットで、サイトが読み込まれて画像が表示されるまでの時間を、これまでの規格と比べると大幅に短縮できるものです。

SPAとは、Single Page Applicationの略で、その名の通り単一のページで動作するものなのですが、どういう事かと言うと、ページ遷移時にページ全体を読み込んで書き換えるのではなく、ページ内のHTMLの一部をJavaScriptで差し替えて表示する、というものです。それで高速化を実現しているのですね。

PWAについては、以下の記事に書いておりますので、そちらを参考にしていただければと思います。
Gatsby.jsとNetlifyでブログを作りました。ドメイン以外は全部無料です。

また、本書ではGithubにて提供されているコードを使って、実際に手を動かしながら学ぶ手法が取られているので、理解が進みます。

第1部Chapter1 基本的なWebサイトの構築

Chapter1では、実際にGatsby libraryの1つを使って、サイトを作り始めます。

Chapter1で書かれている内容は、何かしらのWebサイトを作った経験のある方であれば、スムーズに読み進めていける内容だと思います。

以下、主なポイントです。

• JSXとHTMLの違い
• 画像の表示方法
• faviconの表示方法
• cssを適用する方法
• サイトをNetlifyを使って公開する方法
• パフォーマンスの測定方法

JSXとは、Reactの公式ページによると「JavaScriptの構文の拡張」と言う事ですが、要はJavaScript内にHTMLを記述できるようになったものと理解しておけば大丈夫でしょう。

第1部Chapter2 画像の最適化

Chapter2は、Gatsby初心者の方だけでなく、中級者の方にとってもとても役に立つ内容だと思います。

特に、

• gatsby developや、gatsby buildで上手く動かない時は、gatsby cleanでcacheを削除する。
• ビルドしたサイトについて、サーバーにアップせずに表示を確認するときには、gatsby serveを使う。

• gatsby-imageを使う事で、以下を実現可能である。

  劣化が目立たない範囲で圧縮
  ファイルサイズが小さくなるフォーマットWebPを使用
  デバイスの画面サイズや解像度に応じて適切なサイズで表示
  遅延読み込み（Lazy load）

• よく使うGraphQLのクエリパターンは、Fragmentにする事で簡単に再利用する事ができる。
• jpeg, svgの画像を最適化する方法。svgはインライン化で最適化する。
• ページコンポーネントでのクエリの結果はdataプロパティになって返ってくる。
• GraphQLで同じフィールドから異なるデータを呼び出しているとき、コンフリクトが生じてエラーとなる事がある。GraphQLのエイリアスという機能でこれを防ぐ。
• fluid（レスポンシブで可変な画像）だけでなくfixed（固定サイズ）な画像の最適化も可能である。
• 画像の劣化を防ぐには、クエリのfluidの引数でqualityを追加する。

この「筋肉めがね」のブログでも、画像の最適化を行おうと思います。

まとめ

Gatsbyを使い始めてからもうすぐ半年経ちますが、このタイミングでこういう本が出版された事は本当にありがたい事です。引き続きChapter3から読み進め、随時書評を書いていきます。