Vite でいいじゃん！ React の開発環境

2024年2月3日 13:04

前回の記事（借り物の React を卒業して Web開発へ）では、CDNで読み込んだライブラリを使って React を扱う方法から webpack + babel 構成でローカル開発環境をつくって React を扱う方法に移行しました。

手軽さにおいては vite (rollup) の方がとっつきやすいかもしれません。

https://note.com/kaisokaiso/n/nbd9f614b7681

という匂わせをしてしまっていたので、さっそくその伏線を回収しておきたいと思います。

Vite という選択肢

前回 ICS MEDIA の記事の記事を参考にして webpack + babel 構成の React 開発環境を構築しましたが、実は Vite によるReact 開発環境についても jQueryからTypeScript・Reactまで！ Viteで始めるモダンで高速な開発環境構築という記事の中で言及されています。

上記リンクのチュートリアルを試してもらえれば分かりますが、Vite の取り扱いはとにかく簡単です。そのうえ環境構築や起動についても webpack + babel 構成よりも分かりやすい上に爆速なので、タイトルのとおり「もう Vite で良くない？」みたいな気持ちになりますよ。

Vite でつくる React の開発環境

さっそく Vite で React の開発環境をつくっていこうと思います。

手順 1. 作業ディレクトリで Vite を初期化する。

npm init vite@latest

`npm init`コマンドを実行すると、「プロジェクト名」「フレームワーク」「Variant（直訳すると変異体？）」の入力を求められます。

Project name: … practice-vite-01
? Select a framework: › - Use arrow-keys. Return to submit.
❯   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others
? Select a variant: › - Use arrow-keys. Return to submit.
❯   TypeScript
    TypeScript + SWC
    JavaScript
    JavaScript + SWC

プロジェクト名はともかく、フレームワークはUIコンポーネントを構築するためのフレームワークのことを指し、ライブラリを使わずに生の JavaScript だけで構成する Vanilla から、Vue や React や Svelte といったものまで選択肢が用意されています。

Vite は元々 Vue の開発者がつくったツールなので、 Vue しか使えないと思っている知り合いもいたのですが、実は Vue 以外にも選択肢がたくさん用意されているようです。

Variant は直訳すると変異体というよく分からない翻訳になりますが、UIを記述する選択肢として JavaScript を使うのか？ TypeScript を使うのか？さらには SWC を使うのか？使わないのか？という意味になりそうです。

SWC もまた使ったことがないツールですが、babel にかわるようなコンパイルツールのようで、Vite 4.0 から搭載された選択肢のようです。JavaScript や TypeScript のコンパイルをマルチコアで行うことができて、ざっくり babel の 20 ～ 70 倍高速みたいなので、これもまた使うっきゃないツールになりそうです。

参考サイト：次世代のWebプラットフォームSWCを学ぶ | Qiita

今回は以下のような構成で `npm init`します。

Project name: practice-vite-01
Select a framework: React
Select a variant: JavaScript

`npm init`した直後のフォルダ構成は以下のようになります。

.
├── README.md
├── index.html
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── App.css
│   ├── App.jsx
│   ├── assets
│   │   └── react.svg
│   ├── index.css
│   └── main.jsx
└── vite.config.js

`npm init`すると、次に実行すべきコマンドを以下のように教えてくれます。
コマンドを実行すると、React で構成されたサンプルページをすぐに出してくれます。

cd practice-vite-01
npm install
npm run dev

Vite なら、1手順だけでページができてしまうヤバさ

上記 `npm run dev` コマンドを、`npm run build` とすれば、ソースコードをビルドして静的ページに出力することができます。

前回の記事を読んでくださった方なら分かると思うのですが、 webpack + babel 構成ではビルドまでに8つの手順を踏む必要があったのに対し、Vite では 1手順でサンプルページができてしまいます。（しかもメッチャ早い！）

しかし、導入が簡単なゆえに追加設定した上で使いたいポイントがいくつかあるので紹介しておきますね。

