こんにちは！開発チームでリードエンジニアをやっている先輩です。
今日は、これからのフロントエンド開発のスタンダードを根底から変えてしまう「Cursor（カーソル）」というAI特化型エディタを使って、React / Next.jsのモダンなWebアプリケーションをゼロから極限まで効率よく構築する実践チュートリアルをお届けします。

「AIエディタって、ただのチャット機能がついたVS Codeでしょ？」と思っていませんか？
実は、それは大きな誤解です。Cursorの本質は、エディタ自体があなたのプロジェクトの全コードベースを理解し、「次にあなたが書くべきコードの意図を先回りして実装してくれる、まるで隣に座る優秀なペアプログラマー」である点にあります。

今回は、このCursorを武器にして、React / Next.js（App Router）のプロジェクトを立ち上げ、状態管理を含めたコンポーネント実装までを体験してもらいます。これをマスターすれば、毎日のコーディングが劇的に楽になりますよ。さあ、一緒に新しい開発体験の扉を開きましょう！

—

1. なぜ今、Cursorなのか？（開発アーキテクチャのパラダイムシフト）

従来の開発では、エディタは単なる「文字入力・ハイライトツール」でした。コードを書くときはブラウザで公式ドキュメントを検索し、エラーが出ればスタックオーバーフローを探し、ボイラープレート（お決まりのコード）をコピペして修正する……という手間がありました。

Cursorは、VS Codeの使い心地（拡張機能やキーバインド）をそのまま引き継ぎながら、内部のAIエンジン（Claude 3.5 SonnetやGPT-4oなど）がプロジェクト内の全ファイル構造を常にインデックス化しています。

• Composer機能: 複数ファイルにまたがる変更を一瞬で自動生成・適用する
• Codebase Context (@Codebase): 「このプロジェクトの規約に合わせたボタンコンポーネントを作って」という抽象的な指示を、既存のデザインシステムを理解した上で正確に出力する

この圧倒的なコンテキスト理解力こそが、私たちの開発スピードを何倍にも引き上げる理由です。

—

2. 開発環境のセットアップと最も重要な基礎設定

まずは、Cursorをインストールし、AIの性能を最大限に引き出すための基礎設定を行いましょう。

2-1. インストール

