Claude Code on the Web ― 特長を理解するための整理
はじめに
Claude Code on the Web（クロード・コード・オン・ザ・ウェブ）は、ブラウザ上でAIがコード開発を支援してくれる新しいクラウド環境です。
現在は、 GitHubと連携して作業を補助する"試験提供中のクラウド実行環境" です。
ひとまず、利用できる範囲や動作の仕組みを理解しておくことで正しく活用できそうです。
1. Claude Code on the Webとは
Claude Code on the Webはブラウザ対応のクラウド開発支援ツールです。
Claude CodeをローカルPCを開かなくても、クラウド上の仮想マシンでコードを実行・編集・テストできるようになります。
スマホアプリのClaudeからも開けるので、 ネット接続環境があればどこでも"作業を開始できる" イメージであってそうです。
2. Claude CodeのCLIとWEBの比較
| 項目 | Claude Code CLI | Claude Code on the Web |
|---|---|---|
| アクセス方法 | ターミナル | ブラウザ（PC・スマホ） |
| 実行環境 | ローカルPC | クラウド仮想マシン |
| コード実行 | ✅ | ✅ |
| 利用場所 | 原則PCのみ | どこからでも |
| GitHub連携 | 手動でgit操作 | 自動でPR作成可能 |
補足：
Web版は現時点で「研究プレビュー（試験提供）」扱いのため、全ユーザーがすぐ利用できる状態ではありません。ClaudeのProまたはMaxプランを契約している必要があります。
3. 主要な機能
クラウド上の実行環境
作業を開始すると、Anthropicが管理する仮想マシン（VM）が起動し、主要な言語やツールが自動的に使える状態になります。
- Python（pip／poetry）
- Node.js（npm／yarn／pnpm）
- Java（Maven／Gradle）
- Go、Rust、C++など
この仮想環境上で、リポジトリのクローン → 依存関係インストール → コード編集 → テスト → プルリクエスト作成までを、AIが順に補助します。
環境変数と環境管理
APIキーなどの認証情報は、「Environment（環境）」としてまとめて管理できます。
用途ごとに開発用・本番用などを切り替えることが可能です。
設定例：
- 「環境を追加」をクリック
- 名前を指定（例：Development, Production）
- ネットワークアクセスレベルを選択
- 環境変数を登録（例：STRIPE_SECRET_KEY=xxxx）
環境変数はAnthropic側のサーバーに暗号化保存されます。
ローカルの.envファイルと似ていますが、管理者が自分ではなくAnthropicになります。
ネットワークアクセス制御
クラウド環境から外部通信を行う際の安全設定として、3つのレベルが用意されています。
| モード | 内容 | 主な用途 |
|---|---|---|
| None | 外部接続なし | ローカル処理や単体テスト |
| Limited | 許可リストのみアクセス可（GitHub、npm、PyPIなど） | 通常の開発作業 |
| Full | 全ドメインにアクセス可 | API連携・外部サービス接続 |
Limitedは"安全モード"のようなものです。
Fullが危険というわけではなく、ローカルPCは常にFullと同等のアクセス権を持っています。
作業内容に応じて適切なレベルを選ぶことが大切です。
作業の移動（Web ⇄ CLI）
途中でローカル作業に切り替えたいときは「CLIで開く」ボタンでコマンドを取得し、手元のターミナルで実行すれば、クラウドの変更内容をローカルに同期できます。
これにより、外出先でブラウザから修正を開始し、帰宅後PCで続きを行うことも可能です。
4. セキュリティとリスクの理解
認証情報の扱い
Claude Code on the Webでは、APIキーや環境変数をAnthropic側のインフラで保管します。
これは、ローカルの.envで管理する場合に比べて、管理責任がユーザーからAnthropicに移る点が異なります。
どちらが安全かは、「自分の管理 vs 企業の管理」をどう判断するかによります。
実行時のリスク
- StripeやNotionなどの外部APIを誤って呼び出すと、意図しない処理を行う可能性があります。
- 依存ライブラリに悪意あるコードが含まれていれば、web上に限らずどの環境でも実行されるリスクがあります。
5. 利用シーン想定
シーン1：外出中の軽微な修正
スマートフォンでClaude Codeにアクセスし、「予約システムのエラーを確認して修正案を出して」と依頼。
AIが該当コードを解析し、修正提案とテスト結果を提示します。
プルリクエストが作成されるので、そちらを確認して承認する場合はマージします。
シーン2：外部API連携タスクの自動化
Stripe決済データをNotionに同期するスクリプトをGitHubに置き、Claude Codeの環境でSTRIPE_SECRET_KEYとNOTION_API_KEYを登録。
Fullアクセスに設定して「今月のデータを同期して」と依頼すれば、API呼び出しと集計までAIが実行します。
例えばDevelopment環境とProduction環境を分けて管理し、本番APIキーを使うケースを限定することで、事故率を下げた運用が可能そうです。API使ったテストとか必要な場合など。
注意：このような自動化をするならAPI側で権限を適切に範囲設定するのが無難です。
シーン3：複数タスクの並行処理
Claude Code on the Webでは、セッションを分けて複数の作業を並行実行可能です。
それぞれのバグ修正を個別に走らせ、完了後にPRをまとめて確認などもできます。
6. ポイントまとめ
Claude Code on the Webは、プレビュー版とはいえクラウドAI開発環境としてある程度完成しているように感じました。
実際に使う際には次の点に注意。
| 観点 | 注意点 |
|---|---|
| 利用条件 | Pro／Maxプラン限定。現状はResearch Preview段階。 |
| スマホ利用 | 可能だが操作性に制約あり。軽作業に向く。 |
| セキュリティ | 環境変数の保管先はAnthropic。信頼判断が必要。 |
| 実行リスク | クラウドでもローカルでもリスクはある。権限委譲の際の確認を丁寧に。 |
結論
Claude Code on the Webは、GitHub連携することで 「チャットでお願いしたらAIがクラウド上で代わりに開発してくれた！」 という体験を提供してくれます。
ローカルでできることがウェブ上でもできるということで、スマホなどからも操作できて開発のモビリティが高まることと、環境変数を設定して外部API呼び出しをチャットベースでできるようになるのが魅力なのかなと現状では考えています。
移動中に作業しないならPCのCLIで事足りる前提で、Termius等でもスマホ操作や開発モビリティの向上は実現できるが、今までよりもフランクに、外でも移動中でも開発作業ができる印象です。
Discussion