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

# はじめに

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

# 環境

## macOS のバージョン
`macOS 15.5 (Sequoia)`

## 作業ディレクトリ
`/Users/dev/Develop/cc`


# Clude Code のインストール手順

## npm のインストール

[【2022年10月版】 macOS で node をインストールする](https://qiita.com/nouernet/items/31296373ad359f367f43) を参照してインストールしてください。

```
%  npm --version
10.9.2
```

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

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

```terminal
% 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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143127/5c02a016-3309-457c-8119-073df2d3b5cb.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143127/1a34870a-8753-4593-85d6-22d9cbfc5545.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143127/c462a234-cfc5-430a-b932-7f5f63a619d4.png)

# さいごに

かんたんでしたね

# リンク

[【2022年10月版】 macOS で node をインストールする](https://qiita.com/nouernet/items/31296373ad359f367f43)
[Claude Code | Claude Codeを使い始める](https://docs.anthropic.com/ja/docs/claude-code/getting-started)
[Claude Code | IDE統合](https://docs.anthropic.com/ja/docs/claude-code/ide-integrations)