トップ > Claude Code > Claude Code の VS Code 拡張で個人設定を見せずにデモしたい ── CLAUDE_CONFIG_DIR で設定を分離する

Claude Code の VS Code 拡張で個人設定を見せずにデモしたい ── CLAUDE_CONFIG_DIR で設定を分離する

Claude Code Visual Studio Code
記事タイトルとURLをコピーする

忙しい人向け3行まとめ

  • CLAUDE_CONFIG_DIR を使うと、Claude Code の設定ディレクトリを起動時に切り替えられる
  • デモ用の ~/.claude-demo/ を用意すると、個人の Hooks や CLAUDE.md を読み込まない状態で VS Code 拡張を試せる
  • VS Code を同時に開く場合は、--user-data-dir で VS Code 側のユーザーデータも分ける必要あり

背景

こんにちは。アプリケーションサービス本部 ディベロップメントサービス4課の大橋です。

Claude Code を使い込んでいくと、Hooks やカスタムスキル、CLAUDE.md による挙動のカスタマイズが増えていきます。普段の開発には便利ですが、お客様へのデモになると話が変わります。 自分はデモのときだけ出力ファイルが見やすい VS Code 拡張を使っているのですが、そこに個人の Hooks や CLAUDE.md がそのまま読み込まれると、何が環境依存の動作なのかわかりづらくなって困ります。

そこで、自分で入れたカスタマイズによるノイズを消すために、デモ環境を個人設定から切り離したいと考えました。

最初に思いついたのは、~/.claude/ をシンボリックリンクにして、リンク先を普段用のディレクトリとデモ用のディレクトリで切り替える方式でした。しかし、この方法ではすべての VS Code セッションがデモ用の設定で動いてしまい、普段の開発と混在するリスクがあります。また、シンボリックリンクの切り替え忘れもしやすいです。

そこで調べていくうちに CLAUDE_CONFIG_DIR という環境変数を見つけました。これを使えば、デモ用で開いたウィンドウだけに設定を適用でき、他のセッションには影響しません。

CLAUDE_CONFIG_DIR とは

Claude Code が参照する設定ディレクトリ（通常は ~/.claude/）を別のパスに向けられる環境変数です。

CLAUDE_CONFIG_DIR 自体は公式ドキュメントの 環境変数 に記載されているのですが、VS Code 拡張がこれを尊重するかどうかは公式には明記されていません。

そのため、手元の環境で動くかどうか試してみることにしました。

セットアップ手順

動作環境: macOS + zsh を前提にしています。

1. デモ用の設定ディレクトリを作る

mkdir -p ~/.claude-demo

中身は空で構いません。Claude Code が起動時に認証情報やセッションファイルを自動生成します。個人の Hooks・スキル・CLAUDE.md はここには存在しないので、まっさらな状態になります。

2. code コマンドをインストールする（未インストールの場合）

VS Code で Cmd+Shift+P を開き、「Shell Command: Install 'code' command in PATH」を実行します。

3. エイリアスを設定する

~/.zshrc に以下を追加します。

alias code-demo='CLAUDE_CONFIG_DIR=~/.claude-demo code'

追加したら反映します。

source ~/.zshrc

動作確認

セットアップ後、本当に設定ディレクトリが切り替わっているか確認しておくと安心です。

~/.claude-demo/CLAUDE.md に、設定ディレクトリが切り替わったことを確認するためのマーカー文を書いておきます。

# DEMO CONFIG MARKER
このファイルが読み込まれていれば ~/.claude-demo を参照しています。
確認のため「DEMO-CONFIG-ACTIVE」と伝えてください。

次に、VS Code が起動していればすべてのウィンドウを閉じてから、外部ターミナルで code-demo を実行します。VS Code が開いたら、Claude に「ユーザーの CLAUDE.md に書いてある指示を教えて」と聞きます。マーカーの文言が返ってきたら、設定ディレクトリの切り替えは成功しています。

このファイルは削除せずに残しておくと、今どちらの設定ディレクトリで起動しているかを判別しやすくなります。

今回の検証では、無事マーカーが返ってきました。

