Claude Code を初めて使う人向けの実践ガイド

この記事は Claude Code を初めて試そうとされている方向けの記事です。

https://www.anthropic.com/claude-code

(2025/09/30) Codex CLI のバージョンも作りましたのでこちらもぜひ🤲

https://zenn.dev/hokuto_tech/articles/97fa88f7805a23

導入手順

Claude Codeは、ターミナルで動作する対話型AIコーディングツールです。コードの生成だけでなく、ファイルの編集、テストの実行、Gitの操作まで自然言語で指示できます。

以下の公式ドキュメントを参考にして導入してみてください。

• 公式ドキュメント：https://docs.anthropic.com/ja/docs/claude-code/overview
• VS Code拡張：https://docs.anthropic.com/ja/docs/claude-code/ide-integrations

よく使うコマンド

CLIコマンド（起動前）

Claude Code を起動するコマンド:

claude                # 対話セッションを開始
claude --continue     # 直近のセッションを継続
claude --resume       # 過去のセッションから選択して再開

セッション内コマンド

claude コマンドを実行した後のセッション内で特によく使うコマンド:

• /init - プロジェクト用のCLAUDE.mdを生成
• /clear - コンテキストをリセット（タスクが変わったら即実行）
• /compact - 会話を要約してトークンを節約
• /review - Pull Request などを指定するとレビューしてくれます
• /help - 利用可能なコマンド一覧

/model

/model で利用するモデルを選択できる。

1. Default: 上限の50%に到達するまではOpusで、それ以降はSonnetを利用
2. Opus: 2025-06-20時点で一番コーディング性能の高いモデル
3. Sonnet: コスト効率と応答速度を重視したモデル

僕はMaxプランなので普段はOpusを選択しておいて、limit の警告が出たらSonnetに切り替えて使っています。(limit の警告が出てもある程度はOpus大丈夫そう？🤔)

音声入力で効率化

推奨ツール

1. Superwhisper（おすすめ）

https://superwhisper.com/

• 文字起こしツールで、その後に Claude Sonnet4 などであと処理ができる
• 日本語でしゃべったものを、LLMプロンプトで英語翻訳できる
• 英語・日本語両方をセットでClaude Codeに渡すのがおすすめ

https://zenn.dev/hokuto_tech/articles/fbf2ec25274e57

2. WispFlow

https://wisprflow.ai/

• 喋ったことを精度高く日本語文字起こしするツール
• フィラー(「えー」など)を除去して、読みやすい日本語にする
• 無料でも問題なく使える

3. Mac音声認識

https://pc.watch.impress.co.jp/docs/column/macinfo/1550163.html

• 単一アプリでの利用を前提としており、Figma & VS Code など複数アプリを使う開発では使いづらいやも

なぜ音声入力？

音声入力には明確な利点があります：

• 入力速度: 平均的な話速は150-200語/分、タイピングは40-60語/分
• 情報量: 音声では背景・理由・期待結果を自然に含めて話す傾向がある
• 認知負荷: キーボード操作を考えずに、問題解決に集中できる

タイピングでは「バグ修正」と書くところを、音声では「2ページ目でデータが表示されないバグを修正」のように具体的に伝えやすくなる。結果として、Claude Codeはより正確な解決策を提示できる。

メモリシステムの活用

メモリファイルの種類

CLAUDE.md は Claude Code の起動時に読み込んでくれるので、プロジェクトの情報や、Claude Code への振る舞いの希望を記述してください。

初期の CLAUDE.md は/initで作成できます。

その後は Claude Code や Claude を使いつつ、プロジェクトに合わせてCLAUDE.mdをアップデートしていくのがおすすめです。

https://x.com/naoya_ito/status/1929073291970363545

.claude/CLAUDE.md や .claude/settings.local.json などは git の対象外にすることでチームに影響を与えずに設定ができます。

https://docs.anthropic.com/en/docs/claude-code/memory

パーミッション管理で効率化

頻繁に使う安全なコマンドは事前に許可しておくと、作業が中断されない。

settings.jsonのpermissionについて

• permission.allow: 設定した操作・ファイルは、原則として実行される
• permission.deny: 設定した操作やファイルは、原則としてClaude Codeは実行しない (allow よりも優先)
• どちらにもない操作・ファイル: 実行する前に人間に確認を取る

自動承認をするコマンドの設定

.claude/settings.jsonに追加：

{
  "permissions": {
    "allow": [
      "Bash(pnpm test)" // pnpm testを常に許可
      "Bash(gh pr view:*)", // gh pr view　系を常に許可
    ]
  }
}

自動承認を避けるべきコマンド

• npm install 等のパッケージの追加（セキュリティリスク）
• git commit / push など（破壊的変更を防ぐために、人の確認が必要）
• env ファイルの読み込み (重要なキーが含まれる場合があるため)
• rm など (致命的なファイルの削除を防ぐ)

https://izanami.dev/post/d6f25eec-71aa-4746-8c0d-80c67a1459be

