Gatsbyはグレートなのか？

Node.js Gatsby

Gatsbyという静的サイトジェネレータ（SSG）がある。

特徴としては、

1. React.jsでフロントエンドを書くために作られた
2. Webapckでビルドする
3. ただのSSGではなく、Progressive Web Appを生成するジェネレータである
4. ブログ記事のデータ等はGraphQLで取ってくる

といったものがある。

静的サイトジェネレータとしては後発であるが、 StaticGenを見ると分かるように、Githubのスターの数はかなり多い。 スターの数では同じJavascriptで作られたHexoに迫らんとしている。 まさに、昇竜の勢いでSSG界を駆け上がっているジェネレータだと言えるだろう。（言い過ぎ？）

早い

Gatsbyを体験するにはGatsbyのドキュメントを開いて、ページ遷移すると良い。 SPAらしくサクサクと遷移し、ユーザー体験としてはかなり快適だ。 おそらく、このドキュメントは高速表示するためにかなり最適化しているとは思うのだが、 まだ割と散らかった状態のコードでビルドしたものでも表示はかなり早い。

データソース

基本的にブログ記事のタイトルや文章などはMarkdownで書く。 そして、そのデータをビルド時にGraphQLで取ってきて、各ページを生成する。 お手軽にブログを作りたい人は、「GraphQLに慣れるのに時間がかかるんじゃ...」と思うかもしれないが、 そんなにGraphQLをがっつり勉強しなくてもとりあえず作ることはできる。

また、データソースはMarkdownだけではなく、WordpressやJSONなどにも対応している。 gatsby-source-wordpressという専用プラグインが用意されており、Wordpress内で管理されているデータをそのままGatsbyに流用することができる。 また、JSONの場合は、gatsby-transformer-jsonがある。

プラグイン

ちなみに、プラグインの数は他のSSGに比べれば、まだまだ少ないのかもしれないが（他のSSGは未確認）、 それでも自分が今サイトを作っている限りでは足りないということはない。 プラグインの一覧を見れば分かるように、このぐらいはある。

SEO対策にはgatsby-plugin-react-helmetやgatsby-plugin-sitemapがあるし、Twitterのツイートを埋め込むためのgatsby-plugin-twitterなどもある。 プラグインとは言えないのだろうが、専用コンポーネントとしてReact RouterのWrapperであるgatsby-linkや画像表示を最適化するgatsby-imageなどもあり、なかなか豊富な機能となっている。

デプロイ

静的サイトであるがゆえに、デプロイも非常に簡単。 Webpackでpublicディレクトリ内にビルドされたビルド物をコマンド一発でデプロイするのみ。 自分はFirebase Hostingにデプロイしているが、当然AWSのS3やGithub Pagesにもデプロイできる。

スターター

「Typescriptで書きたい」とか「CSSフレームワークとしてbootstrapを使いたい」という人はstarterというものが用意されている。 このスターターを使えば、自分でこれらをインストールしなくても、予め必要物がセットになったものからサイト構築を始めることができる。 ちなみに、私はSEOのためのライブラリやGoogle Analyticsサポートなどが用意されている、gatsby-advanced-starterにreact-semantic-uiを入れて使っている。

締め

こんな感じでGatsbyを概観してきた。 日本語情報が少なく、当初は私も敷居の高さを感じていたが、めっちゃ難易度が高いというわけではない。 Calypsoやらrelaxやらが開発される中で この先SSGのGatsbyを使う場面があるのかは分からない。 でも、このタイミングでSPA×SSGでブログやメディアを作ってみたいという人は選択肢としてありかもしれない。