JavaScript

静的サイトジェネレータとは?ReactのGatsbyを例に解説

静的サイトジェネレータとは?ReactのGatsbyを例に解説

「静的サイトジェネレータってどういう意味?」
「ReactだとGatsby.jsが静的サイトジェネレータらしい」

こうした疑問に応えるべく、稲垣はアマゾンの奥地へと旅立ったのであった…完。

 

というのは冗談で、今回の記事では静的サイトジェネレータについて解説をしていきます。

この記事で解説すること
  • 静的サイトジェネレータとは?
  • 静的サイトジェネレータのメリット
  • 静的サイトジェネレータを使うべき場面

静的サイトジェネレータとは?

静的サイトジェネレータ(Static Site Generator)は、HTMLファイルを生成するツールのことです。

ReactだとGastby.jsが有名で、「フレームワーク」と混同されがちですが、別物だと僕は思っています。

静的サイトジェネレータはあくまでツール、あるいは機能の1つかなと。

静的サイトジェネレータと従来のCMSの違い

静的サイトジェネレータ(SSG)は、Wordpressのような従来のCMSと比較されることが多いです。

この2つは何が違うのか?その回答が以下です。

静的サイトジェネレータとCMSの違い
  • 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に代表される静的サイトジェネレータのメリットを、一般的に言われていることに加えて僕の意見を述べてみます。

静的サイトジェネレータのメリット1|表示の高速化

すでに説明した通り、静的サイトジェネレータは事前にHTMLファイルを生成しておきます。

ユーザーがWebサイトにアクセスした時点ですでに表示するHTMLファイルが用意できているので、CMSに比べて表示速度が大きく向上するというメリットがあります。

SSGとCMSの、ユーザーアクセスからページ表示までの流れはざっくり以下です。

CMSでページを表示するまでの流れ
  1. ユーザーがWebサイトにアクセスする
  2. URLに応じてデータベースにデータを取得する
  3. 取得したデータをもとにHTMLファイルを生成
  4. ユーザーにWebページを表示
ここにボックスタイトルを入力
  1. ユーザーがWebサイトにアクセスする
  2. ユーザーにWebページを表示

静的サイトジェネレータのメリット2|セキュリティリスクの低減

上記の通り、静的サイトジェネレータでWebページを表示する際は、データベースにアクセスする必要がありません。

動的な処理が必要ないので、悪意のあるスクリプトがデータベースに流し込まれる心配がないです。

静的サイトジェネレータのメリット3|SPAでさらにパフォーマンス向上

GatsbyでReactが使えるように、JavaScriptライブラリ or フレームワークでSPA(Single Page Application)として開発することで、パフォーマンスが向上します。

ユーザーからするとSPAは「ページ遷移の際に、まるでページの読み込みが発生していない」ような振る舞いをするので、ユーザー体験はより良いものとなりますね。

静的サイトジェネレータを使うべき場面

静的サイトジェネレータを使うべき場面1|JAMstackな環境で構築したい時

JAMstackは「JavaScript、API、Markdown」で構成されたWebサイトのことです。

LAMPstackの対義語のように扱われます。

LAMPstackは「Linux、Apache(Webサーバー)、MySQL(データベース)、PHP/Perl/Python」といった頭文字をとった用語であることから分かる通り、サーバーを必要とします。

一方、JAMstackはサーバーレスな構成で実装することができます。

JAMstackは、サーバーとフロントを疎結合にし、フロントの機能に集中して開発することが可能です。
(サーバーサイドはAPIやSaaSを使って外出しします)

静的サイトジェネレータは、JAMstackのためにあるといっても過言ではないと、個人的には思います。

静的サイトジェネレータを使うべき場面2|データ更新が少ないWebサイトを構築するとき

静的サイトジェネレータの弱点として、データ更新の多いWebサイトには向いていません。

なぜなら、データ更新のたびにビルドしてHTMLファイルを生成し直さなければならないからです。

なのでSNSといった「多人数が同時に接続してデータを更新するような」Webアプリケーションは、SSGで作るのを避けましょう。

一方、ブログのようにデータ更新の少ないWebサイトならば、SSGのメリットを最大限活かすことができると思います。

SSGはSEO的にも最強なので、ブログにはかなり向いているでしょう。

 

以上が静的サイトジェネレータに対する僕の考えでした。

まだまだ奥の深い技術ですが、今回はこんなもんで。

ABOUT ME
稲垣 貴映
サーバーエンジニア兼Webフロントエンジニア。 新卒で独立系SIerに入社後、金融系システム基盤の構築・運用を3年間経験。 プログラミングを独学していた頃に、CEOの馬谷が開講していたSwiftスクールに通い、2019年9月に入社。 趣味はブラジル音楽の演奏。
株式会社Playgroundのサービス
  • 無料・簡単・片手でホームページを作成できる自社サービス Rakwi
  • Web制作とアプリ開発を学べるオンラインプログラミング講座 Upstairs
  • 開発,DX推進支援サービス スタートアッププラン

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA