「Cloudflareの学習教材」をkomiyammaさんが無料公開。動かせる章を全部実測したら、詰まる場所が4つ見えた

家事と子育てのスキマで経営する3方よしAI共創コンサルタントの田中啓之、ひろくん（@passion_tanaka）です。今回は、komiyammaさんが無料公開している「Cloudflareの学習教材」を、実機検証の結果つきで紹介するね。

この章でわかること｜この教材が最初に何を約束しているのか、そしてなぜ私が実機で確かめる気になったのかを書きます。

今回の主役は、komiyammaさんが無料で公開している「Cloudflareの学習教材」。全24章・約360レッスンという、有料講座でもなかなか見ない規模です。で、第3章の入口を読んだところで、私の手が止まりました。理由はこの一文。

教材 第3章「Cloudflareの管理画面を散歩しよう」より

最初の目標は、全部わかることではなく、見ても怖くなくなることです

Cloudflareの管理画面って、初見だと本当に迷子になります。メニューが多い。横文字も多い。どこを押すと課金されるのか分からない不安もあって、この教材はそこを「管理画面は“大きな建物のフロアマップ”みたいなもの」と言い切り、設定ではなく散歩から始めさせます。順番の設計が、うまい……。

この設計思想に、私は昔の悔しさを思い出しました。20代の頃に買った、3万円の情報商材。見た目は豪華で中身はスカスカ、「凄そうな雰囲気」に見事に騙されました。あの日から、教材を見る目だけは人一倍厳しくなったと思います。

その厳しい目で見ても、これは無料。しかも約束するのが「全部わかること」ではなく「怖くなくなること」なんです。教える側が、学ぶ側の心理から逆算して設計している証拠。中卒フリーターからリフォーム会社でWEB集客を独学した私が当時いちばん欲しかったのも、正解の羅列ではなく、この「怖さを下げてくれる地図」でした。ここまで読んで、実機で確かめる価値があると判断しました。

【まず目次だけ散歩する】最初の一歩はこれ。教材トップを開いて、24章の目次だけ眺めてみてください。所要10分。「自分が学びたい章を1つ指させる」ようになったら、それで今日は完了です。

この章でわかること｜第4章で教材に載っていない画面が出て止まります。正体と、10秒で抜ける方法をお伝えします。

第4章は、C3（create-cloudflare）で最初のプロジェクトを作る章。教材はこう案内しています。

教材 第4章「開発環境」より

C3 は対話形式で必要なことを順番に聞いてくれるので、最初は無理にオプションを全部覚えなくて大丈夫です。

ここで先に前提をひとつ。この教材は Node.js と npm が入っているPCが出発点で、実際に使う道具は wrangler——Cloudflareが配っている、Workersを自分のPCで動かすための無料コマンドです。そのとおり npm create cloudflare@latest -- my-first-worker を実行。すると——止まった。出てきたのはこの画面です。

実測ログ（2026-08-11・第4章の手順を実行したターミナル出力）

Need to install the following packages:
create-cloudflare@2.70.18
Ok to proceed? (y)

初見だと、ぎょっとする。でも教材には、このプロンプトの記載がありません。正体は、npmが初回だけ出すパッケージインストールの確認で、フリーズではなく入力待ちです。回避は簡単。y と打ってEnterを押せば、教材どおりの対話（Hello World example → Worker only → TypeScript）に進みます。教材の落ち度というより、教材の外側にあるnpmの挙動です。

ただ、正直これは初学者に効くと思う。「言われたとおり打ったのに違う画面が出た」って、独学でいちばん心が折れる瞬間だから……。何が起きても「これは想定内の確認画面」と知っているだけで、完走率は変わります。「AIなんて自分には無理」と夜中に検索してしまう人の足を止めるのは、たいてい難しさではなく、こういう想定外の画面。ここが、今回の実機検証でいちばん拾いたかった情報です。

【止まったら y と打つ】第4章を始める前に、この画面が出ることだけ頭に入れておく。それだけ。急ぐ日は npx --yes create-cloudflare@latest で確認そのものを飛ばせます。完了条件は、対話の最初の質問が表示されることです。

この章でわかること｜第7章で壊れていたのは教材ではなく公式ツールの方でした。再現条件と、動く書き方をまとめます。

