👏

これ読めばOK。私が使ってるものだけの、Claude Code チュートリアル

haruotsu

2025/07/18に公開

Claude

Claude Code

tech

Claude Codeに関して、どわーーっといろんなノウハウが各所で散見されていて、辞書的な記事があったらいいなと思い、これを書いています。

いざ1から使い始める時に、これさえ読めば、ある程度使いこなせることを目指して、この記事を書きました。
細かい話はいろいろなところで書かれていると思うので、ざっくりと書いていきます。
社内で行ったチュートリアル資料です。

 Claude Codeとは？ターミナル内で動作し、コードベースを理解し、自然言語コマンドを通じてより高速なコーディングを支援するエージェンティックなコーディングツールです。
https://docs.anthropic.com/ja/docs/claude-code/overview
Cursorとかと違って、ターミナルで動くAIコーディングツールってことです。

 そもそもなんでClaude Codeが強いの？なんだか AIコーディングツールで、同じくSonnet4/Opusとか使うんだったら、CursorやClineでも同じじゃない？ と思いますよね。私もそう思っていました。

しかし、いざ使ってみるとその違いがはっきりとわかります。コードの精度や使い勝手が大きく違います。
個人的にこれだな、と感じる点をまとめます。(間違ってたらごめんなさい)

Claude Codeは、Anthropic社が提供するサービスであり、自社で提供するsonnetモデルを使用するため、単位時間に対するAPIレートリミットを気にせず回せる (固定額or従量課金)
よくある、ファイルの読み込み上限に達しました...とかが起きない。
タスクが終わるまで、ずっと回り続ける！飯食ってる間も、寝てる間も！止まらない！最高！


高度なタスク分解
複雑なタスクも自動的に小さなステップに分解して実行


グローバルおよび、ローカルの設定ファイル管理。開発するたびに育っていくAI。
CLAUDE.md(ルールを記載する)
settings.json (実行権限やhooksの管理)
commands (カスタムコマンドの定義)


 プランについて
Pro ($20/月): 平均的なユーザーは5時間ごとに約45メッセージ、Claude Codeで約10-40プロンプト

Max 5x Pro ($100/月): 平均的なユーザーは5時間ごとに約225メッセージ、Claude Codeで約50-200プロンプト

Max 20x Pro ($200/月): 平均的なユーザーは5時間ごとに約900メッセージ、Claude Codeで約200-800プロンプト
https://www.anthropic.com/pricing
正直、proプランは2秒でusage limitにあたって止まってしまうので、うあああとなります。

でもまずはproプランから始めるのもありです。なんとプランアップグレードは差額$80だけ払えばいい！最高！

 Claude Codeクイックスタートレッツインストール
npm install -g @anthropic-ai/claude-code
れっつご〜！
claude
↑でログインしたり、従量課金用のAPIキーをいれたりします。

 起動オプション（CLIコマンド）Claude Codeは様々な起動オプションで柔軟な使い方ができます。

よく使うものを紹介します。

 基本的な起動方法対話型セッション（REPL）
1番基本的な起動方法 (VSCodeの拡張でぽちっといくのもあり)
claude
非対話型で質問を投げる
claude -p "こんにちは"
claude --prompt "READMEを作成して"

 過去のセッションから選択して再開claude --resume
claude -r

 便利な実行オプション# 権限チェックをスキップ（危険だけど最高！）
# VMの中でやるか、deny設定を最高のものに仕上げてからやりましょう！(sudo rmとかkubectl applyとか平気でやられるから注意)
claude --dangerously-skip-permissions

 バージョン関係# バージョンを確認
claude -v
claude --version

# アップデートを確認・実行
claude update

 クリップボードにコピーしたい画像を載せたいcmd+shift+ctl+4 などでスクショをクリップボードに保存するかと思います。それをターミナルにどうやって貼り付けるねん。となるかもしれませんが、Claude Codeでは、
ctl+v
で添付できます！

 知識を貯めたい、ルールを設定したい、CLAUDE.mdClaudeのセッションはステートレスです。つまり、一度セッションを終了すると、そこでの会話内容はメモリから消えてしまいます。そこで登場するのがCLAUDE.mdです。
