たびとの旅路 ~電脳砂漠の冒険譚~

フロッピー頼りに歩き、クラウドの地平を見つめる今日まで。見つけたオアシス、迷い込んだ砂の迷宮、全てこの羊皮紙に。

砂漠で拾った、思わぬ道具 ~Claude Code 導入・初期設定完全ガイド~

砂漠を渡る旅人は、時に思わぬ道具を拾うことがある。羊皮紙(記事)作成を助ける道具を自ら錬成(開発)しようとしていた私が、Claude Code という既製の神器に出会い、その手間が丸ごと省けてしまった。

VS Code での開発に Claude Code を導入する方法を、Windows 環境でのインストールから日本語設定、Skills の活用まで、手順を追って記録しておく。

過去に Gemini Code Assist を試した時の苦い記憶が蘇る。未成熟すぎて使い物にならなかったばかりか、Google Cloud に身に覚えのないプロジェクト ID を勝手に生成された。削除権限すらなく、Google サポートへ連絡してようやく自動生成されたものと確認してもらった。いつの間にかその ID は消えていたが、以来 VS Code の神器は GitHub Copilot 一択と思っていた。しかし、Claude Code の評判を耳にし、試してみる気になったのだ。

この羊皮紙のあらまし

この羊皮紙が導く者

  • VS Code で日々の呪文(コード)を紡いでいるエンジニア
  • Claude Code に興味はあるが、導入方法がわからない旅人
  • GitHub Copilot の代替となる神器を探している方
  • AI 支援の錬金術(開発)ツールを試してみたい方
  • Windows 環境での Claude Code セットアップに詰まっている方

砂漠の道標

  • Claude Code - Anthropic が開発した AI コーディングアシスタント。VS Code 拡張機能として利用できる
  • npm - Node.js に付属するパッケージ管理の神器。Claude Code の導入に使用する
  • winget - Windows 標準のパッケージマネージャー。Node.js を素早く入手できる
  • CLAUDE.md - Claude Code の設計図(設定ファイル)。プロジェクトや AI への指示を記述する
  • Skills - Claude Code に特定のタスクを実行させるカスタム命令。独自の錬金術レシピを登録できる
  • /init - プロジェクトの初期設定を行う Claude Code の呪文(コマンド)。CLAUDE.md を自動生成する
  • .claude ディレクトリ - CLAUDE.md や Skills を格納する、プロジェクトの古文書庫

記事本文

神器を召喚する儀式:Claude Code のインストール

Node.js(npm 含む)の導入

まず、Claude Code をインストールするための器(Node.js)を用意しよう。

winget install OpenJS.NodeJS.LTS

インストール後、PowerShell を一度閉じて再起動すること。

導入の確認

node -v
npm -v

おまけ:インストール場所の確認(.exe は省略しないこと)

where.exe node

Claude Code 本体のインストール

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

これで神器が電脳砂漠に降臨した。


日本語設定:神器に母国語で語りかける

全てのプロジェクトで有効になる設計図(設定ファイル)を用意しよう。グローバルの CLAUDE.md は PC 全体に適用される。一方、プロジェクトルートの .claude/ 配下に置く CLAUDE.md や Skills は、そのプロジェクト専用の設定として機能する。

Claude を使っているなら .claude ディレクトリがあるはずだが、なければ作成する。 次にグローバル設定用の CLAUDE.md ファイルを作成しよう。

C:\Users\<name>\.claude\CLAUDE.md

まずは、日本語で回答するように設定しておこう。

# CLAUDE.md

日本語で回答する。

VS Code への拡張機能インストール

VS Code の拡張機能マーケットプレイスから Claude Code for VS Code を検索してインストールする。

Claude Code for VS Code

拡張機能マーケットプレイスから Claude Code for VS Code をインストール


/init:プロジェクトの初期化儀式

Claude Code を起動して初期設定を済ませたら、/init コマンドを実行しよう。