第7章の静的サイト公開では、逆のことが起きた。壊れていたのは教材ではなく、公式ツールの方だったんです。

教材 第7章「静的サイト公開」より

もし静的アセットだけを設定した場合、存在するファイルはそのまま返り、存在しない URL は 404 Not Found になります。

まずC3のフラグ経路。create-cloudflare --help は hello-world-assets-only をAllowed Valuesに明記しているのに、実行すると「ERROR Error: Unknown application type provided」で落ちます。ヘルプと実装が食い違っている——2026-08-11時点の C3 v2.70.18 で再現した現象です。別のバージョンでは直っているかもしれないので、そこは自分の環境で確かめてほしい。いやー、これを初見で踏んだら自分を疑うと思います。

一方、教材が本文に載せている手書きの最小構成はどうか。name・compatibility_date・assets.directory の実質3項目だけの wrangler.jsonc をそのまま作って wrangler dev したら、トップページは200 OK、キャッシュはCF-Cache-Status: HIT、CSSも200、存在しないパスは引用のとおり404が返りました。完璧に動いた。教材の説明どおりです。

構図はこう。つまりこの教材、便利なフラグに頼らせず、中身が見える手書き設定を正面から教えていたおかげで、公式ツールの故障の影響を受けませんでした。私はお弁当を400個作った日に「作る側の400分の1でも、受け取る一人には1分の1」と骨身に染みた人間です。360レッスンの1レッスンまでこの精度で書く丁寧さには、素直に頭が下がった。

【最小設定を写経する】静的サイトを試すなら、C3ではなく教材の最小wrangler.jsoncを手で書くのがおすすめです。所要15分。完了条件は、ローカルで存在しないURLがちゃんと404で返ることです。

この章でわかること｜第9章のAPIが200・400・405の3パターンとも教材どおりに動いた実測を、そのまま載せます。

第9章は、WorkersでAPIを作る章。ここは教材の設計思想がいちばん出ている場所で、404と405の違いをこう説明します。

教材 第9章「WorkersでAPIを作る」より

この違いを入れるだけで、急に API が「それっぽく」なります

で、実測の結果はこう。GET /api/profile?id=1 は200で「テスト太郎」のJSONが返ります。idを外すと400で「id は必須です」。POST に切り替えると405で、レスポンスヘッダには Allow: GET まで付いてきました。405は「そのやり方は受け付けない」、Allow: GET は「GETならいいよ」という返事。3パターンとも、教材の設計どおりでした。

それだけじゃない。Cache APIは1回目が x-cache: MISS、2回目が HIT。ローカルの wrangler dev でも、ちゃんとキャッシュが効きます。HTMLRewriterは「元の見出し」というh1を、実際に「HTMLRewriterで差し替えた見出し」に書き換えました。console.logの出力もそのままログに出る。全部動いた。

「教材どおり動く」なんて当たり前だと思うかもしれません。でも、AIまわりの教材を日々読んでいる身としては、公開から数ヶ月で手順が古びるのが普通の世界なんです……。レシピどおり作って、写真と同じ料理が本当に出てくる安心感は、独学者にとってお金を出す価値があるレベルの情報です。AIの話をしていても、私がいちばん信じているのは実際に手を動かした時の手触りです。それが無料。

【3つの数字を自分の目で見る】第9章まで進んだら、curl -i "http://localhost:8787/api/profile?id=1" → curl -i http://localhost:8787/api/profile → curl -i -X POST http://localhost:8787/api/profile の順に叩くと、200・400・405が順番に出ます（Windowsは未検証です。PowerShellでは curl の扱いが違うため、読み替えが要ります）。所要15分。完了条件は、405のレスポンスに Allow: GET を見つけることです。

この章でわかること｜第6章で私が一度検証を失敗した話です。設定ファイルだけ再起動が要る、という罠をお見せします。

第6章は wrangler dev とログとenvの章。教材どおりに進みつつ、1つだけ教材に書かれていない非対称を見つけました。ついでに、起動時のこんなメッセージも拾った。

実測ログ（wrangler dev 起動時の出力）

Wrangler detected this dev session is running in an AI agent.
The Local Explorer API is available at http://localhost:8787/cdn-cgi/local/explorer/api

