ViteでTailwind＋TypeScriptを用いたReact開発環境の構築

タマネギ

ViteでTailwind＋TypeScriptを用いたReact開発環境の構築

投稿日: 2024年10月19日

Tips

要約

Viteを使ってTailwindとTypeScriptを組み合わせたReact開発環境を構築する手順を解説。
プロジェクトフォルダの作成からパッケージのインストール、動作確認までの一連の流れを示す。
Tailwind CSSを用いたスタイリングの適用方法についても詳細に説明。

この記事ではnpx create-react-app に代わって「Vite」というビルドツールを使ってTailwind＋TypeScriptを用いたReact開発環境を構築する手順を解説します。

準備

ここではreact-todo-appというプロジェクトを作成するものと仮定します。

ターミナル（PowerShell）を起動し、プロジェクトフォルダを配置したいフォルダ（例えば C:\Users\xxxx\Documents\ など）に移動してください。いまから、このフォルダのなかに react-todo-app というフォルダを作成して、そこに開発環境を構築していきます。

Viteによるプロジェクトフォルダの作成

Viteを使ってプロジェクトフォルダを作成します。次のコマンドを実行してください。

npm create vite@latest react-todo-app -- --template react-ts

コマンドオプションの react-todo-app はプロジェクトの名称（＝プロジェクトフォルダの名称）、--は後続オプションを npm ではなく Vite に渡すことを意味し、--template react-tsでReactとTypeScriptを統合した開発環境（テンプレート）を指示します。

なお、npm create vite@latest を初めて実行するときや、前回実行から時間が経っているときは、以下のように尋ねられるので続行のためにy を入力してください。

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

コマンド実行後、次のように応答が返ってくれば成功です。

Scaffolding project in C:\Users\xxxx\Documents\react-todo-app...

Done. Now run:

  cd react-todo-app
  npm install
  npm run dev

プロジェクトフォルダの構成確認

作成されたフォルダにcdコマンドで移動して VSCode を立ち上げてください。

cd react-todo-app
code .

VSCodeのエクスプローラから、次のようなフォルダ構成になっていることを確認してください。

パッケージ（ライブラリ）のインストール

プロジェクトフォルダのなかの「package.json」の内容を確認してください。ここには、アプリの「開発」や「実行」に必要なパッケージの情報や、開発で頻繁に使用するコマンドのショートカットが定義されています。

"dependencies" と"devDependencies" の項目を確認してください。TypeScriptを用いてReact開発するために最低限必要となるパッケージ（依存関係）が記載されています。ただし、現時点では、まだパッケージの本体はインストールされていません（プロジェクトフォルダにnode_modulesフォルダが存在しません）。

…ということでpackage.json に記載されたパッケージをインストールしていきます。 VSCode上からターミナルを開いてnpm installまたはnpm iを実行してください。これにより、package.jsonに基づきパッケージがインストールされます。

npm i

ファイルのダウンロードなどが行われるので少し時間がかかります。完了するとプロジェクトフォルダのなかにnode_modulesフォルダとpackage-lock.jsonが追加されます。

Reactアプリの動作確認とビルド

ここまでの作業でReact環境を実行するための準備が整いました。

VSCodeのターミナルにnpm run dev を入力して、開発モードでReactアプリを起動してください。なお、npm run devで実行される実際のコマンドはpackage.jsonの"scripts" の項目に記載されるvite になります。

ターミナルに次のような表示がされて、ローカルホストの 5173 番ポートでReactアプリが立ち上がったことが確認できます。

PS C:\Users\xxxx\Documents\react-todo-app> npm run dev     

> react-todo-app@0.0.0 dev
> vite

  VITE v5.4.9  ready in 420 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

ウェブブラウザで http://localhost:5173/ にアクセスしてください。次のような画面が表示されるはずです。画面内の「count is 0」のボタンを押下して数値がカウントアップすることを確認してください。

動作確認ができたらアプリを停止します。VSCodeのターミナルをアクティブにして [Ctrl]+[C] を押下してアプリを停止してください。

上記では「開発モード」でアプリを実行しましたが、今度は プレビューモード（疑似本番モード）でアプリを実行してみたいと思います。まずは、ターミナルに npm run build と入力してビルドをします。

npm run build

