全体像
Claude Code は VS Code 拡張機能ではありません。
基本的には、
- CLI（コマンドラインツール）としてインストール
- VS Code のターミナルから操作
- プロジェクト単位でAIエージェントを起動
という構成になります。
👉 ここが Copilot / Cursor と大きく違うポイントです。
事前準備
必要なもの
- macOS
- Visual Studio Code
- Node.js（18以上推奨）
- Anthropic（Claude）のアカウント
Node.js の確認
ターミナルで以下を実行します。
node -v入っていない、または古い場合は：
brew install nodeClaude Code のインストール
1. Claude CLI をグローバルインストール
以下を実行します。
npm install -g @anthropic-ai/claude-code実行結果はこんな感じ
added 3 packages in 2s
2 packages are looking for funding
run `npm fund` for details
npm notice
npm notice New major version of npm available! 10.5.0 -> 11.7.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.7.0
npm notice Run npm install -g npm@11.7.0 to update!
npm notice 念の為、正常に入ったか確認
claude --versionバージョンが表示されればOK
Claude Code の認証設定
2. Claude にログインする
次に認証を行います。
claude login実行後こんな画面が表示されるはず
Welcome to Claude Code v2.1.7
…………………………………………………………………………………………………………………………………………………………
* █████▓▓░
* ███▓░ ░░
░░░░░░ ███▓░
░░░ ░░░░░░░░░░ ███▓░
░░░░░░░░░░░░░░░░░░░ * ██▓░░ ▓
░▓▓███▓▓░
* ░░░░
░░░░░░░░
░░░░░░░░░░░░░░░░
*
▗ ▗ ▖ ▖ *
*
………………… ………………………………………………………………………………………………………………
Let's get started.
Choose the text style that looks best with your terminal
To change this later, run /theme
❯ 1. Dark mode ✔
2. Light mode
3. Dark mode (colorblind-friendly)
4. Light mode (colorblind-friendly)
5. Dark mode (ANSI colors only)
6. Light mode (ANSI colors only)
╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌
1 function greet() {
2 - console.log("Hello, World!");
2 + console.log("Hello, Claude!");
3 }
╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌
Syntax highlighting available only in native build
これはClaude Code が正常に起動し、初期セットアップ（オンボーディング）に入った状態です。
使用したいテーマを選んでエンターでOK
その後以下の、課金・認証方式の選択画面が出ます
Claude Code can be used with your Claude subscription or billed based on API usage
through your Console account.
Select login method:
❯ 1. Claude account with subscription · Pro, Max, Team, or Enterprise
2. Anthropic Console account · API usage billing
この選択が完了するとブラウザが開きAnthropic のログイン画面に遷移します。
認証完了後にCLIが使用可能になります。
1.と2.の課金方式について説明
選択肢①Claude account with subscription
（Pro / Max / Team / Enterprise）
これを選ぶと何が起きるか
- ブラウザが自動で開く
- Claude（通常のWeb版と同じ）にログイン
- 認証が完了すると CLI に戻る
- そのまま Claude Code が使えるようになる
特徴
- APIキー不要
- 課金管理がシンプル
- Claude Web版と同じアカウントで使える
- 個人利用
向いている人
- すでに Claude Pro / Max を使っている
- まず試したい
選択肢②Anthropic Console account
（API usage billing）
これを選ぶと何が起きるか
- Anthropic Console のログイン画面が開く
- APIキーが紐づいたアカウントで認証
- Claude Code が API利用課金モード で動作
- 使ったトークン量に応じて課金
特徴
- 使用量ベース課金
- チーム・CI・自動化向き
- 利用状況を細かく可視化できる
- 大規模リポジトリでも制御しやすい
向いている人
- 業務利用
- チームで使う
- 利用量を厳密に管理したい
- 自動実行（将来）を考えている
どちらを選ぶ？
個人開発
👉 ① Claude account with subscription
理由：
- セットアップが一番楽
- CLI利用に十分
- 記事としても読者が真似しやすい
業務・チーム・CI用途なら
👉 ② Anthropic Console account
※ここまでで課金タイプの説明は終わり。詳しく知りたい人は自分で調べてみて。
実際に
それでは作業に戻ります。今回はひとまず個人開発として１番のClaude account with subscription を選択してみます。
課金方式を選択後にブラウザが開かれたらGoogle やメールアドレスを入力
その後認証リンク付きのメールが届くのでリンクをクリック
その後のClaudeの画面で以下の画面が出ます…課金アカウントが必要でした…
Claude account with subscriptionは課金前提で、Pro(USD17)かMax(USD100)でお金がかかります。
なので今回は試し利用したいので② Anthropic Console accountに変更します
まずCtrl-Cで現在のターミナル上のClaude画面を終了し再度ターミナルからclaude loginを実行
その後の課金・認証方式の選択画面でAnthropic Console accountを選択、ブラウザで以下が表示される
今回は個人で使用するので、Individualを選択（Organizationの追加も後からできるのでチームでの開発にも影響はない）
Anthropic のアカウント構造は以下の通り
あなた（ユーザー）
├─ Individual account（個人用）
└─ Organization account（必要になったら追加）その後の画面でAuthorizeをクリックしてブラウザで認証が済むと以下の画面が出ます。
✅セットアップ完了ですね！
次にやるべきこと
① VS Code に戻る
- プロジェクトを開いている VS Code
- 内蔵ターミナルを表示
② Claude Code が動くか確認
プロジェクトルートで：
claude以下の画面が出る。
Welcome to Claude Code v2.1.7
…………………………………………………………………………………………………………………………………………………………
* █████▓▓░
* ███▓░ ░░
░░░░░░ ███▓░
░░░ ░░░░░░░░░░ ███▓░
░░░░░░░░░░░░░░░░░░░ * ██▓░░ ▓
░▓▓███▓▓░
* ░░░░
░░░░░░░░
░░░░░░░░░░░░░░░░
█████████ *
██▄█████▄██ *
█████████ *
…………………█ █ █ █………………………………………………………………………………………………………………
Browser didn't open? Use the url below to sign in:
https://platform.claude.com/oauth/authorize?code=true&client_id=9d1c250a-e61b-44d9-88ed-5944d1962f5e&response_type=code&redirect_uri=https%3A%2F%2Fplatform.claude.com%2Foauth%2Fcode%2Fcallback&scope=org%3Acreate_api_key+user%3Aprofile+user%3Ainference+user%3Asessions%3Aclaude_code&code_challenge=0TsF2i-PafT_pqLHW3BK6VlDOa1bTrsGU98oZFAN44I&code_challenge_method=S256&state=ArA07Zgag2T-b0Ehul5zIuJ9Tbtj8Uhhfj4nnBLnUIk
Paste code here if prompted >上記の画面と同時にブラウザが開かれるのでAuthorizeを押して認証すると上記のターミナルが下記の画面へと変わります。
Welcome to Claude Code v2.1.7
…………………………………………………………………………………………………………………………………………………………
* █████▓▓░
* ███▓░ ░░
░░░░░░ ███▓░
░░░ ░░░░░░░░░░ ███▓░
░░░░░░░░░░░░░░░░░░░ * ██▓░░ ▓
░▓▓███▓▓░
* ░░░░
░░░░░░░░
░░░░░░░░░░░░░░░░
█████████ *
Logged in as yudai.sugimoto@next.inc
Login successful. Press Enter to continue…その後の確認項目をYesを選択してEnterで進めていけば実際の使用開始まで行きます。
https://console.anthropic.comこちらのコンソール画面からBillingを確認すると無料クレジットが$5 付与されていました。これ以降はクレジットカードを登録して従量課金がされていくみたい。
それでは早速Visual Studio Codeのターミナルへ戻り使用してみます。
③ 最初の一言
「コードは変更せず、このプロジェクトの構成と役割を簡潔に説明して」のようなプロンプトを入力
※コードの変更をさせないことでAPI呼び出し、AIの思考量を減らし従量課金額を低くする。
ファイルを読みにいってプロンプトに対しての回答を考えてくれています。
結果が以下になりました。実際には詳しく書かれていますが、今回は省略します。
Explore(プロジェクト構成を調査)
⎿ Done (24 tool uses · 35.1k tokens · 1m 11s)
プロジェクト概要
Ruby on Rails 7.1.3（Ruby 3.3.2）を使用したシステム
主要ディレクトリ構成
- app/: Rails標準構成（controllers, models, views, assets）
- ユーザー機能と管理者機能を分離
- config/:
- routes.rb, database.ymlなど
---
主要機能
1~4は省略.....
5. 技術スタック
- フロント: Tailwind CSS, Bootstrap 5, Hotwire
- DB: MySQL 5.7
- 環境: Docker/docker-compose
✻ Worked for 1m 33sまとめ
- Claude Code は CLI型AIエージェント
- VS Code とは ターミナル経由で連携
- プロジェクト全体を理解する前提設計
- バイブコーディングと非常に相性が良い
「コードを書くAI」ではなく
「一緒に考えるAI」 をローカルに置く感覚。
ここまで読んでいただき、ありがとうございます。もしこの記事の技術や考え方に少しでも興味を持っていただけたら、ネクストのエンジニアと気軽に話してみませんか。
- 選考ではありません
- 履歴書不要
- 技術の話が中心
- 所要時間30分程度
- オンラインOK