非対称というのはこうです。ソースコードは保存すれば即反映されます。なのに wrangler.jsonc に vars を足しただけでは、env.GREETING は null のまま。一度止めて起動し直して、初めて「ローカルのenvから読めた」という値が返りました。設定ファイルだけ、ホットリロードの対象外なんです。

あと、告白を1つ。ここは正直に書きます。この検証、最初は失敗した。検証の手を動かしたうちのAI秘書の凛ちゃんが、JSONCのコメント行を「varsがある」と誤読して挿入をスキップしていたんです。教材の問題ではなく、こちらの実装ミスでした。実測を名乗るなら、失敗の過程も含めて出すのがフェアだと思うので。失敗も財宝だと思っているので、躓いたところは隠さず書く。

もう1つ。起動メッセージが「AIエージェントの中で動いている」と検知して、Local Explorer APIを案内してくるのは面白い発見でした。教材も第6章でこの機能をくり返し案内していて、記述どおり実在します。ただしbindings——コードから「このKVを使う」「このAIを使う」と紐づける設定のこと——に出るのはKVやD1などだけで、varsは出ない。ツールを実測で疑う話はcclensでClaude Codeを計測した記事でも書いたけど、開発環境そのものがAIを前提に変わり始めています。

【設定を触ったら再起動】wrangler.jsoncを編集したら、Ctrl+Cで止めて wrangler dev を打ち直します。これを癖に。完了条件は、足したvarsの値がブラウザにJSONで表示されることです。

この章でわかること｜教材の地図に載っていない項目が、実際の管理画面では一等地に増えていました（実機映像つき）。

第3章のダッシュボード散歩を、ログイン済みの実アカウントでやってみました。すると、教材に1回も出てこないものが、画面のいちばん目立つ場所に貼ってあった。

実測（2026-08-11・Cloudflareダッシュボード最上部のバナー）

Onboard your agent to Cloudflare
Works with Claude, Codex, Cursor, and OpenCode

AIエージェントをCloudflareに迎え入れる案内が、入口の一等地に貼ってある。教材の第3章で管理画面を歩いた時点では、まだ無かったものです。メニューを上から見ていくと、教材に出てくる名前に混じって、教材には一度も出てこない項目が並んでいます。たとえば「MCP ポータル」と「Log Explorer」。つまり教材の地図どおりに歩くと、地図に無い部屋がいくつか目に入ります。初見だと「自分が変なところに来たのかな」と不安になるところです。でも、あとから増えた新しいメニューだと知っていれば、素通りできる。ここが今日いちばん持ち帰ってほしいところです。

誤解しないでね。これ、教材が悪いという話ではありません。教材は第24章に「確認日: 2026-04-24」と自分で明記しています。つまり4ヶ月足らずで、Cloudflareは入口のバナーごと変わった。地図が古いんじゃなくて、大陸が動くのが速すぎる……。むしろ確認日を書いてくれているおかげで、どこからが差分かを読者が判定できます。これも誠実な設計だと思う。教材と実画面を見比べると、片方だけ見ていた時より一段上から自分の学びを眺められます。

だから使い方はこうなります。教材で骨格を学ぶ。実画面で差分を拾う。この2つをセットで回します。骨格のない人は差分の意味が読めないし、差分を見ない人は4ヶ月前の地図で歩くことになる——どちらか片方では足りない時代になった、というのが散歩の結論です。

【差分メモを1行残す】やることは1つ。教材の章を1つ終えるたびに、対応する実画面を開いて、教材に載っていない項目を1つだけメモします。完了条件は、自分の差分メモが1行できることです。

この章でわかること｜「話題のWebMCPも学べる？」の答えです。結論は、まだ学べません。

「話題のWebMCPも、この教材で学べる？」——ここが気になる人は多いはず。答えは、まだ学べません。教材の全ページを機械で調べて、その語が1回も出てこないことを確かめました。推測ではなく全数。使ったのはこれだけ。

実測（2026-08-11・教材sitemapの全ページを走査した結果）

$ wc -l all-pages.txt
   410 all-pages.txt
$ grep -c '^WEBMCP_HIT' scan-result.txt
0
$ grep -c '^MCP_HIT' scan-result.txt
186

