Dustbox

Gatsby

note

React ベースの SSG 。
Gridsome の React 版にあたり(こっちの方が先だけど)、使いやすさ的には Vue と React の関係に近い。
Plugin で諸々の機能拡張を行えるのも大体同じ。 慣れの問題かもしれないが、 node のカスタマイズが Gatsby の方が分かりやすかったかもしれない。

作り変えた理由は、 WordPress の Gutenberg が React ベースなため、 React のコンポーネントを作る事が増えたため、サイト全体をコンポーネントとして作る事を改めて確認するためとか、単純に React でコンポーネント作るのに慣れるとかその辺。粗 Function Component で構築したから触ってないけど ComponentWillMount とかオミットされて「ほーん」ってなった。

ついでに Atomic Design とか FLOCSS もなんとなくやろうとしたけど、 Gatsby と Atomic Design を上手く解釈できなかった事、 styled-components を使った為 CSS を使わなかった事で両方ダメだった。 CSS in JS は 1 ファイルで完結するため見通しが良くなる代わりに上手く構築しないとファイル内が煩雑になりそう。

Gatsby 自体は人気なだけあって分かりやすい & 作りやすいんじゃないかと思うけど、以前使っていた hugo の方がビルドのスピードは早い。流石 Go 。
ただし、 PWA や SPA に近い動きがほぼ標準でできるので(やってないけど)、その辺は大きい。

フロントエンドの内容をそのまま使えるので、主だった可搬的な学習コストは graphql くらいだと思うけど、こちらはただの問い合わせ言語なのでそこまで難しくない。
どちらかといえば Gatsby API 経由での graphql のカスタマイズが手間か。

gatsby-source-wordpress を使えば Gatsby と WordPress の連携も出来るので、 webhook を使えば CI 通してデプロイとかできると思う。けど、多分今の環境では実案件で使う機会がない。

単純な静的サイトの納品の場合は選択肢の一つになりうるかもしれないけど、 create-react-app Next Nuxt gridsome と他の選択肢も多いので、どのレイヤーから構築が必要かで使い分ける。