Gatsbyをちょっと触ってみた

2018-12-22

公式のチュートリアルを一通り。

まず最初に確認したかったのはJykillやNanocのような静的サイトジェネレータの代わりになるのかと言うこと。
これは公式のgatsby-source-filesysntemと組み合わせて簡単にできた。OKだ。

加えてファイル以外にDBやREST API、GraphQLのAPIをデータソースにすることができるので、WordPressのようなCMS(HeadlessCMSとして扱う)との組み合わせでサイトを構築することもできる。
連携の流れとしてはデータをSourceで引いて、Transfomerで整形。SourceとTransformerはプラグインとして提供されているため、対応するプラグインがあれば様々なデータソースに対応が可能。

Gatsbyが何かをざっくり簡単に言うとReactで書いたテンプレートにGraphQLでクエリしたデータを載せて静的なサイトを構築するというもの。
Reactでできることは何でも出来、GraphQLを使うことでデータのクエリロジックをシンプルにできる(なおGraphQLを使わないという選択も可。データが小規模ならばむしろ推奨されている)

Reactで直接DBやAPIを使ってサイトを構築するのと何が違うのかと言えば、静的ファイルを生成しておくので表示の際に動的にデータをフェッチするよりも高速、負荷が軽い、クライアント側からAPIアクセスさせる必要が無くよりセキュアといったことなどがパッと思いつく。

もちろんReactのサイトになるので、ランキングなどのリアルタイム性のあるデータは動的にAPIからフェッチするといったことも簡単にできる。
SPAひいてはPWAにすることも容易で、またSSRにも対応しているようだ。

もう少し深掘りしてみようかなという気持ちになっている。

Profile

フルスタック気味のフリーランスプログラマー。

どちらかと言うと得意はインフラ構築とサーバーサイドプログラミングですが、フロントエンドもぼちぼちやっています。

最近の興味範囲はWordPress、AWS、サーバーレス、UIデザイン。

愛車はセロー。カメラはペンタックス。旅好きです。横浜在住。