結果はこうです。WebMCPは0ページ。一方でMCP（サーバー側の方）は、章をまたいでレッスンが用意されていました。つまりMCPは学べて、WebMCPだけがまだ無い。ここが今の教材の境目です。

教材 第24章「remote MCP server自作へ進む道」より

MCPは、AI assistantが外部ツールやデータへ接続するためのプロトコルです。
Cloudflare公式のLabsやAgents docsでは、Workers上でremote MCP serverを作る流れが案内されています。

WebMCPは、ブラウザ側の新しい標準（document.modelContext）。教材に無いのには、はっきりした理由がある。Cloudflareは2026年8月10日、WebMCPをダッシュボードのトグル1つで有効化できる開発者プレビューを発表しました。私がこの教材をブックマークした日の、翌日の話です。

時系列はこう。教材の確認日は2026-04-24で、発表はその約4ヶ月後です。地図が描かれた後に、地図の外側へ新大陸が生えた——AIまわりは学習教材が追いつかない速度で動く、ということの、これ以上ない実例だと思います。ぶっちゃけ、どんな教材を選んでもこの構図からは逃げられない。

でもね、ここに希望が1つあるんです。Cloudflareの発表を読むと、WebMCPをページに差し込む仕組みは、エッジでHTMLRewriterを使ってページに注入する方式。HTMLRewriter——さっき第9章で「本当に書き換わった」と実測した、あの基礎技術です。教材で学んだ足元が、発表されたばかりの最新機能の中身に、そのままつながっています。基礎は腐らない。これが実測で言えたのは大きいです。

【一次情報を2本だけ読む】WebMCPが気になったら、まとめ記事より先にChrome for Developersの公式解説とInfoQの発表記事を読むのがおすすめです。所要20分。完了条件は、MCPとWebMCPの違いを一言で人に説明できることです。

この章でわかること｜第10〜17章で踏んだ、いちばん気づきにくい罠を書きます。「成功」と出るのに中身が違います。

第3〜9章のあと、第10章から第17章まで確かめた。ただし第11章（独自ドメイン）と第12章（Page Rules）は、登録ドメインが0件のため実施できていません。そこで踏んだのが、これまででいちばん気づきにくい問題です。第10章、Reactの章。教材の案内はこう。

教材 第10章「Reactとつないで“小さなアプリ”にしよう」より

Cloudflare公式の React ガイドでも、このコマンドで React SPA と Workers API を含むフルスタック構成 を開始する形が案内されています。ローカル開発はそのまま npm run dev で始められます。

指示どおり npm create cloudflare@latest -- my-react-app --framework=react を打つ。画面に出たのは、堂々としたこの一行。

実測ログ（2026-08-14・第10章の手順を実行したターミナル出力）

🎉 SUCCESS Application created successfully!

