Claude Code の使い方

「Claude Code」の使い方をまとめました。

1. Claude Code

「Claude Code」は、Anthropicが開発したエージェントコーディングツールです。ターミナルに常駐し、コードベースを理解し、自然言語コマンドを通じてより速くコーディングできます。開発環境に直接統合することで、追加のサーバや複雑なセットアップなしにワークフローを合理化します。現在は研究プレビューとして提供されてます。

主な機能は次のとおりです。

「Claude API」の使用料金がかかります。

2. システム要件

システム要件は、次のとおりです。

3. セットアップ

(1) Node.jsのインストール。

(2) Claude Codeのインストール。

npm install -g @anthropic-ai/claude-code

(3) プロジェクトの作成。
今回は、シンプルなNode.jsプロジェクトを作成しています。

mkdir my-project
cd my-project
npm init -y

(4) 「Claude Code」の開始。

claude

テキストスタイルを聞いてくるので選択します。

(5) 認証。
コンソールで1回限りのOAuthプロセスを実行します。
console.anthropic.com で「Claude API」の使用料金を請求するアカウントを指定します。

4. Claude Code の使い方

「Claude Code」はターミナルで直接動作し、プロジェクトのコンテキストを理解して実際のアクションを実行します。コンテキストにファイルを手動で追加する必要はありません。

4-1. Claude Code の開始

(1) まだ開始していない場合は、「claude」コマンドで開始。

4-2. コードについての質問

(1) 指示「このコードベースを説明してください。」を入力。
コードについての質問に回答してくれます。

4-3. コードの作成を依頼

(1) 指示「TypeScriptでブロック崩しを作成して。」を入力。
コードの作成を依頼すると作成してくれます。

(2) 確認が必要な操作は許可を求めてくるのでYESを選択。
危険な操作もあるので、念のため確認してください。

(3) 完成。

(4) 実行。
Claudeからの指示に従って、「npm run server」でサーバ起動した後、「http://localhost:8080」にアクセスします。

4-4. モデルの切り替え

(1) 「/config」入力後、「Model」で使用モデルを選択。
デフォルトは「Sonnet 4」です。

4-5. CLAUDE.md プロジェクトガイドの生成

「/init」でCLAUDE.md プロジェクトガイドを生成してくれます。

# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Project Overview

This is a TypeScript-based Breakout game that runs in a web browser. The game is built using HTML5 Canvas with TypeScript for type safety and modern development practices.

## Build System & Commands

- **Build**: `npm run build` - Compiles TypeScript to JavaScript in the `dist/` directory
- **Development**: `npm run dev` - Runs TypeScript compiler in watch mode for continuous compilation
- **Serve**: `npm run serve` - Starts a local HTTP server on port 8080 to run the game

## Architecture

The game follows an object-oriented architecture with these main components:

- **Vector2**: Utility class for 2D position and velocity calculations
- **Paddle**: Player-controlled paddle with position, movement, and collision bounds
- **Ball**: Game ball with physics (position, velocity, collision detection)
- **Block**: Destructible blocks with position and visual properties
- **BreakoutGame**: Main game class that orchestrates the game loop, handles input, manages collision detection, and renders all objects

The game uses a single TypeScript file (`src/game.ts`) that compiles to `dist/game.js` and is loaded as a module in `index.html`.

## File Structure

- `src/game.ts` - All game logic and classes
- `index.html` - Game container with canvas element and basic styling
- `dist/` - Compiled JavaScript output (generated)
- `tsconfig.json` - TypeScript configuration targeting ES2020 with strict mode

5. VSCode統合

5-1. VSCode統合

「Claude Code」は、IDEとシームレスに統合され、コーディングワークフローを強化します。

特徴は、次のとおりです。

5-2. VSCode統合の設定

(1) 「Claude Code」がセットアップ済みなのを確認。
(2) メニュー「表示 → ターミナル」でターミナルを開く。
(3) 「claude」コマンドを実行。

6. その他の使用例

「Claude Code」はターミナルで直接動作し、プロジェクトのコンテキストを理解して実際のアクションを実行します。コンテキストにファイルを手動で追加する必要はありません。「Claude」は必要に応じてコードベースを探索します。

6-1. コード理解

> 支払い処理システムは何をしますか?
> ユーザー権限がチェックされる場所を見つけて
> キャッシュ レイヤーの仕組みを説明して

6-2. Git操作

> 変更をコミット
> PRを作成
> 12月にマークダウンのテストを追加したコミットはどれですか?
> メインをリベースし、マージの競合を解決して

6-3. コード編集

> サインアップフォームに入力検証を追加
> 新しいAPIを使用するようにロガーをリファクタリング
> ワーカーキューの競合状態を修正

6-4. テストとデバッグ

> 認証モジュールのテストを実行し、失敗を修正
> セキュリティの脆弱性を見つけて修正
> このテストが失敗する理由を説明

6-5. より深い思考を促す

複雑な問題の場合は、もっと深く考えるように明示的に依頼します。

> 新しい支払いサービスをどのように設計すべきかを考える
> 認証フローのエッジケースについて真剣に考える

7. Claude Code のコマンド

7-1. CLIコマンド

7-2. CLI フラグ

7-4. スラッシュコマンド

セッション内での Claude の動作を制御します。