Playground

Cloudflare Workers を手早く試すには、Playground ↗ を使います。セットアップも認証も不要です。Playground はサンドボックスで、ブラウザー上ですぐに Worker をプレビューおよびテストできます。

Playground は、認証後の体験と同じエディターを使います。書いたコードを 共有 したり、Cloudflare のグローバルネットワークへ即座に デプロイ したりできます。新しいことを試し、準備ができたらデプロイできます。

Playground を開くと、次のデフォルトコードが表示されます。

import welcome from "welcome.html";

/**
 * @typedef {Object} Env
 */

export default {
	/**
	 * @param {Request} request
	 * @param {Env} env
	 * @param {ExecutionContext} ctx
	 * @returns {Response}
	 */
	fetch(request, env, ctx) {
		console.log("Hello Cloudflare Workers!");

		return new Response(welcome, {
			headers: {
				"content-type": "text/html",
			},
		});
	},
};

これは複数モジュールの Worker の例です。リクエスト を受け取り、コンソールにメッセージを記録し、welcome.html の内容を本文とする レスポンス を返します。

詳細は Fetch ハンドラーのドキュメント を参照してください。

デフォルトコードを編集すると、Worker は自動更新されます。右側のプレビューには、ブラウザーで動かす場合と同じ Worker が表示されます。Worker が URL パスを使う場合は、右側の入力欄にパスを入れて移動できます。Playground は JSDoc コメントと workers-types ↗ による型チェックを提供します。アプリケーションエラー時は、見やすいエラーページも表示します。

生の HTTP リクエストを試す場合（例: POST リクエスト）は、HTTP タブを開き Send を選択します。このパネルでヘッダーの追加・編集や、リクエスト本文の編集もできます。

Playground と Workers ダッシュボードのクイックエディターには、プレビューパネル下部に軽量なログビューアーがあります。プレビュー実行中の console.log の出力を表示します。

ログビューアーが対応している内容は次のとおりです。

• プリミティブ値、オブジェクト、配列のログ出力。
• 実行ごとのログ出力のクリア。

現時点では、クラインスタンスやそのプロパティ（例: request.url）のログ出力には対応していません。

より完全な開発体験とフルのデバッグ機能が必要な場合は、ローカルで Wrangler を使えます。ダッシュボード上の既存 Worker をクローンしてローカル開発するには、サインアップし、Worker のデプロイ後に wrangler init --from-dash を使います。

作成した内容を共有するには、画面右上の Copy Link を選択します。一意の URL がクリップボードにコピーされ、誰とでも共有できます。このリンクに有効期限はありません。作成内容をブックマークして、いつでも共有できます。共有リンクを開いたユーザーには、共有されたコードとプレビュー付きの Playground が表示されます。

Playground から Worker をデプロイできます。すでにログインしている場合は、デプロイ前に Worker を確認できます。未ログインの場合は、確認とデプロイの前に初回ユーザー向けのオンボーディングへ進みます。

デプロイ後、Worker には一意の URL が付き、ほぼすぐに Cloudflare のグローバルネットワークで利用できます。ここから カスタムドメイン、ストレージリソース などを追加できます。