Gatsby.js 所感

以前 Gatsby.js をちょっとだけ試してみたことがある。

• Gatsby を使って React.js 製ブログを5分で作ってみた

最近個人サイトに戻ろうかなと思っていて、「静的サイトジェネレータ」なるツール達が HTML を出力する手間を省いてくれるのではないかと思い、色々調べているところだった。

そこで Gatsby.js を試してみようと思った次第である。

結果的には、僕の狙いどおりには行かないので Gatsby.js の採用は見送ることにした。

目次

• Gatsby.js の特徴・良いところ
• Gatsby.js の良くないと感じたところ

Gatsby.js の特徴・良いところ

色々試してみて感じた、Gatsby.js の良いところをまとめてみる。

• 最終成果物は「ページごとに分割された HTML ファイル」や、JS・CSS ファイルになる
• 各 HTML には React ベースの SPA が埋め込まれており、画面遷移することなく他のページに飛べる
  • つまり、各ページの 静的 HTML が成果物としてありながら、どの HTML も SPA のエントリポイントになれる
  • コレにより画面遷移が爆速な仕組みを実現している。確かに速い。
• 豊富なスターター、プラグインにより、コピペで大体やりたいことがやれる
  • TS・SCSS 対応は勿論、Markdown 入稿や画像のリサイズや OGP など、何でもできる
  • Markdown 対応させると、ブログと固定ページを混在させたようなサイトも簡単に作れる
• 通常は React ベース、JSX で実装するので、HTML 構文のミスを見つけやすい
  • JSX がバリデータになる

SPA として動く際、裏では GraphQL が使われているのだが、GitHub Pages のような静的ホスティングサービスでも動作する仕組みになっていて、バックエンドサーバや RDB は不要。

Gatsby.js の流儀に乗れば、爆速で快適で、それなりに規模が大きなサイトを見栄え良く作れるのは確かだ。

Gatsby.js の良くないと感じたところ

一方、自分の目的や狙いには合わなかったなと思うところを挙げておく。これらは気にならない人もいるだろうから、自分の中での重み付けは任せる。

• Gatsby のために必要な学習コストが高い
  • React・JSX がベースなので、JS で書く場合は React の知識が多少必要になる
  • React は JS の this の扱いがクソだるい。class 構文で書く時もめちゃダルい。個人的には React は Vue や Angular よりも無駄に複雑で難解なフレームワークだと思っている
  • GraphQL はほぼ必須。複雑な構文ではないものの、「Markdown ファイルをパースして欲しいだけなのにどうしてこんなに手間がかかるの？」と感じる
• CoC (規約による設計) があるが、規約が分かりづらい
  • 自分は CoC 苦手なんだろうなと思った。自分のプロジェクト内のコードを Grep しても出てこない情報によって自動的に関連付けられているのが物凄く分かりにくい
• やりたいことを実現するために、どのプラグインをどのように仕込む必要があるのか分かりにくい
  • プラグインが小さく別れすぎていてつらい
  • プラグイン入れて gatsby-config.js に書き加えるだけじゃなくて GraphQL もイジらないといけない、とかもある
• 何がどうなって動いているのか理解できなくてイライラする
  • まっさらな状態から Gatsby プロジェクトを立ち上げるのはほぼ無理で、スターターキットを使うのだが、何のファイルがどういう理由で必要なのか理解するのが大変
  • 自分が分かっていないコードが作用しているのは嫌なので、理解して使いたいが、プラグインを含めると規模がデカすぎる
  • 全て理解しても、仕組みは分かったけど俺は HTML が書きたいだけなんだ、なんでこんな面倒なことしなきゃいけないんだという気持ちになる
• 純粋に HTML を書けない
  • JSX なので className と書かなきゃいけない
  • React なのでコンポーネントは単一要素しか返せない (複数要素をルートに配置できない) → 余計なネストが発生する → コレにより HTML が肥大化するし、思っていた階層構造にならないので CSS も書きづらい
• v2 になって仕様が変わったところがあり、日本語文献の鮮度が重要になっている
  • 結局公式の英語リファレンスを読まないと安心できない
  • gatsby-link パッケージは不要になったよ。import { Link } from 'gatsby'; で良いよ、とか
• URL 中にファイル拡張子が登場しない形で成果物が生成される
  • src/pages/hoge.js を作ると public/hoge/index.html が生成されるので、アクセスする URL は http://example.com/hoge となる
  • コレ自体は素晴らしく良い機能だと思うし、Gatsby 製ブログを作るぞーと思っている時はいいと思うのだが、自分がやりたかったこととはちょっと合わなくて…
• プラグインが俺の知らない HTML を吐きやがる
  • Markdown で画像を扱うために gatsby-remark-images と gatsby-plugin-sharp がセットで必要な時点で萎えていたが、いざ生成された HTML を見たら謎の CSS クラスが付与されていてそこで諦めた
  • そもそも HTML ソースの改行やインデントを付けて出力してくれないの嫌

つまりは、自分は最終成果物である HTML をキレイな形で出力したいのだ。余計な要素を突っ込まないで欲しいし、インデントはキレイに保ちたい。HTML を直接書く労力を省力化できたらいいなと思っているだけであって、成果物は手打ちの HTML と同等であって欲しいのだ。Gatsby はココが出来なかった。

ブログ部分に関しては、ただ Markdown を HTML にパースして、お決まりのヘッダとフッタを付けてくれればいいだけなのに、何で大量のプラグインや GraphQL を書かなきゃいけないんだ？という気持ちは拭えなくて、面倒臭すぎた。

固定ページ部分も、React と JSX で書く必要があって、大変気に入らない。普通に HTML を書かせろ。

つーワケで、自分の今回の用途には合わなかった、というのが感想。普通にブログを作りたいだけの人、あまり内部の挙動は理解できなくてもいい (動けばいい)、という人であれば、Gatsby は人気どおりのポテンシャルを持っている素晴らしいツールだと思った。

なお、色々試していた GitHub リポジトリは以下。もう更新しないかなぁ。

Neos21/practice-gatsby

• 参考 : Gatsby.js でマークダウン記法ブログを作ってｵﾚﾂｴー！していく人生 - Qiita
• 参考 : Gatsbyでブログを作り直しました | gyojirのblog
• 参考 : Gatsby + Markdownでブログを作り直しました
• 参考 : Gatsby.js でMarkdown記事内のサイト内リンクを高速化しよう | ITエンジニアの種籾(たねもみ)
• 参考 : Gatsbyでマークダウンファイルの内容を表示し、マークダウン文中のコードブロックにシンタックスハイライトをきかせる - Qiita
• 参考 : https://creator-of-what.yukihirop.me/posts/2020-06-04/create-blog-gatsby-typescript-component/
• 参考 : 【Gatsby.js】「ここだけ押さえれば普通に使える」って知識をまとめてみた - Qiita