こいつを自分自身、そしてプロジェクト全体で育てるAI！ 最高！
/init で作れます！

 設定ファイルの場所# プロジェクトルート
./CLAUDE.md

# チーム共有せず自分だけに適用させたい場合
./CLAUDE.local.md

# グローバル設定(よく使うものはここで管理して育てると便利)
~/.config/claude/CLAUDE.md
# (注意: Claude 1.0.30は~/.config/claudeになり、~/.claudeは1.0.29)

# モノレポの場合
./packages/frontend/CLAUDE.md
./packages/backend/CLAUDE.md

 CLAUDE.mdの活用方法プロジェクトの技術スタック
コーディング規約
よく使うコマンド
プロジェクト固有のルール
アーキテクチャの概要
私のグローバルな設定はこれ
~/.claude/CLAUDE.md
常に日本語で返答してください
t_wadaのテスト駆動の手法で開発してください。

テスト駆動開発の定義は以下です。

1. 網羅したいテストシナリオのリスト（テストリスト）を書く
2. テストリストの中から「ひとつだけ」選び出し、実際に、具体的で、実行可能なテストコードに翻訳し、テストが失敗することを確認する
3.プロダクトコードを変更し、いま書いたテスト（と、それまでに書いたすべてのテスト）を成功させる（その過程で気づいたことはテストリストに追加する）
3. 必要に応じてリファクタリングを行い、実装の設計を改善する
テストリストが空になるまでステップ2に戻って繰り返す

 自分好みのルールに沿ったコマンドを作る、カスタムコマンドClaude Codeの.claude/commands/ディレクトリを活用して、プロジェクト固有のワークフローを自動化できる。
