「たい焼き」で学ぶ！最新ウェブサイトの作り方 (ヘッドレスCMS×静的サイト生成編)

はじめに

「うちのウェブサイト、なんだか表示が遅いなぁ…」
「スマホアプリでも同じ情報を使いたいけど、どうすればいいんだろう？」
「もっと自由にデザインや機能を追加したい！」

そんな悩みを解決してくれるのが、モダンなフロントエンド開発です。

『でも、「モダンなフロントエンド開発」とか言われても、なんだか難しそう…。』

今回は新しいウェブサイトの作り方を、エンジニアではない方でも分かりやすく、「たい焼き」に例えて説明したいと思います。

対象読者

• モダンなフロントエンド開発に興味があるが、難しい話は苦手という方
• ウェブサイトを運営している担当者やディレクター

従来型のCMSを利用したウェブサイト＝昔ながらのたい焼き屋さん

たい焼き屋さんに例える前に、 WordPressなどの従来型のCMSを利用したウェブサイトで、どのようにページが表示されるか、CMSの仕組みを踏まえて簡単に説明していきます。

ウェブサイトを閲覧したいユーザーがブラウザでサイトのURLを入力すると、ブラウザはWebサーバーにリクエストを送信します（①）。
リクエストを受け取ったWebサーバー内では、CMSが動作します。 CMSはURLからどのテンプレートを利用するかを決定し、データベースから取得したコンテンツとを組み合わせてHTMLを生成します（②）。
生成されたHTMLがレスポンスとして返却され（③）、ブラウザはHTMLを解析して画面を描画します。

ここで押さえておきたいポイントとしては「都度HTMLを生成する」というところです※1。

これを、たい焼き屋さんに例えたものが次の図です。（）内にはウェブサイトの場合に対応するものを記載しています。

お客さんがお店に訪ねてきて、たい焼きを注文します（①リクエスト）。
注文を受けた店主は、金型に生地を流し込み、お店で作ったあんこやクリームなどの具材を乗せ、たい焼きを焼き上げます（②HTML生成）。
最後にお客さんに出来上がったたい焼きを渡します（③レスポンス）。

なお（ちょっと唐突ですが）、この店は昔ながらのお店なので、支払いは現金のみです。また、年齢のせいか忘れっぽいようで、具材のレシピを書いた紙を壁に貼り付けているようです。

ここまで説明した中で、昔ながらのたい焼き屋さんには、いくつか課題があることがわかりました。

では、これらの課題を解決した新しいたい焼き屋さんの仕組みを見ていきましょう。

※1 これはSSR(Server Side Rendering)と呼ばれます。

新しいウェブサイトの構成（ヘッドレスCMS＋静的サイト生成）＝たい焼き自動販売機

新しいウェブサイトの構成を支える重要な考え方が、ウェブサイトの裏側（バックエンド）と表側（フロントエンド）を分離する「デカップリング」です。
たい焼きで言えば、「具材（コンテンツ）」の工場と「皮のデザイン（見た目）」の工場を分けるようなものです。
このように役割を分離した上で、ウェブサイトの全ページをあらかじめ生成しておく（＝たい焼きを事前にすべて焼いておく）。これが、表示を高速にするための最大の特徴です。

まずは、新しいウェブサイトの構成である「ヘッドレスCMS＋静的サイト生成」の構成について図で説明します。この構成はJamstack構成とも呼ばれます。
この図だけ見ると、難しそうと思うかもしれませんが、全部理解しなくても大丈夫ですので安心してください。

重要なのは点線で囲まれた箇所です。ウェブサイトを閲覧したいユーザーAが、ブラウザでURLを入力すると、ブラウザはCDNの機能によりユーザーAに一番近いサーバーにリクエストを送信することができます（①）。
リクエストを受け取ったエッジサーバーは、事前に生成されたHTMLを返却します※2（②）。ブラウザはHTMLを解析して画面を描画します（ウェブサイトが画面に表示されます）。
このように、従来型のCMSを利用したウェブサイトよりも少ない手順でページを表示できます。

これを、「たい焼き自動販売機」に例えたものが次の図です。

※2 VercelやNetlifyなどオリジンサーバーを意識しない構成を想定。

