Viteで始める高速Web開発 | 第4章: Viteの開発機能を活用

はじめに

第3章でReactとViteを使ってToDoリストを作りました。今回は、Viteの開発機能をさらに掘り下げ、Hot Module Replacement（HMR）、プラグイン、環境変数を活用します。これで開発効率がさらに上がります。

目標

• HMRの動作を理解する
• Viteプラグインを追加する
• 環境変数を使って設定を管理する

Hot Module Replacement（HMR）

HMRは、コードを変更した際にページ全体をリロードせず、変更部分だけを即座に反映する機能です。Viteではデフォルトで有効になっています。

HMRのテスト

src/App.jsxの<h1>を以下に変更：

<h1>ToDoリスト (Vite HMRテスト)</h1>

保存すると、ブラウザが即座に更新されます。ToDoリストの状態も保持されたままです。

プラグインの追加

Viteはプラグインで機能を拡張できます。例として、@vitejs/plugin-legacyを追加し、古いブラウザをサポートします。

1. インストール

npm install @vitejs/plugin-legacy --save-dev

2. vite.config.jsの設定

vite.config.jsを更新：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import legacy from '@vitejs/plugin-legacy';

export default defineConfig({
  plugins: [
    react(),
    legacy({
      targets: ['IE >= 11'], // サポートするブラウザ
    }),
  ],
});

3. ビルド確認

npm run build

dist/にポリフィル付きのファイルが生成され、古いブラウザでも動作します。

環境変数の活用

環境変数で設定を管理すると、開発と本番環境を簡単に切り替えられます。

1. 環境変数の設定

my-vite-reactフォルダに.envファイルを作成：

VITE_API_URL=http://localhost:5000
VITE_APP_TITLE=私のToDoアプリ

2. App.jsxで使用

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>{import.meta.env.VITE_APP_TITLE}</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;

• import.meta.envで環境変数にアクセス。
• VITE_プレフィックスが必須。

3. 動作確認

npm run devで起動し、タイトルが「私のToDoアプリ」に変わるか確認。

開発Tips

• 複数環境: .env.developmentや.env.productionで環境ごとに設定を分離。
• デバッグ: console.log(import.meta.env)で利用可能な変数を確認。

次回予告

第5章では、Viteで本番用ビルドを行い、アプリをデプロイする方法を学びます。お楽しみに！

---

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