Vite×AIエディタでモダンWebアプリを本格的に開発できるようになる

Vite + React + TypeScript のプロジェクトをゼロから作成します。npm create vite@latest コマンド1つでプロジェクトの骨格が生成されます。

▲ Viteプロジェクト作成の対話式セットアップ

【Windows版】手順

1. Cursor を起動してターミナルを開く（Ctrl + `）
2. 作業フォルダに移動する（例: ドキュメントフォルダ）

PS> cd /c/Users/[ユーザー名]/Documents
PS> npm create vite@latest my-vite-app

対話式の設定で以下を選択します（↑↓キーで移動、Enterで決定）:

• Select a framework: React
• Select a variant: TypeScript

【Mac版】手順

操作は Windows と同一です。Cursor のターミナルまたはターミナルアプリで同じコマンドを実行します。

作成されたプロジェクトのフォルダ構成を確認しましょう。最初に触るのは src/App.tsx と src/App.css だけです。

▲ Viteプロジェクトのフォルダ構成（Cursorのエクスプローラービュー）

my-vite-app/
├── public/             ← 画像・フォントなど静的ファイル
├── src/                ← ここがメインの作業場所
│   ├── assets/         ← 画像などのリソース
│   ├── App.tsx         ← メインコンポーネント（最初に修正する場所）
│   ├── App.css         ← App コンポーネントのスタイル
│   ├── main.tsx        ← アプリのエントリーポイント（基本触らない）
│   └── index.css       ← グローバルなスタイル
├── index.html          ← ベースのHTMLファイル（基本触らない）
├── package.json        ← 依存パッケージの一覧
├── tsconfig.json       ← TypeScript の設定
└── vite.config.ts      ← Vite の設定

依存パッケージをインストールして、開発サーバーを起動します。

▲ npm install と npm run dev でローカル開発サーバーを起動

# プロジェクトフォルダに移動
cd my-vite-app

# 依存パッケージをインストール（node_modules が作成される）
npm install

# 開発サーバーを起動
npm run dev

ブラウザで http://localhost:5173 を開き、Vite + React のデモページが表示されれば成功です。

AIエディタに「このプロジェクトは何か」を事前に伝えておくと、より的確な提案をしてくれます。プロジェクトのルートフォルダに CLAUDE.md（Cursor用）を作成します。

# プロジェクト概要

Vite + React + TypeScript で作成したWebアプリです。

## 技術スタック

- Vite（ビルドツール）
- React（UIライブラリ）
- TypeScript（型安全な JavaScript）

## ディレクトリ構成

- src/App.tsx: メインコンポーネント
- src/components/: 個別コンポーネント
- src/services/: API 通信ロジック
- src/styles/: スタイルファイル

## 開発サーバー

npm run dev で http://localhost:5173 で起動

## ビルド

npm run build で dist/ に出力

## ルール

- TypeScript の型エラーを残さない
- コンポーネントは src/components/ フォルダに作成する
- API 通信は src/services/ フォルダに切り出す
- .env ファイルの内容を直接コードに書かない

大まかなコンポーネントの骨格を Google AI Studio で生成し、Cursor で細かく修正する流れが効率的です。

▲ Google AI Studio で React コンポーネントを生成

React + TypeScript で以下の仕様のコンポーネントを作ってください。

【仕様】
- コンポーネント名: ChatUI
- 機能: テキストを入力して送信ボタンを押すとメッセージ一覧に追加される
- ユーザーのメッセージは右側に、AIの返答は左側に表示する（AIの返答は今はモック文字列でOK）
- TypeScript の型定義を含める（interface Message など）
- スタイルはインラインスタイルまたは CSS モジュールを使う

【出力形式】
- ChatUI.tsx のコード全体
- App.tsx に組み込む方法
- 必要な場合は ChatUI.css のコードも

生成されたコードをコピーして、Cursor で src/components/ChatUI.tsx として保存します。

Cursor のチャット（Ctrl+L / Cmd+L）を開き、Agent モードで修正を依頼します。@ファイル名 でファイルを参照させると精度が上がります。

▲ Cursor の Agent モードで @ファイル指定修正

@src/components/ChatUI.tsx のデザインを修正してください。

- チャット入力欄を画面下部に固定する
- メッセージバブルに角丸（border-radius: 12px）を追加する
- ユーザーのメッセージ背景色を #1565c0、文字色を白にする
- AIのメッセージ背景色を #f5f5f5、文字色を #333 にする

@src/components/ChatUI.tsx に以下の機能を追加してください。

- Enter キーでメッセージ送信できるようにする（Shift+Enter は改行）
- 送信後に入力欄を空にする
- メッセージが追加されたら自動で一番下にスクロールする

複数のコンポーネントファイルを一括して整理したい場合は Antigravity が便利です。

以下の修正を行ってください。

[App.tsx] ChatUI コンポーネントをインポートして表示するよう修正する
[ChatUI.tsx] Props の型定義を外部ファイルに切り出す
[types.ts] Message と ChatProps の型定義ファイルを src/ 直下に新規作成する

React のコンポーネント修正でスクショを使う場合、「React の構造は変えないで」という一言を付けると、AI が機能を壊さずにデザインだけ修正してくれます。

スクショ指示の手順:

1. 【Windows】 ブラウザで開発サーバーのページを開く（http://localhost:5173）
2. Win + Shift + S でスクショを撮る
3. Cursor のチャット欄に Ctrl+V で貼り付ける
4. 以下のように指示する

スクショ指示の手順（Mac）:

1. 【Mac】 ブラウザで開発サーバーのページを開く（http://localhost:5173）
2. Cmd + Shift + 4 でスクショを撮る
3. Cursor のチャット欄に Cmd+V で貼り付ける
4. 以下のように指示する

このスクショを見てください。@src/components/ChatUI.tsx を修正して、
スクショの通りにデザインを修正してください。

修正内容：
- 入力欄が切れているので全幅に修正
- 送信ボタンがテキストと重なっているので右端に配置

※ React のコンポーネント構造（useState の使い方など）は変えないでください。

Vite では、ブラウザで読み込まれる環境変数には必ず VITE_ プレフィックスが必要です。プロジェクトのルートフォルダ（package.json と同じ階層）に .env を作成します。

▲ .env ファイルの作成と VITE_ プレフィックスの設定

VITE_GEMINI_API_KEY=AIzaSy...（ここに取得したAPIキーを貼り付ける）

const apiKey = import.meta.env.VITE_GEMINI_API_KEY;

Vite プロジェクトには最初から .gitignore が含まれています。.env が含まれているか確認しましょう。

Cursor のエディタで .gitignore を開き、以下の行があるか確認してください。ない場合は末尾に追記します。

# 依存パッケージ（npm install で再生成できる）
node_modules/

# 環境変数（APIキーなど）
.env
.env.local
.env.*.local
.env.production

# ビルド成果物（git で管理する必要なし）
dist/

# エディタの設定ファイル（任意）
.vscode/

API 通信をコンポーネントから切り出し、src/services/geminiService.ts として管理します。これがベストプラクティスです。

// src/services/geminiService.ts

const API_KEY = import.meta.env.VITE_GEMINI_API_KEY;
const API_URL = `https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=${API_KEY}`;

export interface GeminiResponse {
  text: string;
  error?: string;
}

export async function sendMessage(userMessage: string): Promise<GeminiResponse> {
  try {
    const response = await fetch(API_URL, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        contents: [{ parts: [{ text: userMessage }] }],
      }),
    });

    if (!response.ok) {
      throw new Error(`API Error: ${response.status}`);
    }

    const data = await response.json();
    const text = data.candidates?.[0]?.content?.parts?.[0]?.text ?? '返答を取得できませんでした';

    return { text };
  } catch (error) {
    const errorMessage = error instanceof Error ? error.message : '不明なエラー';
    return { text: '', error: errorMessage };
  }
}

// ChatUI.tsx に追加する import
import { sendMessage } from '../services/geminiService';

// メッセージ送信時の処理例
const handleSend = async () => {
  if (!inputText.trim()) return;

  const userMessage = { role: 'user' as const, text: inputText };
  setMessages(prev => [...prev, userMessage]);
  setInputText('');
  setIsLoading(true);

  // Gemini API 呼び出し
  const response = await sendMessage(inputText);

  if (response.error) {
    setMessages(prev => [...prev, { role: 'ai', text: `エラー: ${response.error}` }]);
  } else {
    setMessages(prev => [...prev, { role: 'ai', text: response.text }]);
  }

  setIsLoading(false);
};

開発が完了したら、本番用の最適化ファイルを生成します。

▲ npm run build で本番用ファイルを dist フォルダに生成

# 開発サーバーを停止してから実行
npm run build

完了すると dist フォルダが生成されます。

my-vite-app/
├── dist/                 ← ここが生成された本番ファイル
│   ├── assets/
│   │   ├── index-xxxx.js    ← 圧縮・最適化された JavaScript
│   │   └── index-xxxx.css   ← 圧縮された CSS
│   └── index.html
├── src/                  ← ソースコード（開発用）
└── ...

本番ビルドをローカルでテストできます。開発サーバー（5173ポート）ではなく、本番に近い環境（4173ポート）で動作確認します。

npm run preview

▲ npm run preview で本番ビルドを 4173 ポートで確認

ブラウザで http://localhost:4173 を開いて、開発サーバー（5173）と同じように動作するか確認します。

本番ビルドが確認できたら、コードを GitHub に push します。詳細は講座05で扱いますが、事前に .gitignore の確認だけ行います。

以下のいずれかを選んで、開発サーバー（localhost:5173）で動作するアプリを作成してください。

React + TypeScript でシンプルなAIチャットUIを作ってください。

【仕様】
- ユーザーがテキストを入力してEnterキーまたはボタンで送信できる
- ユーザーのメッセージは右側の青いバブルで表示
- AIのメッセージは左側のグレーのバブルで表示
- 送信中はローディングインジケーター（「考え中...」テキスト）を表示
- レスポンシブデザイン（スマホでも見やすい）

【ファイル構成】
- src/App.tsx: レイアウト
- src/components/ChatUI.tsx: チャットのUIコンポーネント
- src/services/geminiService.ts: Gemini API 通信（上記のサービスファイルを使用）
- src/App.css: スタイル

TypeScript の型定義も含めてください。

React + TypeScript でニュース・情報表示アプリを作ってください。

【仕様】
- 検索欄に「東京の天気」「今日のAIニュース」などを入力して送信
- Gemini API に送信して、返ってきたテキストをカード形式で表示
- カードは画像なし・テキストのみでシンプルに
- 検索履歴を5件まで保持して、クリックで再検索できる
- レスポンシブデザイン

【ファイル構成】
- src/App.tsx: メインレイアウト
- src/components/SearchBar.tsx: 検索フォーム
- src/components/ResultCard.tsx: 結果表示カード
- src/components/SearchHistory.tsx: 検索履歴
- src/services/geminiService.ts: Gemini API 通信