Claude Codeの使い方
Claude Codeは、Anthropicが提供するAIコーディングアシスタントです。ターミナルから直接対話しながら、コードの作成・編集・実行ができます。
Claude Codeとは
特徴
- ターミナルベースのAIアシスタント
- ファイルの読み書きが可能
- コマンドの実行ができる
- プロジェクト全体を把握できる
できること
- 新しいプロジェクトの作成
- コードの生成・修正
- バグの修正
- テストの実行
- Gitの操作
インストール方法
1. npmでインストール
npm install -g @anthropic-ai/claude-code
2. 初期設定
claude
初回起動時にAnthropicアカウントでログインします。
注意：Claude Codeを使用するには、Anthropicのアカウントと有料プランが必要です。
基本的な使い方
起動方法
プロジェクトのフォルダに移動して、claudeコマンドを実行：
cd my-project claude
対話の流れ
You
Next.jsのプロジェクトを作成してください
Claude
Next.jsプロジェクトを作成します。
npx create-next-app@latest my-app
Claudeがコマンドを実行する許可を求めてきます。
「Allow」または「y」で許可
よく使う操作
ファイルを作成・編集
# 例：
src/components/Button.tsx を作成してください
ボタンコンポーネントで、クリックしたらカウントが増えるようにしてください
既存のコードを修正
# 例：
src/app/page.tsx を開いて、ヘッダーの色を青に変更してください
エラーを修正
# 例：
このエラーを修正してください：
TypeError: Cannot read property 'map' of undefined
コマンドを実行
# 例：
開発サーバーを起動してください
axiosパッケージをインストールしてください
特殊コマンド（スラッシュコマンド）
| コマンド | 説明 |
|---|---|
| /help | ヘルプを表示 |
| /clear | 会話履歴をクリア |
| /compact | 会話を要約してコンテキストを節約 |
| /status | 現在の状態を表示 |
| /exit | Claude Codeを終了 |
得意なこと・苦手なこと
得意なこと
- プロジェクト全体を把握した修正
- 複数ファイルにまたがる変更
- コマンドの実行と結果の確認
- エラーの原因特定と修正
- 新しいファイルの作成
苦手なこと
- GUIでの細かい位置調整
- デザインの主観的な判断
- ブラウザでの動作確認
- 非常に長いファイルの編集
効果的な使い方のコツ
1. 段階的に依頼する
一度に大きな変更を依頼するより、小さなステップに分けて依頼すると成功しやすい。
❌ 「Todoアプリを全部作って」
○ 「まずTodoリストを表示するコンポーネントを作って」
2. 具体的に指示する
曖昧な指示より、具体的な指示の方が期待通りの結果になりやすい。
❌ 「ボタンをきれいにして」
○ 「ボタンの背景を青(#3B82F6)に、角丸を8pxに変更して」
3. エラーはそのまま共有
エラーメッセージをそのままコピペして伝えると、的確に修正してくれます。
4. 変更を確認しながら進める
コードが変更されたら、実際にブラウザで動作確認してから次のステップへ。