/initコマンド実行

/init コマンドでプロジェクトを初期化する

Claude Code がファイルを処理する許可を求めてくるため、Yes を何度か繰り返すと、CLAUDE.md が自動生成される。

CLAUDE.mdの作成

CLAUDE.md がプロジェクトルートに自動生成される

CLAUDE.md がプロジェクトのルートディレクトリに作成される。Skills などを追加するため、.claude フォルダを作成し、そこへ CLAUDE.md を移動しておこう。

CLAUDE.mdの場所

.claude フォルダへ CLAUDE.md を移動しておく


実践:チャットから呪文を与えてみる

GitHub Copilot のようにチャットで指示を与えられる。ここでは .gitignore.claude 配下を Git 管理から除外するよう指示してみた。

チャットからの指示

チャットで指示するだけで .gitignore を更新してくれる


この冒険日誌も Claude Code で管理する

この冒険日誌も Claude Code で管理できるようにしてみた。Skills を活用し、羊皮紙の 構成を整えるカスタムスキルを作成している。将来的に羊皮紙作成の半自動化を検討して いたが、Claude Code で事足りるかもしれない。実際、この羊皮紙自体も new-scroll という Skill を使って作成している。

Skills の仕組みを簡単に説明しておこう。Skills とは、繰り返す作業を呪文として 登録しておける仕組みだ。commands は旧形式のため、SKILL.md への直接記述を推奨する。

  1. .claude/skills/<スキル名>/SKILL.md を作成し、やりたいことをプロンプトとして書く
  2. スキルを作るときは、Claude 自身に「こういう作業を自動化したい」と伝えれば、SKILL.md の中身ごと生成してくれる
  3. 作成後は VS Code を再起動する
  4. チャット欄で /<スキル名> と入力すれば、登録した呪文が発動する
Claude Codeでスキルを活用

Skills を活用して冒険日誌の執筆を半自動化する

羊皮紙を巻く前に

Gemini Code Assist の失敗を経て、GitHub Copilot に落ち着いていた私が、ここまで Claude Code に惹かれるとは思っていなかった。単なるコード補完ツールとは一線を画す、プロジェクト全体を理解して動く「真の神器」としての手応えを感じている。

Claude Code for VS Code の優れた点

  1. Skills によるカスタマイズ性 - 独自のスキルを登録することで、反復作業を自動化できる
  2. CLAUDE.md による細かな制御 - プロジェクトごとに AI への指示を設計図として記述でき、チームでの共有も容易
  3. チャットと自律エージェントの両立 - 単なる補完に留まらず、ファイル操作・Git 操作まで自律的にこなす
  4. 日本語への対応 - CLAUDE.md に一行書くだけで、自然な日本語でのやり取りが可能になる

まとめ

この羊皮紙が、あんたの VS Code に思わぬ道具を拾う旅の道標となれば幸いだ。 Claude Code は電脳砂漠をともに歩む、頼もしい道具になりえる。

なお、スクリーンショットに Gemini Code Assist の拡張機能アイコンが見えていることに気づいた読者もいるだろう。 今回 Claude Code の導入に合わせて改めてインストールし、軽く試してみたところ、以前より使えそうな手応えがあった。 今後は Claude Code と適材適所で使い分けながら、検証を続けていくつもりだ。

さあ、良い旅を。

砂漠で見つけた魔法のランプ

ラクダの独り言

ご主人が今度は「クロード」とかいう新しい道具を砂漠に持ち込んだ。俺はもうびっくりしないぞ。前の「ジェミニ」とやらは、ご主人の記録庫に勝手に荷物を置いていって後片付けが大変だったんだ。今度のやつはちゃんと行儀よくしてくれよな。しかも聞けば、自分で作ろうとしてた道具がもう転がってたとか。ご主人らしい話だ。……ま、ニコニコしてるのは悪くない。まったく、やれやれだぜ。