今回は 2020 年時点における静的サイトジェネレーターの種類と選び方についてお話しします。 静的サイトジェネレーターに興味を持った方が実際に静的サイトジェネレーターを導入する際のご参考になればと思います。

「静的サイトジェネレーターって何？」という方は次の記事などをご参考にしてください。

• 「静的サイトジェネレーター」について網羅的に説明します

「静的サイトジェネレーター」は文字数が多いので、以下略語の「 SSG 」を使用します。

SSG の種類

まずは SSG の種類についてです。 SSG はさまざまな軸で分類することができますが、ここでは筆者が 2020 年時点で重要だと思う 2 つの軸をご紹介します。

• 分類軸 1. JavaScript vs. その他
• 分類軸 2. シンプル vs. 高機能

分類軸 1. JavaScript vs. その他

ひとつめは SSG を動かすプログラミング言語が JavaScript かその他の言語かという軸です。

なぜ JavaScript ベースの SSG を特別扱いすべきかというと、 JavaScript ベースの SSG にはその他の SSG には無い特長があるからです。それは「 UI / UX のよさ」です。 JavaScript ベースの SSG には「 SPA ¹ 風の UI 」や「バンドラーによるコード分割機能」「リンク先の先読み機能」等を備えているものがあります。 それらの SSG を使うとサイトの訪問者に静的サイトを上回る体感パフォーマンスを提供することができます。 近年の SSG 人気を JavaScript ベースの SSG 牽引しているのは理由はこのあたりにあると思います。

JavaScript 以外でメジャーな SSG で使われている言語には Ruby ・ Go ・ Python 等があります。

分類軸 2. シンプル vs. 高機能

ふたつめの分類軸は、シンプルさやかんたんさを優先したものか、機能の豊富さや汎用性の高さを優先したものかという軸です。

前者のシンプル系 SSG の典型は、 Markdown ファイルとして記事が書けるブログ用特化型の SSG です。 他方、後者の SSG としては、 CMS ・データベース・フラットファイル等さまざまな形式・場所のデータを横断的に扱えるものや、 React や Vue.js 等のフロントエンドフレームワークのコンポーネントでページを作れるものです。

これら 2 つの軸を使うと SSG を次の 4 つの象限に分類することができます。

• JavaScript ✕ シンプル
• JavaScript ✕ 高機能
• その他 ✕ シンプル
• その他 ✕ 高機能

2020 年時点で GitHub でスター数が多くシェアの高そうな SSG を分類すると次のようになります。

「 JavaScript vs. その他」の線引きは明確ですが「シンプル vs. 高機能」の方は境界があいまいです。 どこからどこまでをシンプルと捉えるかは、個人のプログラミング経験・ SSG 利用経験や状況によって変わってくると思います。

ここでは詳しくは述べませんが、 SSG のその他の分類軸としては「特化型 vs. 汎用型」や「誕生時期（世代）」等もあります。 誕生時期で分けるなら、 React や Vue.js が誕生した 2013 〜 2014 年の以前と以後がひとつの大きな分かれ目になるでしょうか。

SSG の選び方

ケース別に SSG の選び方について説明します。

私の知識・経験に基づいているので間違っている可能性があります。 最終的には自分で判断するのがいちばんなこともありますので、この情報を鵜呑みにせずあくまでひとつの目安としてください。

• 個人のサイトやブログを作りたい
• SSG や JAMstack について学習したい
• ビジネスで CMS の代わりに使いたい

個人のサイトやブログを作りたい

→ シンプルに個人のサイトやブログを作りたい場合は「シンプル」な SSG を選ぶとよいでしょう。 シンプルな SSG では要件を満たすことが難しいと最初からわかっている場合は「高機能」の SSG を選ぶのよいですが、よほどのことでなければ YAGNI ² でシンプルなもので始めるとよいと思います。 盛んに開発が行われている先進的な SSG （高機能なものに多い）を下手に選んでしまうと、ブログを楽に書くために導入したはずの SSG のメンテナンスに手が取られてブログを書くどころではなくなったりもします。

SSG や JAMstack について学習したい

→ ウェブ技術者が SSG や JAMstack の学習のために SSG を触ってみたい場合は「 JavaScript ベース ✕ 高機能」な SSG を選ぶとよいでしょう。 ウェブ技術者の人が個人のサイトやブログを作るのに使いたい場合は、「 SSG はあくまで道具であり重要なのはコンテンツ」と割り切るのか、道具そのものの勉強も重視したいのかで判断するとよいと思います。

ウェブ技術者として駆け出して間もない方や、 JavaScript の基本がまだままならない方は、下手に高機能なものを選ぶと挫折してしまう可能性もあるので、段階を踏んでから「シンプル」な SSG を一度試してから「高機能」に挑戦してもよいかもしれません。

ビジネスで CMS の代わりに使いたい

→ 現在動的 CMS で運用しているビジネスサイトを SSG に置き換えたい場合です。 これは要件次第なので結論としては「ケースバイケース」なのですが、個人のサイトに近いイメージで「なるべくシンプルで」「コストを抑えて」という要望が大きいなら「シンプル」な SSG の方がよいです。逆に、貪欲な感じで「静的サイト以上の UX を実現したい」「 Headless CMS と連携させてザ・ JAMstack を実現したい」ということであれば「高機能」な SSG を選ぶとよいと思います。

ということで、 SSG ――静的サイトジェネレーターの種類と選び方というお話でした。 ご参考になれば幸いです。

参考

直接 SSG の選び方に関する記事ではありませんが、 SSG が関係する JAMstack についての 2020 の調査結果が先日公表されました。 このあたりの話題に興味のある方にはおもしろい記事だと思います:

• State of the Jamstack Survey 2020: Get First Results