Contents
Cloudflare Workers の基本概念と利用シーン
Cloudflare Workers は、エッジサーバー上で JavaScript（または TypeScript）を直接実行できるサーバーレスプラットフォームです。リクエストが届く最寄りのデータセンターでコードが走るため、数十ミリ秒単位の低遅延が実現できます。このセクションでは Workers の特徴と代表的な利用シーンを解説し、エッジコンピューティングがどんな価値を提供するかを示します。
エッジでコードが走る仕組み
Workers は Cloudflare が世界中に展開している 200 以上のロケーションのうち、ユーザーに最も近い拠点で実行されます。
- 低遅延：往復ネットワーク遅延が数十ミリ秒に抑えられ、リアルタイム性が求められる API に適しています。
- 自動スケーリング：トラフィック増大時も各ローカルデータセンターが独立して処理を分散するため、サーバー容量の事前確保が不要です。
主な利用シーン
| シーン | 具体例 | メリット |
|---|---|---|
| API ゲートウェイ | 認証トークンの検証・ヘッダー付与 → バックエンドへ転送 | エッジで認可処理を完結し、バックエンド負荷とレイテンシを削減 |
| 画像最適化 | JPEG → WebP 変換＋キャッシュ制御ヘッダー付加 | ビューア側のダウンロードサイズが最大 30% 減少 |
| A/B テスト・パーソナライズ | ユーザー属性に応じたコンテンツ切り替え | エッジで即時判定でき、ページ遷移なしで体験を変化 |
| SEO 用リダイレクト | 言語別ドメインへ自動リダイレクト | クローラーにも高速に応答し、検索順位向上が期待 |
ポイント：エッジでコードを走らせることで、低遅延かつスケーラブルなサービス設計が可能になります。
サーバーレスとエッジコンピューティングの違い
サーバーレスは「インフラ管理を抽象化」し、実行時間に応じて課金されるモデルです。一方、エッジコンピューティングは「処理場所」をユーザーに近づけることに焦点を当てます。このセクションでは両者の概念を比較し、Workers がどのようにハイブリッド的な利点を提供するかを整理します。
サーバーレスの基本特性
- インフラ不要：サーバーや OS の管理が不要でコードだけを書けば良い。
- 課金モデル：実行時間（CPU‑ms）とリクエスト数に基づく従量課金。
エッジコンピューティングの基本特性
- 地理的分散：データセンターがユーザー近傍に配置され、ネットワーク距離が短縮。
- 高速レスポンス：キャッシュやロジックをエッジで完結できるため、レイテンシが大幅に低減。
Workers が提供するハイブリッド像
Workers は「サーバーレス＋エッジ」の組み合わせです。コードは完全にマネージドされた環境で実行されつつ、実行拠点はエッジネットワーク上にあるため、両方のメリットを同時に享受できます。
まとめ：サーバーレスが「何をやるか」に注目し、エッジコンピューティングが「どこでやるか」に注目します。Workers はその両方の観点から最適解を提供します。
Cloudflare アカウント作成と無料プランでの利用開始方法
Cloudflare の無料プランは、開発・テストに必要な Workers リソース（リクエスト 100,000 回／日、KV ストレージ 1 GB）を無償で提供します。このセクションでは、数分で完了するアカウント作成手順と、無料プランが自動的に適用される流れを具体的に示します。
アカウント登録の概要
- 所要時間：3〜5 分程度
- 必要情報：メールアドレス、パスワード、簡易プロフィール（会社名は任意）
手順詳細
- ブラウザで https://dash.cloudflare.com/ にアクセスし、右上の 「Sign Up」 をクリック。
- メールアドレスと希望するパスワードを入力し、利用規約に同意して 「Create Account」。
- 受信した認証メール内のリンクを開き、アカウントを有効化。
- ダッシュボードにログインすると左メニューに 「Workers」 が表示され、無料プランが自動的に適用されています。
ポイント：手順はシンプルで、追加設定やクレジットカード情報の入力は不要です。すぐに Workers 開発環境が利用可能になります。
wrangler CLI v3 のインストールと初期設定（npm・pnpm・bun 対応）
wrangler は Cloudflare Workers 向け公式 CLI で、プロジェクトの作成・ローカルテスト・デプロイを一元管理します。v3 ではモジュラー化が進み、主要なパッケージマネージャ（npm、pnpm、bun）に対応しています。このセクションではインストール手順と、初回プロジェクト作成までの流れを解説します。
パッケージマネージャ別インストールコマンド
| マネージャ | インストールコマンド |
|---|---|
| npm | npm install -g wrangler@latest |
| pnpm | pnpm add -g wrangler@latest |
| bun | bun add -g wrangler@latest |
インストールが完了したら、次のコマンドで API トークンを設定します。
|
1 2 3 |
wrangler config # プロンプトに従い、Cloudflare ダッシュボード > API Tokens で作成したトークンを貼り付け |
プロジェクト雛形の生成
|
1 2 3 |
wrangler init my-worker --type=javascript cd my-worker |
生成される主なファイルは以下です。
src/index.js… エントリポイントとなるハンドラwrangler.toml… デプロイ設定・バインディング情報
wrangler.toml の基本構成例
|
1 2 3 4 5 |
name = "my-worker" compatibility_date = "2026-06-30" account_id = "<YOUR_ACCOUNT_ID>" workers_dev = true # 開発用サブドメインを有効化 |
ポイント：npm・pnpm・bun のいずれでも同様にインストールでき、
wrangler initがプロジェクトの土台を自動生成します。
ハンズオン：シンプルなエッジ関数実装と主要 API の簡易利用例
ここからは実際にコードを書き、Workers が提供する代表的な API（Fetch、KV、Cache、Durable Objects、Secrets）を体感します。すべてのサンプルは src/index.js に配置し、必要に応じて wrangler.toml にバインディングを追加してください。
基本ハンドラ：パス別レスポンス
|
1 2 3 4 5 6 7 8 9 10 11 |
export default { async fetch(request, env) { const url = new URL(request.url); if (url.pathname === "/hello") { return new Response("Hello from Cloudflare Workers!", { status: 200 }); } // 未定義のパスは 404 とする return new Response("Not Found", { status: 404 }); }, }; |
KV ストレージ：データ保存・取得
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
export default { async fetch(request, env) { const kv = env.MY_KV; // wrangler.toml にバインディング設定済み if (request.method === "POST") { const { key, value } = await request.json(); await kv.put(key, value); return new Response("Saved", { status: 201 }); } const url = new URL(request.url); const key = url.searchParams.get("key"); const value = await kv.get(key); return new Response(value ?? "Key not found", { status: 200 }); }, }; |
wrangler.toml に以下を追記します。
|
1 2 |
kv_namespaces = [{ binding = "MY_KV", id = "<KV_NAMESPACE_ID>" }] |
Cache API：外部リソースのキャッシュ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
export default { async fetch(request, env) { const cache = caches.default; let response = await cache.match(request); if (!response) { // 外部 API を取得し、60 秒間キャッシュする response = await fetch("https://api.example.com/data"); const headers = { "Cache-Control": "max-age=60" }; response = new Response(response.body, { ...response, headers }); await cache.put(request, response.clone()); } return response; }, }; |
Durable Objects：シンプルなカウンタ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
export class Counter { constructor(state) { this.state = state; } async fetch(request) { const url = new URL(request.url); if (url.pathname === "/increment") { const current = await this.getCount(); await this.state.storage.put("count", current + 1); return new Response(`Incremented to ${current + 1}`); } return new Response(`Current count: ${await this.getCount()}`); } async getCount() { const value = await this.state.storage.get("count"); return value ?? 0; } } |
wrangler.toml に Durable Object のバインディングを追加します。
|
1 2 3 4 |
[[durable_objects]] name = "COUNTER" class_name = "Counter" |
Secrets と環境変数の扱い
機密情報は wrangler secret で管理し、コード内にはハードコーディングしません。
|
1 2 3 |
wrangler secret put API_TOKEN # プロンプトにシークレット文字列を入力 |
ハンドラ側からは次のように参照できます。
|
1 2 3 4 5 6 7 8 9 10 |
export default { async fetch(request, env) { const token = env.API_TOKEN; // Secrets は自動で環境変数化される const apiResp = await fetch("https://api.example.com/data", { headers: { Authorization: `Bearer ${token}` }, }); return new Response(await apiResp.text()); }, }; |
ポイント：上記サンプルはそれぞれ独立して動作し、最小コードで Workers の主要 API を体感できます。
ローカルテスト・プレビュー・デプロイとトラブルシューティング
開発から本番リリースまでのフローを一貫して管理できれば、バグの早期検出と迅速なロールバックが可能です。このセクションでは wrangler dev／wrangler publish の基本的な使い方と、よくあるエラーへの対処法をまとめます。
ローカル開発環境（wrangler dev）
|
1 2 |
wrangler dev # デフォルトはローカルエミュレーション＋リモート KV 等へ接続 |
--localオプション：完全にローカルのランタイムで実行し、外部バインディングは利用不可。--remoteオプション：実際のエッジ環境に近い状態でデバッグでき、KV・Durable Objects へのアクセスが可能。
本番デプロイ（wrangler publish）
|
1 2 3 4 5 6 |
# ステージング用サブドメインへデプロイ wrangler publish --env staging # 本番向けにリリース wrangler publish --release |
wrangler.toml の workers_dev を false にし、独自ドメインを設定すれば本番環境へ直接デプロイできます。
ログ取得とエラーハンドリング
- ストリームログ：
wrangler tail --format jsonでリアルタイムに標準出力・エラーを確認。 - 主要エラーコード
| コード | 内容 |
|---|---|
| 1000 系 | ビルド失敗や構文エラー |
| 1015 系 | CPU 時間・メモリ超過などリソース制限 |
よくある落とし穴と対策
| 落とし穴 | 原因 | 推奨対策 |
|---|---|---|
| KV の書き込みがすぐに反映されない | Eventual consistency（遅延整合性） | 直後の読み取りは kv.get ではなく、await kv.put(...); await kv.list({ prefix }) 等で確認 |
| Durable Object がタイムアウト | 長時間ブロックや無限ループ | 処理を 50 ms 未満に抑える。必要ならワーカー間でタスク分割 |
| Secrets がコードに残る | .dev.vars をリポジトリにコミット |
.gitignore に .dev.vars と wrangler.toml の機密部分を追加し、wrangler secret のみで管理 |
ポイント：ローカルテスト → 本番デプロイまで同一 CLI で完結できるため、エラーは即座に特定・修正できます。
まとめ
- Cloudflare Workers はエッジで実行されるサーバーレス環境であり、低遅延と自動スケーリングが最大の強みです。
- サーバーレス vs エッジ の違いを理解すれば、Workers が提供するハイブリッドモデルを最適に活用できます。
- 無料プランでアカウント作成 →
wranglerインストール → プロジェクト雛形生成までの手順は数分で完了します。 - 主要 API（Fetch、KV、Cache、Durable Objects、Secrets） は標準的な Web API と同様のインターフェースを持つため、学習コストが低く実装もシンプルです。
wrangler dev／wrangler publishによる開発フローと、ログ・エラーハンドリングのベストプラクティスを押さえておけば、安定した本番運用が可能になります。
これらの知識と手順を元に、ぜひ自分だけのエッジアプリケーションを構築してみてください。 🚀