ViteでReact+Tailwindの開発環境のセットアップ #React

最近のWeb開発ではレガシーツールチェーンの技術的負債が問題になってきており、
最新のWeb技術を使用したモダンツールチェーンが開発されてきています。
今回はTailwindでも推奨されているViteを使用したプロジェクトセットアップの方法を紹介します。

Viteとは

概要

高速に動作するように設計された、Webフロントエンドのためのビルドツールです。
公式サイトでは以下のように説明されています。

Vite（フランス語で「素早い」という意味の単語で /vit/ ヴィートのように発音）は、現代の Web プロジェクトのために、より速く無駄のない開発体験を提供することを目的としたビルドツールです。

Vue.jsの作者のEvan You氏によって開発されましたが、Vue.jsだけではなく、ReactやSvelteなどでも利用できます。
主な機能として、Webプロジェクトモジュールのバンドルと開発サーバーの提供をします。

従来のツールとの違い

従来のバンドラではプロジェクトファイルが更新されると全てのバンドルを再構築してWebページをリロードする必要がありました。

インメモリで更新箇所のモジュールツリーのみを更新したり、HMRなどで更新箇所のみのホットリプレースをサポートして更新速度の改善を行ったものもありますが、実際はモジュール数が増えるにつれ速度低下は避けられませんでした。

ViteではES6で策定された、ネイティブESMを使用してソースコードを配信します。
Viteは必要に応じてソースコードを変換して提供するのみです。
また、ネイティブESM上でのHMRにも対応しています。
そのほかにもブラウザキャッシュの積極的な利用などで、徹底的に速度を追及した設計になっています。

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

前置きが長くなりましたが、Viteの紹介は以上です。
ここからは、Viteを使用してReactプロジェクトをセットアップしていきます。

今回はパッケージマネーシャーにnpmを使用します。　　

プロジェクトの作成

以下のコマンドを実行します。

npm create vite@latest

その後は対話形式でプロジェクトの設定ができます。
公式サイトでも、あとは画面に従ってくださいとしか解説がないほど分かりやすいです。
以下、Reactの例

Need to install the following packages:
  create-vite@4.0.0
Ok to proceed? (y)

create-viteをインストールするか

? Project name: » vite-project

プロジェクト名
今回はvite-project

? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
    Vue
>   React
    Preact
    Lit
    Svelte
    Others

フレームワークを選択
今回はReact

? Select a variant: » - Use arrow-keys. Return to submit.
>   JavaScript
    TypeScript
    JavaScript + SWC
    TypeScript + SWC

JSもしくはTSの選択
今回はJavaScriptを選択
SWCはrustで作成されたJavaScriptコンパイラでBabelより高速らしい

以下が表示されたらプロジェクトのセットアップが完了

Done. Now run:

  cd vite-project
  npm install
  npm run dev

上記のコマンドを実行すれば開発サーバーが起動するので表示されたアドレスにアクセスすれば初期画面が表示されます。

Tailwindのインストール

あとはTailwindのインストールです。
以下のコマンドを実行します。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

プロジェクトディレクトリにtailwind.config.cjsが作成されるので、
以下のように編集します。

/** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [],
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
   theme: {
     extend: {},
   },

index.cssに以下を追加

@tailwind base;
@tailwind components;
@tailwind utilities;

以上でプロジェクトのセットアップが完了しました。
Tailwind v3以上だとデフォルトでJITコンパイルされるのでコンパイルの必要はありません。