C
バイブコーディング 一覧
前へ4 / 9次へ
バイブコーディング/入門/Lesson 04

バイブコーディング環境セットアップ — *ゼロから最初のコードまで*

30分·theory
このチャプター
2/3

バイブコーディング環境セットアップ — *ゼロから最初のコードまで*

🎯 このlessonを読み終えたら

このlessonをすべて読み終えると、以下の3つを自信を持って実行できるようになります。

  • ▸✅ Cursorインストール → 最初のプロンプト → 検証まで1時間以内
  • ▸✅ .cursorrules / CLAUDE.md の標準テンプレート作成
  • ▸✅ 主要ショートカット + インライン編集 (Cmd+K) の活用

学習目標をチェックリストとして手元に置き、すべて答えられるようになったらlessonを閉じてください。

1. Cursorインストール + 無料プラン

ダウンロード

cursor.com → OSに合わせてダウンロード:

  • ▸macOS: .dmg ファイル
  • ▸Windows: .exe インストーラー
  • ▸Linux: .AppImage または .deb

インストール後、初回起動時に無料登録:
1. GitHubまたはGoogleでサインイン
2. 14日間Proトライアルが自動で有効化（終了後は自動的に無料プランへ移行）
3. VS Code設定インポートのオプション — 既存のVS CodeユーザーはOKをクリック

無料プランの制限

  • ▸Tabオートコンプリート: 無制限 ✅
  • ▸Cmd+K インライン編集: 月50回
  • ▸Composer マルチファイル編集: 月50回
  • ▸Chat: 月50回（低速モデル）、高速モデルはさらに50回

トライアル14日間はPro無制限で利用可能 — 自分のペースで学習できます。

初期設定 — Settings

Cmd+,（Mac）またはCtrl+,（Windows）で設定を開く:

Cursor Settings

  • ▸Models → デフォルトモデルは claude-sonnet-4-6 推奨（Pro利用時）
  • ▸Privacy Mode → 学習用は OFF、会社のコードは ON（データ送信を無効化）
  • ▸Privacy Mode off → より正確な回答が得られる

エディター環境

  • ▸テーマ: Dark+ または Tokyo Night Storm（目に優しい）
  • ▸フォント: JetBrains Mono または Fira Code（リガチャ対応）
  • ▸フォントサイズ: 14〜15
  • ▸タブサイズ: 2

まとめ

  • ▸cursor.com からダウンロード → GitHubでサインイン → 14日間Proトライアル
  • ▸無料プランでもTabオートコンプリートは無制限
  • ▸学習用途ならPrivacy Mode はOFF

2. 最初のNext.jsプロジェクトを作成する

ターミナルを開く

Cursor内で ` Ctrl+ `（バッククォート）を押すか、メニューの Terminal > New Terminal を選択します。

Next.jsプロジェクトの作成

bash
npx create-next-app@latest myapp

質問に答えます:

code
✔ TypeScript?           → Yes
✔ ESLint?               → Yes
✔ Tailwind CSS?         → Yes
✔ src/ directory?       → Yes
✔ App Router?           → Yes
✔ Turbopack?            → Yes (高速)
✔ Import alias?         → No (デフォルトの @/ を使用)

フォルダを開く

bash
cd myapp
cursor .

新しいCursorウィンドウにプロジェクトが開きます。

起動

bash
npm run dev

→ http://localhost:3000 にアクセス。デフォルトページが表示されれば成功です。

フォルダ構造の最小限の理解

code
myapp/
├── src/
│   ├── app/
│   │   ├── page.tsx        # ホームページ (/)
│   │   ├── layout.tsx      # 全体レイアウト
│   │   └── globals.css
│   └── components/         # （なければ作成してコンポーネントを追加）
├── public/                  # 画像・アイコン
├── package.json
└── tsconfig.json

page.tsx がURLのエントリーポイントです。app/about/page.tsx を作成すると /about ページが自動生成されます。

