×

Web制作に有効なツール:Static Site Generatorについて徹底解説!!

2022/05/06

2022年は、フロントエンド開発の需要拡大が予想されます。
これまでフロントエンドの開発者はHTML、jQuery、そしてCSSを理解すればよかったのですが、現在では開発スキルだけでなく、フレームワーク。ツール、ライブラリ、といった「Static Site Generator」にも対応が必要です。
今回は、この「Static Site Generator」をまとめました。

これからフロントエンド開発者になる方、あるいはフロントエンド開発者としてさらなる成長を目指す方はこの記事を是非参考にしてもらえれば幸いです。

 

Static Site Generatorとは?

Static Site Generatorは日本語で「静的サイトジェネレータ(SSG)」と呼ぶ、ビルド処理で静的サイトを生成できるソフトウェアを指します。Webページのパフォーマンスを向上させ、クライアントに高速で配信できます。

「静的サイトジェネレータ」という用語は2011年から2015年頃に生まれましたが、このメカニズム自体はそれ以前から存在していました。古いCMSの中には、「静的CMS」と呼ばれる種類のCMSがあり、静的サイトジェネレータとほとんど同じように機能するものでした。具体的には、Adobe DreamweaverやMovable TypeなどのCMSは一般に静的CMSと呼ばれます。

CMSとの違いは?

今回SSGの記事となっていますが、実はWebサイト(以下「サイト」といいます)を構築・運用するソフトウェアの主流はCMSです。統計によると、全世界にあるサイトの概ね1/2がCMSを使用しているといわれています。ではそのCMSと静的サイトジェネレータの違いはどんな点なのでしょうか??

細かく言えば多くの違いがありますが、最も大きな相違点は「Webページを生成するタイミング」です。WordPressなどのほとんどの従来のCMSは、「ブラウザから実際にアクセスされた段階で」Webページを生成します。一方、SSGは、ファイルが本番サーバーにアップロードされる前の「ビルド段階」でWebページを生成します。

「ビルド」を簡単に言ってしまえば、「実稼働サーバー上でファイルのセットを生成するプロセス」です(厳密に言えばこれだけではないのですが、この説明ではこの表現があっています)。このビルドプロセスは通常、本番サーバー以外の環境(プログラマの開発マシンまたはビルドマシン)で実行されます。SSGによって作成されたサイトは、通常の静的サイトと同様に、「ブラウザからアクセスした場合に対応するファイルのコンテンツを返す」という単純な仕組みで動作します。

 

Static Site Generatorのメリット

SSGが最初に登場したとき、「コンテンツ管理が難しい」など懸念点などがよく言われていましたが、現在はこういった部分はすでに解決されており、逆にSSGには多くのメリットがあります。

SSGの典型的な利点のいくつかを次に示します。

サイト高速化

前のセクションで説明したように、ページはユーザアクセス前に生成され、アクセス段階では生成されたページをユーザーに送信するのみなので、ユーザーは素早く表示を見られます。

調査データによると、ユーザーの50%以上が3秒以上待った後にページを離れるといわれるほど、Webサイトの高速表示ニーズは年々高まっており、動的サイトよりはるかに高速なサイト構築が実現できるSSGは、このニーズを満たせます。

これこそ、SSG最大のメリットと言えるでしょう。

運用面

SSGにおいてもメンテナンスは必要ですが、メンテナンスコストは従来のCMSよりも低くなる傾向があります。特にセキュリティメンテナンスにおいてCMSの場合に深刻な脆弱性に関連するリリースがある場合、数時間~数日以内といった迅速な対応が求められますが、SSGではCMSよりもリスクにつながる可能性は低く、CMSの場合ほどメンテナンスを重視する必要はありません。

セキュリティ面

SSGの場合、データベース、API、およびCMS(ヘッドレスCMS)との通信は、ビルド時(ページ生成時)に実行されます。

その結果、生成されたページのみがネットワーク(CDN)で公開されるため、サイバー攻撃の標的となる可能性のあるデータベースやサーバーへの「入り口」がなく、高いセキュリティを維持できます。

 