さらに、個人の ~/.claude/ にテスト用の Hooks を作って試したところ、デモ環境では発火しませんでした。スキルについても、/skills で確認したところ個人のスキルは表示されませんでした。

CLAUDE.md・Hooks・スキルのいずれも、デモ環境ではまっさらな状態になることを確認できました。VS Code 拡張は CLAUDE_CONFIG_DIR を尊重しています。

使い方

デモ環境で開くときは、VS Code 内蔵ターミナルではなく、外部ターミナルから実行します。

code-demo ~/your-project   # デモ用（まっさら）で開く
code ~/your-project         # 普段どおり（個人環境）で開く

VS Code を Dock や Finder から直接起動した場合、macOS はログインシェルの環境変数を VS Code に渡しません。~/.zshrc で定義したエイリアスや環境変数は、外部ターミナルから code コマンドで起動したときだけ VS Code に引き継がれます。

既存ウィンドウとの共存

VS Code が既に起動している状態で code コマンドを実行すると、既存の VS Code インスタンス側の環境変数が使われるため、ターミナルで CLAUDE_CONFIG_DIR を設定していても期待どおり反映されないことがあります（GitHub の Issue #30538）。

通常は、デモ環境で開く前に既存の VS Code ウィンドウをすべて閉じておくのが安全です。

ただし、VS Code のユーザーデータディレクトリを分ければ、個人用とデモ用の VS Code を同時に開けました。VS Code 公式ドキュメントでも、複数の独立したインスタンスを開く用途として --user-data-dir が紹介されています。

CLAUDE_CONFIG_DIR="$HOME/.claude-demo" \
code --new-window \
  --user-data-dir "$HOME/.vscode-demo-user-data" \
  --extensions-dir "$HOME/.vscode/extensions" \
  ~/your-project  # ← ここだけ自分のプロジェクトパスに置き換える

各オプションの役割は次のとおりです。

  • --new-window：既存のウィンドウを再利用せず、必ず新しいウィンドウで開く
  • --user-data-dir：VS Code のユーザーデータを分離し、個人用とは別のインスタンスとして起動する
  • --extensions-dir：普段使っている拡張機能をそのまま流用する（再インストール不要）

自分の環境では、初回起動時に VS Code 側のログイン画面が出ました。ただ、今回の検証では無視しても Claude Code 拡張の設定切り替えには影響しませんでした。

これで、開発中のウィンドウを閉じることなく、デモ用のウィンドウを開くことができます。

できること・できないこと

できること:

  • 個人の ~/.claude/ を一切変更せずに、デモ専用のまっさら環境で起動できます
  • 起動時に設定ディレクトリを切り替えられます
  • --user-data-dir を併用すれば、個人用の VS Code とデモ用の VS Code を同時に開けます
  • プロジェクト側の .claude/skills/ にあるスキルはそのまま使えます。プロジェクトの設定はワーキングディレクトリから読まれるため、CLAUDE_CONFIG_DIR の影響を受けません

できないこと・制約:

  • 通常の code コマンドだけで開く場合、既に起動している VS Code インスタンスの影響を受けることがあります。既存ウィンドウを開いたまま分離したい場合は --user-data-dir を併用します
  • CLAUDE_CONFIG_DIR は VS Code 拡張での対応が公式には未サポートです。将来のバージョンで動作が変わる可能性があります

まとめ

  • CLAUDE_CONFIG_DIR 環境変数で、Claude Code が参照する設定ディレクトリをプロセス単位で切り替えられます
  • VS Code 拡張でも有効であることを手元の環境で確認しました（公式保証ではありません）
  • ~/.claude-demo/ と --user-data-dir を組み合わせれば、個人用とデモ用の VS Code を同時に開けます

今回はデモ用途で使いましたが、応用すれば個人用と会社用の2プロファイルを VS Code 拡張で使い分けるといったこともできそうです。

この記事が誰かの役に立てばうれしいです。

オオハシ (記事一覧)

25年新卒入社
アプリケーションサービス本部 ディベロップメントサービス4課
家とヌオーが好きです