6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【2025年06月版】macOS への Claude Code のインストール / VSCode と Cursor への拡張インストール

Last updated at Posted at 2025-06-11

はじめに

Claude Code の評判がいいので使ってみました。その時のインストール方法です。

環境

macOS のバージョン

macOS 15.5 (Sequoia)

作業ディレクトリ

/Users/dev/Develop/cc

Clude Code のインストール手順

npm のインストール

【2022年10月版】 macOS で node をインストールする を参照してインストールしてください。

%  npm --version
10.9.2

claude-code パッケージのインストール

npm install -g @anthropic-ai/claude-code を実行します。

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

added 3 packages in 1s

2 packages are looking for funding
  run `npm fund` for details

ログイン

claude "/login" を実行します。

% claude "/login"

╭──────────────────────────╮
│ ✻ Welcome to Claude Code │
╰──────────────────────────╯

 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)


 Preview
 ╭────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
 │ 1 function greet() {                                                                                                                                       │
 │ 2    console.log("Hello, World!");                                                                                                                         │
 │ 2    console.log("Hello, Claude!");                                                                                                                        │
 │ 3 }                                                                                                                                                        │
 ╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

ここでは、Dark mode を選択しました。


╭──────────────────────────╮
│ ✻ Welcome to Claude Code │
╰──────────────────────────╯

  ██████╗██╗      █████╗ ██╗   ██╗██████╗ ███████╗
 ██╔════╝██║     ██╔══██╗██║   ██║██╔══██╗██╔════╝
 ██║     ██║     ███████║██║   ██║██║  ██║█████╗  
 ██║     ██║     ██╔══██║██║   ██║██║  ██║██╔══╝  
 ╚██████╗███████╗██║  ██║╚██████╔╝██████╔╝███████╗
  ╚═════╝╚══════╝╚═╝  ╚═╝ ╚═════╝ ╚═════╝ ╚══════╝
  ██████╗ ██████╗ ██████╗ ███████╗                
 ██╔════╝██╔═══██╗██╔══██╗██╔════╝                
 ██║     ██║   ██║██║  ██║█████╗                  
 ██║     ██║   ██║██║  ██║██╔══╝                  
 ╚██████╗╚██████╔╝██████╔╝███████╗                
  ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝


 Browser didn't open? Use the url below to sign in:

https://claude.ai/oauth/authorize?code=true&client_id=

 Paste code here if prompted >

ブラウザが開くので、claude.ai にログインしていないならログインします。
開かないなら、ターミナルに表示されているURLをブラウザで開きます。

image.png

承認を求められるので、承認します。

image.png

承認すると認証コードが表示されるのでコピーしてターミナルに入力します。

Login successful. Press Enter to continue…

Login successful と表示されればログイン完了です。

╭──────────────────────────╮
│ ✻ Welcome to Claude Code │
╰──────────────────────────╯

 Security notes:

 1. Claude can make mistakes
    You should always review Claude's responses, especially when
    running code.

 2. Due to prompt injection risks, only use it with code you trust
    For more details see:
    https://docs.anthropic.com/s/claude-code-security

 Press Enter to continue…

Enter ですすめます。

╭──────────────────────────╮
│ ✻ Welcome to Claude Code │
╰──────────────────────────╯

 Use Claude Code's terminal setup?

 For the optimal coding experience, enable the recommended settings
 for your terminal: Option+Enter for newlines and visual bell

 ❯ 1. Yes, use recommended settings
   2. No, maybe later with /terminal-setup

 Enter to confirm · Esc to skip

Enter ですすめます。

╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                                              │
│ Do you trust the files in this folder?                                                                                                                       │
│                                                                                                                                                              │
│ /Users/dev/Develop/cc                                                                                                                                        │
│                                                                                                                                                              │
│ Claude Code may read files in this folder. Reading untrusted files may lead Claude Code to behave in an unexpected ways.                                     │
│                                                                                                                                                              │
│ With your permission Claude Code may execute files in this folder. Executing untrusted code is unsafe.                                                       │
│                                                                                                                                                              │
│ https://docs.anthropic.com/s/claude-code-security                                                                                                            │
│                                                                                                                                                              │
│ ❯ 1. Yes, proceed                                                                                                                                            │
│   2. No, exit                                                                                                                                                │
│                                                                                                                                                              │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
   Enter to confirm · Esc to exit

Enter ですすめます。

╭───────────────────────────────────────────────────╮
│ ✻ Welcome to Claude Code!                         │
│                                                   │
│   /help for help, /status for your current setup  │
│                                                   │
│   cwd: /Users/dev/Develop/cc                      │
╰───────────────────────────────────────────────────╯

 Tips for getting started:

 1. Ask Claude to create a new app or clone a repository
 2. Use Claude to help with file analysis, editing, bash commands and git
 3. Be as specific as you would with another engineer for the best results
 4. ✔ Run /terminal-setup to set up terminal integration

 ※ Tip: Start with small features or bug fixes, tell Claude to propose a plan, and verify its suggested edits

╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ > Try "how does <filepath> work?"                                                                                                                            │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
  ? for shortcuts

ここまでくれば完了です。cluade の終了は、exit と入力します。

再度 Claude Code を起動する

作業するディレクトリに移動して claude を実行する

% claude

VS Code と Cursor への拡張インストール

  1. VSCodeを開く(作業するディレクトリで開く)
  2. 統合ターミナルを開く
  3. claudeを実行する
╭─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                                                                                     │
│ 🎉 Claude Code extension installed in VS Code!                                                                                                                                                      │
│ Version: 1.0.18                                                                                                                                                                                     │
│                                                                                                                                                                                                     │
│ Quick start:                                                                                                                                                                                        │
│ • Press Cmd+Esc to launch Claude Code                                                                                                                                                               │
│ • View and apply file diffs directly in your editor                                                                                                                                                 │
│ • Use Cmd+Option+K to insert @File references                                                                                                                                                       │
│                                                                                                                                                                                                     │
│ For more information, see https://docs.anthropic.com/s/claude-code-ide-integrations                                                                                                                 │
│                                                                                                                                                                                                     │
╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
   Press Enter to continue…

拡張機能が自動インストールされます

image.png

さいごに

かんたんでしたね

リンク

【2022年10月版】 macOS で node をインストールする
Claude Code | Claude Codeを使い始める
Claude Code | IDE統合

6
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?