beta

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

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

公開日:2022年2月15日

Reactベース

Gatsbyjs

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

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

Gatsbyjs

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

Next.js

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

Next.js

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

Vue.jsベース

NuxtJS

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

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

NuxtJS

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

Gridsome

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

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

Gridsome

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

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

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

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

Javascriptの静的サイトジェネレータを比較する

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

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

基本的には、

  1. ReactかVueか
  2. SSRが必要か

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

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

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

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

Author

Koji Kadoma
Member of codit.work

新着ノート

新着コード