これでそれぞれの最高のコマンドを作りましょう！
例えばこんな感じ
.claude/
└── commands/
├── [commit-with-check.md](http://commit-with-check.md/)  # テスト後のコミット
├── [deploy-check.md](http://deploy-check.md/)       # デプロイ前チェック

# fix-issue
GitHub Issueを修正してください: $ARGUMENTS

## 手順
1. `gh issue view $ARGUMENTS`でIssue詳細を取得
2. 関連ファイルを特定・調査
3. 修正内容を実装
4. テスト作成・実行

## 実行後の報告
- 修正内容の要約
- 変更したファイル一覧
- テスト結果
- PR URL

完了時は「Issue #$ARGUMENTS の修正が完了しました」と報告してください。
使用方法：
/fix-issue 123
引数は複数持たせることが可能です！
orchestrator を作る例でめっちゃ良い&強いな記事はこちら
https://zenn.dev/mizchi/articles/claude-code-orchestrator

 settings.json 設定ファイル管理settings.jsonは、Claude Codeの動作を制御するための階層的な設定ファイルです。
ClaudeがWriteしたりReadしたりBashしたり、権限まわり
MCPの設定もここ
hooksもここ

 設定ファイルの場所# ユーザー設定（全プロジェクト共通）
~/.claude/settings.json

# プロジェクト設定（チーム共有）
.claude/settings.json

# ローカルプロジェクト設定（Git無視）
.claude/settings.local.json
設定の優先順位：

.claude/settings.local.json（最優先）
.claude/settings.json
~/.claude/settings.json

 基本的な設定例{
  "permissions": {
    "allow": [
      "Bash(npm run lint)",
      "Bash(npm run test:*)",
      "Write(src/**/*.ts)"
    ],
    "deny": [
      "Bash(rm -rf:*)",
      "Bash(curl:*)",
      "Write(/etc/*)",
      "Read(~/.zshrc)"
    ]
  }
}

 Hooks設定Claude Codeのライフサイクルで自動実行されるコマンドを設定できます。

 Hooksイベントの種類
PreToolUse: ツール実行前

PostToolUse: ツール実行後

Stop: タスク完了時

Notification: 通知イベント時

 実用的なHooks例タスク完了時にデスクトップ通知（Mac）：
"hooks": {
    "Stop": [
      {
        "matcher": "",
        "hooks": [
          {
            "type": "command",
            "command": "terminal-notifier -title 'ハラ・チャーン・サン' -subtitle 'claude code' -message 'タスク完了デース！確認スルデース！🍕' -sound default -contentImage '/Users/haruotsu/Pictures/wa-i.png'"
          },
          {
            "type": "command",
            "command": "play /Users/haruotsu/Music/牙狼剣飛び出し音.mp3"
          }
        ]
      }
    ],
    "Notification": [
      {
        "matcher": "",
        "hooks": [
          {
            "type": "command",
            "command": "terminal-notifier -title 'ハラ・チャーン・サン' -subtitle 'claude code' -message 'ユーザー確認待ちデース！🍣' -sound default -contentImage '/Users/haruotsu/Pictures/wa-i.png'"
          },
          {
            "type": "command",
            "command": "play /Users/haruotsu/Music/ガロ保留音（赤）.mp3"
          }
        ]
      }
    ]
  }
お気に入りの画像と音で気持ちよく開発していきましょう！

 MCP (FigmaMCP)との接続.mcp.jsonを作成しましょう。
# プロジェクト固有の設定

./.mcp.json

# グローバル設定

~/.claude/settings.json
{
    "mcpServers": {
      "figma-developer-mcp": {
        "command": "npx",
        "args": ["-y", "figma-developer-mcp", "--stdio"],
        "env": {
          "FIGMA_API_KEY": "MISERARENAIYO!!"
        }
      }
    }
  }
.claude/settings.jsonに追記しましょう。
"mcp__figma-developer-mcp__get_figma_data",
{
  "permissions": {
    "allow": [
      "Bash(npm run lint)",
      "Bash(npm run test:*)",
      "mcp__figma-developer-mcp__get_figma_data",
      "Write(src/**/*.ts)"
    ],
    "deny": [
      "Bash(rm -rf:*)",
      "Bash(curl:*)",
      "Write(/etc/*)"
      "Read(~/.zshrc)"
    ]
  },
  "enableAllProjectMcpServers": true,
  "enabledMcpjsonServers": [
    "figma-developer-mcp"
  ]
}

 スラッシュ(/)コマンド一覧主要なコマンドを紹介します：

 よく使う系
/init - プロジェクト用のCLAUDE.mdを生成

/clear - コンテキストをリセット（タスクが変わったら即実行）

/help - ヘルプとコマンド一覧表示

 あんまつかわないけどしっておくと便利
/review - ディレクトリ全体をレビューして改善提案

/compact - メモリ効率化（大きすぎるCLAUDE.mdを圧縮）

/permissions - 権限設定の管理

/mcp - MCPサーバーのステータス確認・管理

/mcp add - 新しいMCPサーバーを追加

/memory - Memory Files（CLAUDE.md）の確認・編集

 めっちゃ考えさせるClaude には、その思考の深さを制御する概念が存在します。特定の単語を使用することで、消費トークンは増えますが、より深く思考し、回答の精度を高めることができます。

Maxプランならどれだけトークンを消費しても値段は変わらないので常に ultrathink がおすすめです。

 思考の深さを制御するキーワード

レベル
キーワード
トークン予算
使用例


基本
think
4,000トークン
"このコードのバグを見つけて think"

中
think hard, megathink
10,000トークン
"think hard このアーキテクチャの問題点を分析"

最大
think harder, ultrathink
31,999トークン
"ultrathink 最適なリファクタリング戦略を提案"

使用例：
> "think hard このコードのパフォーマンスを改善する方法を考えて"
> "think super hard このアーキテクチャの問題点と改善案を提示して"
> "ultrathink このシステムの完全なリファクタリング計画を立てて"
ただし、思考拡張はトークン消費が増えるため、レートリミットに注意が必要です。

 tips
 ベストワークフローAnthropicが推奨する「Explore, Plan, Code, Commit」の順番で命令を実行することがベストプラクティスとされています。
https://www.anthropic.com/engineering/claude-code-best-practices

 🔄 探索→計画→実装→コミット最も汎用的で効果的なパターン
# 1. 探索フェーズ
> src/auth/login.tsを読んで、現在の認証フローを理解して。コードはまだ書かないで。

# 2. 計画フェーズ
> OAuth2認証を追加する計画を立てて。think hardモードで代替案も検討して。

# 3. 実装フェーズ
> 計画に従ってOAuth2認証を実装して。各ステップで合理性を検証しながら進めて。

# 4. コミット・PR作成
> 変更をコミットしてPRを作成。READMEも更新して。


 🎨 ビジュアル開発# 1. デザインモック提供
> [Figma or 画像をドラッグ&ドロップ] このデザインを実装して

# 2. スクリーンショット環境準備
> 手動やMCPでスクリーンショットが取れるようにセットアップ

# 3. 実装・確認・反復
> デザインを実装してスクリーンショット撮影。モックと比較して調整を繰り返し


 どれだけ使ってるか気になる、本当にお得なの？インストールする
npm install -g ccusage

npx ccusage@latest
実行結果例：
├───────────┼───────────────────┼──────────┼──────────┼────────────┤
│ 2025      │ - opus-4          │    2,395 │   66,283 │    $106.35 │
│ 07-09     │                   │          │          │            │
├───────────┼───────────────────┼──────────┼──────────┼────────────┤
│ 2025      │ - opus-4          │    2,087 │   40,773 │     $64.66 │
│ 07-10     │ - sonnet-4        │          │          │            │
├───────────┼───────────────────┼──────────┼──────────┼────────────┤
│ Total     │                   │  116,148 │  808,475 │    $755.38 │
└───────────┴───────────────────┴──────────┴──────────┴────────────┘

 並列開発git worktreeを用いた並列開発は、同僚のharakeishiが書いている、goposeを使っています。こちらの記事を参照ください！

https://zenn.dev/harachan/articles/2025-06-09_gopose-intro

 公式ドキュメントが1番詳しい！公式ドキュメント

 おわりに今回は私が本当に使っているものだけに焦点を当てた、Claude Codeチュートリアルの記事を書いてみました。これを機に、つかってみようかな、だったり、学びがあったな！となってくれる人がいたら嬉しいです。
この資料をつかって、社内でもClaude Codeはいいぞ、という話をしました。

ぜひ、これもいいよ！等あったら、じゃんじゃんコメントください！

レベル	キーワード	トークン予算	使用例
基本	think	4,000トークン	"このコードのバグを見つけて think"
中	think hard, megathink	10,000トークン	"think hard このアーキテクチャの問題点を分析"
最大	think harder, ultrathink	31,999トークン	"ultrathink 最適なリファクタリング戦略を提案"

GMOペパボ株式会社Publication

表現活動を支援し「人類のアウトプットを増やす」というミッションに取り組むGMOペパボのエンジニアの記事が集まる Publication です。

Claude Codeとは？

そもそもなんでClaude Codeが強いの？

プランについて

Claude Codeクイックスタート

起動オプション（CLIコマンド）

基本的な起動方法

過去のセッションから選択して再開

便利な実行オプション

バージョン関係

クリップボードにコピーしたい画像を載せたい

知識を貯めたい、ルールを設定したい、CLAUDE.md

設定ファイルの場所

CLAUDE.mdの活用方法

自分好みのルールに沿ったコマンドを作る、カスタムコマンド

settings.json 設定ファイル管理

設定ファイルの場所

基本的な設定例

Hooks設定

Hooksイベントの種類

実用的なHooks例

MCP (FigmaMCP)との接続

スラッシュ(/)コマンド一覧

よく使う系

あんまつかわないけどしっておくと便利

めっちゃ考えさせる

思考の深さを制御するキーワード

tips

ベストワークフロー

🔄 探索→計画→実装→コミット

🎨 ビジュアル開発

どれだけ使ってるか気になる、本当にお得なの？

並列開発

公式ドキュメントが1番詳しい！

おわりに

Discussion