Reactベースの静的サイトジェネレータGatsbyとは何か？
はじめに
昨今はWebフロントエンド技術の発展が目覚ましく、フロントエンドに関する様々なライブラリ、フレームワークが開発されています。とりわけ海外ではFaceBook製のUIライブラリである「React」の人気がダントツで高く、エコシステムやライブラリの開発も活発です。
最近では「NextJS」のようにReactの技術をベースにしたフレームワークも開発されており、React周辺の技術は海外を中心にますます盛り上がっていくと思われます。
今回はReactの技術をベースにした静的サイトジェネレータである「Gatsby」を紹介し、その特徴などに触れていきたいと思います。
Gatsbyとは何か？
GatsbyとはReactの技術をベースに開発された静的サイトジェネレータ（SSG）です。
SSGとは、ビルド時にコンテンツを全て静的なコンテンツとし、Webサイトの高速化を図るものです。ビルド時には、接続している外部のデータベースやCMS（Content Management System）のデータも取得し、静的なコンテンツとするため、リクエストの度に外部のデータベース等からデータを取得する必要が無くなるので、その分通信が高速になります。その他にもGatsbyは以下のような特徴を備えています。
Gatsbyの特徴
Reactベースのフレームワークであること
GatsbyはReactの技術をベースにしたフレームワークであるため、Reactの記法がそのまま使えます。そのため、今までReactを使用していた人はほとんど違和感なく移行できるでしょう。
直感的なルーティング機能
Gatsbyのルーティング機能の特徴として挙げられるのが、「/pages」フォルダ内のページファイルの名前が特に設定することなくそのままページのslugとなることです。
slugとは、「/user」のようにURLのスラッシュの後についている文字列等のことをいいます。slugはWebサイトにおけるページの場所を表しているのでwebサイトにおいては必須の上、わかりやすい名前を付けてユーザーが今どのページにいるのか分かりやすくする効果も期待できます。
例えば「/pages」フォルダ内に「user.js」というファイルを作成し、表示する内容を記述したとしましょう。Gatsbyはファイル名を読み取り、そのページは「/user」でアクセスできるよう自動的に設定してくれます。
この機能によってページとslugを一致させることができ、より直感的なルーティング操作が可能になります。その他にも「Link」のようなReactにもあるルーティング機能も備わっているので、それらのルーティング機能と組み合わせることも可能です。
高速
Gatsbyの特徴として、「高速なサイトが作成できる」ということが挙げられます。これはGatsbyというよりかは静的サイトジェネレータの特徴でもあるのですが、ビルド時に全てのファイルを静的なファイルに変換します。そしてポイントはビルド時にWordpress等のCMSのデータソースも取得し、静的なファイルにするということです。
従来のやり方でCMSでサイトを作成すると、CMSのデータはデータベースにありデータを取得する必要があればその都度リクエストを送り「動的」にデータを取得していました。しかし静的サイトジェネレータはビルド時にすでにCMS等のデータソースからデータは取得しているため、データの取得のために逐一リクエストを送る必要はなく、その分高速になります。
GraphQLを標準搭載
GatsbyはWebAPIの規格であるGraphQLを標準搭載しております。
GraphQLとは、クエリ言語とスキーマから構成される新しいWebAPIの規格です。GraphQLは、従来のRESTAPIの問題点であった
- ・エンドポイントが煩雑になる
- ・取得したいデータ以外に余計なデータが含まれる
- ・データを取得する際のリクエスト数が多くなる
GraphQLでデータを取得するためには、「スキーマ」といってその取得するデータの型を予め定義しなければいけないのですが、GatsbyはGraphQLを使用するのにスキーマを定義する必要はありません。後述するプラグインを導入して設定を行うことにより、従来のスキーマを定義するやり方よりも遥かに簡単にGraphQLを使用することができます。
取得可能なデータも、画像、WordpressのようなCMSからStrapi、ContentfulのようなHeadlessCMSと呼ばれるSSGの使用を想定したCMS、さらにはGoogleスプレッドシートのようなファイルやMDXのようなマークダウンファイルからも情報を取得することが可能です。取得するデータソースは一つに絞る必要はないので、2つ3つと様々なデータソースから情報を取得することも可能です。さらに、画像を取得する際には「GatsbyImage」というGatsbyに標準で搭載されている機能により最適化処理も施されるため、より最適な形でWebサイトに画像を導入することができます。
プラグインが豊富
Gatsbyはプラグインを使用することで、さらなる機能の拡張をすることができます。上記に挙げたCMS等はプラグインを設定することによって簡単にGraphQLによってデータを取得することが可能になります 。下記はその他のプラグインの一例です。- ・gatsby-plugin-react-helmet・・・メタデータの設定、変更が簡単にできるようになるプラグイン
- ・gatsby-plugin-manifest・・・アプリをPWA（Progressive Web Application）化するプラグイン
- ・gatsby-plugin-offline・・・低速環境やオフラインでもWebサイトを快適に見られるようにするプラグイン
- ・gatsby-plugin-sitemap・・・サイトマップを生成するプラグイン
- ・gatsby-plugin-google-analytics・・・GoogleAnalyticsを使用することができるようになるプラグイン
多種多様なスターター、テーマが選択できる
Gatsbyには「スターター」というものが用意されており、プロジェクト作成の際に公式サイトに公開されているスターターを指定することによって、そのスターターに設定されているプラグイン、コンポーネント等が予め準備された状態で始めることができます。またGatsbyには「テーマ」という特定の用途に向けたUIコード、プラグイン等をパッケージ化したものが存在し、npm またはyarnでインストールことで使用することもできます。
例えばブログ用途でサイトを構築したいのならプロジェクト作成時に「gatsby-starter-blog」を設定すればブログ用途のサイトを構築する上で必要なプラグイン等が予め備わった状態で開発を開始することが可能です。
スターター、テーマを導入することで、さらなる開発効率の向上が見込めます。
導入方法
それでは、Gatsbyを導入してみましょう。
GatsbyはReactベースのフレームワークな為、NodeJsの環境が必要です。NodeJSをダウンロードしたのならば、Gatsbyを利用するために必要な「GatsbyCLI」をインストールしましょう。
Gatsby-CLIの導入
$ npm install -g gatsby-cli
または
$ yarn global add gatsby-cli
でインストールしましょう。
インストールが完了したら、Gatsby-cliのバージョンを確認します。
$ gatsby -v
これを入力して、バージョンが出てきたら正常にインストールされています。
プロジェクトの作成
それでは、プロジェクトを作成してみましょう。
作成したいディレクトリ上で、
$ gatsby new
と入力します。
すると、プロジェクト名を聞かれるので、任意の名前にします。
? What is your project called? > My-gatsby-project
その後、使用するスターターを聞かれるので、任意のスターターを選択します。
What starter would you like to use ? > -Use arrow-keys. Return to submit.
> gatsby-starter-default
gatsby-starter-hello-world
gatsby-starter-blog
(use a different starter)
上3つ以外のスターターを選択するのならば、プロジェクト名の入力を求められる箇所で、公式サイトにある使用したいスターターのgithubリポジトリを選択します。
例えば、「gatsby-starter-portfolio-cara」をスターターに使用したい時は、次のように指定します。
gatsby new my-gatsby-project https://github.com/LekoArts/gatsby-starter-portfolio-cara
こうすることにより、「gatsby-starter-portfolio-cara」のプラグイン、UIコンポーネントが予め備わった状態で開発を始めることができます。
まとめ
- ・Gatsbyは、ReactをベースにしたSSG（静的サイトジェネレータ）である
- ・ビルド時にCMS等のデータソース含む全てのファイルを静的ファイルへと変換するため、動的なリクエストが不要になり、サイトの高速化が見込める
- ・GraphQLを標準搭載しており、様々なデータソースから簡単にデータを取得することができる
- ・様々なテーマ、スターターを選択でき、開発効率の向上が見込める