Gatsby.jsって？
この記事はGatsby.js Advent Calendar 2019 1日目の記事です。
2日目の記事は@aimofさんのJSの文法すら怪しいフロント初心者がblog用のgatsby starter（っぽいもの）を自作・公開してみたです!!
Gatsby.jsはReactで作られた静的サイトジェネレーターです。内部的にGraphQLを用いてデータを取得し、markdownからHTMLを生成、などの処理を簡単に行うことができます。
静的サイトジェネレーターが何かと言うと、何かしらの言語で書かれたソースから、静的なHTML/CSS & JavaScriptを生成するツールのことを言います。
今現在どの静的サイトジェネレーターが人気かというのを一覧で見れるStaticGenサイトもあります。
Starの数を見るとあのnuxtよりも多いんですよね、日本で使っている方をあまりみないのが不思議なくらいです。
このサイトには、他にも割とモダンなフレームワークが目白押しなので、ぜひ見てみてくださいね。
さて、以下ではGatsbyのいいところを紹介していきます。
これを見ればあなたもGatsbyが使いたくなること間違いなし！というテンションでいきます。
まず簡単なまとめとして、Gatsbyのいい点を列挙し、さらに深掘りする構成で書いていきます。自分が思うGatsbyの素晴らしいポイントは以下です。
- 脳死でサイトが作れる簡単さ & サーバを意識しなくていい！
- 生成されたサイトがSPA & サイトがとにかく早い
- プラグインによって導入が超速 -> めんどくさいことをしなくていい
- 初心者がとっつきやすい
ぜひ節目ごとに「Gatsby最高！」と叫びながら読んでみてください。気持ちが高まります。
叫びたくないですか？では私が代わりに叫びます。
Gatsby最高！！！！！
Gatsbyのよいところ
脳死でサイトが作れる簡単さ & サーバ ガン無視！
熟達したReactユーザーのあなたにはこんな経験があるかもしれません(熟達していない方は少しお待ちください)。
「適当にペライチのサイトを作りたいだけなのに、Webpackの設定とかがめんどくさい...URLにハッシュがついて汚いな...SEOも気にしたいけどSSRをしないと...」
create-react-app使えばええやんと思ってる方もいるかもしれませんが、HashRouterに縛られざるを得なかったり、SSRが面倒臭くてしんどかったりと、少し思いつくだけでも無限の苦しみがあります。
というか、create-react-appで謎のバグを踏むことが多くてキレそうになった人は多いんじゃ無いでしょうか。
せっかくSPAでDX(開発体験)よく、気持ちよく開発ができると思ってたのに...モダン技術でもめんどくさいことばかり...そう思った回数も1億回を超えた頃でしょう。
Gatsbyはそんな煩わしさからあなたを解放します。
Gatsbyはなんといっても静的サイトジェネレーターです。なので、一旦SSRという概念を忘れられます。もう「フロントエンド書いてるのになんでサーバのこと考えなかんねん！」みたいな気持ちになることがなくなります。
しかも、ちゃんとホスティングしているサーバには静的なHTMLが置いてあるので、URLを直叩きしようがリロードしようが、404エラーが帰ってくることはなくなります。URLも綺麗！
生のReactやVueだとハッシュを消すために苦心するところですが、Gatsbyならノー設定でこれができます。SEOのためのSSRとかいう面倒臭い作業からも完全解放。しかもサーバに関するルーティング関連のコードを何も書かなくていいシンプルさです。
また、あくまでGatsbyによって生成されるサイトはHTML&CSSを基本とした静的なサイトです。なので、AWS S3やGitHub Pages、Netlifyやfirebaseなどの静的サイトホスティングサービスならどこでも置けます。
これは非常に便利で、サーバ付きのPaaSを用いる必要がなくなり、それによって相対的に設定も少なく簡単にデプロイが出来ます。また、これらの静的サイトホスティングサービスは、一定以内なら無料であるところが多いので非常に経済的です。
私はNetlifyで自分のポートフォリオサイトを運用していますが、GitHubにpushするだけでデプロイが完了し、さらに高速かつ無料という気持ち良さを味わっています。
ではGatsbyの気持ち良さが分かってきたところで、とりあえず叫んでおきましょう。
Gatsby最高！！！！！！！！！！！！！！！！！！！！！
とにかくGatsbyは開発体験が最高すぎるんですよね。
いやほんと、なんでReact書いてんのにexpress書くんじゃみたいな気持ちになることがなくなるので、純粋にフロントエンドのためのコードに集中できる感じが大変良いです。
12/2 追記
こちらですが、コメントにてご指摘を頂いた通り、next v9ではルーティングのためにexpressを書く必要が無くなっているようです。ちょっとnextに浮気したくなってますが気のせいです。また別の話です。
コメントくださった@ykztsさん、ありがとうございます！
生成されたサイトがSPA & サイトがとにかく早い
Gatsby.jsは公式サイトに「blazing fast🔥」と自分で書いちゃうほど早いフレームワークです(blazing fastはめっちゃ早いくらいの認識でよさそう)。
この早さはどこからくるかというと、Gatsbyによって生成されるWebサイトはSPAとして出力されるからと、様々な最適化・コード分割をGatsbyがやってくれるからです。
なんと静的サイトとしてビルドされたGatsbyのサイトはSPAであり、初回ロード以降はロード時間ゼロで画面遷移できます。
さらに、Gatsbyが専用のLinkコンポーネントを用意しており、それを用いると、ページ内に入っているリンクを自動で検出してプリフェッチを行ってくれたりします。必要そうなデータは自動で読み込んでくれるということです。
さらにさらにSSRと同様、配信されるのはHTML/CSS & JavaScriptなので、クライアントサイドでDOMを構築する時間も不要となり、JavaScriptの実行時間を短縮できます。これにより初期表示もはやい！
Wordpressのように動的にページを作成することも無くなるので、サーバサイドのプログラム実行時間とクライアントサイドのプログラム実行時間を両方削減することが出来ます。
しかも、Gatsby製のサイトは簡単にLighthouse(Chromeの拡張機能として提供されているサイトパフォーマンス計測ツール)にて、様々な項目で簡単に100点を取れるほどの性能があります。
つまり、Gatsby製のサイトは簡単に構築でき、さらにパフォーマンスは最高、SEOもバッチリと無敵のスペックを誇ります。
そろそろ叫びたくなってきましたよね？
それではご一緒に
Gatsby最高！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
プラグインによって導入が超速
Gatsbyにはプラグインという機能が存在しています。これは、npmパッケージとして公開されたGatsby用のプラグイン(拡張機能)を、簡単に導入できるという優れものです。
これによって、非常に楽にMarkdownファイルをブログとして公開するためのソースにできたり、QiitaやCMS(Wordpressなどのコンテンツ管理サービス)の記事を引っ張ってきて自分のブログに移植したり、PWA対応を一瞬で終わらせたりと、高速かつ簡単に様々な機能を追加できます。
Wordpressにもプラグインがあり、その膨大な拡張機能によって様々なことを実現できます。Gatsbyも同様に、様々な機能を自分で開発し、外部に公開することが出来ます。
Wordpressにおけるテーマのような機能も実装されており(そのままズバリthemeと言います)、デザイナーさんが作られた素晴らしいサイトテーマを導入することも出来ます(まだ量は多くはありませんが)。
これらの拡張機能によって、電光石火でサイトを公開することが出来ます。最高かな？
Gatsbyは内部的にGraphQLを使っています。ただ、これはGraphQLを覚えなければいけないかというとそうではなくて、簡単なお作法を覚えるだけである程度はかけてしまいます。
さらに、このGraphQLはビルド時限定で働くので、クライアントサイドでは特に難しいことを考える必要がなく、普通にReactアプリケーションを書くだけで良いです。
また、静的サイトジェネレーターではありますが、ちゃんとaxiosなどを使った、非同期のdata fetchも出来ます。通常のReactアプリケーションとやれることは同等です。
GraphQLを使うと何がいいかというと、これによりデータソースへのインターフェイスを一元化できます。例えばQiitaとはてなブログの記事の構成や形態はかなり違ったものになっているかもしれません。
しかし、その違いをプラグインが吸収して統一することで、開発者はデータソースがなんであるかを意識せずに、ただクエリを書くだけで必要なデータを取得できます。
こういった抽象化もちゃんとやっているのがGatsbyの良さだと思います。
では気持ちもノってきたと思うので叫びましょう。
Gatsby最高！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
初心者がとっつきやすい
私は何気にこれが一番大事な気がしています。
例えば初心者の方がcreate-react-appでまともなプロジェクト構成をしようと思うと、なかなかキツイと感じるのではないでしょうか。
私は、このReactに対する取っつきづらさに、Webpackやbabelの設定が少なからず関わっていると思います。せっかくReactを勉強しようと思ったのに、謎の設定ファイル的なものに煩わされるのは嫌ですよね。
Gatsbyはこういった面倒くささを、プラグインによって隠蔽してくれます。もちろん複雑なカスタマイズも出来て、やりたい時には新しく設定ファイルを作るだけで良いです。
さらに、Gatsbyにはstarterというものがあり、Gatsbyが用意しているCLIのコマンド叩くだけで、先人が作ったテンプレートがダウンロードでき、すぐにデプロイできます。
初心者の方にとっては、すぐに動くものが作れて、しかも設定が少ない。これは非常に魅力的な点なんじゃないかと思います。
また、GatsbyはRoutingをディレクトリ構成で表現する(pages/home.jsに対してexample.com/home が対応する)ので、ルーティングをわざわざ追加したりといった面倒な作業がありません。
Gatsbyはただの静的サイトジェネレーターというよりは、フロントエンドアプリケーションフレームワークとしての側面も持ち合わせており、ここがReact初心者の方に優しく、とっつきやすさを出している部分だと思います。
なにより、自分が勉強しているフレームワークが、モダンでなおかつパフォーマンスもいいと聞いたら、やる気出ちゃいますよね。
ただ、初心者の方にお勧めできない点もあって、それはやはり日本語リファレンスの少なさかなと思います。何を調べるにしても、基本的には英語の記事を漁ることになるので、ここは日本語の記事が増えてほしいなぁと思うところでもあります。
ただ、Reactをメインで書く上で面倒なエラーを回避出来るという利点と天秤にかけると、そもそもGatsbyで英語の記事を読む必要があるのはGatsbyに関する情報が欲しい時で、Reactに関しては十分日本語の記事があるため、まだまだGatsbyの良さは揺るがないな、と思っています。
ではReact初心者のあなたも叫んでみましょう。
Gatsby最高！！！！！！！
！！！！！！！！！！！！！！！！！！！！！！
！！！！！！！！！！！！！！！！！！！！！！！
！！！！！！！！！！！！！！！！！！！！！
！！！！！！！！！！！！！！！！！！！！！！！！！！！
まとめ
Gatsbyは(というかそもそもReactが)日本ではそんなに流行っていません。
しかし、Reactを用いた開発には、大規模プロジェクトにおけるコードの保守性や、その開発体験に強い魅力があると思っています。
特に初心者やReactに慣れていない方には、Gatsbyの「簡単に・ハイパフォーマンスなサイトをサーバーレスで」出来る能力には、大変な魅力を感じざるを得ません。
本記事ではGatsbyの細かい技術的な部分には触れませんでしたが、ぜひあなたもGatsbyに入門して、自分だけのサイトを作ってみて頂きたいです。
あなたに良きフロントエンド人生が訪れんことを！
最後に叫んでおきます。
Gatsby最高！！！！！！！！！！！！！！！！！！！！！！！！！！！！
12/03追記
3日目も自分が書くことになりました。Gatsbyに慣れていない人から、Gatsbyの内部構造バッチリの人まで、誰でも使える超高速のスケルトンを作成したという記事です！
Gatsbyの超高速テンプレート(PWA, MDX, TypeScript対応)を作ったヨ！
よければこちらもご覧ください🌚