アルアカ - Arcadia Academia

Viteは、次世代のフロントエンドツールとして注目されている開発ツールで、特に開発中のビルド速度が非常に速いのが特徴です。Viteを使ってReactの環境を構築すると、軽量かつ高速な開発体験を得ることができます。この記事では、Viteを使ってReactの開発環境をセットアップする手順を解説します。

Viteは、ビルドツールとしての機能を持ち、従来のツール（例：Webpack）と比較して非常に高速です。特に開発サーバーの起動やホットリロードが早く、ファイルサイズの大きなプロジェクトでもパフォーマンスの向上が期待できます。Viteは、モダンなブラウザのESモジュールを活用し、開発中は必要な部分のみをオンデマンドでコンパイルすることで、ビルド速度を最適化しています。

まず、Viteを使ったReactプロジェクトを作成します。ターミナルを開き、以下のコマンドを実行します。

npm create vite@latest

このコマンドを実行すると、Viteのプロジェクトセットアップウィザードが開始されます。プロジェクトの名前を指定したら、次に使用するフレームワークとテンプレートを選択します。

✔ Project name: … my-react-app
✔ Select a framework: › React
✔ Select a variant: › TypeScript

• Project name: プロジェクトの名前を入力します（例：my-react-app）。
• Select a framework: フレームワークにReactを選択します。
• Select a variant: JavaScriptを使用するか、TypeScriptを使用するか選択します。

プロジェクトが作成されたら、以下のコマンドで依存関係をインストールします。

cd my-react-app
npm install

これで、必要なパッケージ（React、Viteなど）がインストールされ、React開発環境が整います。

次に、以下のコマンドで開発サーバーを起動します。

npm run dev

これで、Viteの開発サーバーが立ち上がり、http://localhost:3000でReactアプリケーションが動作しているのを確認できます。ブラウザでこのURLを開くと、Viteでセットアップされた初期状態のReactアプリが表示されます。

この画面が表示されたら成功しています。

Viteを使用したReactプロジェクトは、次のような構成になっています。

my-react-app/
├── index.html
├── package.json
├── vite.config.js
├── public/
└── src/
    ├── App.jsx
    ├── main.jsx
    └── assets/

• index.html: エントリーポイントとなるHTMLファイルです。Viteはここからアプリをレンダリングします。
• vite.config.js: Viteの設定ファイルです。必要に応じてカスタマイズできますが、デフォルトの設定でほとんどのReactプロジェクトは動作します。
• src/: Reactのコンポーネントやアセットが含まれているディレクトリです。App.jsxがメインコンポーネントとして機能し、main.jsxからAppがレンダリングされます。

Viteでセットアップされた環境が整ったら、Reactのコンポーネントを作成してみましょう。まずは、src/App.jsxを編集して、シンプルなコンポーネントを作成します。

import { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Vite + React</h1>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        カウントアップ
      </button>
    </div>
  );
}

export default App;

• useState: Reactのフックを使って状態を管理しています。
• ボタンをクリックするたびにカウントが増加するシンプルなカウントアップ機能を作成しています。

Viteは、コードを保存するとすぐにブラウザが更新されるホットリロード機能を備えています。これにより、開発中に手動でリロードする必要がなくなり、効率的に開発を進めることができます。

例えば、上記のApp.jsxを編集して以下のように変更し、保存するだけでブラウザに即座に反映されます。

<h1>ViteとReactで始めるアプリ開発</h1>

開発が完了したら、Viteを使って本番環境用のビルドを作成できます。以下のコマンドでビルドを実行します。

npm run build

ビルドが成功すると、dist/ディレクトリに本番用のファイルが生成されます。このディレクトリ内のファイルをWebサーバーにアップロードすれば、アプリケーションを公開できます。

npm run preview

また、npm run previewを実行することで、本番環境に近い状態でアプリケーションをテストすることが可能です。

Viteの設定は、プロジェクトのルートにあるvite.config.jsで行います。この設定ファイルでは、プラグインの導入や、ビルドの最適化、プロキシの設定など、さまざまなカスタマイズが可能です。

APIサーバーへのリクエストをローカルでプロキシするには、次のようにvite.config.jsに設定を追加します。

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

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': 'http://localhost:5000',
    },
  },
});

これにより、/apiに対するリクエストはローカルのAPIサーバー（ポート5000）にプロキシされます。

Viteを使ったReactの環境構築は非常に簡単で、セットアップから開発までのスピードが速く、効率的な開発が可能です。特に、ホットリロードや軽量なビルドシステムにより、ストレスの少ない開発体験が提供されます。Reactの学習やプロジェクトの立ち上げには、Viteを使った環境構築が非常に便利です。この記事の手順に従って、ぜひ自分のReactアプリケーションを作成してみてください。