今回はうちのサイトでも使っているGatsby.jsについて、知っておきたい内容やGatsbyを使うメリットなどを紹介していきたいと思います。

Gatsby.jsとは

はじめにGatsby.jsとはどういったものなのか、簡単にまとめてみました。

Gatsby.jsをひとことで言えば、React.jsをベースにした（超高速なウェブサイトを制作できる）静的サイトジェネレーターです。

GatsbyサイトはReactアプリケーションでもあるので、ページ遷移のときにはページの差分が読み込まれます。

企業サイトや店舗サイト、ポートフォリオサイトといったシンプルな機能のサイト以外にも、外部APIと連携することで通販サイトや会員制サイトを作ることもできます。

いったんここでGatsbyについてまとめてみると、次のようになります。

読み込みが完了したらReactが引き継ぎ

Gatsby.jsでは最初の読み込みが完了したら、そこからはReactが引き継いでシングルページアプリケーション（SPA）と同じような状態に。

ステートやフックといったReactの機能を使いながら、さまざまな形式のデータと組み合わせてHTMLサイトを作ることができます。

Gatsbyで作られたサイトを見てみよう

では、どんなサイトがGatsbyで作られているのでしょうか？さっそく見ていきましょう????

日本のGatsbyサイト

まずは日本のGatsbyサイトから。

くふうカンパニーという会社のコーポレートサイト。かわいいイラストとスクロールアニメーションが使われています。

アイデアルデザイナー@綿貫佳祐さんのポートフォリオサイト。APIを使ってFigmaの活動量グラフを載せているのもおもしろいですね。

@kentorkさんが公開している縦書きテンプレートを使って作られた
ブログ。ソースコードも縦書きというなかなかお目にかかれないサイトです。

@diff001aさんの
DIFF001A’S BLOG
今風のデザインで、検索などの機能も実装されています。

@えびけんさんのブログ
ライトモードやダークモードに切り替えられます。

海外のGatsbyサイト

次は海外のGatsbyサイトです。意外と有名なサイトもGatsbyで作られていますね。

やっぱりReact.js公式サイトはGatsbyで作られていました。

Gatsby StoreというGatsby製品を販売している通販サイトも、もちろん公式なだけあってGatsby製。

他には電気シェーバーで有名なブラウンの企業サイトや、

Airbnbのエンジニアリング&データサイエンスのサイト。

オンラインのデザインツールとして有名なFigmaの表側のページ。

年ごとのJavaScriptのトレンドや情報を紹介するState of JavaScript。2020年はどんな調査結果が発表されるのでしょうか。

flamingoというコスメ関連の通販サイトもGatsbyで作られていました。

検索APIサービスAlgoliaのサイトもGatsbyで作られているみたいですね。

Gatsbyで作られたサイトを知りたいときは公式ショーケースを見るのがオススメ

Gatsby公式サイトでは、Gatsby.jsで作られたサイトを紹介するショーケースというページがあります。

企業サイトやアプリの紹介サイト、ポートフォリオサイト、ECサイトなどなど、カテゴリー別に1000近くのサイトが紹介されています。Gatsbyを使うか検討中な方は確認してみるといいかもしれないですね。

Gatsby.js のメリット

ここまでGatsby.jsについて説明してきましたが、Gatsbyにはどういったメリットがあるのでしょうか？

メリット1: サイトを高速化できる

Gatsbyのメリットとして真っ先に上がりやすいのが、サイトの表示速度です。

ユーザーがアクセスするときにはビルドが終わっている

Gatsbyではビルドが実行されたときにレンダリングされます。

ユーザーがアクセスしたときには、ビルドが終わったHTMLの状態なので、バックエンドへのリクエストが必要になりません。

画像の表示速度アップの工夫が施されている

Gatsbyでは読み込み速度に影響が大きい画像をとくに重視しており、開発者が一つひとつ対応しようと思うと手間のかかる処理を最初から自動で行ってくれます。

最初に極小の画像を配信して速攻で表示してユーザーの操作を可能に。
そして、通常サイズの読み込みが完了したら画像を差し替えて表示してくれます。

Gatsby.jsが画像関係で行ってくれる処理をまとめると、次のようになります。最初からこれだけ画像関係の対応をしてくれるのはほんとありがたいですね。

