SSGの話

はじめにちょっとmicroCMSとContentful両方使ってみたので感想を書いています。 目次

①近況

②静的サイトジェネレータを渡り歩いた遍歴

②しばらくContentfulを使う

ContentfulはgatsbyとGraphQL寄りのAPIサービスで型のサポートが強い。

Contentful Collectionという型ライブラリがあってそこからTypeすることになる、

逆にちょっと難しい所もあって型制限のせいで使えないライブラリがあったり書き方がちょっと違ったりするからNext.jsでの使用を考えてる人はちょっとだけ先人がいないことに念を押した方がいいかもしれない。

なによりNext.js公式のexmapleコードとか参考にならないし。。 TSのstrictで動いてないコードは本音を言うと全部リジェクトして欲しいが、

それで私がなんでNext.js使ってるのっていう話をする。

プレーンHTMLをFirebaseにデプロイしたときにたまたまFirebaseのCLIにNode.jsがインストール必要だったのでついでに静的サイトジェネレータ巡りをすることになった。

最初にhugo → Angular → Nuxt.js →Next.js → Aurelia → Gatsby → Next.jsの順番で触ってきた。

SSGはLinksコンポーネントで遷移させること以外は特に普通だ。 Angularは最近ScullyというSSGが登場している。

Hugo

静的サイトジェネレートを始めるキッカケになったサービス。

色んな人が作ったサイトデザインをインストールして使うサービスです。 デプロイが複雑すぎてできなかったんですがサイトデザインの参考になります。

Angular

自分が触ってた次点ではライフサイクルがHTMLベースだからSPAなんだけどBootStrapを使う勉強になった。かなり専用のコマンドが大量にあるのでかなりとっつきにくい。 フルスタック仕様なためやや重たい印象はあった。

Nuxt.js

拡張子は.vueでこれもライフサイクルはHTMLベースでscriptタグにjsを書く。 vue.jsの仕様でHTMLの中にJSを書くという宿命を負っている。 これは一応JavaScriptフレームワークではなくHTMLフレームワークと言っても差し支えないと思う。 尚TypeScriptとの親和性はちょっと弱い。何故か日本人に好まれてる。 microCMSやnintendoは会社のサイトにNuxt.jsを使ってるみたいだ。

Next.js

拡張子は.tsxでライフサイクルはJavaScriptベース。 React.jsの仕様を継承しているのでreturnの中にHTMLが書ける。 あとはState管理や_app, _document, Layoutの総括管理ファイルシステムが超優秀。 TypeScriptとの相性は抜群にいい。 デプロイは元ZeitのVercelでこのVercelが異常に強い。

ReactNativeというモバイルアプリケーション用の派生もある。

Aurelia

一言で言うと(´・ω・｀)しょぼい。 チュートリアル終わってDockerにデプロイするところでやめた。 AureliaのデプロイがDockerということとDockerが仮想コンテナサーバーみたいなものだということがわかった。

Gatsby

GlaphQLのライフサイクルを取り入れた静的サイトジェネレータ。 Next.jsの次に触ったからか難しく感じてCSSを反映させる前にやめた。 コンパイルとビルドが遅かったので開発に不利なような気がした。

あとContentfulと言ったらこのGatsbyしかヒットしない。

結論

Next.jsというかReact使うのがいい、というよりVercelに付いて行くのが正解だと思う。 microCMSは10000コンテンツでContentfulは25000レコードと無料枠にやや差がある。 どっちを使ってもできることは一緒なので使い易い方を選ぶといい。