React環境をViteで構築する

はじめに

プログラミングスクールで学習しております、でぃんぐーと申します。自身のためにも、モダンなWebアプリケーション開発環境の構築手順をまとめたいと思います。
今回は、React、Vite、TailwindCSS、daisyUI を使用します。

手順

1. プロジェクトの作成

新しいReactプロジェクトを作成します。

npm create vite@latest my-app -- --template react

このコマンドを実行すると、プロジェクトの設定画面が表示されます。

• Reactを選択します。
  

• 次に、JavaScriptかTypeScriptのどちらを使用するか選択します。
  

2. プロジェクトディレクトリに移動

作成したプロジェクトのディレクトリに移動します。

cd my-app

3. TailwindCSSのインストールと設定

TailwindCSSとその依存パッケージをインストールします。

npm i -D tailwindcss postcss autoprefixer

TailwindCSSの設定ファイルを作成します。

npx tailwindcss init -p

4. daisyUIのインストール

daisyUIをインストールします。

npm i -D daisyui@latest

5. 設定ファイルの編集

tailwind.config.jsファイルを以下のように編集します。

import daisyUI from "daisyui";

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

この設定により、TailwindCSSがプロジェクト内のファイルを認識し、daisyUIプラグインが有効になります。

6. CSSファイルの編集

src/App.cssファイルを以下のように編集し、TailwindCSSのスタイルを読み込みます。

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

7. ビルドと開発サーバーの起動

プロジェクトをビルドし、開発サーバーを起動します。

npm run build
npm run dev

8. コンポーネントの編集

src/App.jsxファイルを編集して、TailwindCSSとdaisyUIのスタイルを使ってみましょう。

import './App.css'

function App() {
  return (
    <>
      <div className="p-4 bg-blue-500 rounded-md">
        <h1 className="text-2xl text-black font-bold btn 
                      border border-purple-400 hover:border-purple-600
                      bg-lime-300 hover:bg-green-300"
                      >
                      Hello, Tailwind CSS!
        </h1>
      </div>
    </>
  )
}

export default App

9. 結果の確認

ブラウザでlocalhost:5173にアクセスし、変更が反映されているか確認します。

このように表示されれば、TailwindCSSとdaisyUIが正常に機能しています。

トラブルシューティング

うまくいかない場合は、以下の手順を試してみてください：

1. キャッシュのクリア
2. 依存関係の再インストール

rm -rf node_modules
npm cache clean --force
npm install

これらの手順を実行後、再度npm run devを実行してみてください。

まとめ

このガイドでは、Viteを使用してReact環境を構築し、TailwindCSSとdaisyUIを導入する方法をまとめました。ありがとうございました。