Claude Code + Cursor でAI開発環境を構築

はじめに

AIを活用した開発環境として注目されてる Claude Code と Cursor を組み合わせた環境を構築してみた。
セットアップ〜実際にECサイトのモックを作成するまでの流れをまとめてみる。

試しに某ECサイトを参考にしたモックページを作成してみたところ、約3分で完成、すごい、、

環境

• macOS

1. Claude Code のインストール

Claude Code とは？

ターミナルで動くAIコーディングアシスタント。
一度の指示で自立的に動作し、開発やレビュー、修正などもしてくれるらしい。(レビュー、修正も試していきたい)

インストール手順

① npm でグローバルインストール

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

② インストール確認

claude --version

③ 初回起動・認証

claude

初回起動時にブラウザが開き、Anthropic のアカウント認証が求められるので、claude.ai でサインアップする。

注意:Claude Code の利用には Anthropic のサブスクリプション（Claude Pro / Max プラン）または API キーが必要。

(④ APIキーで認証する場合　※こちらはやったことない)

export ANTHROPIC_API_KEY=your_api_key_here
claude

2. Cursor のインストール

Cursor とは？

VS Code をベースにしたAI特化型のコードエディタ。コードの補完・生成・リファクタリングをAIが支援。
（なんとなくClaude Codeで大規模開発／大量ファイル調査、編集。Cursorでコード補完って使い分けになるのかな？、、）

インストール手順

① 公式サイトからダウンロード

https://www.cursor.com にアクセスし、「Download」ボタンからインストーラをダウンロード。

② インストール

ダウンロードした

.dmg

.exe

3. Claude Code + Cursor の連携

Cursor でプロジェクトフォルダを開き、Cursor 内蔵のターミナル（

Ctrl + ``）から

プロジェクトフォルダ
├── index.html       ← Claude Code が生成
├── style.css        ← Claude Code が生成
└── script.js        ← Claude Code が生成

4. 実際にECサイトのモックを作成してみた

指示内容

作業ディレクトリを作成し、Claude Code を起動して以下のように指示しました。

mkdir ec-mock && cd ec-mock
claude

Claude Code への指示は以下のみ笑

amazonのショッピングサイトのようなhtmlを作成してください

生成されたファイル

Claude Code が自動的に以下のファイルを生成しました：

• index.html

• 所要時間：約3分

5. 作成されたモック画面

📌

デモページ（某ECサイトを参考に生成したもの）

https://fongooooo.github.io/ShopPageSample/

まとめ

まだMocを作ってみた程度だけど、確かにそれなりのものが3分でできた。
もう少し色々使っていって、ClaudeCodeの凄さを実感していこうと思ふ、そんな日々である。。