日曜日, 7月 20, 2025
日曜日, 7月 20, 2025
- Advertisment -
ホームニューステックニュースこれ読めばOK。私が使ってるものだけの、Claude Code チュートリアル

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


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

れっつご〜!

↑でログインしたり、従量課金用のAPIキーをいれたりします。

起動オプション(CLIコマンド)

Claude Codeは様々な起動オプションで柔軟な使い方ができます。
よく使うものを紹介します。

基本的な起動方法

対話型セッション(REPL)

1番基本的な起動方法 (VSCodeの拡張でぽちっといくのもあり)

非対話型で質問を投げる

claude -p "こんにちは"
claude --prompt "READMEを作成して"

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

claude --resume
claude -r

便利な実行オプション



claude --dangerously-skip-permissions

バージョン関係


claude -v
claude --version


claude update

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

Claudeのセッションはステートレスです。つまり、一度セッションを終了すると、そこでの会話内容はメモリから消えてしまいます。そこで登場するのが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 の修正が完了しました」と報告してください。

使用方法:

引数は複数持たせることが可能です!

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

設定の優先順位:

  1. .claude/settings.local.json(最優先)
  2. .claude/settings.json
  3. ~/.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/mcp.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

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

最も汎用的で効果的なパターン


> src/auth/login.tsを読んで、現在の認証フローを理解して。コードはまだ書かないで。


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


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


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

🎨 ビジュアル開発


> [Figma or 画像をドラッグ&ドロップ] このデザインを実装して


> 手動やMCPでスクリーンショットが取れるようにセットアップ


> デザインを実装してスクリーンショット撮影。モックと比較して調整を繰り返し

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

インストールする

実行結果例:

├───────────┼───────────────────┼──────────┼──────────┼────────────┤
│ 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

公式ドキュメント

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

この資料をつかって、社内でもClaude Codeはいいぞ、という話をしました。
ぜひ、これもいいよ!等あったら、じゃんじゃんコメントください!



Source link

Views: 0

RELATED ARTICLES

返事を書く

あなたのコメントを入力してください。
ここにあなたの名前を入力してください

- Advertisment -