モチベーション
かねてより静的サイトジェネレータには興味が有った。
Gatsby 選定理由
static site generator で検索して出てきた Site Generators というサイトのまとめをみて、Gatsby は世界的に人気があり「素早くモダンなサイトが始められる」ということが分かった。使っている技術も React で多少の馴染みがあった。
同サイトのまとめに Next.js というのもあったが、超個人的な認識では Next.js は静的サイトジェネレータというより、React を本格的にチームで扱うためのフレームワークという印象で、サーバサイドエンジニアが個人的に扱うには少々荷が重いという先入観がある。そのため今回は Gatsby を触ることにした。
チュートリアルを試す
ステップ０
Gatsby のチュートリアル は現在９つのステップからなる。
タイトルから察するにステップ０は環境構築方法で最後のステップ８は本番にローンチするのが内容っぽかった。私は先に quick start というページ を試したのでステップ０は省略しても良いだろうと判断した。ちなみに quick start では下記のようにプロジェクトを立ち上げるよう記載されている。
1npm init gatsby
こうすることで対話型シェルとなり、そこにサイト名等を入力することでサイトが作成される。これは自分の環境において Gatsby が少なくとも動作する事を検証するための儀式であると認識し、私の環境では無事動作したためステップ１に進む。
そして、ここで少し面食らうことになる。
実はチュートリアルでは npm を使ったプロジェクト立ち上げは行わず、gatsby new というコマンドで雛形からプロジェクトを起こして進行する。はじめこの gatsby new コマンドは一体どこから来たんだろうと少し戸惑った。
しかしチュートリアルのステップ０を読み飛ばした自覚はあったので、横着せず最初から読んでいくことで gatsby-cli を知り、それによって gatsby new 出来るようになった。
ステップ１
ステップ１の内容は下記に大分されると思う。
- スターターという雛形を起点としたプロジェクトの進め方を体験する
- React に馴染みがない人向けの簡単な補足
- gatsby がいかに手軽に開発を進められるかを体験する
所感
5, 6 年ほど昔、フロントエンド技術が荒れに荒れていたのがようやく収まったかに見えた頃、そろそろフロントのキャッチアップをしておこうと手を出し、Browserify, React を知り、試し、その過程で webpack や Babel, Redux 等の技術にも触れた。様々なドキュメントを読み漁りなんとなくわかったような気になりながら、唯一思ったのは「webpack を使いこなすフロントエンドエンジニアがチーム内にいる場合は足を向けて寝ないようにしよう」ということだった。
それくらい webpack は進んで触りたいと思うものではなかった。
ところがどうだろう。Gatsby というツールを使えば webpack から目を背けて React を触ることが出来る。 もうこれは静的サイトジェネレータとかではなく、React に触りたい人向けに React 以外の瑣末を忘れさせてくれるツールなのではないか。
それがステップ１を通して得た所感である。
つづく