Zenn
🚀

【3分でできる】Claude CodeをCursorで使う方法【簡単】

に公開
AI
開発環境
Cursor
Claude
Claude Code
tech

はじめに

この記事の内容は、以下の動画でも解説しています。動画の方が分かりやすいという方はぜひ見てみてください。

https://www.youtube.com/watch?v=Rt1ldqBeqkY

じゃあ本題いきますね。
Claude Codeがターミナルで動くものだからって敬遠していた人、集まれー！！

めちゃめちゃ簡単に今までのCursorのように右側にチャットが開いてそこでやり取りできるような連携が可能になんです。

設定手順

1. Claude Code のインストール

まず、普段作業しているリポジトリをCursorで開きます。

ブラウザで「Claude Code」と検索し、公式ドキュメントにアクセスします。一番上に表示されるClaude Codeの公式ドキュメントをクリックします。

インストールセクションに記載されているnpmコマンドをコピーします：

https://docs.anthropic.com/ja/docs/claude-code/overview

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

Cursorで Command + J でターミナルを開き、コピーしたコマンドを実行します。

2. Claude Code の起動

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

claude

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

3. 初期設定

起動後、以下の設定を行います：

テーマ選択

好みのテーマを選択します。後から /theme コマンドで変更可能です。

ログイン方法の選択

「Select login method」で課金方法を選択します：

  • 定額使い放題プラン（20ドルまたは100ドル）
  • API使用（高額になる可能性あり）

迷った場合は 定額使い放題プラン（20ドルのProプラン） を選択することをおすすめします。

セキュリティ確認

セキュリティに関する注意事項が表示されるので、内容を確認して進めます。

4. エディタとの連携確認

設定完了後、/ide コマンドを実行してCursorとの連携を確認します。画像のように表示されれば連携成功です。

image

Cursor上でのClaude Code 利用方法

基本的な使い方

  1. サイドパネルでの利用
    • Cursor上で何かファイルを開くと（何でもいいです）、自動的にClaudeのアイコンのウニマークが表示されます（ウニに似てるからウニマークって呼んでます。他の誰かもそう呼んでました）
    • ウニマークをクリックすると、右側にClaude Codeが開きます
      image
  2. コンテキスト認識
    • 現在開いているファイルの内容を自動的に認識します
    • 選択したコード範囲も認識してくれます

実際の編集作業

  1. テキスト選択

    • 変更したい部分を選択すると「3 lines selected」のように表示されます
    • Claude Codeが選択範囲を正確に認識します

  2. 編集指示

    • 「ここの文言を変更してほしい」のような自然な指示が可能
    • Claude Codeが自動的に該当箇所を特定します

  3. 変更の確認

    • 編集後、以下の選択肢が表示されます：
      • Yes：変更を適用
      • Yes + 今後このセッションでは自動適用
      • No：変更を適用しない
    • 差分表示で変更内容を確認できます

メリット

  • 直感的な操作: エディター上でコードを見ながら指示が可能
  • コンテキスト認識: 現在の作業内容を自動的に理解
  • 安全な編集: 差分表示で変更内容を確認

まとめ

Claude CodeとCursorの連携は非常に簡単で、設定も3分程度で完了します。ターミナルでの操作に抵抗がある方でも、Cursor上でで快適に使用できます。

Claude Codeを敬遠していた方は、ぜひ一度試してみてください。

Discussion