Blog
Claude Code を使い始める

Claude Code を使い始める

2025/07/18

Claude Code とは

Claude Code は Anthropic が提供する AI アシスタントツールで、コマンドラインから直接利用できる開発者向けツール。通常のチャットウィンドウとは異なり、プロジェクト全体を理解して作業を進めることができる。

セットアップ手順

前提条件

  • Node.js 18 以上
  • ターミナル環境

インストール 

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

初回使用 

# プロジェクトディレクトリに移動
cd your-project

# Claude Code 開始
claude

初回実行時に Anthropic Console での認証が求められるので、ブラウザでログインする。

プロジェクトの初期化

/init コマンドの使用

新しいプロジェクトで Claude Code を使い始める際は、まず /init コマンドを実行する：

> /init

このコマンドは以下の情報を含む CLAUDE.md ファイルを作成する：

  • よく使うコマンド（ビルド、テスト、リント）
  • コードスタイルの設定
  • 命名規則
  • 重要なアーキテクチャパターン

CLAUDE.md の重要性

  • Claude Code がプロジェクトの文脈を理解するための重要なファイル
  • チーム共有と個人設定の両方に使用可能
  • プロジェクト固有の情報を記録

基本的な使い方

最初のコマンド例 

# プロジェクトの概要を聞く
what does this project do?

# 機能の実装を依頼
Add a user authentication feature

# バグの修正を依頼
Fix the error in the login function

便利な機能

  • プロジェクト全体の構造を理解
  • Git 操作のサポート
  • デバッグ支援
  • 繰り返し作業の自動化

MCP (Model Context Protocol) の設定

MCP とは

外部ツールやデータソースにアクセスできるオープンプロトコル。

サーバーの追加 

# MCP サーバーを追加
claude mcp add my-server /path/to/server

認証

  • OAuth 2.0 をサポート
  • /mcp コマンドで認証管理

リソースの参照

外部リソースを参照する際の書式：

@server:protocol://resource/path

セキュリティ注意事項

  • サードパーティの MCP サーバーは自己責任で使用
  • 特にインターネットに接続する MCP サーバーは注意が必要（プロンプトインジェクションのリスク）

Permission 設定とセキュリティ

基本的なセキュリティ設計

Claude Code は以下のセキュリティ機能を提供：

  • デフォルトで読み取り専用: ファイル編集やコマンド実行には明示的な許可が必要
  • フォルダアクセス制限: Claude Code を起動したディレクトリのみにアクセス制限
  • アクション承認システム: 各操作に対して個別または自動承認を選択可能

便利な Permission 設定例

settings.json ファイルで行う

{
  "permissions": {
    "allow": [
      "Bash(npm run *)",
      "Bash(git *)",
      "Bash(hugo *)"
    ],
    "deny": [
      "Bash(rm *)",
      "Bash(curl *)"
    ]
  }
}

便利なツールとの連携

difit (Git diff viewer)

Claude Code と組み合わせて使える便利なツール。元々は ReviewIt という名前で開発されていたオープンソースの Git diff 閲覧ツール。

主な機能

  • ローカルでのコードレビュー機能
  • 画像の比較機能
  • カスタマイズ可能なテーマとフォントサイズ
  • 異なるコンテナやデバイスから差分を確認するためのホスト指定

使用方法 

# npm で直接実行
npx difit

# または Claude Code から起動
Bash(npx difit)

Claude Code との連携ワークフロー

将来的には以下のような AI 主導のワークフローが可能になる予定：

  1. AI（Claude Code）がコードを生成
  2. AI が difit を起動してコードレビュー画面を表示
  3. 人間が行単位でコメントを追加
  4. AI がコメントを受け取って修正を実施

Permission 設定での許可 

{
  "permissions": {
    "allow": [
      "Bash(npx difit)",
      "Bash(git *)"
    ]
  }
}

その他の連携可能なツール

  • Git: バージョン管理との統合
  • npm/yarn: パッケージ管理ツール
  • Hugo: 静的サイトジェネレーター
  • 各種 linter: コード品質チェック

実用的なメモ

  • コマンドラインツールなので、普段の作業フローに組み込みやすい
  • 「同僚に話しかけるように」具体的な指示を出すのがコツ
  • プロジェクトの文脈を理解するので、詳細な説明は不要
  • /init でプロジェクトの初期化を忘れずに
  • MCP サーバーの設定で機能拡張可能
  • Permission 設定でセキュリティを確保しながら効率的に作業
  • difit などの外部ツールとの連携でコードレビュー効率化
React 基礎