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

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

静的サイトジェネレーターとは、生（未加工）データとテンプレート群を基に、完全に静的なHTML Webサイトを生成するツールのことです。静的サイトジェネレーターは、基本的に個々のHTMLページをコーディングする作業を自動化し、それらのページをユーザーがすぐに使えるようにします。これらのHTMLページは事前作成されたものであるため、ユーザーはブラウザで即座に読み込むことができます。

静的サイトジェネレータは、コンテンツ管理システム（CMS）に代わるもので、Webコンテンツの管理、Webページの生成、テンプレートの実装を行うもう一つのタイプのツールです（テンプレートとは、再利用可能なWebコンテンツのフォーマットのことで、開発者はテンプレートを使用することで同じフォーマットを何度も書くのを避けることができます）。静的サイトジェネレータは通常、JAMstackのWeb開発アプローチの一部です。

静的Webサイトとは？

静的Webサイトとは、1つまたは複数のHTMLウェブページで構成されている、毎回同じように読み込まれるWebサイトのことです。静的Webサイトは動的Webサイト（ユーザーの場所や時間、行動などのさまざまに変化するデータ入力に基づいて異なる内容が読み込まれる）とは対照的なものです。静的なWebページは単純なHTMLファイルのため高速に読み込むことができますが、動的なWebページは描画処理を行うためのJavaScriptコードをブラウザ内で実行する必要があります。

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

インターネットの黎明期のWebサイトは、すべてのWebページが事前にレイアウトされ、ハードコーディングされた静的なHTMLサイトとして保存されていました。これは、開発者がすべてのWebページを手作業でコーディングする必要があるため非効率的でした。

コンテンツマネジメントシステム（CMS）は、開発者が手作業で設定する手間を省くために登場したシステムです。ページを事前にコーディングする代わりにコンテンツをCMSのデータベースに保存します。ユーザーがページを要求すると、サーバーは次の処理を行います。

1. 適切なコンテンツをデータベースに問い合わせる
2. コンテンツが適合するテンプレートを識別する
3. ページを生成する
4. ユーザーにページを提供する

CMSのコンテンツは、CMSデータベースが提供するフィールドのいずれかに適合している必要がありますが、適合すれば、毎回Webサイトの適切な場所に表示されます。

静的サイトジェネレータは、この2つのアプローチの間の折衷案のようなものです。CMSと同様に、開発者はテンプレートを使用してWebページを自動的に生成することができますが、静的サイトジェネレータではユーザーのリクエストに応えるのではなく、事前に生成されます。このため、Webページは即座にエンドユーザーに配信されるようになり、Webサイトのパフォーマンスが向上します。また、CMSが提供するデータベースフィールドによる制限を受けないため、開発者にとってのカスタマイズ性も向上します。

静的サイトジェネレーターを使うことのメリットとデメリットは？

メリット

• パフォーマンス：静的サイトジェネレータは（CMSのような）オンデマンド形式ではなく、事前にWebページを作成しておく形式のため、ユーザーのブラウザでの読み込みが若干速くなります。
• カスタマイズ性：開発者は、自分好みのテンプレートを作ることができます。CMSが提供するフィールドや、CMSのビルトイン・テンプレートの制限を受けることはありません。
• 軽量なバックエンド：静的Webサイトは軽量であり、サーバー側で実行するコードもそれほど必要ありません。一方、CMSベースのWebサイトは頻繁にサーバー側にコンテンツの問い合わせを行います。

デメリット

• 既成のテンプレートが（ほとんど）ない：無制限にカスタマイズできることのデメリットとして、始めるまでに時間がかかることがあります。多くの静的サイトジェネレータにはテンプレートが付属しておらず、開発者は導入時にゼロから構築するのに多くの時間を費やす必要があります。
• 使いやすいインターフェースがない：開発経験がないユーザーが静的サイトジェネレータを使用してコンテンツを公開することは困難です。CMSのようなインターフェイスがなく、フォーマットされていない生（未加工）データを扱うことは、ユーザーにとってハードルが高く感じる可能性があります。また、Webサイトの更新には、開発者のサポートが必要な場合が多くあります。

JAMstackと静的サイトジェネレータの関係は？

JAMstack（JAMは「JavaScript、API、Markup」の略）は、軽量で高速なWebアプリケーションを効率的に作成するための方法論です。JAMstackのアプリケーションは静的であり、バックエンドの機能にAPIが使用されます。静的サイトジェネレータにより、開発者はJAMstackアプリケーションのフロントエンドを素早く構築することができます。

フロントエンドフレームワークは静的サイトジェネレータでどのように使用されるか？

フロントエンドフレームワークは、Webサイトのデザインとフォーマットに役立つ、あらかじめ構築されたコードであるファイルやフォルダーの集まりです。一般的なフロントエンドフレームワークには、Bootstrap、React、Vue.jsなどがありますが、他にも多く存在します。

フロントエンドフレームワークは、開発者が最初にWebサイトを構築する際に非常に役立ちます。ただし、フロントエンドフレームワークはそれ自体ではHTMLのWebページを生成せず、開発者は追加のツールを使用する必要があります。静的サイトジェネレータとフレームワークと一緒に使用することで、開発者は完全にデザインされたWebサイトまたはアプリケーションを迅速に使用できるようになります。ほとんどの静的サイトジェネレーターは、開発者が望むフレームワークを使用することができます。

Markdownとは？

Markdownは、テキストをフォーマットするための、広く使われているシンプルなマークアップ言語です。現在の多くの開発者はコンテンツをコーディングする際、従来のHTMLよりもMarkdownの使用を好み、多くの静的サイトジェネレータがMarkdownをサポートしています。

一般的に使われている静的サイトジェネレーターは？

現在、多くの静的サイトジェネレータが利用可能です。知っておくべき重要なものをいくつか紹介します。

• Jekyll
• Gatsby
• Hugo
• Next.js
• Eleventy

Cloudflare Pagesは、インターネットに接続する世界の99%から100ms圏内にあるCloudflareグローバルネットワーク上でホストされており、エンドユーザーにほぼ瞬時にコンテンツを配信することができます。Cloudflare Pagesは、Cloudflare Workersのサーバーレス機能の上に構築されており、開発者は軽量でスケーラブルなWebアプリケーションを構築することができます。

Cloudflare Pagesを使用して、Jekyllサイト、Gatsbyサイト、Hugoサイト、その他のサイトを構築する方法をご覧ください。