0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@TaichiEndoh(遠藤 太一)

【完全比較】Claude Code「Web版」vs「ローカルCLI版」— 実体験から分かった使い分けガイド

0
Posted at

【完全比較】Claude Code「Web版」vs「ローカルCLI版」— 実体験から分かった使い分けガイド

はじめに

Anthropic の Claude Code は、ターミナルで直接コードベースを操作できるエージェント型コーディングアシスタントです。

2025年後半からは claude.ai 上の Web 版でも利用可能になり、「どっちを使えばいいの？」という疑問が増えています。

この記事では、実際に両方を使って開発している筆者が、公式ドキュメントの一次情報をもとに、初心者から上級者まで分かるように徹底比較します。

筆者の環境: Next.js 16 ポートフォリオ（Vercel + Neon + Clerk認証 + AI機能）を Web 版とローカル版の両方で開発中

そもそも Claude Code とは？

Claude Code は、Anthropic が開発した CLI（コマンドラインインターフェース）ベースのAIコーディングエージェントです。

通常の Claude（チャット）との最大の違い：

通常の Claude（claude.ai チャット） Claude Code
操作方法 ブラウザでチャット ターミナル or Web
ファイル操作 コピペで受け渡し 直接読み書き・実行
コンテキスト 会話ごとにリセット プロジェクト全体を把握
Git操作 不可 コミット・PR作成まで自動
コマンド実行 不可 ビルド・テスト・デプロイ

一言でいうと：通常の Claude は「相談相手」、Claude Code は「一緒に手を動かすエンジニア」です。

📚 公式ドキュメント: Claude Code Overview

2つの利用形態

Claude Code には大きく分けて 2つの利用形態 があります：

🌐 Web版（claude.ai/code）

ブラウザから利用。GitHub リポジトリをクラウドVM上にクローンして作業します。

ブラウザ → claude.ai → クラウドVM（Anthropic管理）→ GitHubリポジトリ

📚 公式ドキュメント: Get Started with Claude Code on the Web

💻 ローカルCLI版（ターミナル）

自分のマシンのターミナルで直接実行。ローカルのファイルシステムに直接アクセスします。

ターミナル → claude コマンド → ローカルファイルシステム → 任意のGitリポジトリ

📚 公式ドキュメント: Claude Code Quickstart

機能比較表（2026年4月時点）

基本機能

機能 🌐 Web版 💻 ローカルCLI
セットアップ ブラウザのみ（インストール不要） npm install -g @anthropic-ai/claude-code
対応リポジトリ GitHub のみ GitHub / GitLab / 任意のGit
ファイルアクセス クローンしたリポジトリのみ ローカル全ディレクトリ
環境変数（.env） ❌ アクセス不可 ✅ ローカルの .env を読める
ビルド・テスト実行 ⚠️ クラウドVM上で可能（制約あり） ✅ ローカル環境で完全実行
Git操作 クラウドで自動push・PR作成 ローカルで完全制御
モバイル対応 ✅ スマホからタスク投入・レビュー ❌ ターミナル必須
並列タスク ✅ 複数セッション同時実行 ⚠️ 複数ターミナルで可能

上級者向け機能

機能 🌐 Web版 💻 ローカルCLI
MCP サーバー ⚠️ クラウド環境のもののみ ✅ ローカル stdio + HTTP
Hooks（自動化） ❌ 未対応 ✅ 完全対応
Permission モード 2種類のみ（Auto accept / Plan） 5種類全て（Ask / Auto / Bypass 等）
IDE統合 ❌ ✅ VS Code / JetBrains
インタラクティブコマンド ❌ /model /config 不可 ✅ 全コマンド利用可
カスタムスキル ⚠️ CLAUDE.md経由のみ ✅ 完全対応
スケジュール実行 ❌ ✅ /schedule /loop
CLAUDE.md ✅ リポジトリ内のものを読む ✅ + ローカル設定も反映

📚 公式ドキュメント:

実体験：Web版で開発してハマったこと

ケース：NAS連携APIをWeb版で実装

筆者は、ポートフォリオサイトにNAS連携機能（ブログ同期Webhook、DBエクスポート、ヘルスチェック）を追加する作業を Web版 Claude Code で実施しました。

✅ うまくいったこと

  • コード生成は問題なし — API Routeやページコンポーネントの生成品質はローカル版と同等
  • Git操作が自動 — コミット＆プッシュまで自動で完了。ローカルで git pull するだけ
  • 外出先から作業開始 — スマホからタスクを投入して、帰宅後にローカルで続行

⚠️ 困ったこと

問題 詳細 対策
ビルド確認ができない .env.local がないので npm run build が通らない ローカルで pull 後にビルド確認
パスの違い Web版は /home/user/...、ローカルは /Users/d/... 相対パスを使う
DB接続テスト不可 Neon/Supabase の接続文字列がない ローカルでのみ動作確認
Hooks が使えない pre-commit の lint チェックが走らない ローカルで lint を手動実行

教訓

Web版で書く → git pull → ローカルでビルド＆テスト → 修正 → push

この ハイブリッドワークフロー が現実的でした。