公式ホームページ（[cursor.com](https://www.cursor.com/)）からインストーラーをダウンロードし、通常のアプリケーションと同様にインストールします。
VS Codeからの移行であれば、初回起動時に「Import extensions and settings from VS Code?」と聞かれるので、そのままインポートしてください。設定や拡張機能が一瞬で引き継がれます。

2-2. 鍵となるキーボードショートカットの掌握

Cursorを使いこなす上で、以下の2つのショートカットは絶対に体に叩き込んでください。これらがあなたの両手の延長線上の武器になります。

• `Ctrl + K` （Macは `Cmd + K`）： インラインAI生成。選択したコードの修正や、指定した行へのコード挿入を行います。
• `Ctrl + I` （Macは `Cmd + I`）： Composer（コンポーザー）モード。プロジェクト全体を俯瞰し、複数ファイルを同時に作成・編集するAIエージェントを呼び出します。

—

3. ゼロからのプロジェクト構築：Next.js + Tailwind CSS

それでは、実際にNext.js（App Router）のプロジェクトを立ち上げます。
ターミナルを開き、以下のコマンドを実行してプロジェクトの雛形を作ります。

対話形式でNext.jsプロジェクトのベースを作成するコマンド
npx create-next-app@latest my-cursor-app –typescript –tailwind –app

コマンドを実行すると、いくつか質問されます。実務で推奨されるモダンな標準構成にするため、以下の設定を選択してください。

• Would you like to use ESLint? -> Yes
• Would you like to use Tailwind CSS? -> Yes
• Would you like to use `src/` directory? -> Yes
• Would you like to use App Router? (recommended) -> Yes
• Would you like to customize the default import alias? -> No

プロジェクトが作成できたら、Cursorでそのフォルダを開きます。

作成したディレクトリへ移動し、Cursorでプロジェクトを開く
cd my-cursor-app
cursor .

これで、Cursorの洗練されたワークスペースにプロジェクトが読み込まれました。画面左側のエクスプローラーをAIが裏側ですでにスキャンし始めています。

—

4. AIと共に構築する：「タスク管理アプリ」の実装

ここからが本番です。AIの力を借りて、シンプルかつモダンな「タスク管理（Todo）アプリケーション」を数分で構築してみましょう。状態管理にはReactの標準フック（`useState`）を使用し、Next.jsのクライアントコンポーネントとして実装します。

ステップ1: AIへのコンテキスト共有と要件定義

Cursorのチャット機能（`Ctrl + L` または `Cmd + L`）を開くか、直接 `Cmd + I` でComposerを起動し、以下のように自然言語で指示を出します。

> プロンプト例：
> `@Codebase このNext.jsプロジェクトに、モダンで美しいUIのTodoリストコンポーネントを追加してください。
> 要件：
> 1. Tailwind CSSを使用してスタイリングする（シャドウや角丸、スムーズなトランジションを含む）。
> 2. タスクの追加、完了/未完了の切り替え、削除ができる。
> 3. クライアントコンポーネント（’use client’）として `src/components/TodoList.tsx` に新規作成する。
> 4. `src/app/page.php`（または `page.tsx`）から呼び出して、トップページに表示する。`

ステップ2: AIによるコード自動生成と適用

Composer（`Cmd + I`）を使うと、AIが自ら `src/components/TodoList.tsx` を作成し、さらに `src/app/page.tsx` を書き換える提案をしてくれます。

生成されるコードのイメージは以下のようになります。各行の意味をコードコメントとして解説します。

// src/components/TodoList.tsx
‘use client’; // ブラウザ側で動作するクライアントコンポーネントであることを宣言

import { useState } from ‘react’;

// タスクのデータ構造を定義するTypeScriptの型
type Task = {
id: number;
text: string;
completed: boolean;
};

export default function TodoList() {
// タスクの一覧を管理するステート
const [tasks, setTasks] = useState([]);
// 入力フォームのテキストを管理するステート
const [input, setInput] = useState(”);

// 新しいタスクを追加する関数
const addTask = (e: React.FormEvent) => {
e.preventDefault();
if (!input.trim()) return; // 空文字の場合は何もしない

const newTask: Task = {
id: Date.now(), // 現在時刻をユニークなIDとして使用
text: input,
completed: false,
};

setTasks([…tasks, newTask]); // 既存の配列に新しいタスクを追加
setInput(”); // 入力欄をリセット
};

// タスクの完了状態を反転させる関数
const toggleTask = (id: number) => {
setTasks(
tasks.map((task) =>
task.id === id ? { …task, completed: !task.completed } : task
)
);
};

// タスクを削除する関数
const deleteTask = (id: number) => {
setTasks(tasks.filter((task) => task.id !== id));
};

return (

);
}

AIが作成したコードを確認し、問題なければ「Accept（適用）」ボタンを押すだけで、ファイルが自動作成・更新されます。人間が手動でファイルを作成してコードをコピペする手間が、完全に消え去る瞬間です。

ステップ3: 動作確認

それでは、開発サーバーを立ち上げて実際に動かしてみましょう。
Cursorの統合ターミナル（`Ctrl + \“ または `Cmd + \“）で以下のコマンドを実行します。

Next.jsの開発サーバーを起動する
npm run dev

ブラウザで `http://localhost:3000` にアクセスしてください。
美しく洗練されたTailwind CSSのスタイリングが適用されたTodoアプリが立ち上がります。文字を入力して「追加」を押し、チェックボックスを動かしてみてください。完璧に動作することが確認できます。

—

5. エラーが出たときこそ、Cursorの真骨頂

もし仮に、コードの記述ミスや型エラーが発生したとしても、慌てる必要はありません。
Cursorの統合ターミナルでエラーログが出た際、そのエラーメッセージを選択して `Ctrl + K`（インラインAI）を押し、「このエラーを修正して」と指示するだけで、AIが原因を特定し、瞬時に修正パッチを当ててくれます。

従来の開発であれば「エラー文をコピーしてGoogle検索し、QiitaやStack Overflowの類似記事を探す」という数分〜数十分のプロセスが必要でしたが、Cursorを使えば数秒で解決します。これが、開発者の認知負荷を劇的に下げ、クリエイティブな思考に集中させてくれる最大の理由です。

—

おわりに：明日の開発から取り入れたい知見

今回は、Cursorを使ってReact / Next.jsのプロジェクトをゼロから立ち上げ、AIと共にコンポーネントを実装するプロセスを解説しました。

• 全コードベースを理解したAI（@Codebase）に全体設計や複数ファイルの編集を任せる（Composer）
• 定型的なボイラープレートやUIコンポーネントの記述は自然言語で指示して一瞬で生成させる
• エラー発生時はエディタ内で即座に文脈を踏まえた修正を行う

このワークフローに慣れてしまうと、もう普通のエディタには戻れなくなります。
「これをマスターすれば、毎日のコーディングが劇的に楽になりますよ」。ぜひ明日の開発から、あなたのプロジェクトにCursorを取り入れてみてください。圧倒的な生産性の向上に、きっと驚くはずです！