ビルドを実行すると、プロジェクトフォルダにdistフォルダが新たに追加されて、そのなかにビルドされたファイルが格納されます。dist フォルダに出力されたアプリを実行するためには npm run preview コマンドを入力します。

npm run preview

今度は 4173番ポートでアプリが立ち上がるので、ウェブブラウザから http://localhost:4173/ にアクセスして動作確認してください。「開発モードでの実行」と「プレビューモードでの実行」の違いについては、ウェブ検索や生成AIの解説を参照してください。

プレビューモードでの動作を確認できたら、[Ctrl]+[C] でアプリを停止しておいてください。

Tailwind導入の準備

Tailwindを導入する前に不要なファイルや記述を削除しておきます。

index.html の編集

index.html を次のように編集してください。<html>タグと<title>タグの部分を書き換えています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TodoApp</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

src/App.tsx の編集

src/App.tsx を次のように編集してください。

import { useState } from "react";

const App = () => {
  const [count, setCount] = useState(0);
  const countUp = () => {
    const newCount = count + 1;
    setCount(newCount);
  };
  return (
    <div>
      <h1>TodoApp</h1>
      <button onClick={countUp}>count is {count}</button>
    </div>
  );
};

export default App;

不要なファイルの削除

このあと Tailwind CSS を導入することを前提に、既存のCSS関連のファイルを編集・削除します。

src/App.css を削除してください。
index.css の内容を全削除してください（ファイル自体は残すようにしてください）

また、Reactロゴが描かれたファイル（src/asset/react.svg）も不要なのでsrc/asset フォルダごと削除してください。

動作確認（CSSの剝ぎ取り）

開発モードで動作確認します。

npm run dev

CSSを削除したので、次のようなシンプルな画面になっていることが確認できると思います。ただし、ボタンを押下したときのカウントアップは引き続き機能することを確認してください。

Tailwind CSSの適用

TailwindCSS は、あらかじめ用意されている「**細かく分割されたデザインの部品（パーツ）**」を組み合せてUIスタイルを設定する点に特徴あります。

例えば「青色の背景色bg-blue-500」「4単位量の左右余白px-4」「四隅の角を丸める rounded」といった部品の組み合わせを <button className="bg-blue-500 px-4 rounded"> のように与えることでスタイリングをします。

CSSクラスの名前を考えたり、スタイルの衝突を心配する必要がないので開発スピードが向上し、デザインの一貫性も保ちやすくなります。また、Next.js は、標準で Tailwind CSS をサポートしており、実際に様々なプロダクトで Tailwind CSS が使われています。

Vite で構築したReact環境に Tailwind CSS を導入するには、いくつかのパッケージのインストールと設定ファイルの追加が必要になります。

パッケージのインストール

次のコマンドを実行して「tailwindcss」「postcs」「autoprefixer」という3つのパッケージをインストールしてください。Tailwind CSS で設定されたスタイルは、ビルド時に通常のCSSに変換されるため、いずれのパッケージも「開発時のみ」に必要となります（本番環境での実行時には使用しません）。そのため -D オプションを付加して開発依存関係として扱います。

npm i -D tailwindcss postcss autoprefixer

設定ファイル追加

プロジェクトに Tailwind CSS を適用するために、設定ファイルを追加して、既存のファイルを書き換える必要があります。

まず、プロジェクトフォルダに直下 ( src の内部ではないので注意! ) に tailwind.config.js と postcss.config.js を新規作成してください。

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

src/index.css （空ファイルだったもの）に、次のように追記してください。

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

なお、上記の src/index.css ファイルは、src/main.tsxなかで読み込まれ、アプリ全体で Tailwind によるスタイリングが有効になります。

Tailwind によるスタイリング

Appコンポーネントを記述しているsrc/App.tsx に Tailwind によるスタイリングを適用していきます。次のように書き換えてください。

import { useState } from "react";

const App = () => {
  const [count, setCount] = useState(0);
  const countUp = () => {
    const newCount = count + 1;
    setCount(newCount);
  };
  return (
    <div className="mx-4 md:mx-auto mt-10 max-w-2xl">
      <h1 className="font-bold text-2xl mb-4">TodoApp</h1>
      <button
        className="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded-md"
        onClick={countUp}
      >
        count is {count}
      </button>
    </div>
  );
};

export default App;