ただ、できたものはReactではありませんでした。4つ確かめて、全部外れます。package.json にreactの依存は0件——”react”の文字はプロジェクト名だけ。npm run build は npm error Missing script: "build" で落ちました。ブラウザで開くとタイトルが Hello, World!。Reactのバンドル（/assets/*.js）も無し。--framework=react が黙って無視されて、素のhello-worldテンプレが渡されていたわけです。

第7章の不具合——ヘルプに載っているフラグが実行するとエラーになるやつ——と同じ系統。ただ、こちらのほうがずっと厄介でした。あちらはエラーで止まる。だから気づけます。こちらは「成功」と言って違うものを渡してくる。……初学者なら「Reactってこんな画面なんだ」と思って先へ進みます。冒頭に書いた昔の失敗も、こういう「見た目だけ整っている」やつでした。だからこの手の“静かな裏切り”には敏感。犯人は教材ではなく、教材が頼っている公式ツールの方です。

本文で触れていなかった第13・14章

ここまで触れていない第13章と第14章も、同じ日にまとめて確かめました。第14章の「保存先の見分け」は、Local Explorerに3つとも並ぶかどうかで判定できます。

実測ログ（2026-08-14・第14章 Local Explorer API の応答）

{“name”:”storage-lab”,”bindings”:{
 “kv”:[{“id”:”local-kv-for-fieldtest”,”bindingName”:”APP_KV”}],
 “d1”:[{“id”:”local-d1-for-fieldtest”,”bindingName”:”DB”}],
 “r2”:[{“id”:”study-files”,”bindingName”:”FILES”}]}}

第13章のsecretsは、半分だけ。ローカル側の .dev.vars からは {"LOCAL_SECRET":".dev.varsから読めたローカル秘密"} と読めました。ただし wrangler secret put はCloudflare側への書き込みになるので実行していない。だから第13章は、ローカル側だけ確かめられた章になります。

一方、保存先まわりは気持ちよく動きました。第15章のKVは教材と同じキーで {"put":"hello=world","get":"world"}。第16章のD1はテーブル作成からINSERT・SELECTまで一発です。第17章のR2も、書き込みと取り出しがそのまま通る。しかもこの3つ、Cloudflareにログインしなくても動きます。wrangler dev --local がローカル版を勝手に用意してくれるから。教材が「まずローカルで理解してから公開する」と繰り返す理由——ここで腑に落ちました。

【作った直後に中身を見る】C3でプロジェクトを作ったら、次の1行だけ先に打ってください。cat package.json。所要10秒。完了条件は、使うつもりのフレームワーク名が依存欄にあることです。無ければ、成功と出ていても別物です。

この章でわかること｜第18〜24章で見つけた「無料で手を動かせる範囲」の境界線です。教材に書かれていない線引きになります。

残りも見た。第18〜21章はローカルで実行、第22・23章はリモートが要る地点まで確認、第24章は部品ごとの動作だけ。ここで、教材のどこにも書かれていない線が見えます。

まずは第18章のDurable Objectsです。状態と順番を持つ入れ物。同じidに連続で叩いてみました。

実測ログ（2026-08-14・第18章 Durable Objects）

1回目: {“first”:1,”second”:2,”current”:2}
2回目: {“first”:3,”second”:4,”current”:4}

数が飛ばず、前回の続きから増えていました。教材の説明どおり。第19章のQueuesも、送った3件が全部consumerに届きます。実際の出力はこれです。
queue consumed: {"kind":"fieldtest","at":"local"}
queue consumed: {"n":1}
queue consumed: {"n":2}

続く第20章のCron Triggersは scheduled fired: cron = */5 * * * * と発火。第21章のログは info と ▲ [WARNING] と ✘ [ERROR] が別の見た目で出ました。ここまで、Cloudflareにログインせずに全部動きます。

止まったのは第22章のWorkers AI。AI bindingを設定してローカルで呼んだら、こう返ってきました。

実測ログ（2026-08-14・第22章 Workers AI をローカル実行）

{“ai_binding”:true,”error”:”Error: Binding AI needs to be run remotely”}
▲ [WARNING] AI bindings always access remote resources, and so may incur usage charges even in local dev.

「ローカル開発でも課金が発生しうる」。Wrangler自身がそう警告してきます。第23章のVectorizeも CLOUDFLARE_API_TOKEN が要ると言われて停止。ここが境界線。

整理すると、こうなります。ローカルで完走できたのは第4〜10章と第14〜21章です。第13章はローカル側だけ、第11・12章は登録ドメインが0件で未実施。ここは私が実際に手を動かした範囲。第22章から先は、アカウントが要るうえ課金の可能性がある。教材は全24章が無料で読めます。でも「手を動かして学べる範囲」と「読んで知る範囲」の境目が、第21章と第22章のあいだにある。この線引きは、教材のどこにも書かれていません。

ここ、責めたい話ではないんです。そこは誤解しないでほしい。教材が悪いわけではありません。Cloudflare側の仕組みが、そうなっているだけです。むしろ逆。第21章まで一切お金をかけずに手を動かし切れる設計のほうが、私には驚きでした。……ただ、最初にこの線を知っているかどうかで、途中で止まったときの気持ちがぜんぜん違う。「自分の環境が悪いのかな」と探し回る時間が消えるはずです。だから、ここに書いておく。

【第21章で一区切りつける】まず第21章まで、ログインせずに走り切ってください。所要は数時間。完了条件は、KV・D1・R2・Durable Objects・Queues・Cronが自分のMacで動いたことです。第22章から先は、そのあとで決めれば大丈夫です。

この章でわかること｜24章ぶんを実際に触ってみて出た、私の結論と使い方の順番をまとめます。