Static Site Generatorのデメリット

多くのメリットを享受できるSSGですが、デメリットはないのでしょうか?高速・高機能であるが故に懸念点は存在します。それではこの3つの懸念点について紹介します。

プログラミング知識が必要

SSGを使用するには、「ターミナルが使える」、「開発環境を準備できる」などの基本的なプログラミング知識が必要です。CMSでも少し手の込んだことをやろうとするとプログラミングの知識が必要になりますが、CMSではプログラミングの知識がなくてもサイト公開できます。SSGが将来普及するにつれて状況は変わる可能性がありますが、現時点では、少なくともSSGは「プログラミングの基本的な知識」がなければ利用できません。

動的機能が実装されていない

CMSの一般的な機能には、「コンタクトフォーム」、「訪問者コメント」、「アクセス制限」などの動的でインタラクティブな機能が含まれます。SSGは静的サイトを生成するため、このような動的機能は原則実現できません。サイトに動的機能を追加したい場合は、クラウドサービスを利用する、別のサイトでその機能を準備するなどの対策が必要です。

ビルドに長時間必要

CMSの場合は、通常、管理者が記事を投稿するとすぐにサイトに反映されますが、静的SSGの場合は、ビルド処理が必要になるため、コンテンツの編集からサイトへの反映までタイムラグが生じます。数千、数万のコンテンツを含むサイトの場合、ビルドに数分から数時間かかることがあります(これはビルド環境に依存するため、単なる例です)。よってコンテンツが多い場合は、ビルド環境とワークフローの工夫が必要です。

 

Static Site GeneratorとCDNの関係

Static Site Generatorを利用するにあたり、それ単体で利用することは困難であり、インターネット環境を介して利用することが必要です。それゆえ自慢の高速性や高セキュリティ性もNW環境に左右されることになります。

昨今SSGを利用するNW環境としてCDNが注目されています。SSGとCDNはどのような関係で動作するのでしょうか?ここでは少しこの点について説明しましょう。

CDNとは

CDNは、「コンテンツ配信ネットワーク」を意味するContent Delivery Networkの略語です。インターネット上でキャッシュサーバーを分散設置し、エンドユーザーに最も近いキャッシュサーバーから画像やビデオなどのWebコンテンツを配布するメカニズムとなっている。CDNサービスとは、CDNメカニズムを使用して、企業向け画像や動画を多用するWebサイトの配信代行として機能するサービスです。

CDNサービスプロバイダーは、キャッシュサーバーをインターネットのIX(相互接続ポイント)の近くまたは主要プロバイダーのネットワーク内に配置するため、企業のWebサーバーと自動的に同期できます。

CDNを利用するメリットは?

CDNは、ある意味でインターネット上のエコシステムであり、CDN事業者が提供する分散エッジサーバー(キャッシュサーバー)から配信することで、インターネットサービスプロバイダー(ISP)が提供するバックボーン上に不必要なコンテンツトラフィックを流入させないことで表示速度向上効果が期待されます。

CDNを使用することで、Webだけでなく、大容量アプリケーション、音楽、ビデオ配信、オンラインゲームなどのブロードバンドコンテンツを安定して低コストで配信できます。

Static Site GeneratorとCDNを組み合わせることで得られる効果

それではSSGとCDNを組み合わせて利用することで得られる効果はどこにあるのでしょうか?ここまで説明すればいうまでもないでしょう。

元々高速、高セキュリティなSSGに分散構成による高速化、高セキュリティなNW環境であるCDNを組み合わせることで、さらに高速、高セキュリティなWebサイト環境を提供できるわけです。SSGとCDNはある意味最高の組み合わせといえるでしょう。

 

まとめ

いかがだったでしょうか?Static Site Generator(SSG)はCMS同様、Webサイトを構築するためのソフトウェアですが、CMSとはその内容は大きく異なります。その中でもそのアルゴリズムにより実現できる高速サイト構築ができる点は、SSG最大の特徴と言ってもよいでしょう。

Static Site Generator(SSG)を使ってWebサイト構築・運用を検討されてはいかがでしょうか?