具材工場＝ヘッドレスCMS

たい焼き自動販売機を運営する会社は、あんこやカスタードクリームなどの具材（CMSで管理するコンテンツ）を作る専門工場を持っています。 この工場で作った具材は、たい焼きだけでなく、今川焼き、大福、あんぱんなどにも使えるようになっているのが特徴です。
なお、具材工場の場所は、一部の関係者のみが知っている状態で、美味しい具材の秘密のレシピが漏れる心配もありません。

新しいウェブサイト構成では、これは「ヘッドレスCMS」と呼ばれるものに相当します。「ヘッド＝見た目」の縛りがなく、データ管理に特化しているため、ウェブサイト以外にもコンテンツが活用できます。 従来型のCMSのようにウェブサイトを公開しているサーバー内にはCMSが存在してないため、セキュリティに強い点も特徴です。

たい焼き工場＝CI/CD環境での静的サイト生成

たい焼き自動販売機を運営する会社は、具材工場から送られてきた具材（コンテンツ）と、最新の金型（テンプレート）と生地を使って、あらかじめたい焼きを全種類焼き上げておく製造ラインを持った「たい焼き工場」があります。
新しいウェブサイトの作り方では、これはCI/CD※3で実行される「静的サイト生成※4」と呼ばれるものに相当します。 

また、このたい焼き工場の金型は、昔ながらのたい焼き屋さんの物とは違い、いくつかのパーツが組み合わさってできています。
これは、新しいウェブサイトの世界では、コンポーネント※5を複数組み合わせてページを作っている状況に相当します。

※3 ウェブサイトを自動で準備・更新してくれる仕組み。
※4 SSG(Static Site Generation)と呼ばれます。
※5 コンポーネントはReactで作成されることが多く、その際はHTMLタグをJavaScriptコードの中に直接書くことができるJSXというものが使われます。

全国に設置されたたい焼き自動販売機＝CDN

焼き上がった大量のたい焼きは、すぐに全国各地にある「たい焼き自動販売機」に補充されます。
これは新しいウェブサイトの作り方で言うと、事前生成したHTMLが、世界中のCDNに配信されるのと同じです。
お客さんは、一番近くの自動販売機でたい焼きをすぐに受け取ることができます。 これと同じように、 ウェブサイトの閲覧者も、物理的に最も近いCDNからサイトのデータを高速に受け取ることができます。

具材のレシピや皮のデザインが変わったら？＝変更をCI/CDで自動反映

新しいウェブサイトの構成では、ヘッドレスCMSでブログ記事を更新したり、ウェブサイトのデザインを実装したコンポーネントのソースコードを変更したりすると、その変更をきっかけに、自動的にサイト全体が再ビルドされます。そして、新しくなったウェブサイトのデータが、世界中のCDNに一斉に配信されます。この自動化された一連の流れをCI/CDと呼びます。

これをたい焼きの例えで見てみましょう。 具材工場で新しい味のあんこ（新しいブログ記事）ができたり、金型工場で皮のデザイン（コンポーネント）が少し変わったりすると、その情報がすぐにたい焼き工場に連絡されます。 たい焼き工場では、新しい具材と金型を取り寄せた上で、たい焼きをすべて焼き直し、全国の自動販売機に一斉に配送し直します。この焼き直しと配送には少し時間がかかりますが、これにより、お客さんはいつでも最新の美味しいたい焼きを手にすることができます。

なぜ「たい焼き自動販売機」(ヘッドレスCMS+静的サイト生成) が注目されるの？メリットまとめ

この新しい「たい焼き自動販売機」方式（ヘッドレスCMS＋静的サイト生成）には、嬉しいメリットがたくさんあります。

まとめ

ウェブサイトの作り方は、より速く、より安全に、そしてより柔軟になるように進化しています。

「昔ながらの たい焼き屋さん」（WordPressなど）も依然として便利な方法ですが、特に表示速度やセキュリティ、将来的な拡張性を重視するなら、「たい焼き自動販売機」(ヘッドレスCMS＋静的サイト生成）という新しい作り方が非常に有力な選択肢となっています。
あなたのウェブサイトも、最新の「たい焼き自動販売機」方式で、もっと快適に、もっとパワフルにしてみませんか？