Claude Code × Cursor 導入・設定ガイド — AIコーディング環境を30分で構築 —

はじめに

「AIを使ってコーディングしてみたいけど、環境構築が難しそう」「ターミナルベースのツールは初心者にはハードルが高い」——そんな不安を感じていませんか？

本記事では、Anthropic社が開発したAIコーディングエージェントClaude Codeと、AI特化のコードエディタCursorを組み合わせた開発環境の構築方法を、初心者向けにステップバイステップで解説します。Cursorのインストールから、Node.jsの準備、Claude Codeの導入、IDE連携の設定まで、この手順通りに進めれば約30分でAIコーディング環境が完成します。

完成イメージ

セットアップが完了すると、以下のような環境が手に入ります。

CursorのサイドパネルからClaude Codeのチャットを開き、「このコードのバグを直して」「〇〇のAPIを呼び出すコードを書いて」と自然な日本語で指示するだけで、AIがコードの生成・編集・デバッグを行います。変更内容はdiff形式で確認できるため、意図しない変更を防ぐことも可能です。

こんなシーンでの活用に適しています

• AIの力を借りてコーディング速度を上げたい方
• エラーの原因特定やバグ修正をAIにサポートしてもらいたい方
• 自然な日本語の指示だけでコードを生成・編集したい方

方法: Claude Code + Cursor

事前準備

以下を用意してください。

Anthropicアカウント（Claude Codeの利用に必要。ステップ内で作成手順を解説）

設定手順

Step 1: Anthropicアカウント作成と料金プラン選択

まず、Claude Codeを利用するためのAnthropicアカウントとサブスクリプションを準備します。

1-1. Claudeの公式サイトにアクセスし、アカウントを作成します。メールアドレスまたはGoogleアカウントで登録できます。

1-2. 料金プランを選択します。Claude Codeは無料プランでは利用できません。以下の表を参考に、用途に合ったプランを選択してください。

ポイント: 初心者には月額$20（約3,000円）のProプランが最も手頃でおすすめです。まずはProプランで試して、利用頻度が増えたらMax 5xへの移行を検討しましょう。

Step 2: Cursorのインストール

AI特化のコードエディタCursorをインストールします。CursorはVS Codeをベースにしているため、VS Codeの使い勝手そのままにAI機能を利用できます。

2-1. ブラウザで Cursor公式サイトを開きます。

2-2. ページ中央部の「ダウンロード」ボタンをクリックします。Windows・Mac・Linuxはサイトが自動判別してくれます。

2-3. ダウンロードしたインストーラーをダブルクリックして実行します。

Windowsの場合のインストール手順:

2-4. 使用許諾契約書の画面で「同意する」→「次へ」をクリックします。

2-5. 追加タスクの選択は初期値のまま「次へ」で進みます。

2-6. 「インストール」ボタンをクリックしてインストール完了です。

Step 3: Node.jsのインストール

Claude Codeの動作にはNode.js 18以上が必要です。既にインストール済みの方はバージョン確認だけ行い、Step 4に進んでください。

3-1. Cursorのターミナルを開きます。Ctrl+@（Windows）または Cmd+J（Mac）でターミナルが表示されます。

3-2. 以下のコマンドを実行して、Node.jsのバージョンを確認します。

node -v

• v18.0.0 以上が表示された場合 → そのままStep 4へ進んでください

• それ以下、または「コマンドが見つからない」と表示された場合 → 以下の手順でインストールします

Windowsの場合:

3-3. Node.js公式サイトからLTS版をダウンロードします。

3-4. ダウンロードしたインストーラーを実行し、画面の指示に従ってインストールします。

3-5. インストール後、Cursorのターミナルを再度開いて node -v を実行し、v18以上が表示されることを確認します。

Macの場合（Homebrew使用）:

brew install node

Mac/Linuxでnvmを使う場合（推奨）:

# nvmをインストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
# シェルを再起動後
nvm install 22
node -v  # v22.x.xが表示されればOK

Step 4: Claude Codeのインストール

Node.jsの準備ができたら、Claude Codeをインストールします。

4-1. Cursorのターミナルで以下のコマンドを実行します。

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

4-2. インストールが完了したら、以下のコマンドでClaude Codeを起動します。

claude

「Welcome to Claude Code」と表示されれば起動成功です。

初回ログイン:

4-3. テーマ選択画面が表示されるので、好みのテーマを選択します。

4-4. 「Select login method」でログイン方法を選択します。

4-5. ブラウザが自動で開き、Anthropicのログイン画面が表示されます。Step 1で作成したアカウントでログインしてください。

4-6. ログインが完了すると、ターミナルに戻りClaude Codeが使用可能になります。次回以降は自動認証されます。