リンクのプリフェッチ（リンク先読み）

Gatsbyでは初回の読み込みが完了したら、追加のJavaScriptをバックグラウンドで先読み（プリフェッチ）してくれます。そのため、ユーザーが別のページに移動するときには、PJAX（pushState + AJAX）のように新しくページを読み込まず、必要な部分だけを更新してくれます。

最初にページを読み込んだら、その後のページ遷移がより高速に！

必要なリソースをインラインで読み込んでくれる

Gatsbyではファーストビューで必要なCSSは、外部ファイルではなくインラインで読み込んでくれます。

外部ファイルや読み込むファイルの数が減る！

CSSやJavaScriptの外部ファイルは読み込みが完了するまでページが表示されないので、レンダリングをブロックしないためには（本来なら）クリティカルレンダリングパスに必要なCSSを抽出したり、いろいろな処理が必要になります。

メリット2: データソースの選択肢が多い

GatsbyではGraphQLを通していろいろな形式やサービスからデータを引っ張ってくることができます。下に挙げてみるとマークダウン以外にもいろいろありますね。

ちなみにCMS（コンテンツ管理システム）も以下のようにいろいろなCMSを利用することができます。WordPressにも対応しているのは嬉しいところですね。

メリット3: セキュリティ面での安全性が高い

Gatsbyはデータベースやバックエンドを使わずにHTMLサイトが作れるので、セキュリティ的にも安全性が高まります。

もちろんGatsbyで作れば絶対に安全だ！と言い切ることはできませんが、安全性が高いとクライアントも喜んでくれますし、開発するときにもメンテナンスするときにもGatsbyのメリットになるんじゃないかと思います。

メリット4: モダンな開発環境

Gatsbyでは開発者が気持ちよく作業することを重視しているらしく、React以外にもwebpackやGraphQL、Babelといった開発効率を上げるモダンな技術を使うことができます。

GraphQL

Gatsbyサイトでは、データソースと連携させるときにGraphQLを利用します。
REST APIでは場合によっては何回かに分けてリクエストを送らなければならないこともありましたが、GraphQLを使えば利用したいデータを一発で取得できます。

GraphQLのIDE（統合開発環境）「GraphiQL」では、チェックボックスをポチポチ押しているだけでGraphQL用のコードが生成されます。

ホットリロード

開発中にソースコードを編集・保存したら、変更部分だけを更新して自動でブラウザをリロードしてくれる機能です。
最近はホットリロードに対応しているフレームワークが増えていますが、Gatsbyでも設定なしでホットリロードを使うことができます。

スタイル関係

Gatsbyサイトの開発ではStyled Componentsやemotion、Sass、LessなどのCSS-in-JSやメタ言語を使うことができます。

モダンな構文を使える

Gatsbyで書いたJavaScriptやTypeScriptのコードをコンパイルされる環境が整っているので、ES6やES7といったモダンな構文も設定なしで使うことができます。

メリット5: サーバーのコストを抑えて運用できる

Gatsbyサイトは静的サイトなので、WordPressのような動的サイトに比べてサーバーの運用費用を安く抑えることができます。

Netlifyでは無料でGatsbyサイトを運用できます。
自動デプロイやフォーム機能、ログイン機能、A/Bテストといった便利な機能もあります。

Vercel（旧：ZEIT）でも、自動デプロイのような便利な機能をいろいろ利用できます。
個人ならビルド時間などの制限なしで無料で利用できます。

NetlifyやVercelと同じようにGitHub Pagesでも無料でGatsbyサイトを運用できます。
GitHub Actionsが利用できるのも嬉しいところ。

AWS上にスケーラブルなバックエンドを構築できるAWS AmplifyもGatsbyプラグインを使えば簡単に導入することができます。

その他にも、AWS S3やHeroku、GitLab Pages、Gatsby Cloudなどのホスティングサービスともスムーズな連携ができます。

2020年8月28日無料でも使える高機能サーバーNetlifyって何？基本情報から公開までの流れを解説

メリット6: Gatsbyのエコシステム

Gatsbyではいろいろなプラグインやスターターテーマを利用することができます。