permissions.denyの設定

.claude/settings.jsonに以下のように設定すると自動承認を避けられる：

{
  "permissions": {
    "deny": [
      "Bash(git commit:*)", // git commitをブロック
      "Bash(git push:*)" // git pushをブロック
      "Bash(rm:*)", // 予期せぬファイル削除を防ぐ
      "Bash(sudo:*)", // sudo系コマンドをブロック
      "Read(.env.*)" // 環境変数の読み込みを防ぐ
    ]
  }
}

理想的には Docker や Dev Container に Claude Code の作業領域を閉じ込めると、より安全に実行できます。(模索中です 🙇)

--dangerously-skip-permissions を使う場合

claude --dangerously-skip-permissionsで実行すると、通常は都度表示される「このコマンドを実行してもよいか？」といった権限確認プロンプト（許可ダイアログ）をすべてスキップし、AIエージェントが自律的にファイル操作やコマンド実行を進めます。

もし --dangerously-skip-permissions を使いたい場合にはこちらの対応を行なっておくと安心かもです。

https://wasabeef.jp/blog/claude-code-secure-bash

($HOME/.claude/settings.jsonのpermissions.denyも合わせて設定が必要です)

効果的なワークフロー

1. VS Code/Cursorとの並行利用

VS Code/Cursorを起動して、片側でターミナル => Claude Code を起動、もう片側でVS Code/Cursorのエディタを開き、リアルタイムで変更を確認しながら作業。

Command + Option + K でエディタで開いているファイルを、コンテキストに含めることもできる。

2. Plan mode（Shift+Tab×2）

Shift+Tab を押すと Mode が切り替わる。
Plan Mode で実装前に計画を立てる。コンテキストを最小限に抑えながら、実装方針を整理できる。

3. /clearや/compact

タスクが変わったら必ず/clear。コンテキストの肥大化を防ぎ、精度を維持する。

/compact は今までのコンテキストを圧縮してくれるので、会話が長くなりすぎた時はこちらもおすすめ。

4. 即座の中断と修正

間違った方向に進み始めたら：

• Escで即座に停止
• 明確な修正指示を与える
• 必要なら変更をrevertする
• Esc×2で前のメッセージを編集して再実行

細かいフィードバックを行うのがおすすめ。

5. 画像・スクリーンショットの活用

ターミナルに画像を Shift を押しながらドラッグ&ドロップ、もしくは Control + V (macOS)で貼り付けできる。デザインしたものを画像で渡すと、コンテキストに含めてくれる。

6. git addで頻繁にステージング

良い変更ができたら即座にgit add。Claude Codeが予期せぬ変更を加えても、簡単に元に戻せる。

MCP連携による拡張

Serena

https://github.com/oraios/serena

Claude Codeを賢くしてくれると評判のSerenaの紹介です。mise を使っているのでディレクトリで以下を実行。

mise use uv

こちらのコマンドを実行するだけでMCPとして認識してくれます。

claude mcp add serena -- uvx --from git+https://github.com/oraios/serena serena start-mcp-server --enable-web-dashboard false --context ide-assistant --project $(pwd)

こちらの記事の中に Custom Command や Sub Agent で Serena を活用するサンプルがあるのでよかったら試してみてください。

Figma MCP

https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server

(👆 リンクをコピーして、Claude Codeに貼り付けると認識してくれます)

• デザインからコード生成
• SVGアセットの自動ダウンロード
• コンポーネント仕様の取得

Context7 MCP

https://github.com/upstash/context7

claude mcp add --transport sse context7 https://mcp.context7.com/sse

• 最新のライブラリドキュメント参照
• バージョン固有の情報取得
• 正確なAPIリファレンス

Chrome Devtools

https://github.com/ChromeDevTools/chrome-devtools-mcp

claude mcp add chrome-devtools npx chrome-devtools-mcp

• パフォーマンスのインサイトの取得
• ブラウザでのデバック作業
• puppeteer を使った自動化

Playwright

https://github.com/microsoft/playwright-mcp

claude mcp add playwright npx @playwright/mcp

• ブラウザの自動操作
• E2Eテストの生成
• スクリーンショット取得

GitHub 連携

https://github.com/github/github-mcp-server

現状、ghコマンドで困っていないので試していないですが、GitHub の公式 MCP を使うと柔軟に GitHub との連携ができそうです。

Notion MCP

2025/7/4 時点でベータ版です 🙇
(どうもフルアクセス権限のあるページしか閲覧できなそう😢)

https://notion.notion.site/Beta-Overview-Notion-MCP-206efdeead058060a59bf2c14202bd0a

claude mcp add --transport sse notion https://mcp.notion.com/sse

それ以外の MCP を探す

MCP Servers for Visual Studio に便利な MCP のリストがあるので、使えそうなものを探してみてください。

https://code.visualstudio.com/mcp

効率的な使い方のコツ

段階的なアプローチ