料金体系（2026年4月時点）

Web版もローカルCLI版も 同じサブスクリプション で利用できます。追加料金はありません。

プラン 月額 Claude Code 利用 おすすめユーザー
Pro $20 ✅ Web + CLI 個人開発者
Max 5x $100 ✅ 高トークン上限 ヘビーユーザー
Max 20x $200 ✅ 最大トークン上限 チーム・大規模開発
Team カスタム ✅ 共有シート 小規模チーム
Enterprise カスタム ✅ コンプライアンス対応 大企業
API（従量課金） 使った分だけ ✅ カスタム統合

📚 公式ドキュメント: Claude Pricing

ポイント: Pro プラン（$20/月）で Web版もローカル版も両方使える。「どっちか片方しか使えない」ということはありません。

使い分けフローチャート

タスクを始める
    │
    ├─ GitHub リポジトリ？
    │   ├─ No → 💻 ローカルCLI 一択
    │   └─ Yes ↓
    │
    ├─ ローカルの .env / ビルドツールが必要？
    │   ├─ Yes → 💻 ローカルCLI
    │   └─ No ↓
    │
    ├─ タスクを完全に言語化できる？（対話的な修正不要？）
    │   ├─ No → 💻 ローカルCLI（リアルタイムで軌道修正）
    │   └─ Yes ↓
    │
    ├─ 外出先 or モバイルから？
    │   ├─ Yes → 🌐 Web版
    │   └─ No ↓
    │
    └─ 並列で複数タスクを回したい？
        ├─ Yes → 🌐 Web版（バックグラウンド実行）
        └─ No → 💻 ローカルCLI（フル機能）

初心者向け：最初のステップ

Step 1: まずは Web 版を試す（5分）

  1. claude.ai にログイン
  2. Claude Code を開く
  3. GitHub リポジトリを接続
  4. 「READMEを日本語に翻訳して」などの簡単なタスクから始める

Step 2: ローカル版をインストール（10分）

# インストール
npm install -g @anthropic-ai/claude-code

# プロジェクトのディレクトリに移動
cd your-project

# Claude Code を起動
claude

Step 3: ハイブリッドワークフローを体験

# Web版で作業した後、ローカルで取り込む
git pull

# ビルド確認
npm run build

# ローカル版で追加修正
claude

📚 公式ドキュメント:

上級者向け：ローカルCLI でしかできないこと

1. Hooks（自動化）

ファイル保存時に自動フォーマット、危険なコマンドのブロックなど：

// .claude/settings.json
{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Write|Edit",
        "command": "npx prettier --write $CLAUDE_FILE_PATH"
      }
    ]
  }
}

2. MCP サーバー（外部ツール連携）

Notion、Google Drive、Slack など外部サービスとの連携：

// .mcp.json
{
  "mcpServers": {
    "notion": {
      "command": "npx",
      "args": ["-y", "@notionhq/mcp-server"],
      "env": {
        "NOTION_API_KEY": "your-key"
      }
    }
  }
}

3. カスタムスキルとスケジュール実行

# 5分ごとにデプロイ状況をチェック
/loop 5m デプロイのステータスを確認して報告して

# 定期タスクのスケジュール
/schedule

📚 公式ドキュメント:

まとめ

観点 Web版の強み ローカルCLIの強み
手軽さ ✅ インストール不要 セットアップ必要
モバイル ✅ スマホからOK ターミナル必須
並列実行 ✅ 複数タスク同時 手動で複数ターミナル
ローカル環境 ❌ アクセス不可 ✅ 完全アクセス
ビルド・テスト ⚠️ 制約あり ✅ フル機能
自動化 ❌ Hooks未対応 ✅ 完全対応
ツール連携 ⚠️ クラウドMCPのみ ✅ ローカルMCP対応
リポジトリ GitHub限定 ✅ 任意のGit

結論：

  • 初心者 → まず Web版 で体験 → 慣れたらローカルCLI
  • 個人開発 → ローカルCLI をメインに、外出先で Web版
  • チーム開発 → ローカルCLI（Hooks + MCP でワークフロー統一）

どちらか一方ではなく、両方を使い分ける「ハイブリッド運用」 が2026年のベストプラクティスです。

公式リンク集

リソース URL
Claude Code 概要 https://code.claude.com/docs/en/overview
Web版クイックスタート https://code.claude.com/docs/en/web-quickstart
CLI版クイックスタート https://code.claude.com/docs/en/quickstart
インストール・セットアップ https://code.claude.com/docs/en/setup
Hooks リファレンス https://code.claude.com/docs/en/hooks
MCP 統合 https://code.claude.com/docs/en/mcp
Settings https://code.claude.com/docs/en/settings
CLI リファレンス https://code.claude.com/docs/en/cli-reference
料金プラン https://claude.com/pricing
Claude Code 製品ページ https://claude.com/product/claude-code

筆者: 遠藤太一（獣医学部6年 / ポートフォリオ: portfolio-2025）
環境: Next.js 16 + Vercel + Neon + Clerk + AI機能
執筆日: 2026年4月11日

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?