概要
この記事ではClaude Codeを使うために必要最低限の知識をまとめた備忘録になります。
目次
やったこと
- Claude Codeの基本的な使い方について学ぶ
- CLAUDE.mdの作り方について学ぶ
- MCPの導入方法及び使い方について学ぶ
手順
具体的な手順をステップバイステップで説明します。
ステップ1：Claude Codeとのセッションを開始
作業ディレクトリに移動したら下記コマンドを実行し、Claude Codeとセッションを開始します。
cd "作業ディレクトリ"
claude
下記画像のようにClaude Codeとのインタラクティブ（双方向）セッションが開始されます。
初回実行時はディレクトリを信用するか確認されるので、「Yes」を選択しましょう。
プロンプトだけでなく、スラッシュコマンドも使用できます。
よく使用するコマンドを抜粋しました。
| コマンド | 説明 |
|---|---|
| /clear | 会話履歴をクリア |
| /compact | 会話履歴を要約 |
| /help | ヘルプと利用可能なコマンドを表示 |
| /ide | IDEとの統合管理 |
| /init | CLAUDE.mdを初期化 |
| /init | CLAUDE.mdを初期化 |
| /resume | セッションを再開 |
また、モードという機能が存在しておりClaude Codeの制御を切り替えることもできます。
モードについては「shift + tab」で切り替えることができます。
| モード | 制御 | 説明 |
|---|---|---|
| default | ファイルの読み取り・編集 | 編集内容を自動で反映せず、提案を確認してから反映できる |
| accept | ファイルの読み取り・編集 | 提案を自動で反映するモード |
| plan | ファイルの読み取り | コードを実際に変更せず、読み取り・調査・計画立案だけを行う |
ステップ2：CLAUDE.mdを作成する
CLAUDE.mdはClaudeにおけるメモリの役割を担うファイルです。
Claude Codeは現在のディレクトリまたは上位のディレクトリのCLAUDE.mdを自動的に読み込むようになっています。
作業ディレクトリ配下で下記コマンドを実行してみましょう。
cd "作業ディレクトリ"
claude
/init
作業ディレクトリ配下にCLAUDE.mdが作成されたことを確認できました。
CLAUDE.mdを用意することで技術スタックやルールを毎回伝えなくて済む上に一貫性が生まれることで指示のブレなくなる利点があるので積極的に活用していきたいですね。
ステップ3：MCPを使用する
MCPはAIアプリケーションと外部システムの接続方法を標準化したプロトコルで「AIアプリケーション用のUSB-C ポート」にようなものだと言われています。
Claude CodeでMCPを使用する方法として.mcp.jsonファイルをプロジェクト配下に作成し、直接編集します。
試しにChrome DevTools MCPを使ってClaude Codeにブラウザの画面をスクショしてもらいましょう。
.mcp.jsonファイルに以下内容を記入します。
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--browserUrl=http://localhost:9222"
]
}
}
}
既存のChromeと競合しないよう、別プロファイルでchromeをリモートデバックモードで起動します。
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
--remote-debugging-port=9222 \
--user-data-dir=/tmp/puppeteer-user1
準備ができたら、claudeコマンドを実行します。
claude
新しいMCPサーバーとしてChrome DevToolsが見つかったことが表示されます。
「1」もしくは「2」を選択しましょう。
スクショする旨のプロンプトを実行します。
MCPツールの使用許可を確認されるので「Yes」を選択することでスクショが撮られてデスクトップに保存されたことが確認できました。
まとめ
今回はClaude Codeの初歩的な使い方について学びました。
CLIの利便性を活かしつつ、CLAUDE.mdやMCPを活用して開発を円滑に進めることができる点が魅力だと感じました。
参考