Gatsbyプラグイン

WordPressプラグインと同じように、プラグインを追加するだけで簡単に機能を追加することができます。

Plugin Libraryでは機械学習を使ってGoogle Analyticsのデータからリンクを先読みしてくれるプラグインなど、さまざまなプラグインが公開されています。

2020年8月28日Gatsby.jsでSEO対策する方法をまとめてみた【SEOプラグインも紹介】

スターターテーマ

スターターテーマについても、スタート地点を一気にゴールまで近づけてくれます。現在約300ほどのテーマが登録されています。

企業サイトやブログ向けのテーマやWordPressをデータソースとするときのテーマなど、テーマについてもいろいろなものが利用できます。

スターターテーマからGatsbyサイトを作るとき

Gatsbyでは、次のコマンドでスターターテーマをからサイトを作ることができます。

gatsby new 【作りたいサイトの名前】【スターターテーマのリンク】

ドキュメント

今のところ日本語で書かれた情報が少ないのが残念なところですが、公式サイトではドキュメントがとても充実しています。
APIの説明やチュートリアル以外にも、コンセプトやチートシートもあります。

チートシートではドキュメントへのリンクや「gatsby」コマンドの説明、

APIファイルについての説明が書かれています。

Gatsby Store

Gatsby.jsの開発に貢献するとGatsby Storeで販売している商品の購入用クーポンを無料でもらえるそうです。

Gatsbyのロゴが入ったパーカーや靴下、キャップ、ボトル、ペンなどの商品を販売しています。

Reactライブラリ

GatsbyサイトはReactアプリケーションなので、Gatsbyプラグイン以外にもReactライブラリが使えます。

npmでは10万以上のReactライブラリが公開されています。

メリット7: メリットはその他にも

簡単にPWA化できる

Gatsbyではgatsby-plugin-offlineとgatsby-plugin-manifestというプラグインを使えば、簡単にサイトをPWA（Progressive Web Apps）化することができます。

実際のところPWA化にはHTTPSも必要なんですが、NetlifyやVercelのようなGatsbyサイトに便利なサーバーではHTTPSもセットになっているようなものなので、Gatsbyサイトでは手間をかけずにPWA化ができます。

Google提唱のPRPLパターンに準拠

PEPL（パープル）パターンは、Googleが推奨の、ウェブページを読み込んで素早く操作可能にするための開発パターンです。

※ PEPLパターンのPEPLはPush（Preload）、Render、Pre-cache、(Lazy) Loadの頭文字になります。

AMP用のプラグインも

PWAと比べてサポート体制が整っているとは言えませんが、AMP（Accelerated Mobile Pages）についてもgatsby-plugin-google-ampなどのGatsbyプラグインで対応することができます。

Gatsbyのデメリット

ここまでGatsbyのメリットを紹介してきましたが、残念ながらGatsbyにもデメリットがあります。

大規模なサイトや複雑な機能をもつサイトには向かない

Gatsbyでは、サイトの規模が大きくなってくると、徐々にビルド時間が長くなり、高速な表示も難しくなってしまいます。
v2になってからこの問題も緩和されたようですが、公式サイトのScaling Issuesによると、10万ページ以上の場合やJSONやGraphQLが巨大になってしまうときにエラーや極端な遅延が起きるようです。

個人的な感覚としてはポートフォリオサイトや小規模サイトなら大丈夫だと思いますが、サイトの規模によっては別の選択肢が必要なるかもしれないですね。。また、がっつりReduxを使うような場合も慎重な判断をした方が良さそうです。x

動的にページを生成することができない

Gatsbyサイトは静的なので、動的サイトのようにユーザーのプロフィール用ページやユーザーに応じて違った情報を表示することができません。

※ GatsbyではStripeやpassport.jsなどの外部サービスやライブラリを利用すれば、決済機能やユーザー認証機能についても実装することができます。

検索機能

これもGatsbyは静的サイトなので…という話になるのですが、Gatsbyサイトに検索機能を追加したい場合には、Gatsbyのみの機能では実装できません。

ただ、Algoliaを使えば高機能な検索機能を実装できますし、広告は入りますがGoogleカスタム検索なら完全無料で検索機能を利用することもできます。