くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > Claude > Claude Codeに入門する＋Claude Desktop＆VSCodeと連携する

Claude Codeに入門する＋Claude Desktop＆VSCodeと連携する

Claude

Claude CodeがProでも利用できるようになったので、
そろそろ入門しようかなと思い、いろいろ調べたときの備忘録(*´ω｀*)

やったこと

インストール

// インストール
$ npm install -g @anthropic-ai/claude-code

// 作業ディレクトリの作成＆移動
$ mkdir claude_code_sandbox
$ cd mkdir claude_code_sandbox

// 起動
$ claude

// ディレクトリの内容を読み取って、CLAUDE.mdを生成してくれる
> /init
// 課金しているアカウントにログイン
> /login

起動すると、今いるフォルダを読み取ってもよいか確認される

CLAUDE.md

メモリと呼ばれるセッション間で共有する情報

メモリタイプ 場所 目的 使用例
プロジェクトメモリ ./CLAUDE.md プロジェクト用チーム共有 プロジェクトアーキテクチャ、コーディング標準、一般的なワークフロー
ユーザーメモリ ~/.claude/CLAUDE.md すべてのプロジェクト用個人設定 コードスタイル設定、個人的なツールのショートカット
プロジェクトメモリ（ローカル） ./CLAUDE.local.md プロジェクト固有個人設定（非推奨） サンドボックスURL、優先テストデータ

.claude/settings.json

Claude Codeの設定ファイル

bashやnpmなどのコマンドのうち、自動承認を許可するものなどが追記されていく

種類 場所 目的
プロジェクト設定 ./.claude/settings.json プロジェクト用のチーム共有設定
ユーザー設定 ~/.claude/settings.json すべてのプロジェクト用の個人設定
プロジェクト設定（ローカル） ./.claude/settings.local.json プロジェクト固有の個人設定(git管理対象外)

IDE(VSCode)連携

VSCode内のターミナル上でclaudeを実行すると、
IDEと連携し、VSCode上で差分の表示などをしてくれるようになる

通常のターミナルでもclaudeを起動後、/ideコマンドで連携ができる

Claude Desktop連携

Claude CodeをMCPサーバとして、Claude Desktopから接続できるようにできる

Macだと、
~/Library/Application\ Support/Claude/claude_desktop_config.json
を編集すればOK

fnmを使ってnodeのバージョン管理をしているので、
claudeだけではだめで、フルパスを指定しないといけない
(~/Library/...でもだめだった)

{
  "mcpServers": {
    "claude_code": {
      "command": "/Users/<USER>/Library/Caches/fnm_multishells/30902_1749074460857/bin/claude",
      "args": [
        "mcp",
        "serve"
      ],
      "env": {}
    }
  }
}

編集後、Claud Desktopを再起動すると有効になる

うまくいっていると、メニューのClaude＞設定にある、 開発者タブにMCPサーバと接続状態が表示されるようになる

その他もろもろ

ドキュメントを読みながら、いろいろ理解を進めてみた

カスタムスラッシュコマンド

/initなどのスラッシュコマンドがいくつか用意されているが、

オリジナルのスラッシュコマンドを作ることができる

# プロジェクトにコマンドディレクトリを作成する
$ mkdir -p .claude/commands

# 各コマンド用のMarkdownファイルを作成する
$ echo "このコードのパフォーマンスを分析し、3つの具体的な最適化を提案してください：" > .claude/commands/optimize.md

# Claude Codeでカスタムコマンドを使用する
$ claude > /project:optimize

ディレクトリ構成によって、サブコマンドみたいな感じになるっぽい

例：.claude/commands/frontend/component.md => /project:frontend:component

種類 場所 実行
プロジェクト共有 ./.claude/commands/ /project:foo
ユーザー固有 ~/.claude/commands/ /user:foo

引数とかも使えるっぽい

echo "Issue #$ARGUMENTS を分析して" /project:foo 123

特別なショートカット

スラッシュコマンドの/のように、特別な1文字目がある

  • @ ... ファイル選択
  • # ... ルールの追加(CLAUDE.mdへの追記)
  • ! ... Bashコマンドの実行

また、こんなショートカットもある

  • Shift + Tab ... 編集・提案の自動承認
  • \ + Return ... 改行の入力
  • ESCを2回連続 ... 直前の操作の取り消し

Claude Codeのベストプラクティス

公式の記事があるっぽい

ざっくりとして

  • CLAUDE.mdファイルの作成し、改善を繰り返す
    • 以下の内容などを用意しておくとよいっぽい
      • 一般的なbashコマンド
      • 主要なファイルやユーティリティ関数
      • コードスタイルガイドライン
      • テスト手順
      • リポジトリの運用ルール（例：ブランチ命名規則、マージ vs. リベース）
      • 開発環境の設定（例：使用するpyenv、対応するコンパイラ）
      • プロジェクト特有の注意点や警告 
  • 自動承認する許可コマンドを適切に設定する
  • GitHub CLIをインストールする

などなど

Claudeにヒアリングしてもらって、CLAUDE.mdをつくるのもよさそう

とりあえず、使えるところまで設定できた気がする(*´ω｀*)
いろいろ遊んでみよう〜(*´ω｀*)

参考にしたサイト様