今までごちゃごちゃとヘッドレスCMSの話をしましたが、自分のように郵便局に通帳を持ってお金をおろしに行くようなチンパンジーがどういう流れでこういう話をするに至ったかそろそろ細かく分けて書いていこうと思います（下記参照）。
Jamstack
という言葉を知ったのは開発の環境を作った後だったので、最初から意図したわけではないのですが、結果的にそういう環境になっていたらしいです。
定義としては、
JavaScript（J）、API（A）、Markup（M）の3つの技術要素を組み合わせてWebサイトやWebアプリケーションを構築するモダンな開発手法です。
だそうです。このブログはweb制作のフロント寄りの学生さんも見ることを想定しているのですが、自分の身の回りでは、J と M はお馴染みの方が多そうです。例えば静的なLPとかなら作れるよ、という方に向けて知って欲しい話です。ゴリゴリのエンジニアの人は読まないで欲しいです。
LPなら作れるよ、という人も公共のAPIから任意のデータを取って手元でパースして云々、みたいなことは可能かと思いますので、A も触るんで全然Jamstackやないかいと思われるかもしれませんが、VScodeなどのIDEでバタバタコーディングして、出来上がったらFTPでアップロードする・・というのとはちょっと流れが違うようです。
どう違うんねん
まず、どうやら現在の実装関連は、リソースと更新履歴を、ローカルのPCと製作者の脳内ではなく、gitHubにリポジトリなるものを立て、その分身をローカルに確保して、同期させながら作業するようなイメージです。手元でマークアップをすることには変わりありませんが、セーブデータはリモートに置くようなイメージです。オンラインゲームみたいですね。
gitについてはこちらがとてもわかりやすいです。興味があったら見て見てください。
それはJamstackと何の関係があるの
このgitHubというのがすごくてですね、特定のホスティング環境に対してはFTPクライアントなど使わなくてもデプロイ（アップロードみたいなもの）できたり、本来まず覚えたいリソースと履歴の保持以外にもすごい機能がとてもたくさんあります。
例えば、Cloudflare（後述します）のようなエッジホスティング環境に向けて「公開！」という処理が同期したりするようになります。インフラ側はテレホーダイの頃よりものすごく進化しました。
自分で書いてても（難しそう・・）と思いますが、こういうことできるんですよね、というのをAIに聞きながら進めると案外簡単に成り立ってしまうので、AIよりもAI以前のエンジニアの人はそういうのどこで覚えてくるんだよすげえなあと思うのです。
そういうことができると知った上で
名前は聞いたことあるかもしれませんが、ReactとかVueとか、いわゆるwebフレームワークというのは、前出のような環境で運用することがある程度前提になっています。静的なLP何ページか、だとあまり重要ではないんですが、CMSのような複雑でたくさんのテンプレートやモジュールが必要になる制作環境では、直接的にコンテンツを作るというよりは、共有する部品やルールの組み合わせでページを「生成する」というイメージがフレームワークの場合近いです。ただマークアップするよりも残念ながら学習コストはやや高くなります。自分もニガテではあるんですが、そういう環境もJamstackと関係があるようです。
そこでAstroの出番です
Astro（おじさんには球団名にも見える）
このフレームワークなんですが、とにかく表示が速くて、維持がラクなWebサイトを作るためのツールです。ただページを作るだけならほとんどjavascriptいらないんですよね。全く不要ではないんですが。
静的ページの実装ならほぼhtmlとcssの知識だけで最低限は成り立ちます。
Astro自身がNode.js（JavaScript環境）で動いて記事データをHTMLに変換してくれるので、これが J と M を担っている・・ような認識でいます。
環境を作り、ビルドできるようにする
Astroに限らないんですが、フレームワークは大体pcにインストールし、実行環境を作る作業から始まります。いずれ詳しく触れますが、それこそその辺をAIに聞いて環境を作ってもらってもとりあえずはいいと思います。
ローカルにインストールしたAstroなどのフレームワークと、その記述ルールなどに従って作ったものはgitHubのそのプロジェクト用のリポジトリに同期させます。手順は環境に合わせてAIが教えてくれます。そのgitHubのリソースをどのように配信、公開するかと言いますと・・
エッジホスティングという言葉があるらしい
エッジホスティングとは、世界中に分散したエッジサーバー（利用者の近くにあるサーバー）上で、WebサイトやWebアプリケーションのコードやデータを直接実行・配信するホスティング方式のことです。
通常のwebサーバのホスティングとはなんか違うらしい・・。
FTPアカウントをもらってアップロードする環境とどう違うのでしょう・・。
普通の月額いくらのホスティング屋さんだとFTPのアカウントをもらってアップロードするわけですが、エッジサーバーは、自分にも正直難しいんですが、とにかく落ちない、早い、なぜかお金かからない、というお得な環境のようです。
ウワサのCloudflare
オシャレなVercel
ただこのエッジサーバーは通常のwebサーバと同じような使い方はあまり想定されておらず、gitHubのリポジトリからフックする形でデプロイして配信するのがある程度前提になっている感じがします。
上記のようなことを調べたりAIに教えてもらったりしながら出来上がったのが下図のような環境というかアーキテクチャです。
ちなみにブログ記事はmicroCMSというほぼヘッドレス前提のバックエンドを用意しました。これもタダです。これをAPIとして使います。Jamstackの A です。
この全て合わせて無料の環境をどういった順序でどのように用意したか、というのはまた別の話にします。
※全く同じタイトルの記事をCloudflareが上げてた。 > これ（eng）
