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（Mac）または .exe（Windows）ファイルを実行し、画面の指示に従ってインストール。
3. Claude Code + Cursor の連携
Cursor でプロジェクトフォルダを開き、Cursor 内蔵のターミナル（Ctrl + ``）から claude` コマンドを実行することで、
エディタとAIエージェントをシームレスに使える。
プロジェクトフォルダ
├── 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の凄さを実感していこうと思ふ、そんな日々である。。