オススメの追加設定 1. Windows 環境でのホットリロード

ICS の記事や Vite の公式サイトでは、ソースコードの変更をリアルタイムにブラウザで確認することができる「ホットリロード」の機能を当たり前のように使っていますが、Windows ユーザーは少し勝手が違います。

Windows ユーザーは、ホットリロードの機能を使うために vite.config.js ファイルを以下のように設定しておきましょう。

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

// https://vitejs.dev/config/

export default defineConfig({
  plugins: [react()],
  server: {
	  watch: {
		  usePolling: true,
	  },
  },
})

`server: { watch: { usePolling: true, }, }, `を追記することで、WSL2の制約を回避してホットリロードを使うことができるようになります。

ただ、`usePolling` の設定は処理が重いそうなので、気をつけて使う必要がありそうです。

参考サイト：
Laravel Sailを使い、WSL2上にローカル環境を構築したが、Viteのホットリロードが動作しない | Zenn
設定サーバーオプション | Vite

オススメの追加設定 2. マルチページ化

初期設定では、Vite はシングルページとして構築されてしまいます。
そのため複数ページから構成される静的サイトを構築するには「マルチページ化」の設定を行いましょう。

vite.config.js ファイルと同じ階層に子ページ用のディレクトリをつくり、子ページ用のHTMLファイルをつくります。

※ エントリーポイントとして、HTMLファイルを配置しなければならないことに注意です。試しに`.jsx` ファイルをエントリーポイントに指定したのですが、うまく動きませんでした。

mkdir child

touch child/index.html

child/index.html ファイルは以下のように編集しておきましょう。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Child</title>
	</head>
	<body>
		<h1>Child</h1>
		<a href="/">Home</a>
	</body>
</html>

マルチページとして構成するために vite.config.js ファイルを以下のように設定しておきましょう。

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

// https://vitejs.dev/config/

export default defineConfig({
	plugins: [react()],
	build: {
		rollupOptions: {
			input: {
				main: resolve(__dirname, 'index.html'),
				child: resolve(__dirname, 'child/index.html'),
			},
		},
	},
	server: {
		watch: {
			usePolling: true,
		},
	},
});

パスの設定をインポートした上で、`build: { rollupOptions: { input: {}, }, }, `の設定をして複数のページに対してルーティングを設定しておきます。

参考サイト：
Viteでマルチページアプリを作る | Zenn
シングルページアプリケーションのライブラリでマルチページしたい！ | Qiita
マルチページアプリ - 本番環境用のビルド | Vite

ブラウザで子ページの挙動を確認するために、URL（ localhost:5173/child/ ）を入力すると、子ページが表示できていることを確認することができます。

初期設定で生成される`./index.html`ファイルと同じように`./child/index.html`ファイルに `.jsx`ファイルを `type="module"`として読み込めば、子ページでも React を取り扱うことができます。

以下のビルドコマンドを実行すると、`dist`ディレクトリがつくられ、そこに静的ページが生成されます。

npm run build

生成されるファイルは動的に生成されたプレフィックスが付くので、修正等を行う場合は必ず生成元のファイルを編集しましょう。

まとめ

Vite を使えば最低限の設定を行うだけで React を扱うための準備ができるのでWeb開発に注力することができ、静的ページの生成まで一気通貫して行うことができます。

※ 実は2件ほど実案件で Vite を使って納品しました。そのお話はまた別の機会に。

ICS MEDIA の記事にもありますが、Vite なら簡単にSassを導入することができますし、生成された静的ページはIEでも問題なく動くようです。（もう考慮する必要ないかな？）

Vite なら、ツールとして考慮しなきゃいけない設定が少ない分だけ React を使ったUI開発に専念できるので、webpack + babel 構成よりもアドバンテージがあることを感じてます。

Vite の初期設定で現れる TypeScript や SWC を導入すれば、さらに本格的なWeb開発ができそうですね。