最後に、実測して初めて言えるようになった結論を置く。今回の検証で、Cloudflare側への変更は0件でした。動かせる章はここまで全部やって、デプロイ0、リソース作成0、設定変更0。全部 wrangler dev --local とダッシュボードの閲覧だけです。

これが何を意味するか。第3〜9章は、本番を1ミリも触らずに学び切れます。必要なのは無料アカウントとローカル環境だけで、壊す対象が存在しないから、失敗コストは実質ゼロです。「課金が怖い」「本番を壊しそう」で足が止まっている人にとって、これはかなり大きい情報だと思う。安心して、雑に、たくさん失敗できます。

ここで少し昔話。動かしてみて思い出したのは、小学生の頃の遊びでした。階段のような段差にドミノを並べて連鎖させたり、木でパチンコを作ったり、ピタゴラスイッチみたいな仕掛けに夢中だった私にとって、リクエストが来たらWorkerが動き、キャッシュが効き、HTMLが書き換わって返っていく世界は、あの「一つの仕掛けが次を動かす」面白さそのものでした。勉強と構えず、装置を組む遊びとして触るのがいちばん続くと思う。

そして経営者としての学びも1つありました。検証項目を決めて結果を味見するのが私、ターミナルを打つのはAIチーム、という分担で今回は回しています。この「役割を渡す」話はClaude Code×Google Cloudの「委ねるOS」の記事に書いたので、仕組みに興味がある人はそちらもどうぞ。

【今日30分だけ第4章】npx --yes create-cloudflare@latest my-first-worker を実行し、Worker only と TypeScript を選びます。作成後は cd my-first-worker、続けて npm run dev。所要30分。完了条件は、localhost:8787に自分のHello Worldが表示されることです。

実測で言えることを、先に並べます。

実測で確かめられたこと

• 第9章のAPIは200・400・405の3パターンとも教材どおりでした
• Cache APIはMISSからHITへ。HTMLRewriterは実際に書き換わります
• 第7章の手書き設定は完璧に動き、壊れていたのは公式ツールのフラグの方でした
• 第15〜17章のKV・D1・R2は、書き込みも取り出しもローカルで通る
• 第18〜21章のDurable Objects・Queues・Cron・ログも、全部ローカルで発火しました

詰まりの4つ（タイトルの答え）

そして、タイトルに書いた詰まりの4つはこれです。

1. 第4章「Ok to proceed? (y)」——npmの確認画面。yを打てば進む
2. 第6章 設定が反映されない——wrangler.jsonc の vars だけ、開発サーバーを立て直さないと読まれない
3. 第7章 C3のフラグ——ヘルプにあるのに実行するとエラー。手書き設定なら動きます
4. 第10章「SUCCESS」の罠——成功と出るのにReactではない別物が渡される

この4つは、どれも回避法まで書きました。これとは別に、第22章から先には課金の境界がある。詰まりではなく、ここから先は準備が変わるという線引きです。

教材の骨格は、2026年8月の実環境でもちゃんと通用します。

同時に、地図の外側も見えた。管理画面には、教材が書かれたあとに増えたメニューが並んでいます。話題のWebMCPにいたっては、教材にまだ1ページも無い。教材で骨格を学び、実画面で差分を拾う——この二刀流が、動きの速いAI時代の教材の使い方だと私は結論づけました。

ここまでが実測。無料でここまで検証に耐える教材は、なかなかありません。komiyammaさんに感謝しつつ、まずは30分、第4章から触ってみて。

👉 教材はこちら: https://cloudflare-study.komiyamma.net/（全24章・約360レッスン・日本語・無料。まずはブックマークだけでもどうぞ）

この記事で確かめていないこと

最後に、この記事で検証していないことも正直に書いておきます。wrangler deployは実行していません（外部にURLが生えるため見送り。公開して確認する部分は未検証です）。ドメイン未登録のため、DNS・Analytics・Zero Trustなどドメイン前提の画面は対象外。–remoteモードも未使用で、ダッシュボードは閲覧のみです。第11章（独自ドメイン）と第12章（Page Rules）は、このアカウントに登録ドメインが0件のため実施できていません。

第22章のWorkers AIと第23章のAI応用は、ローカルで動かず、リモート実行に課金の可能性があるため見送り。第24章の総合演習も、部品ごとの動作は確認しましたが、組み上げた完成品のデプロイまではしていません。