まとめ

  • ▸npx create-next-app@latest myapp の1コマンドで完了
  • ▸推奨オプション: TypeScript + Tailwind + App Router + Turbopack
  • ▸npm run dev` → localhost:3000

3. `.cursorrules` 基本テンプレート

なぜ最初から必要なのか

最初のプロンプトからAIにプロジェクトの規約を理解させます。毎回説明する必要がなくなります。

プロジェクトルートにファイルを作成

Cursorで myapp/ フォルダを右クリック → New File → .cursorrules

コピペ用テンプレート（Next.js 14+対応）

markdown
# プロジェクト: myapp

## スタック
- Next.js 15 (App Router, TypeScript strict)
- Tailwind CSS
- React 19

## コーディング規則
- コンポーネント: function 宣言 (arrow X)
- export: named (default は page.tsx·layout.tsx のみ)
- 日本語コメント OK
- any 禁止
- var 禁止

## フォルダー慣習
- src/app/         ページ·API
- src/components/  再利用コンポーネント
- src/lib/         ユーティリティ関数
- src/types/       型定義

## 応答スタイル
- コード変更時 *変更された部分のみ* 表示して
- 説明は *簡潔に*
- 日本語で応答

効果 — 比較

❌ .cursorrules がない場合:
> 私: 「ボタンコンポーネントを作って」
> AI: 「スタックは何ですか? Tailwind? Material UI? TypeScript? ...」
> 4〜5回の質問

✅ .cursorrules がある場合:
> 私: 「ボタンコンポーネントを作って」
> AI: （Next.js + TypeScript + Tailwindでnamed export・function宣言のコードを正確に生成）
> 質問0回

まとめ

  • ▸.cursorrules 1ファイルがすべての会話のコンテキストになる
  • ▸トークンを5〜10倍節約し、精度も向上
  • ▸一度書いたら → ずっと使える

4. 最初のプロンプト — Hello Worldを超えて

単純な「ボタンを作って」の代わりに、実践的な最初の課題

Cmd+L（Mac）または Ctrl+L（Windows）でCursor Chatを開きます。

最初のプロンプト例

code
src/app/page.tsx を以下の内容に置き換えてください:
- ページタイトル 「こんにちは、バイブコーディング!」
- カウンターコンポーネント（useStateを使用）
- クリックするたびに+1 / 0にリセットするボタン
- Tailwindでダークモードスタイリング
- コンポーネントはsrc/components/Counter.tsxに分離

コードのみ表示してください。説明は不要。

→ Cursorが自動的に2つのファイルを生成:

  • ▸src/app/page.tsx
  • ▸src/components/Counter.tsx

各ファイルのチェックマークをクリック → 自動保存されます。

結果を確認

ブラウザをリロード → カウンターの動作を確認します。

  • ▸ボタンをクリック → 数字が増える? ✅
  • ▸リセット → 0になる? ✅
  • ▸ダークモードの色? ✅

2回目のプロンプト — 改善

code
@Counter.tsx に *最大10までしかカウントしない*制限を追加してください。10に達したらボタンを無効化し、「最大値に達しました」というメッセージを表示してください。

既存のデザインは維持してください。ロジックのみ追加。

→ AIは変更された部分のみを表示して適用します。意図が明確なので不要な変更は0件。

まとめ

  • ▸最初のプロンプトは具体的 + 分離を明示する
  • ▸@ファイル名 で特定のファイルを参照
  • ▸「コードのみ / 説明不要」でトークンを節約

5. 結果の*検証* — 最も重要なステップ

AIが生成したコードも自分の責任

面接官は必ず聞きます:「どのように検証しましたか?」。この3つの検証習慣を身につけましょう。

1. 常にコンソールを開く

ブラウザで F12（または右クリック → 検証）→ Consoleタブを開きます。

確認すること:

  • ▸赤いエラー — 必ず解決する
  • ▸黄色い警告 — できれば解決する
  • ▸React Hookの違反・keyの欠落など

❌ 「見た目は問題ないけどコンソールにエラーがある」 → 面接に落ちます。

2. TypeScriptエラーの確認

bash
# ターミナルで
npx tsc --noEmit

→ すべての型エラーを一覧表示します。0件であるべきです。

またはVS CodeのProblemsタブ（Cursorでも同様）: Ctrl+Shift+M

3. 実際の動作確認 — エッジケース3つ

作成したカウンターを例に:

✅ 正常フロー: +1を9回クリック → 9 → もう1回 → 10 → ボタンが無効化される ✅

❓ エッジケース1: ページをリロードしたとき0に戻る? (stateがクリアされる)
→ AIに「localStorageでカウントを保持するように」とリクエスト可能

❓ エッジケース2: モバイルでも正しく表示される? Chrome DevToolsの Device Toolbar で確認

❓ エッジケース3: ダークモードなし / ライトモードのユーザーにも正しく見える?

チェックリスト — 毎回

各作業後:

  • ▸[ ] コンソールエラー0件
  • ▸[ ] TypeScriptエラー0件
  • ▸[ ] 意図した動作が機能している
  • ▸[ ] エッジケースを1つ以上確認
  • ▸[ ] モバイル画面を確認

この5つの習慣が動くコードと壊れたコードを分けます。

git commit — 動作確認後すぐに

bash
git add -A
git commit -m "feat(counter): max 10 limit + disable state"

小さい単位で頻繁にコミットしましょう。後で壊しても直前の状態にロールバックできます。

まとめ

  • ▸コンソール・TSエラー・動作確認 = 基本
  • ▸エッジケースを1つでもカバーする = 中級
  • ▸毎作業後にgit commit = 上級

🤖 AIにこう質問してみよう

このlessonのコンセプトを理解すれば、AIに具体的な指示を出すことができます。漠然とした「直して」ではなく、語彙を持ったリクエスト — それがトークン節約の出発点です。

  • ▸「Cursorインストール + 最初のプロンプト + CLAUDE.md セットアップを1時間以内で終わらせる手順を教えて」
  • ▸「この.cursorrulesが私たちのコードスタイルを正確に表現しているか確認して」

なぜこれがトークンを減らすのか

コンセプトを知らないと、AIの回答を受け取っても「それは何ですか?」とまた聞き直す必要があります。その「聞き直し」がトークンを消費します。コンセプトを一度覚えれば、会話が一回で完結します。

先に読むとよい概念: バイブコーディング基礎 — プロンプト・ペアリング・コンテキスト・トークン
次のおすすめ: プロンプト実践 — トークン節約パターン20選
前へ一覧次へ
Vibe コーディング環境設定 — ゼロから最初のコードまで - バイブコーディング