GatsbyJSの本 『Webサイト高速化のための 静的サイトジェネレーター活用入門』 が出来上がりました。
意外なところに手を出してきたと思われるかもしれませんが、きっかけは WordPress ＆ Gutenberg なんです。
2015年の Automattic社 Matt Mullenweg 氏の "Learn JavaScript, Deeply" という言葉。そして、バージョン5.4までたどり着いた現在の WordPress と、見え始めた Block Based Theme。
世間では WordPress=PHP という認識がまだまだ強いわけですが、とっくに、Gutenberg=JavaScript（React）なわけです。
すでに見えている未来を考えれば、WordPress=JavaScript と言われる時代もそう遠くはないのではとさえ思います。
なので、自分たちも JavaScript（React）をもっと身近なものにしておかなければと動き始めました。
入門者の通常ルート通り、Reactの公式チュートリアルで三目並べをこなし、ToDoリストをこなし…。
基本的なことは見えるようになったものの、そこからが広がらない。仕事でWebサービスのようなものをどんどん作るわけではないもので、手に馴染んだ言語に流れてしまうんですよね。
そこで、JavaScript や React にもっと触れるきっかけになるものはないかと探していたところでたどり着いたのが、Jamstack というキーワードとともに聞こえてきた SSG（静的サイトジェネレーター）の「Gatsby（GatsbyJS）」でした。
早速、WordPressを利用するためのスターター（WordPressのテーマのようなものです）を使ってチャレンジを始めたのですが、見事に返り討ちに。スターターの範囲で動かすことはできるものの、カスタマイズを始めるためにはソースを読みこなさなくてはならず、一気に壁が高くなり……と、覚えのある展開に。
それから数ヶ月放置していたのですが、やっぱり気になるということで再チャレンジを始めます。今度は、GatsbyJSの公式チュートリアルから。このチュートリアルは非常に良くできていて、Gatsby の概要を理解するには十分な構成になっています（有志の方による翻訳も進んでいるようです）。
ただ、色々と足りないんです。
Webページを作ってきた側の人間だからなのかもしれませんが、HTML&CSSで当たり前にできていたことが思い通りにできないし、その方法が見えてこない。結果として、GatsbyJSの可能性や仕事で使える！ という確信を持つところまでは行かない…。
特に画像まわりの諸々はどうしたものか？ という大きなモヤモヤが残るのがよくありません。
それでも何かが引っかかったのでドキュメントを読み漁り、試しにと ep.ebisu.com（エビスコムのオリジナル電子書籍のサイト）をGatsbyJS化してみたり…。
特別なチューニングをすることなく "blazing fast（爆速）" なサイトが出来上がってしまうことを理解できた頃には、もう手放せない存在になっていました。
「手頃」で「手軽」な感じが本当に便利なんです。
ちょっと懐かしい感じもあったりして。
これまでWebページを作ってきた人にこそ、GatsbyJSを使ってほしい。
でも、あのチュートリアルだと断念してしまう人も多いかも…。
そう思ったことから、今回の企画が動き始めます。
今回の本は、これまでにHTML&CSSでページを作成してきた方が実用レベルで GatsbyJS を使い始めることを目標に構成しています。
他のCMSに慣れている方であれば、その経験を生かせる環境であることも理解していただけるでしょう。
作成していくサンプルはこんなサイト（ https://gatsby-essentials.netlify.app/ ）です。
GatsbyJSの最初の使われ方としてはこんな感じでは？ということで、HTML&CSSで作成したページをGatsbyJS化し、ブログを組み込む形で解説を進めています（React成分を薄めるためにもこの選択となりました）。
データソースとしては、ヘッドレスCMS（Headless CMS）の Contentful を採用していますが、GatsbyJSのチュートリアルで一般的なマークダウン（Markdown）ではなく、リッチテキスト（RichText）を選択しています。
さらに、従来のWebページであれば気にならなかった些細なことが高速化の結果として問題点として見えてくる… そんなポイントの解決方法なども盛り込んでいます。
これまでのGatsbyJSのチュートリアルとはちょっと違う切り口となっていますが、この本を終えたときには公式の膨大なドキュメントが怖くなくなっていることを期待して…
GatsbyJS の入り口として、また、GatsbyJS を通して JavaScript や React に触れるきっかけとして活用していただければ幸いです。
