Workerを動かす

前の章で公開したページは、置いてあるだけの紙です。誰が見ても同じことしか書いてありません。この章では、そこに「聞かれたら、その場で答えを作って返す係」を1人だけ雇います。それがWorkerです。

なぜ、置いてあるだけでは足りないのか

前の章のページに「ただいまの時刻」を出したいとします。HTMLに直接時刻を書き込んでも、それは書いた瞬間の時刻のまま止まります。1時間後に見た人には、1時間前の時刻が表示されます。

第2章で出てきた「静的」と「動的」の違いが、ここで効いてきます。時刻のように、聞かれた瞬間に決まるものは、あらかじめ紙に書いておくことができません。聞かれてから作る必要があります。

その「聞かれてから作る係」がWorkerです。

作ってもらう

第5章のフォルダをそのまま使います。Claude Codeに開いた状態で、これを送ってください。

できあがるプログラムは、驚くほど短いです。要点はこの3行だけです。

if (url.pathname === "/api/hello") {
  return new Response(...);   // ここで答えを作る
}
return env.ASSETS.fetch(request);   // それ以外は置いてあるページ

読めなくて大丈夫です。ただ、「もし〜だったら、こうする。そうでなければ、こうする」と書いてあるんだな、というのは何となく見えるはずです。プログラムはだいたいこれの積み重ねです。

手元で動かして、目で見る

2つのURLを、順番にブラウザで開いてみてください。

• http://localhost:8787/ … これまで通りの自己紹介ページ
• http://localhost:8787/api/hello … 時刻の入った短い文字列

ここで、必ずやってほしいことがあります。 /api/hello のほうを開いたまま、ブラウザの再読み込みを何度か押してください。時刻が毎回変わります。トップページのほうは、何度読み込んでも変わりません。

これが「静的」と「動的」の違いです。言葉で読むより、この2つを交互に読み込んだほうが、体で分かります。

公開する

今度はログインを聞かれません。第5章で承認済みだからです。

いま起きたことの意味

あなたのURLは、もう「ただのページ」ではありません。頼めば答えを返してくれる窓口を持ちました。

この窓口の中身を変えれば、いろいろなことができます。フォームの送信を受け取る、外部のサービスに問い合わせる、そして——第10章でやりますが——画像のアップロードを受け取る。全部この形の延長線上にあります。

そして特筆すべきは、この処理が世界中のCloudflareのコンピューターで動いていることです。あなたは1台もサーバーを借りていません。

この章のまとめ

Workerを1つ足して、聞かれたときだけ答えを作る窓口を用意しました。静的と動的が1つのURLに同居していて、Workerがパスを見て振り分けています。

次の章では、覚えにくいURLを自分のドメインに変えます。あわせて、ずっと気になっているはずのお金の話に、数字で答えます。