Viteで始める高速Web開発 | 第3章: ViteでReactを活用

## はじめに
第2章でViteの構造と仕組みを学びました。今回は、Viteを使ってReactアプリケーションを本格的に構築します。ToDoリストを作りながら、Reactの基本とViteの利点を体験します。

## 目標
- ViteでReactプロジェクトをセットアップする  
- Reactコンポーネントと状態管理を実装する  
- CSSを簡単に追加する  

## Reactプロジェクトのセットアップ
第1章で作成したプロジェクトを使います。まだReactを選んでいない場合、以下で新規作成：
```bash
npm create vite@latest my-vite-react -- --template react
cd my-vite-react
npm install
npm run dev
```

## ToDoリストの構築
### 1. コンポーネントの作成
`src/App.jsx`を以下に更新：
```jsx
import { useState } from 'react';
import './App.css';

function App() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

  const addTodo = (e) => {
    e.preventDefault();
    if (input) {
      setTodos([...todos, { id: Date.now(), text: input }]);
      setInput('');
    }
  };

  return (
    <div className="App">
      <header>
        <h1>ToDoリスト</h1>
      </header>
      <main>
        <form onSubmit={addTodo}>
          <input
            type="text"
            value={input}
            onChange={(e) => setInput(e.target.value)}
            placeholder="タスクを入力"
          />
          <button type="submit">追加</button>
        </form>
        <ul>
          {todos.map((todo) => (
            <li key={todo.id}>{todo.text}</li>
          ))}
        </ul>
      </main>
    </div>
  );
}

export default App;
```

### 2. CSSの追加
`src/App.css`を更新：
```css
.App {
  text-align: center;
  font-family: Arial, sans-serif;
  max-width: 600px;
  margin: 0 auto;
}

header {
  background-color: #282c34;
  padding: 20px;
  color: white;
}

main {
  padding: 20px;
}

form {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

input {
  flex: 1;
  padding: 5px;
}

button {
  padding: 5px 10px;
  background-color: #61dafb;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #21a1f1;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
```

## JSXと状態管理
- **`useState`**: `todos`でタスクリスト、`input`で入力値を管理。
- **イベント処理**: `addTodo`で新しいタスクを追加。
- **動的リスト**: `map`でタスクをレンダリング。

## TypeScriptの利用（オプション）
TypeScriptを使いたい場合、プロジェクト作成時に`--template react-ts`を選択。`App.jsx`を`App.tsx`に変更し、型を追加：
```tsx
import { useState } from 'react';
import './App.css';

interface Todo {
  id: number;
  text: string;
}

function App() {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [input, setInput] = useState<string>('');

  const addTodo = (e: React.FormEvent) => {
    e.preventDefault();
    if (input) {
      setTodos([...todos, { id: Date.now(), text: input }]);
      setInput('');
    }
  };

  return (
    <div className="App">
      <header>
        <h1>ToDoリスト</h1>
      </header>
      <main>
        <form onSubmit={addTodo}>
          <input
            type="text"
            value={input}
            onChange={(e) => setInput(e.target.value)}
            placeholder="タスクを入力"
          />
          <button type="submit">追加</button>
        </form>
        <ul>
          {todos.map((todo) => (
            <li key={todo.id}>{todo.text}</li>
          ))}
        </ul>
      </main>
    </div>
  );
}

export default App;
```

## 動作確認
`npm run dev`で起動し、`http://localhost:3000`を確認。タスクを入力して追加できるかテストしてください。HMRにより、コード変更が即反映されます。

## 次回予告
第4章では、Viteの開発機能をさらに活用し、プラグインや環境変数を試します。お楽しみに！

---

この記事が役に立ったら、ぜひ「いいね」や「ストック」をお願いします！質問や感想はコメント欄で気軽にどうぞ。次回も一緒に学びましょう！