2019当ブログでも使用されているReact用の静的サイトジェネレータGatsbyJsのコンセプト、技術的な仕組みや、使い方について紹介します。GatsbyJsとはGatsbyJsは、React用に作られたモダンで高速なサイトを作成できる静的サイトジェネレータです。当ブログもGatsbyJsで構築されていますが、GatsbyJsのサイトのトップページに書かれている様に、驚くほど簡単に爆速モダンWebサイトを構築できます。React.そんなGatsbyJsは大きく分けると以下の4つのコンセプトに基づいて実装されています。安価でスケーラブル・セキュアなサイト運用GatsbyJsの魅力を十分に伝えるために、まずはそれぞれのコンセプトについて説明します。モダンなWeb技術を手軽にReact.js、Webpack、Babel、様々なJavascript・CSS便利なライブラリなど、モダンWeb開発の技術は次々に登場していますが、それらをすべて自前で構築するのは苦痛を伴います。newとコマンドを実行すれば、React・babel・webpack等のモダンWeb開発環境がセットアップ済みのプロジェクトを作成することが出来ます。このあたりはFacebook公式のcreate-react-appのような使い心地です。Typescript、styled-componentsなどの言語・ライブラリを導入する際も、GatsbyJsはプラグインをインストールし、簡単な設定を書くだけで実現することが出来ます。gatsby-starter-typescript等のように、必要なプラグインがすでにセットアップされたスターターをプロジェクトを作成時に指定することもできます。(公開されているプラグインやスターター一覧)もちろんWebpackやbabelの設定を自分でカスタマイズすることも可能なので、環境を構築したあとに状況変化に柔軟に対応することが出来ます。この様に、モダンなWeb技術を手軽にためすことができるのはGatsbyJsの強みの一つです。超絶パフォーマンスGatsbyJsの超絶パフォーマンスは大きくわけると静的ページの事前ビルドSPASSRPWAの4つの工夫によって実現されています。静的ページの事前ビルドGatsbyJsは静的サイトジェネレータの為、Wordpress等の既存のCMSの様にページ要求に応じてページを作成するのではなく、ページを事前に構築してそれをWebサーバーにホストすることで、ユーザーからの要求に対して迅速にページを配信することが出来ます。Application)として動作します。Wordpress等で作成されたページでは、遷移時にページ全体のHTMLが書き換わりますが、SPAのページはJavascriptを用いてページ内のHTMLを部分的に差し替えてコンテンツを切り替える為、高速な画面遷移を実現できます。Rendering)するため、ユーザーにはすでにJavascriptが実行済みのHTMLを返却することができるので、初回ローディングのパフォーマンス劣化を防いでいます。SEO的にもSSRされている方が安心できるのも嬉しいですね。App(PWA)を構築・配信するための実装パターンを採用しています。PRPLとは以下の言葉を表しています。アセット類のみをローディングするため初回ローディングスピードが速く、一度ロードされると他のページのリソースをプリフェッチする為ページ遷移が爆速になるということです。上述の4つの工夫によって、GatsbyJsでWebサイトを作ると誰がどう作っても超絶パフォーマンスなサイトを作成出来ます。豊富なデータソースへの対応GatsbyJsはプラグインを利用することで、1つまたは複数のデータソースから必要なデータを使ってWebサイトを構築出来ます。データはGraphQLを介して取得する事ができ、対象とするデータソースは、ヘッドレスCMS、Sassサービス、API、DB、マークダウン等のファイルシステム等幅広く対応しています。APIからページ構築のために必要なデータを取得し、ページのテンプレートはReactで記述して、GatsbyJsで静的ページをビルドする等の構成も簡単に実現することが出来ます。安価でスケーラブル・セキュアなサイト運用これはGatsbyJsというよりも静的サイトジェネレータ全般の特性ですが、データベースやアプリケーションサーバーなど、複雑なインフラ構成を要せず、ホスティングサーバーに事前ビルドしたファイルを配置しておけばいいだけなので、インフラ構築・メンテナンスコスト・サイトスケーリング・セキュリティについて殆ど気にすることがありません。個人で運営するサイトや、コーポレートサイトなどの様に専任の開発担当がいない状況において非常にありがたい特徴です。GatsbyJsの使い方GatsbyJsの実際の使い方を、マークダウンをデータソースとしたブログ記事ページの作成過程を具体例として説明しようと思います。CLIはnpmパケージとして公開されており、Gatsbyプロジェクトの作成をする際はnpx経由で以下のようにコマンドを実行します。[starter]コマンドは、rootPathにプロジェクトのルートディレクトリ名、starterにプロジェクトの雛形となるスタータープロジェクトのURLを指定することで、Gatsbyプロジェクトを作成するコマンドです。作成されたGatsbyプロジェクトの構成は以下の様になります。各ディレクトリの説明は公式ドキュメントを参照してください。次に作成したGatsbyプロジェクトに移動して、以下のコマンドを実行することで、Gatsbyプロジェクトがビルドされた開発サーバーが立ち上がります。developmentそして、ブラウザでhttp://localhost:8000にアクセスすればビルドされたページが表示されます。CLIのコマンドが実行されるように定義されてあります。-hで確認することが出来ます。無事Gatsbyプロジェクトを作成することが出来たので、次はページの作成方法について説明します。Gatsbyプロジェクトでページの作成する方法は大きくわけると2つあります。src/pagesディレクトリ内にReactコンポーネントを作成するGatsbyAPIを利用してプログラマブルにページを作成するsrc/pagesディレクトリ内にReactコンポーネントを作成する先程作成したGatsbyプロジェクトのsrc/pagesディレクトリに以下の様にabout.jsというファイルを追加します。Aboutそして、ブラウザからlocalhost:8000/aboutにアクセスすれば以下のページが表示されます。この様に、GatsbyJsはビルド時にsrc/pagesディレクトリにあるReactコンポーネントをファイル名に対応するパスのページに変換してくれるのです。GatsbyAPIを利用してプログラマブルにページを作成する先程のやり方でWebサイトの全てのページを作成してもよいのですが、ブログを作成するとなると、すべてのコンテンツページ用のReactコンポーネントを作成するわけにはいきません。そのため、GatsbyJsではテンプレートとなるReactコンポーネントを指定してプログラマブルにページを作成するcreatePagesというAPIを用意しています。はじめに、プロジェクトのルートディレクトリ直下にgatsby-node.jsというファイルを以下の様に作成します。});};次に、テンプレートに指定するコンポーネントをsrc/templates/blog-template.jsに作成します。developで開発サーバーを立ち上げて、ブラウザからlocalhost:8000/blogs/1にアクセスすると、以下のページが表示されるはずです。この時点ではブログのデータを定数で用意してますが、次の節でGraphQL経由でブログのデータを取得し、そのデータをもとにページを作成できるようにします。ページコンポーネントへのデータの受け渡しGatsbyJsを使ってページを作成する方法を説明したので、次はGraphQL経由でマークダウンから記事の取得し、取得したデータを使ってページを構築する方法について説明します。今回はGraphQLについては詳しく説明しませんので、詳細が気になる方は公式ドキュメントを確認してください。マークダウンからデータを取得できるようにするはじめにマークダウンからデータを取得できるようにするためにgatsby-source-filesystemとgatsby-transformer-remarkというプラグインをインストールします。gatsby-transformer-remarkgatsby-source-filesystemはGatsbyからファイルシステムを読み込めるようにするために、gatsby-transformer-remarkはマークダウンファイルのパースをするために必要なプラグインです。次にプラグインの設定を有効化するため、gatsby-config.jsファイルをプロジェクトのルートディレクトリに作成します。]}これでマークダウンを使用する準備はできたので、次はデータソースにするマークダウンファイルをsrc/markdownsディレクトリ内に作成します。ファイルの先頭に追加したブロック内の情報は、gatsby-transformer-remarkによってパースされてGraphQL経由で取得できるようになります。Posttexttexttexttexttexttexttexttexttextマークダウンをデータソースにページを作成するマークダウンをデータソースにするための設定が完了したので、次はマークダウンの記事データからページを作成できるようにします。gatsby-node.jsのソースコードを以下の様に書き直しました。graphqlを使ってマークダウンファイルのデータを取得し、そのデータを使ってcreatePage`でページを作成しています。developで再ビルドし、ブラウザでlocalhost:8000/blogs/1にアクセスすると、ちゃんとマークダウンのデータからページが作成されていることが確認できます。ページコンポーネント内でGraphQLのスキーマを定義するマークダウンのデータからページを作ることができるようになりましたが、このままだとマークダウンの項目が追加されたり変更された場合に、gatsby-node.jsやコンポーネントのファイルなどあちこち修正しなければいけないのと、createPagesAPIを使ってページを作成しないとGraphQL経由でデータが取得出来ないため困ってしまいます。GatsbyJsでは、ページ・テンプレートのコンポーネントのファイル内でGraphQLのスキーマの定義、データの受け渡しができる仕組みが用意されているので、その仕組を使って書き直します。}}そして、src/templates/blog-template.jsのコードを以下の様に書き直します。}`マークダウンデータを取得するためのGraphQLのクエリがファイルの後半で記述されています。}`Gatsbyはこのクエリの結果を、BlogTemplateのpropsにdataプロパティとして注入します。developし直し、ブラウザでアクセスlocalhost:8000/blogs/1にアクセスすると、正しくブログが表示されているのと、マークダウンで記述した本文もちゃんと表示されていることが確認できます。これで、GatsbyJsを使ってマークダウンからブログページを作成することが出来ました。同じような要領で、src/pages/index.jsでGraphQLのスキーマを記述して、ブログ一覧を表示させるなども簡単に実現できるようになります。GatsbyJsが向いている用途GatsbyJsはWordpressで構築しているサイトの用途であれば同様かそれ以上に向いているのではと思います。ブログコーポレートLPECサイトドキュメンテーションサイトなど様々な利用シーンが考えられます。GatsbyJsを採用しているサービスのリストが公式に公開されているのでそれを見ると利用用途がイメージしやすいかもしれません。事前ビルドに時間がかかりすぎてしまうためページ数が数万にもなるような大規模サイトや、認証を伴う会員制サービス等はあまり向いていないと感じます。認証機能を伴うサイト構築のチュートリアルが公式で公開されてはいますが、やはり用途は限定されてしまうのではというのと、それならNext.jsでアプリケーションを構築したほうが楽なのでは?と個人的には思います。おわりにGatsbyJsはモダンで高速なWebサービスを簡単に構築するということに特化しており、普段Reactを書いている人が自分の個人のサイトを作ったり、コーポレートサイトを作ってくれと言われたときには非常に有力な選択肢になると思います。使われている技術も非常に先進的なので、GraphQLやPWA、SSRなどGatsbyJsを使う中で様々な技術の学習をする事ができるというのもいいポイントです。わかりやすいチュートリアルが公開されている事とexampleサイトも多数公開されているので、Webフロントエンドがそこまで詳しくない方も安心して挑戦できると思いますので、本記事でGatsbyJsに興味を持った方はぜひとも試してみてください。