近年、Web開発で広がりつつある「JAMstack」と「静的サイトジェネレーター」ですが、国内ではマイナーなこともあり、使いどころ、メリットがいまいち理解されていないのが現実です。
本記事では、JAMstack を実現する際に利用される要素技術、「静的サイトジェネレーター」の仕組みについて解説していきます。
「そもそもJAMStackって何？」という方は、先に以下の記事をお読みになっていただければと思います。
⇨ 【モダン開発とは？ヘッドレスCMSとは？】
※文中で多用するので、より短く以下より「静的サイトジェネレーター」を「SSG(static site generation)」と記載している個所があります。
SSG（Static Site Generator）とは
まず簡単に「静的サイトジェネレーター」（SSG）とは一体何なのか、解説いたします。
SSGとは「Static Site Generator」の略で、日本語に訳すと 「静的サイト生成 」です。 これはビルド（※1）時に事前にHTMLを生成しておいて、リクエストがあったら単純にそれを返す、といった仕組みです。
通常のWebサイトでは、ユーザーからリクエストが投げられる（HTTPリクエスト）度にサーバがHTMLを生成し、ページをレスポンスとして返します。
この方法だと、一度読み込んだ部分もリクエストが投げられる度に再度、生成する必要があるので処理速度が遅くなり、負荷もかかってしまいます。
ですが、SSGはビルドのタイミングで事前にHTMLを生成しているため、リクエストが投げられたときも生成は終わっており、それをレスポンスとして返すだけになり、結果的に速度が非常に速くなります。
これでSSGについては理解できたかと思います。
次章ではメリット・デメリットについて解説していきます。
※1 ビルドとは、記述したソースコードに問題（バグ）がないか解析を行い、問題がなければ実行できる形のファイルに変換し、組み立てることです。
「JAMstack」を支えるSSGの4つのメリット
ここでは高速なウェブサイトを実現する「JAMstack」を支えるSSGの4つのメリットとデメリットをご紹介いたします。
SSGのメリット
▼サイト表示の高速化
前章でも説明いたしましたが、SSGで作られたサイトはビルド時にすべてのページを生成し、サーバでHTMLを動的に生成しません。
したがって、「プログラムが動いてページを生成する」という過程が無い分 CMS（※2） よりもページ読み込みのスピードが早くなります。
※2 CMSとは、Contents Management System（コンテンツ・マネジメント・システム）の頭文字をとった略称です。web制作に必要な専門的な知識が無くても、webサイトやコンテンツを構築・管理・更新できるシステムのことを言います。
▼パフォーマンス向上
事前にHTMLが生成されるという仕組みは、ページ読み込みスピードもそうですが、大量のアクセスへの対応といったパフォーマンス面でもメリットがあります。パフォーマンス上のデメリットを補うために CMS の場合はさまざまな手法を駆使する必要がありますが、SSGは CMS であらゆる対策を施した後の状態が最初から実現できるようなものです。
▼バックアップ不要
CMSでサイトのバックアップを行うには「CMS のコード」「アップロードファイル」「データベース」の3つを保存する必要があります。これらはタイミングを変えて保存すると不整合が起こることもあるので、極力同じタイミングで保存する必要があります。バックアップの中身を確認したり特定のバックアップの状態に戻したりするのには一般に手間とコストがかかります。
ただ、SSGだとソースコードをGit で管理しているので、そこがすなわちバックアップデータになります。リポジトリにすべてのデータが格納され、さらにはローカルにも同じデータがあるのでバックアップは不要となります。
▼セキュリティリスクの低減
SSGで作られたサイトはビルド時にすべてのページを生成するため、ブラウザからのアクセス時には動的な処理は行いません。そのため、サイト上での各種インジェクションや不正ログインの被害を受けるリスクが低くなります。
SSGのデメリット
▼ビルドの時間がかかる
CMS の場合は管理者がコンテンツを編集したらすぐにサイトに反映されることが一般的ですが、SSGの場合はビルド処理が必要な関係で、コンテンツの編集からサイトへの反映までにタイムラグが生じます。なので、ページ数が多くなるにつれて、ビルドに時間がかかってしまいます。
▼動的ページを原則配置できない
基本的にはサーバ上での動的出力を行なわず、静的サイトを生成するものなので、「コンタクトフォーム」「コメント機能」などの動的な機能の表示は難しくなってきます。
サイトに動的な機能を付けたい場合は、クラウドサービスを利用したり、別サイトでその機能を用意したり等といった対応が必要になります。
ここで、メリット・デメリットをまとめてみましたが、使い所としては、LPや小～中規模のブログ系コンテンツ、ページの表示速度で高いパフォーマンスが求められるサイトなどに使用するのが向いているということになります。
代表的な静的ジェネレーター
DigitooではNuxt.jsという、Vue.jsをベースに開発された、SSGを採用しております。
なぜ、DigitooがNuxt.jsを採用したのか、他のサイトジェネレーターの種類と特徴と一緒に解説していきたいと思います。
▼Next.js
Next.js はReact.jsベースの静的サイトジェネレーターです。プリレンダリング方式としてSSG（静的サイト生成）とSSR（サーバサイドレンダリング）の2つをサポートしている点が大きな特徴です。元々はSSRがメインだったようですが、 2020年に登場したバージョン9.3からは動的ルーティングができるようになり、SSG の機能が強化されました。
▼Gatsby
Gatsby はNext.jsと同じReact.jsベースのSSGです。 Next.jsとは異なりSSRはサポートしていない純粋なSSGです。すべてのコンテンツをGraphQL（GraphQLとは、クエリ言語とスキーマ言語で構成されたWeb APIの規格）を経由して取得します。プラグインシステムやテーマシステムを備えており、どこかWordPressにイメージが似ています。利用数が昨年あたりから急速に伸びており、Next.jsとGatsbyの2つが今世界的に最も注目を集めているSSGです。
▼Nuxt.js
Nuxt.js はVue.js ベースのSSGです。名前の似たNext.jsがReactベースなのに対しこちらはVue.jsベースです。シンプルさ・わかりやすさをウリにしています。日本国内ではVue.jsの人気が高いこともあってNuxt.jsの人気が非常に高いようです。世界的にはReact ベースのNext.jsやGatsbyの方が断然多く使われていますが、国内ではNuxt.jsの方が利用者数がまだまだ多そうです。
▼Hugo
静的サイトジェネレーターはフロントエンド寄りのテクノロジーなので、言語にはJavaScriptを使うものが多いですが、このHugoにはGo言語が使われています。JavaScript以外のSSGで最も人気のものと言ってよいでしょう。 HugoがJavaScriptベースのSSGに大きく勝る点として、「ビルド時間の短さ」と「環境構築の手軽さ」があります。こちらの調査でもビルド時間はHugoが最短になっています。
今回ご紹介するSSGはHugo以外はすべてスクリプト言語ベースのものなので、ビルドのパフォーマンス重視で選ぶならHugo一択になるかと思います。
▼Jekyll
Jekyll はRubyベースのSSG です。最古の静的サイトジェネレーターといわれており、近年のJAMstackトレンドが来るずっと前から広く使われており、今でも新しいバージョンがリリースされていますが、GatsbyやNext.jsといった高機能な静的サイトジェネレーターの登場で、近年は個人のブログや小規模サイトでの利用が主になっています。
上記以外にも、まだまだ静的サイトジェネレーターは存在しますが、本プロジェクトDigitooでは、「PWAモジュールが用意されている」、管理がしやすい「単一ファイルコンポーネント」が使用できるという点からNuxt.jsを採用しております。
DigitooでのSSGの仕組み
前章でNuxt.jsを採用した理由を記載いたしましたが、ここではJAMstack構成で開発された、「Digitoo」でのSSGの仕組みについて簡単に解説していきたいと思います。
SSGの仕組み
ここまでSSGについて解説してきましたが、Digitooではどのようにしてファイルを保存し、公開しているのでしょうか？
それは以下の二つのAWSコンテンツを使用しております。
① Amazon S3
こちらは、Amazonが提供するオリジンサーバになります。
ここにファイルを配置しており、初回アクセス時やキャッシュ失効時には、このオリジンサーバからコンテンツを取得するようにしております。
② Amazon CloudFront
こちらは、Amazonが提供するCDNになります。
CDNとは一体何なのでしょう？
CDNとは「Content Delivery Network（コンテンツデリバリーネットワーク）」の略で、ウェブコンテンツを効率的かつスピーディーに配信できるように工夫されたネットワークのことで、アクセスが集中したりコンテンツが大容量化したりしても、キャッシュサーバに負荷を分散させることでオリジンサーバの負担を減らすことができます。
Amazon S3だけでも事足りるのでは？と思われがちですが、Amazon CloudFrontを使用することで、世界各地に設置してあるキャッシュサーバからコンテンツの配信を行うことができます。これにより、自動でユーザーから一番近いキャッシュサーバにアクセスしてファイルのダウンロードを行うことができ、結果的にユーザーへのレスポンスを早め、ダウンロードを速くすることができます。
他にもGitからpushした後の処理や、ヘッドレスCMSの設定のため、数種類のAWSコンテンツを使用しておりますが、そちらについては今回は割愛させていただきます。
Nuxt.jsでビルドした後、上記のAWSコンテンツに静的ファイルを保存することで、サイトを公開しております。
JAMstackな環境
「JAMstackって何？」という方は、以下の記事をご参考にしてください。
⇨ 【モダン開発とは？ヘッドレスCMSとは？】
ヘッドレスCMSと合わせて、詳しい構成図が知りたい方は以下のサーバ構成図をダウンロードください。
最後に
Digitooはマーケターに向けた情報集約メディアなので、SNSのような「多人数が同時に接続してデータを更新するような」サイトではありません。
つまり、ブログのように小〜中規模のサイトで会員機能がなければ、SSGのメリットを最大限活かすことができるということになります。
今回は代表的な静的サイトジェネレーターを紹介いたしましたが、その他の静的サイトジェネレーターもたくさんあるので、開発に応じたサイトジェネレーターを使用いただければと思います。