Step 5: CursorへClaude Code拡張機能を導入

Claude CodeをCursorのサイドパネルから使うために、拡張機能を導入します。

5-1. Cursorでプロジェクトのフォルダを開きます。

5-2. 拡張機能タブのマーケットプレイス検索欄で”claude code for vs code”と検索し、ヒットした拡張機能をインストールします。

Step 6: IDE連携の確認と使い方

最後に、Claude CodeがCursorを正しく認識しているか確認し、基本的な使い方を確認しましょう。

6-1. ターミナルでClaude Codeを起動し、/ide コマンドを実行します。

claude
# 起動後に以下を入力
/ide

Cursor が選択肢として表示されれば、連携完了です。

6-2. Cursorで何かファイルを開きます（ファイルが開かれていないとアイコンが表示されません）。

6-3. エディタ右上または左サイドバーにSparkアイコン（claudeのロゴ）が表示されます。

6-4. Sparkアイコンをクリックすると、Claude Codeのチャットパネルが開きます。ここから自然言語でコード生成・修正・解説を指示できます。

Claude Codeでできること:

• コードの説明: 選択したコードをClaude Codeが日本語で解説
• バグ修正: エラーを貼り付けて「直して」と指示するだけ
• コード生成: 「〇〇のAPIを叩くコードを書いて」など自然言語で指示
• ファイル操作: @ファイル名 でファイルを参照させながら作業
• 差分確認: 変更内容をdiff形式で確認してから承認・拒否が可能

キーボードショートカット:

よくある質問

Claude Codeは無料で使えますか？

いいえ。Claude Codeの利用にはProプラン以上のサブスクリプション（月額$20〜）、またはAnthropic APIキー（従量課金）が必要です。無料プランでは利用できません。

Cursor以外のエディタでも使えますか？

はい。Claude CodeはVS Codeでも利用できます。また、ターミナル単体でも動作するため、好みのエディタと組み合わせて使うことも可能です。

プログラミング初心者でも使えますか？

はい。Claude Codeは自然な日本語で指示できるため、プログラミング経験が浅い方でも活用できます。「〇〇な機能を作って」「このエラーを直して」といった日常的な言葉で指示を出すことができます。

つまずきやすいポイント

• Node.jsのバージョンが古い: Node.js 18未満ではClaude Codeが動作しません。node -v でバージョンを確認し、古い場合は最新のLTS版に更新してください
• CursorでSparkアイコンが表示されない: ファイルが1つも開かれていない状態ではアイコンが表示されません。何かファイルを開いてから確認してください。また、Cursorのバージョンが1.98以上であることを確認してください
• Claude CLIと IDE連携(Cursor拡張機能)が失敗する: CursorやClaude CLIのバージョンによっては、連携が失敗する場合があります。その際はバージョンを最新版にして試してください

なかなかうまくいかないときは？

初めてClaude CodeやCursorを使うと「ターミナルのコマンドがうまく動かない」「拡張機能がインストールできない」などでつまずく方もいます。また、「AIコーディングツールをうまく活用できるか不安」「環境構築に時間をかけたくない」といった悩みも出てきます。

そこで、おすすめしたいのが「ジドウカ」です。

ジドウカは、これまで合計800タスク以上の業務の自動化をしてきた実績のある法人専用の自動化サービスです。

業務の一部を”タスク単位”で自動化し、【月額1万円から】安定運用できるサブスクリプション型のサービスです。
技術のことが分からなくても「こういう作業をラクにしたい」と伝えるだけで自動化することが可能です。

「自分のやりたい自動化って本当に実現できるのかな…」という方には、
少額・短期間での「お試し開発」があるので、お気軽にご活用ください。

まとめ

本記事では、Claude CodeとCursorを組み合わせたAIコーディング環境の構築方法を解説しました。

セットアップの全体の流れを振り返ります。

1. Anthropicアカウント作成とProプラン登録（$20/月）
    ↓
2. Cursorのインストール（cursor.comからDL）
    ↓
3. Node.jsのインストール（v18以上）
    ↓
4. Claude Codeのインストール（npm install -g @anthropic-ai/claude-code）
    ↓
5. Cursorの拡張機能マーケットプレイスでClaude Codeを検索 → インストール
    ↓
6. /ideコマンドでCursor連携を確認 → Sparkアイコンから開発開始

一度セットアップを完了すれば、自然言語でコード生成・修正・デバッグができる強力なAI開発環境が手に入ります。

「AIを活用したコーディングを始めたい」「開発作業を効率化したい」という方は、ぜひ本記事の手順を参考にセットアップしてみてください。