Javascriptの静的サイトジェネレータまとめ

ここ数年で定番化しつつあるJavascriptベースの静的サイトジェネレータ。それぞれの特徴を比較しました。

公開日：2022年2月15日

Reactベース

Javascriptの静的サイトジェネレータとして最初に人気になったのがGatsbyjs。Reactベースで静的サイトジェネレータとしてだけでなく、サーバーサイドレンダリングにも対応するなど、幅広い用途で使えます。

Reactの知識があるなら、ファーストチョイスとなる静的サイトジェネレータです。

フレームワーク	ベース	SSG	SSR
Gatsbyjs	React	○	○

Javascript製の静的サイトジェネレータとしてGatsbyjsと双璧を成すのがNext.js。とにかく機能が豊富で使いやすいということで、ここ数年で急激に人気を伸ばしています。

フレームワーク	ベース	SSG	SSR
Next.js	React	○	○

Vue.jsをベースに静的サイトジェネレータとサーバーサイドレンダリングの両方を追加したのがNuxt.js。先程のNext.jsと名前が似ていますが、こちらはVue.jsベースの全く別のフレームワークです。

Vue.jsでハイエンドなサイト・アプリケーションを作るとしたら、まずはNuxt.jsが第一候補になるでしょう。

フレームワーク	ベース	SSG	SSR
NuxtJS	Vue	○	○

比較的新しいVue.jsベースの静的サイトジェネレータがGridsome。他のフレームワークは、Javascriptフレームワークに静的サイトジェネレータ機能を追加した形ですが、Gridsomeは最初から静的サイトジェネレータとして設計されています。

そのため、サーバーサイドレンダリングには対応していませんが、静的サイトジェネレータとしてはシンプルで使いやすくなっています。

フレームワーク	ベース	SSG	SSR
Gridsome	Vue	○	-

NuxtJSとGridsomeの違いはSSRの有無だけでなく、コンテンツの管理方法も大きな違いです。Nuxt.jsではAPIやマークダウンファイルから組み上げる形で静的サイトを生成しますが、Gridsomeは一度GraphQLに取り込んで、ページごとにクエリを発行して生成します。

そのため、ページの生成数（APIのコール数）が多くなるほど、Gridsomeの方が高速にビルドが可能です（ローカルにデータを持つため）。

NuxtJSでも@nuxt/contentプラグインを使うことで、クエリ化はできますが、コンテンツはローカルのものに制限されるため、活用方法の柔軟性はGridsomeの方が上です。

最後にそれぞれの静的サイトジェネレータを比較してみます。

フレームワーク	ベース	SSG	SSR
Gatsbyjs	React	○	○
Next.js	React	○	○
NuxtJS	Vue	○	○
Gridsome	Vue	○	-

基本的には、

で選ぶことになるでしょう。

世界的にはGatsbyjsとNext.jsがツートップですが、日本ではNuxtJSも同じくらい人気です。Gridsomeはまだまだ人気が少ないイメージでしょうか。

HugoやHexoなどの静的サイトジェネレータと違うのは、内部的にJavascriptフレームワークを使うので、リッチなサイトを作れる点です。その点では、どのフレームワークを使っても、ただの静的サイト以上のものを作れます。

ただ、ReactにしてもVueにしても、ある程度の学習コストは必要になるので、自分にあったフレームワークをベースにした静的サイトジェネレータから始めるのがベストでしょう。

Author