C3（npm create cloudflare）で雛形を作り、Cloudflare 公式の Claude Code プラグインと Docs MCP を入れ、CLAUDE.md に約束を書けば、wrangler dev → テスト → wrangler deploy まで Claude Code に任せられます。2026 年 10 月時点の C3・Wrangler で実際に動かした出力つきで手順をまとめます。
SNSでシェアして、他のエンジニアにも教えてあげましょう
Claude Code で Cloudflare Workers のアプリを作るなら、C3（npm create cloudflare）に --agents を付けて雛形を作り、Cloudflare 公式の Claude Code プラグインを入れ、CLAUDE.md に「確かめ方」を書くのが近道です。こうしておくと、Claude Code は古い知識ではなく最新のドキュメントを引きながら実装し、wrangler dev とテストで自分の変更を確かめられます。この記事では、2026 年 10 月時点の create-cloudflare v2.73.2・Wrangler 4.147.0 を手元で実際に動かした出力を使い、プロジェクト作成からデプロイ直前までの全手順をまとめます。
Cloudflare Workers は、Cloudflare のエッジ（世界中のデータセンター）で JavaScript / TypeScript を動かすサーバーレスの実行環境です。Claude Code と組み合わせるときの流れは、次の 5 段階に分けると迷いません。
ポイントは、人がやることと Claude Code に任せることを分けることです。
| 段階 | 誰がやるか | 使うもの |
|---|---|---|
| 雛形づくり | 人（1 回だけ） | C3（create-cloudflare） |
| 知識の追加 | 人（1 回だけ） | 公式プラグイン・Docs MCP・CLAUDE.md |
| 実装・型の更新 | Claude Code | src/・wrangler.jsonc・wrangler types |
| ローカルでの確認 | Claude Code | wrangler dev・curl・Vitest |
| ログインとデプロイ | 人 | wrangler login・wrangler deploy |
アカウントに触る操作（ログイン・本番デプロイ・本番 DB への書き込み）は人が確認してから行います。それ以外は Claude Code が自分で回せるように、道具と約束を先に用意しておきます。
理由は 2 つあります。検索での関心が伸びていることと、Cloudflare 側が AI コーディングエージェント向けの道具をそろえたことです。
Google トレンド（日本・過去 90 日、2026-10-05 取得）では、相対値で「Cloudflare Workers」の直近 4 週の平均は 2.0 で、その前の 8 週の平均 0.8 から上向きです1。「Hono」（Workers でよく使う Web フレームワーク）は 0.8 から 2.7、「AWS Lambda」は 1.9 から 2.3 でした。どれも値は小さいものの、そろって上がっています。
| 語 | 前8週平均 | 直近4週平均 |
|---|---|---|
| Cloudflare Workers | 0.8 | 2 |
| Hono | 0.8 | 2.7 |
| AWS Lambda | 1.9 | 2.3 |
道具の面では、2026 年 10 月時点で次のものが公式に用意されています。
--agents オプション: 雛形と一緒に、AI エージェント向けの AGENTS.md を作る2cloudflare/: Claude Code の / から入れられるスキル集と MCP サーバーのセット34wrangler dev を動かすと、デバッグ用の API の案内を出す（後述）C3（create-cloudflare CLI）は、Cloudflare 公式のプロジェクト作成ツールです2。対話式でも使えますが、フラグを付けると質問なしで作れます。Claude Code に打たせる場合もこの形が確実です。
npm create cloudflare@latest -- hello-worker \
--type=hello-world --lang=ts --no-git --no-deploy --agents
| フラグ | 意味 |
|---|---|
--type=hello-world | 「Worker only」の最小テンプレート。静的ファイルも配るなら hello-world-with-assets |
--lang=ts | TypeScript（js・python も選べる） |
--no-deploy | 作成直後にデプロイしない。ログイン前でも作れる |
--agents | AI コーディングエージェント向けの AGENTS.md を追加する |
--no-git | git の初期化をしない（既存リポジトリの中に作るとき） |
フレームワークを使う場合は --framework=hono や --framework=react-router のように指定すると、C3 が各フレームワーク公式の作成ツールを呼び出します。フラグの一覧は npm create cloudflare@latest -- --help で確かめられます。
手元で実行し、そのまま wrangler dev で起動して curl を打った様子が次の GIF です。
作られるファイルは次のとおりです（node_modules などは省略）。
hello-worker/
├── AGENTS.md # --agents で追加される AI 向けの説明
├── src/index.ts # Worker 本体
├── test/index.spec.ts # Vitest のテスト
├── vitest.config.mts # @cloudflare/vitest-plugin の設定
├── worker-configuration.d.ts # wrangler types が生成する型
├── wrangler.jsonc # Worker の設定
└── package.json
生成された AGENTS.md の冒頭には、「Workers の API や上限についての知識は古い可能性があるので、作業前に必ず最新のドキュメントを取得すること」という趣旨の指示が書かれています。続いて Docs MCP の URL、wrangler dev・wrangler deploy・wrangler types の表、ローカルのデバッグ用 API の一覧が並びます。
wrangler.jsonc は Worker の設定ファイルです。Cloudflare は新しいプロジェクトには TOML ではなく JSON（wrangler.jsonc）を勧めており、新しい機能の一部は JSON の設定でしか使えないとしています6。C3 が生成した設定（コメントを除く）は次のとおりです。
{
"$schema": "node_modules/wrangler/config-schema.json",
"name": "hello-worker",
"main": "src/index.ts",
"compatibility_date": "2026-10-01",
"observability": { "enabled": true },
"upload_source_maps": true
}
| キー | 意味 |
|---|---|
$schema | エディタと Claude Code が補完・検証に使う JSON Schema |
name | Worker の名前。デプロイ先の <name>.<サブドメイン>.workers.dev になる |
main | エントリーポイント |
compatibility_date | どの時点の Workers ランタイムの挙動を使うか6 |
observability | Workers Logs を有効にする |
upload_source_maps | エラーのスタックトレースを元の TypeScript の行で見られるようにする |
D1（データベース）や R2（オブジェクトストレージ）を使うときは、ここにバインディングを足します。バインディングは、Worker のコードから env.DB のように Cloudflare のリソースを呼ぶための設定です。バインディングを変えたら npx wrangler types で worker-configuration.d.ts を作り直します。これを CLAUDE.md に書いておくと、Claude Code が型の更新を忘れません。
Claude Code に Cloudflare の最新情報を渡す方法は 3 つあります。迷ったら 1 つ目の公式プラグインだけで十分です。
Cloudflare の「Agent setup」ドキュメントは、Claude Code の中で次の 2 行を実行する方法を案内しています3。
/plugin marketplace add cloudflare/skills
/plugin install cloudflare@cloudflare
このプラグインには、スキル（Claude Code が必要なときに読み込む手順書）と MCP サーバーが入っています4。2026 年 10 月時点で入っている主なスキルは次のとおりです。
| スキル | 使われる場面 |
|---|---|
cloudflare | 要件に合う Cloudflare の製品を選び、対応するスキルやドキュメントへ案内する |
wrangler | Workers・KV・R2・D1・Queues などのデプロイと管理のコマンド |
workers-best-practices | 本番向け Worker の書き方・レビュー・設定 |
durable-objects | 状態を持つ処理（チャット・予約など）、RPC、SQLite、アラーム |
agents-sdk | Agents SDK で状態を持つ AI エージェントを作る |
nextjs-on-cloudflare | Next.js を Workers で動かす（vinext） |
同梱の MCP サーバーは https:/ の Code Mode MCP サーバーです。2,500 以上の Cloudflare API エンドポイントを「検索して実行する」形で扱え、最新のドキュメントも引けます5。アカウントの API を操作できるので、OAuth で接続するときは権限の範囲を確かめてください。詳しくは Cloudflare の MCP サーバー（Code Mode）を Claude Code につなぐで扱います。プラグインの仕組みそのものは Claude Code のプラグインとマーケットプレイスを参照してください。
アカウントの API には触らせず、ドキュメントの検索だけをさせたい場合は、Docs MCP サーバー（https:/）を追加します5。C3 が作る AGENTS.md にもこの URL が書かれています。
claude mcp add --transport http cloudflare-docs https://docs.mcp.cloudflare.com/mcp
claude mcp add の既定のスコープは local（自分だけ・このプロジェクトだけ）です。チームで共有するなら --scope project を付けると .mcp.json に書かれます。
Wrangler 4.147.0 には --install-skills というグローバルフラグがあり、ヘルプには「検出した AI コーディングエージェントに Cloudflare のスキルを入れてから、コマンドを実行する」と書かれています。スキルの取得元は同じ cloudflare/ リポジトリです。プラグインを入れていれば使う必要はありません。
CLAUDE.md は、Claude Code がセッションの開始時に必ず読む指示ファイルです。Claude Code は CLAUDE.md が無ければ AGENTS.md を読みます（v2.1.277 以降）。ただし、CLAUDE.md を置くと既定では AGENTS.md は読まれなくなります7。そこで、CLAUDE.md の先頭で @AGENTS.md を読み込み、そのあとにプロジェクト固有の約束を書く形にすると、両方が効きます。@path は CLAUDE.md から別のファイルを取り込む書き方です7。
@AGENTS.md
# このプロジェクトの約束
## 確かめ方（変更のたびに必ず実行する）
- 型: `npx tsc --noEmit`
- テスト: `npx vitest run`
- 動作: `npx wrangler dev --port 8787` を起動し、curl で確かめてから止める
## 設定
- wrangler.jsonc のバインディングを変えたら `npx wrangler types` を実行する
- 秘密情報は vars に書かない。ローカルは .dev.vars、本番は `wrangler secret put`
## やってはいけないこと
- `wrangler deploy`・`wrangler login`・`--remote` の付いたコマンドは実行せず、人に頼む
- 上限値や料金は記憶で書かない。Cloudflare のドキュメント（Docs MCP）で確かめる
書くときのコツは 3 つです。
wrangler deploy をブロックするCLAUDE.md と AGENTS.md の使い分けは CLAUDE.md の書き方（AGENTS.md との違い）で詳しく扱います。
npx wrangler dev を実行すると、本番と同じ workerd ランタイムでローカルサーバーが起動します。既定のポートは 8787 です（GIF では他のアプリと重ならないよう --port 8795 を指定しました）。
Claude Code の中から起動したとき、Wrangler 4.147.0 は次のように表示しました。
⛅️ wrangler 4.147.0
────────────────────
⎔ Starting local server...
Wrangler detected this dev session is running in an AI agent.
The Local Explorer API is available at http://localhost:8795/cdn-cgi/local/explorer/api
Useful routes:
GET http://localhost:8795/cdn-cgi/local/explorer/api/local/workers - local Workers and bindings
GET http://localhost:8795/cdn-cgi/local/explorer/api/d1/database - D1 databases
GET http://localhost:8795/cdn-cgi/local/explorer/api/r2/buckets - R2 buckets
...
[wrangler:info] Ready on http://localhost:8795
[wrangler:info] GET / 200 OK (12ms)
Wrangler が AI エージェントからの実行だと検知し、Local Explorer API を案内しています。これはローカルの D1 の行・R2 のオブジェクト・KV のキー・リクエストのログを HTTP で調べられる API です。AGENTS.md にも同じ一覧があるので、Claude Code は「D1 に行が入ったか」を自分で確かめられます。
wrangler dev は止めない限り動き続けます。Claude Code に「バックグラウンドで起動し、確かめたら止めて」と頼むか、別のターミナルで人が起動しておくと安定します。
C3 の雛形には、Workers のランタイムの中でテストを動かす Vitest の設定が入っています。2026 年 10 月時点の雛形では、パッケージが @cloudflare/ になっています。これは以前の @cloudflare/ を置き換えたもので、API と設定は変わらないと説明されています8。古い記事やモデルの知識には旧名が出てくるので注意してください。
// vitest.config.mts（C3 が生成したもの）
import { cloudflareTest } from "@cloudflare/vitest-plugin";
import { defineConfig } from "vitest/config";
export default defineConfig({
plugins: [
cloudflareTest({
wrangler: { configPath: "./wrangler.jsonc" },
}),
],
});
雛形のまま実行した結果です。
$ npx tsc --noEmit && echo TSC_OK
TSC_OK
$ npx vitest run
RUN v4.1.11 /private/tmp/write-article/lab-cf/hello-worker
Test Files 1 passed (1)
Tests 2 passed (2)
D1 を使う API のテスト（マイグレーションの適用やテストごとのデータの分離）は、Hono＋D1 で REST API を作るで実際に書いて動かしています。
デプロイは人が行います。初回だけブラウザで Cloudflare にログインし、そのあとデプロイします9。
npx wrangler login # ブラウザが開き、Cloudflare アカウントで認可する
npx wrangler deploy # <name>.<サブドメイン>.workers.dev に公開される
本番に出す前に、Claude Code には --dry-run でビルドとバインディングの確認までさせておくと安心です。ログインせずに実行でき、アップロードはされません。
$ npx wrangler deploy --dry-run
⛅️ wrangler 4.147.0
────────────────────
Total Upload: 0.19 KiB / gzip: 0.16 KiB
No bindings found.
--dry-run: exiting now.
秘密情報（API キーなど）は wrangler.jsonc の vars に書かず、npx wrangler secret put 名前 で登録します。ローカルでは .dev.vars に書きます（.gitignore 済みか確かめる）。
道具がそろったら、Claude Code には「何を作るか」と「どう確かめるか」をセットで伝えます。
Cloudflare Workers で、短縮 URL の API を作ってください。
- POST /links で URL を受け取り、6 文字の ID を返す。GET /:id でリダイレクトする
- 保存先は KV。wrangler.jsonc にバインディングを足し、wrangler types を実行する
- 上限や書き方は cloudflare スキルと Docs MCP で確かめてから書く
- 終わったら tsc・vitest・wrangler dev と curl で確かめ、結果を見せて
- デプロイはしないで
最初の 1 回は、Claude Code に計画（どのファイルをどう変えるか）を先に出させ、読んでから実装させると手戻りが減ります。
学習や小さなアプリなら無料プランで足ります。2026 年 10 月時点の Workers の料金は次のとおりです10。
| 項目 | Free | Paid（月額 5 ドルから） |
|---|---|---|
| リクエスト | 1 日 10 万件 | 月 1,000 万件込み、超過 100 万件あたり 0.30 ドル |
| CPU 時間 | 1 回 10 ミリ秒 | 月 3,000 万 CPU ミリ秒込み、超過 100 万ミリ秒あたり 0.02 ドル |
| Workers Logs | 1 日 20 万件 | 月 2,000 万件込み |
CPU 時間には、fetch() や DB の応答を待つ時間は含まれません。外部 API を呼んで待つだけの処理なら、Free の 10 ミリ秒でも収まることが多いです。
筆者の環境（npm 11.5.1）では、C3 の依存関係のインストールがこのエラーで止まりました。npm の依存関係の解決（arborist）で起きるもので、npm install --legacy-peer-deps か、環境変数 npm_config_legacy_peer_deps=true を付けて C3 を実行すると通りました。pnpm など別のパッケージマネージャーを使うのも手です。
モデルの知識は学習時点で止まっています。今回だけでも、テスト用パッケージの名前（vitest-pool-workers → vitest-plugin）が変わっていました。公式プラグインか Docs MCP を入れ、CLAUDE.md に「上限値は記憶で書かない」と書いておきます。
Wrangler は AI コーディングエージェントを検知すると、Cloudflare のスキルを入れるか（更新するか）尋ねることがあります。今後尋ねない設定を選ぶと、Wrangler 自身が「wrangler --install-skills で再び有効にできる」と表示します（Wrangler 4.147.0 のソースで確認）。プラグインで入れ済みなら断って問題ありません。
compatibility_date を上げないと新しいランタイムの挙動が使えません。逆に、上げると挙動が変わることがあるので、上げたらテストを流します。
--agents を付けると、AI エージェント向けの AGENTS.md も作るcloudflare/（スキル＋Code Mode MCP）を入れる。ドキュメントだけなら Docs MCP@AGENTS.md を読み込み、確かめ方のコマンドと禁止事項を書くwrangler dev・tsc・vitest で Claude Code に自分の変更を確かめさせ、ログインとデプロイは人が行う次は、D1 を使った REST API を Hono＋D1 で REST API を作るで、画像のアップロードを Cloudflare R2 の署名付き URL で画像を直接アップロードで作ってみてください。
要りません。C3 での作成、wrangler dev、テストはアカウントが無くても動きます。デプロイには Cloudflare アカウントが要りますが、Workers の Free プラン（1 日 10 万リクエスト）で公開できます10。
普段は公式プラグイン（/）を入れます。スキルと Code Mode MCP がまとめて入り、ドキュメントの検索もできます4。アカウントの API に触らせたくない場合は、Docs MCP だけを claude mcp add で足します。
両方置くなら、CLAUDE.md の先頭に @AGENTS.md と書いて読み込みます。Claude Code は CLAUDE.md があると、既定では AGENTS.md を読まないためです7。AGENTS.md だけでも Claude Code は読みますが、確かめ方や禁止事項などプロジェクト固有の約束は CLAUDE.md に足すのがおすすめです。
おすすめしません。デプロイは本番のトラフィックに影響し、ログイン情報も使います。Claude Code には wrangler deploy --dry-run までを任せ、本番へのデプロイは人が行うか、GitHub Actions などの CI/CD に任せます。
2026 年 10 月時点の C3 の雛形では @cloudflare/ です。Cloudflare の移行ガイドは、これが @cloudflare/ を置き換えたもので、API と設定は変わらないと説明しています8。
Google トレンド：Go言語・Cloudflare Workers・AWS Lambda・MCP サーバー（日本・過去 90 日） と Google トレンド：Cloudflare D1・Hono・Next.js・Lambda Go（日本・過去 90 日） — Google, 2026-10-05 取得 ↩
Claude Code + Cloudflare（Agent setup） — Cloudflare Docs, 2026-09-29 更新（2026-10-05 参照） ↩ ↩2
cloudflare/skills — Cloudflare, GitHub（2026-10-05 参照） ↩ ↩2 ↩3
Cloudflare's own MCP servers — Cloudflare Docs（2026-10-05 参照） ↩ ↩2 ↩3
Configuration - Wrangler — Cloudflare Docs（2026-10-05 参照） ↩ ↩2
How Claude remembers your project（CLAUDE.md と AGENTS.md） — Anthropic, Claude Code Docs（2026-10-05 参照） ↩ ↩2 ↩3 ↩4 ↩5
Migrate to Vitest plugin — Cloudflare Docs, 2026-08-20 更新（2026-10-05 参照） ↩ ↩2
Get started - CLI（Workers） — Cloudflare Docs（2026-10-05 参照） ↩
Pricing（Workers） — Cloudflare Docs, 2026-10-02 更新（2026-10-05 参照） ↩ ↩2