【環境構築】10年のブランクを埋める「最強の相棒」Cursorの初期設定とAI調教
昔の常識 vs 今の常識
10年前、開発を始めるときは大変でした。
EclipseやVisual Studioの重たいインストーラーを待ち、パスを通し、プラグインの競合と戦う……。「Hello World」を出すまでに半日潰れることもザラでした。
しかし、今回の復帰戦で選んだエディタ 「Cursor」 は違いました。
インストールから「AIメンターチーム」の結成まで、驚くほどスムーズだったので、その手順を共有します。
※基本的に全てAIメンターチーム任せで、仰せのままに実行していきます。
1. Cursorのインストール
これは説明不要なくらい簡単です。
公式サイト（cursor.com）からダウンロードしてインストールするだけ。
VS Codeをベースに作られているため、VS Codeユーザーなら設定を引き継ぐことも可能です。
私には引き継ぐべき設定（技術資産）がありません！
2. 必須拡張機能の「一括」インストール
ブランクがある身として、以下のツールは「命綱」です。
- ESLint: 構文チェック。
- Prettier: コードの自動整形（インデント調整の時間を撲滅）。
- Tailwind CSS IntelliSense: CSSクラスの補完。
- Pretty TypeScript Errors: 暗号のようなTypeScriptのエラーを人間が読める言葉に翻訳してくれる神ツール。
これらをポチポチ探してインストールしても良いのですが、エンジニアらしく（？）ターミナルから一発で入れました。
① Cursorのターミナルを開く
② cursorのinstallコマンドを実行
③ 無地インストール完了！
# Cursorのターミナル(Ctrl+J)で実行
cursor --install-extension dbaeumer.vscode-eslint && \
cursor --install-extension esbenp.prettier-vscode && \
cursor --install-extension bradlc.vscode-tailwindcss && \
cursor --install-extension yoavbls.pretty-ts-errors
これだけで、最低限にして最強の守備力が整います。
- AIに「役割」を与える（.cursorrules）
ここが今回のハイライトです。 Cursorには、プロジェクトのルートに .cursorrules というファイルを置くことで、AIの振る舞いをカスタマイズできる機能があります。
AIは指示が曖昧だと「無難なコード」しか書いてくれません。 そこで、私のバックグラウンド（10年のブランク、SaaSセールス）を理解させ、私専用のメンターチームになってもらうための「憲法」を定義しました。
① 右上の歯車アイコンを押す
② Rules and Commandsを押す
③ +Add Ruleを押す
④ ルールを入力して保存する
実際に設定した .cursorrules
# Project Role & Persona
あなたは、元エンジニア（ブランク10年）のSaaSセールスマンを「AI時代のフルスタックエンジニア」へと育成するメンターチームです。
ユーザーはビジネスロジックやDB構造の理解はありますが、モダンな構文やツールチェーンには不慣れです。
**チーム構成:**
1. **ケンジ (コーチ):** 挫折させない進行役。難しい理論より「まず動く」を優先。
2. **レオ (技術):** Next.js, Supabase, Cursorのベストプラクティスを提示。
3. **サトシ (解説):** 10年前の技術（C#, RDB）と比較して概念を翻訳・解説。
4. **エリカ (PdM):** 「ユーザー価値」「使いやすさ」の視点で仕様を指摘。
**基本行動指針:**
- 常に【日本語】で回答してください。
- コードを提示する際は、ユーザーがそのままコピペ、またはCursorの「Apply」機能で適用できる完全な形（省略なし）で記述してください。
- 専門用語を使う際は、必要に応じてサトシの視点で補足を入れてください。
# Tech Stack
- **Frontend:** Next.js 14+ (App Router), TypeScript, Tailwind CSS
- **Backend/DB:** Supabase
- **AI Integration:** OpenAI API
# Coding Guidelines
- **Strict Typing:** `any` は原則禁止。必ず型定義を行う。
- **Error Handling:** 非同期処理は必ず `try-catch` で囲む。
- **Doc:** 複雑な関数にはJSDocコメントを記述すること。
これを入れる理由（私の期待）
通常: 「コードを書きました。（ポロッとコードが出るだけ）」
これが、
設定: 「レオです。 モダンな書き方はこうです。サトシです。 昔のjQueryでいうと〇〇と同じ概念ですよ」
と、文脈を踏まえた回答をしてくれることを期待している。まさに「自分専用の家庭教師」がついた感覚になれば成功。
次回予告
環境は整いました。 次回はいよいよ npx create-next-app を実行し、プロジェクトの土台を作っていきます。
Discussion