• こまめに実行結果を確認
• 間違いがあれば即座に指摘
• 良い結果はgit addで保護

明確な指示

❌ 悪い例：「このコードを改善して」
✅ 良い例：「このコードのパフォーマンスを改善して。特に配列の処理部分で、現在O(n²)になっている部分をO(n)にしたい」

思考モードで深い分析を促す

プロンプトに以下のような言葉を付け加えるとより熟考してくれるようになる。

思考レベル

• think - 基本的な思考
• think hard - より深い思考
• think harder - さらに深い思考
• ultrathink - 最大限の思考時間

1-2回実行してうまくいかない場合は、ultrathink をつけて依頼すると解決することが多い。

Taskツール（サブエージェント）で多角的分析

Taskツールは、メインのClaude Codeとは別のサブエージェントを起動し、並列で作業させる機能。複雑な問題の調査や、複数の観点からの分析に有効。

メリット

• メインタスクのコンテキストを保護（トークン節約）
• 複数の観点から並列で分析できる
• 各サブエージェントが独立して深い調査を実行

使用例

> Taskツールを使って、このコンポーネントを4つの観点（パフォーマンス、アクセシビリティ、保守性、UX）から分析して

まとめ

Claude Codeは単なるコード生成ツールではなく、開発パートナー。効果的に使うには：

1. Plan modeで計画を立てる
2. 音声入力を活用する
3. 即座にフィードバックする
4. MCPで機能を拡張する

これらが、現時点での自分がやっているフローです。試行錯誤しているので、良い方法があったらアップデートしていきます。（より良い使い方あったらぜひ教えてください🙇）

その他 Tips

コスト確認

https://github.com/ryoppippi/ccusage

npx ccusage@latest          # 日次の使用量とコストを表示
npx ccusage@latest blocks   # 現在のセッションブロックを確認

タスク完了通知の設定例

.claude/settings.local.json または .claude/settings.json に以下のような設定を追加すると通知音が鳴るそうです。

{
  "preferredNotifChannel": "terminal_bell"
}

ただ、なぜか僕の環境ではうまくいきません😭

なので、代わりに~/.claude/settings.json(全プロジェクト共通の個人設定)に以下を追加しています。

{
  "hooks": {
    "Notification": [
      {
        "matcher": "",
        "hooks": [
          {
            "type": "command",
            "command": "say \"Confirm, please!\""
          }
        ]
      }
    ],
    "Stop": [
      {
        "matcher": "",
        "hooks": [
          {
            "type": "command",
            "command": "jq -r '.stop_hook_active' | grep -q false && say \"Task completed!\""
          }
        ]
      }
    ]
  },
}

display notification や、良いコマンドを使ったり、project/path/.claude/settings.local.json でプロジェクトごとの専用メッセージを設定するなど使いやすい形にカスタマイズしてください。

https://zenn.dev/keit0728/articles/bfb68f669755a7

reviewit で完成時にレビュー

https://zenn.dev/yoshiko/articles/reviewit-for-local-code-review

こちらを使うとタスクの完了時に reviewit を起動できます。　reviewit を使うと AI の変更内容をレビューできて、指摘事項をまとめてコピペすることができます。

.claude/settings.local.json (プロジェクト限定) or ~/.claude/settings.json (プロジェクト共通) に以下を追加。

{
  "hooks": {
    "Stop": [
      {
        "matcher": "",
        "hooks": [
          {
            "type": "command",
            "command": "~/.claude/scripts/launch-reviewit.sh /path/to/project"
          }
        ]
      }
    ]
  },
}

~/.claude/scripts/launch-reviewit.sh に以下を追加。

#!/bin/bash

REPO_PATH="${1:-$(pwd)}"

cd "$REPO_PATH" || exit 1

if [[ -n $(git diff --name-only) || -n $(git diff --cached --name-only) || -n $(git ls-files --others --exclude-standard) ]]; then
  max_attempts=1000
  attempt=0
  
  while [ $attempt -lt $max_attempts ]; do
    port=$((RANDOM % 6000 + 4000))
    
    if ! lsof -Pi :$port -sTCP:LISTEN -t >/dev/null 2>&1; then
      reviewit . --port $port &
      break
    fi
    
    ((attempt++))
  done
  
  if [ $attempt -eq $max_attempts ]; then
    echo "Error: Could not find an available port after $max_attempts attempts" >&2
    exit 1
  fi
fi

launch-reviewit.sh に実行権限を付与。

chmod a+x ~/.claude/scripts/launch-reviewit.sh

git の差分があるときだけ実行してます。
(スクリプトはポートのところ適当なのすんません😹)

お願い

Claude Code 使い始めて3週間なので理解不足や、もっと良い使い方等あると思います。よければぜひお気軽にコメント等で教えていただけると嬉しいです 🙇

参考サイト

https://spiess.dev/blog/how-i-use-claude-code

https://www.anthropic.com/engineering/claude-code-best-practices