2019当ブログを構築するにあたってReact用静的サイトジェネレータのGatsbyJsを採用したので、技術構成やブログの構築手順、またブログ公開までのフローについて説明します。GatsbyJsとはGatsbyJsは、React用に作られたモダンで高速なサイトを作成できる静的サイトジェネレータです。React.とGatsbyJsのコンセプトが書かれておりますが、その謳い文句どおりGatsbyJsで構築されたサイトは驚くほど高速にページが表示されます(GatsbyJsが使用されたサイト達)。JSONなど様々なデータソースに対応しているなど、モダンでハイパフォーマンスなWebサイトを構築する上で非常に魅力的な特徴を持っています。サイトの作成の際にReactを中心としたWebフロントエンドの技術で完結している事と、SPA・SSR・PWAのページにほぼ自動的に対応できてしまう事が、他の静的サイトジェネレータと比較したときに非常に強力な点と言えます。GatsbyJsについての詳しい紹介はGatsbyJs入門という別の記事を公開していますので、そちらも合わせて御覧ください。当ブログを構築するにあたって以下の構成でブログを構築しました。静的サイトホスティングサービスとしてNetlify、GatsbyのデータソースとしてヘッドレスCMSのContentfulを使用しまし、GitHubリポジトリのmasterブランチにコードがpushされたタイミングと、*Contentfulでコンテンツが更新されたタイミングをトリガーとしてNetlifyが自動でビルド・デプロイするなど、各種ツールの連携をしてストレスなくデプロイできるように構築しています。以下、ブログを構築する上で使用したNetlifyとContentfulの簡単な紹介と、実際にブログを構築した手順を説明します。NetlifyNetlifyはフロントエンドビルド、デプロイ、ホスティングの3つの機能を提供する高機能・高パフォーマンスな静的サイトホスティングサービスです。公式サイトにかかれているように、わずか3ステップと驚くほど簡単な手順でWebサイトを公開出来ます。具体的には、GithubやGitlabなどのリポジトリホスティングサービスと連携して、masterブランチにpushされるたびに、Webpackやgrunt等でビルドを実行した上でサイトをデプロイするまでを自動で実行させたり、コマンドラインツールを使って、以下のように手動でサイトをデプロイすることが出来ます。deployまたカスタムドメインの対応や完全無料のSSL/HTTPSの提供をしているので、独自ドメインがあれば簡単にSSL/HTTPS対応のWebサイトを公開出来るのも嬉しいポイントです。その他にも、Webhookのトリガ、ラムダ関数の登録、バージョニング&ロールバック等様々な機能を提供しており、GithubPagesなどの他の静的サイトホスティングサービスと比べても頭一つ抜けている印象を持ったため、Netlifyを採用しました。詳細については公式ドキュメントを確認してみてください。ContentfulContentfulはドイツのスタートアップによって開発されたAPIファーストのヘッドレスCMSです。APIのみを提供するCMSです。Wordpressなどの従来のCMSと異なり、フロントとデータレイヤが完全に分離されているためUI開発に集中することができるということと、フロントエンド側の技術スタックが自由になるという利点があります。するとNetlifyで自動的にビルド&デプロイさせることも出来ます。画像の配置・リサイズ・クロップなどの最適化などを自分でやるのがめんどくさいなんだかんだWordpressみたいなコンテンツ管理のGUIが合ったほうが便利5000レコード(コンテンツや画像などのアセットを含める)までは無料で使えるNetlifyのWebhookと連携すれば記事公開を自動化できるなどの理由から、Contentfulを採用することにしました。以下に当ブログの構築するまでの手順を簡単に説明します。Gatsbyプロジェクトの作成まずはじめにGatsbyJsのプロジェクトを作成します。全体的な構築方法は公式ドキュメントに従っています。npx経由でgatsby-cliを起動し、Gatsbyプロジェクトを作成します。newは新規のGatsbyプロジェクトを作成するコマンドで、第二引数にプロジェクト名、第三引数に雛形となるプロジェクトのURLを指定します。GatsbyJsはこの雛形となるスタータープロジェクトが多数公開されており、ブログ用のgatsby-starter-blogやtypescript用の設定が同封されたgatsby-starter-typescript等様々なスターターが用意されています。今回は自身の勉強も兼ねて、一番シンプルなgatsby-starter-hello-worldからプロジェクトを作成することにしました。作成したプロジェクトのディレクトリ構成は以下のようになります。作成したプロジェクトに移動してGatsbyのdevelopmentサーバーを起動します。develop起動後にlocalhost:8000にブラウザでアクセスすれば、以下のようにWebページが表示されるはずです。次にGatsbyJsのデータソースとしてContentfulを利用できるようにします。本記事では、Contentfulのサインアップ、ブログ等のコンテンツデータの作成、APIアクセストークンなどの作成についての詳細は取り扱いませんので、Contentfulのチュートリアルを参考にしてください。GatsbyJsはGraphQLを介して様々な種類のデータソースからデータを取得することが出来ますが、データソースの有効化の設定はGatsbyJsのプラグインを使って行います。Contentfulをデータソースとして利用するためのプラグインのgatsby-source-contentfulをインストールします。gatsby-source-contentful次にgatsby-config.jsに以下の設定を追記します。],}これでGatsbyJsのデータソースとして、Contentfulを利用できるようになりました。実際にGraphQL経由でContentfulのデータを取得してブログのリストを表示するページを作る場合、以下の例のように記述します。exportされたReactコンポーネントのpropsにGraphQL経由で取得したデータが挿入されます。今回はContentfulをデータソースとして使っていますが、Markdown等他のデータソースを使う場合もそれぞれのプラグインが提供するGraphQLのスキーマに従ってデータを取得する流れは変わりません。developでlocalhost:8000/__graphqlにGraphQLのサーバーが起動するので、そこで任意のクエリの実行結果を確認することが出来ます。Netlifyにデプロイ最後にGatsbyプロジェクト及びContentfulをNetlifyと連携させて、ブログを公開します。Gitから新しくホスティングするサイトを作ります。Bitbucketの中からリポジトリのホスティングサービスを選択します。今回はGithubを選択。次にOrganizationとデプロイするリポジトリを選択します。siteをクリックすると、速やかにサイトがデプロイされます。以降はmasterブランチがpushされるたびに、ビルド・デプロイが実行されるようになります。最後にContentfulでコンテンツが更新されるたびにNetlifyのビルド・デプロイが実行されるようにすれば当ブログの構築が完成します。ContentfulとNetlifyの連携方法についてはContentfulの公式ガイドにやり方が書かれているのでそちらを参考に設定してみてください。以上の手順で当ブログの構築が完了しました。実際にはサイト全体のテンプレートを記述する部分などは省略しておりますが、全体を通してGatsbyプロジェクト作成から大体4時間程度と非常に短時間でブログを公開することができました。Chromeデベロッパーツールから調べてみると見事100点満点の結果でした。PWA対応やSEOについてもほんの少しの対応だけで100点で言うことなしでした。Accessibilityについてはいくつか実装上手を抜いてしまった部分があったので、これも後々対応していこうと思います。おわりに今回ブログを構築、運用してまだ間もないですがすでに「Wordpressは今後使わなくていいんじゃないかなぁ」と思うぐらいにはGatsbyの有用性を感じています。テンプレートの記述はReactに縛られたり、GraphQLなどの学習コストは低くはありませんが、最近のWebフロントエンドの技術をさらえるという意味でも中々おもしろい題材になるのではないかと思います。本記事を読んでGatsbyJsに興味を持たれた方はぜひ公式チュートリアルを読んでGatsbyJsを試してみてください。