🚀

Macで始めるClaude Code入門（VSCode完全セットアップガイド）

に公開
AI
VS Code
開発環境
macOS
Claude
tech

この記事では、Mac環境で VSCode + Claude Code をゼロからセットアップして使えるようにする手順を、スクリーンショット付きで解説します。
初めての人でも迷わないように、インストールから簡単な利用まで一通り流れをまとめました。

1. 環境紹介

筆者の検証環境:

  • MacBook Air (13-inch, M1, 2020)
  • macOS 15.6.1
  • Claude Code: Pro プラン契約済み

必要なもの:

  • インターネット接続
  • ブラウザ（Safari/Chrome など）
  • VSCode
  • Claude の有料プランアカウント（Pro / Max / Team / Enterprise）

所要時間： 約30分（初回セットアップ）

コストについて：
このセットアップで必要な費用は、Claude の有料プラン（最低Pro プラン：月額20ドル）です。VSCode などのツールは無料で利用できます。

注意： まだClaude の有料プランに契約していない方は、Claude公式サイトからプラン契約を先に済ませてください。

2. VSCodeのインストール

  1. 公式サイトからVSCodeをダウンロード
    → Visual Studio Code公式サイト

  2. ダウンロードした .zip を解凍して Visual Studio Code.app をアプリケーションフォルダへ移動。

  3. VSCodeを起動すると、最初はこんな画面が表示されます。
    VSCode 初回起動画面

3. プロジェクトフォルダの作成

Claude Codeを使うための作業用フォルダを用意しましょう。
例: デスクトップに claude-test というフォルダを作成しておきます。

VSCodeからこのフォルダを開けば準備完了です。

4. Claude CLIのインストール

Claude CodeはCLI（コマンドラインツール）から認証する必要があります。

インストール手順

  1. VSCodeでターミナルを開くには、右上の四角いアイコンをクリックします。

VSCode ターミナル起動

これで画面下にターミナルが表示され、コマンドを入力できるようになります。
VSCode ターミナル表示後

  1. ターミナルで以下を実行します：
npm install -g @anthropic-ai/claude-code
  1. インストールが完了したらバージョンを確認：
claude --version

バージョンが表示されれば成功です。

5. 初回セットアップ（claude 実行後）

VSCode のターミナルで claude を実行すると、CLI のオンボーディングが始まります。

claude
  1. テーマ選択
    使いやすい表示テーマを選びます（おすすめ：Dark mode）。
    初回テーマ選択

テーマを選んだ後、続けて ログイン方法の選択画面 に遷移します。

Claude Code ログイン画面

ここで Claude account with subscription を選びます。

注意点： Claude Codeを使用するには、事前にClaude の有料プラン契約が必要です。初心者の方はまず Pro プラン（2025年9月時点で月額20ドル）から試してみることをおすすめします。
（Pro / Max / Team / Enterprise のいずれかの契約が必要です）

ブラウザが開き、認証画面 が表示されます。

「Authorize」をクリックすると、VSCodeとClaude Codeの連携が完了します。

認証が完了すると、Claude Codeの利用に関する注意事項が表示されます。

ここでは以下のようなメッセージが出ます：

  • Claudeは間違えることがあるので、生成されたコードは必ずレビューすること
  • プロンプトインジェクションのリスクがあるため、信頼できるコードのみに使うこと
  • 詳細は公式ドキュメント（Claude Code Security）参照

特に問題ないと思うので、Enterキーを押して進めます。

6. ターミナルの推奨設定

続いて、Claude Codeのターミナル設定を有効にするかどうか確認されます。

Claude Code ターミナル設定画面

  • 1. Yes, use recommended settings を選択するのがおすすめです。

7. フォルダの信頼確認

Claude Codeは、選択したフォルダ内のファイルを読み書き・実行できます。
そのため、セキュリティのために「このフォルダを信頼しますか？」と確認されます。

Claude Code フォルダ信頼確認画面

  • 1. Yes, proceed を選びましょう。
    （自分で作業しているフォルダであれば問題ありません）

8. セットアップ完了！

ここまでの手順を終えると、VSCode上でClaude Codeが利用できるようになります。
これで準備は完了です！🎉

あとは通常のチャットのように、ターミナルやサイドパネルでClaudeに指示を出すだけで、
ファイルの読み書き・検索・コード生成などをサポートしてもらえます。

「VSCodeでClaudeが使えるようになった！」というのを実感できる瞬間ですね。

9. Claude Codeと会話してみよう

セットアップが終わったら、実際にClaude Codeと会話してみましょう。
試しに「こんにちは」と入力すると、Claude Codeが応答してくれます。

Claude Code 起動確認

10. ターミナルでのセットアップ完了 → Exit

ここまでの流れで、Claude Codeの初期セットアップが完了しました。
以降はターミナルではなく、VSCodeの拡張機能ビューからClaude Codeを操作していきます。

そのため、一度ターミナルで /exit を入力して終了します。

Claude Code exit

これで準備完了です！次回からは、Claude Code拡張機能を使ってファイルの読み込みや編集を進めていきましょう。

11. VSCode拡張のインストール

CLIでもClaude Codeは使えますが、拡張機能を入れると便利です。

  1. ターミナルでの初期設定が終わったら、次はVSCodeの拡張機能ビューからClaude Codeを使っていきます。
    左側のサイドバーにある「四角いアイコン（赤枠部分）」をクリックすると、拡張機能の一覧が表示されます。

VSCodeの拡張機能ビュー

ここからClaude Codeの拡張機能を検索・インストールすることで、ターミナルではなくGUIベースでやり取りできるようになります。
2. 「Claude Code for VS Code」を検索
3. ここで Install ボタンを押してインストールします。

Claude Code拡張機能のインストール画面

インストールが完了すると、VSCode内からClaude Codeを利用できるようになります。

右上にオレンジのClaudeアイコンが追加されます。

12. Claude Codeの利用例

  1. Claude Code の動作を試すために、新規ファイルを作成してみましょう。
    エクスプローラー上部の 新規ファイル作成ボタン（＋アイコン） をクリックします。

新規ファイル作成

ここでは test.txt という名前でファイルを作成します。
2. 作成した test.txt を開いた状態で、右上の Claude Code アイコン をクリックします。

Claude Code 実行

すると Claude Code が起動し、ファイルへの編集や追記を指示できるようになります。
ここで試しに「test.txt に Claude Code の簡単な使い方を書いて」と入力してみましょう。

最初は文字化けする場合があります。その際は：

「ファイルの中身が文字化けしています。文字化けしないようにしてください。」

と指示すると、自動で修正されます。

13. 簡単なサンプル結果

Claude Codeが出力した test.txt の例：

Claude Codeの簡単な使い方

1. ファイルの読み込み
- 「ファイルを読んで」と指示すると内容を確認できる

2. ファイルの編集
- 「◯◯をxxに変更して」で内容を編集
- 「◯◯を追加して」で追記も可能

3. コマンド実行
- 「npm installを実行して」でパッケージをインストール
- 「テストを実行して」でテスト実行

14. 終了方法

Claude Codeを終了するには：

/exit

と入力してください。
終了しなくても特に問題はありません。

15. まとめ

ここまでで：

  • VSCodeのインストール
  • Claude CLIの導入と認証
  • Claude Codeの起動
  • VSCode拡張の追加
  • 文字化け修正と利用例

を一通り体験できました。

ぜひ色々試してみてください！

Discussion