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

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

昨日、以下のようなツイートをしました。

Gatsbyが目指しているところは「誰でもwebsiteを作れるようになる事」。

それを実現するために少ないcodeでwebを作れるように、プラットフォームを整えている、との事。

Gatsby Wants to Be Orchestration Layer for Building Websites – The New Stack https://t.co/pgnQkqVMuh

— 筋肉めがね@Gatsbyブログ (@KinnikuMeganeDe) June 8, 2020

この記事の基になっているのは、Gatsby CEOが書いた以下のブログですが、ざっくり言うと、シリーズBで$28Mの資金調達をした、という話と、そしてwebを誰もが簡単に作れる環境を整備したい、という内容が書かれています。

Gatsbyの今後の行く末が楽しみです。

Gatsby Raises $28M Series B to Become How the Web is Built

それでは、昨日に引き続き、Gatsby本「Web高速化のための静的サイトジェネレーター活用入門」の書評を書いていきます。

本日は第1部Chapter3から5までの内容です。

第1部Chapter3 パーツのコンポーネント化

Chapter3では、実際にindex.jsファイルの中身を、特にヘッダー部分とフッター部分を、それぞれコンポーネント化していくプロセスを学ぶ事ができます。巷で言う所のリファクタリングにつながる内容です。

1点、僕自身がきちんと理解できていなかったことは、ヘッダーやフッターのコンポーネント内で、GraphQLから取得した値を使うようにするには、useStaticQueryを使う必要がある、という事です。 propsで渡すこともできるし、StaticQueryを使うこともできるんですね。

useStaticQueryについては、こちらのブログがとても参考になります。
[GatsbyJS] React Hookを使用してGraphQLでナビゲーションにカテゴリーリストを表示する

また、コンポーネント内でGraphQLを使う場合、クエリの結果を受けて、コンポーネントを出力する形になるので、「関数の処理が1つの場合にはreturnが省略できる」というJavaScriptのルールからは外れる、という事です。 そのため、returnが必要なんですね。

もう1点、個人的に気になった箇所は、GatsbyでCSSを使う方法には大きく4つの選択肢があると言う事です。

• グローバルCSS: このブログでも採用しています。
  gatsby-brower.js内でimport("./src/index.scss")としております。
• インラインスタイル: 直にjsx内に記述する方法です。
  例えば、style={{ color: red }}
• CSSモジュール: 各コンポーネント毎にcssのmoduleを準備し、コンポーネント特有のstyleを準備できます。
• CSS in JS： 僕自身は使った事がありませんが、Gatsby公式ページでは、styled-components, emotionが紹介されています。

第1部Chapter4 ページを増やす

このChapterは、Gatsbyを数ヶ月触ったことのある方にはサクサクっと読める内容だと思います。

SNSのアイコンとしても広く使われているFontAwesomeが登場します。そして、404ページの作成も行います。

FontAwesomeは、最近バージョン6が出ましたが、個人で使用するには若干値段が高いですね。
FontAwesome6

第1部Chapter5 メタデータの設定

第1部最後のchapterです。

SEOで重要となるメタデータの設定を行なっていきます。

特に以下の内容を学ぶ事ができます。

• サイト全体で使用する共通のmetaデータを設定する方法
• ページ毎にmetaデータを設定する方法
• OGPの設定
• PWAの設定

OGP、PWAについては、このブログでも以前対応しましたので、それぞれ以下の記事に書いております。

当サイトをPWAに対応させました。

【連載】Gatsbyブログのデザインをワードプレスちっくにする手順（その4）twitterシェアボタンとtwitter cardを導入しました。

このchapterは、自分で作っているGatsbyブログのmetaデータを見直すきっかけになりました。

まとめ

今の所、そこまで時間をかけることもなく読めて、かつ大事なポイントを簡潔に学べる本です。次は第2部に進みます。