「静的サイトジェネレータってどういう意味？」
「ReactだとGatsby.jsが静的サイトジェネレータらしい」
こうした疑問に応えるべく、稲垣はアマゾンの奥地へと旅立ったのであった…完。
というのは冗談で、今回の記事では静的サイトジェネレータについて解説をしていきます。
- 静的サイトジェネレータとは？
- 静的サイトジェネレータのメリット
- 静的サイトジェネレータを使うべき場面
目次
静的サイトジェネレータとは？
静的サイトジェネレータ（Static Site Generator）は、HTMLファイルを生成するツールのことです。
ReactだとGastby.jsが有名で、「フレームワーク」と混同されがちですが、別物だと僕は思っています。
静的サイトジェネレータはあくまでツール、あるいは機能の1つかなと。
静的サイトジェネレータと従来のCMSの違い
静的サイトジェネレータ（SSG）は、Wordpressのような従来のCMSと比較されることが多いです。
この2つは何が違うのか？その回答が以下です。
- CMSはユーザーがWebサイトにアクセスした時点でHTMLファイルを生成する
- SSGはコンパイルする時点でHTMLファイルを生成する
- CMSはMySQLなどのデータベースからデータを取得する
- SSGはGraphQLやAPIなどの仕組みを使ってデータを取得する
静的サイトジェネレータのメリット
React開発者の中で、静的サイトジェネレータとして有名なツールはGatsby.jsです。
ReactのフレームワークであるNext.jsも、静的サイトジェネレータとしての機能を備えています。
このサイトで、Gatsby.jsやNext.jsのGitHubリポジトリにどれだけStarがついているかなど確認することができます。
2020/6/17時点では、Next.jsが最も人気でStar数は約49,000です。
続いてGatsby.jsのStar数が約45,000ですね。
（こうやってみると、世界的にはやっぱりReactが人気なんだな〜と）
そんなGatsby.jsに代表される静的サイトジェネレータのメリットを、一般的に言われていることに加えて僕の意見を述べてみます。
静的サイトジェネレータのメリット１｜表示の高速化
すでに説明した通り、静的サイトジェネレータは事前にHTMLファイルを生成しておきます。
ユーザーがWebサイトにアクセスした時点ですでに表示するHTMLファイルが用意できているので、CMSに比べて表示速度が大きく向上するというメリットがあります。
SSGとCMSの、ユーザーアクセスからページ表示までの流れはざっくり以下です。
- ユーザーがWebサイトにアクセスする
- URLに応じてデータベースにデータを取得する
- 取得したデータをもとにHTMLファイルを生成
- ユーザーにWebページを表示
- ユーザーがWebサイトにアクセスする
- ユーザーにWebページを表示
静的サイトジェネレータのメリット２｜セキュリティリスクの低減
上記の通り、静的サイトジェネレータでWebページを表示する際は、データベースにアクセスする必要がありません。
動的な処理が必要ないので、悪意のあるスクリプトがデータベースに流し込まれる心配がないです。
静的サイトジェネレータのメリット３｜SPAでさらにパフォーマンス向上
GatsbyでReactが使えるように、JavaScriptライブラリ or フレームワークでSPA（Single Page Application）として開発することで、パフォーマンスが向上します。
ユーザーからするとSPAは「ページ遷移の際に、まるでページの読み込みが発生していない」ような振る舞いをするので、ユーザー体験はより良いものとなりますね。
静的サイトジェネレータを使うべき場面
静的サイトジェネレータを使うべき場面１｜JAMstackな環境で構築したい時
JAMstackは「JavaScript、API、Markdown」で構成されたWebサイトのことです。
LAMPstackの対義語のように扱われます。
LAMPstackは「Linux、Apache（Webサーバー）、MySQL（データベース）、PHP/Perl/Python」といった頭文字をとった用語であることから分かる通り、サーバーを必要とします。
一方、JAMstackはサーバーレスな構成で実装することができます。
JAMstackは、サーバーとフロントを疎結合にし、フロントの機能に集中して開発することが可能です。
（サーバーサイドはAPIやSaaSを使って外出しします）
静的サイトジェネレータは、JAMstackのためにあるといっても過言ではないと、個人的には思います。
静的サイトジェネレータを使うべき場面２｜データ更新が少ないWebサイトを構築するとき
静的サイトジェネレータの弱点として、データ更新の多いWebサイトには向いていません。
なぜなら、データ更新のたびにビルドしてHTMLファイルを生成し直さなければならないからです。
なのでSNSといった「多人数が同時に接続してデータを更新するような」Webアプリケーションは、SSGで作るのを避けましょう。
一方、ブログのようにデータ更新の少ないWebサイトならば、SSGのメリットを最大限活かすことができると思います。
SSGはSEO的にも最強なので、ブログにはかなり向いているでしょう。
以上が静的サイトジェネレータに対する僕の考えでした。
まだまだ奥の深い技術ですが、今回はこんなもんで。
- 無料・簡単・片手でホームページを作成できる自社サービス Rakwi
- Web制作とアプリ開発を学べるオンラインプログラミング講座 Upstairs
- 開発,DX推進支援サービス スタートアッププラン
