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

はじめに

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

目標

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

Reactプロジェクトのセットアップ

第1章で作成したプロジェクトを使います。まだReactを選んでいない場合、以下で新規作成：

npm create vite@latest my-vite-react -- --template react
cd my-vite-react
npm install
npm run dev

ToDoリストの構築

1. コンポーネントの作成

src/App.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を更新：

.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に変更し、型を追加：

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の開発機能をさらに活用し、プラグインや環境変数を試します。お楽しみに！

---

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