ChatGPTに騙された!!Windows環境でReact(Vite)×TailWindCssの環境構築方法
どうも、しんさんわーくすです。
みなさん、Chat GPTを初めとする生成AIは使用していますか？
私も、Chat GPTが便利過ぎて、日頃から利用しまくっています。
特に便利なのが、プログラミングやネットワーク等のITに関係することを
教えてほしいときの利用です。
Chat GPTに質問すると
知りたかった知識やコードをあっという間に生成してくれます。
ただ、Chat GPT自身もそう書いているように、
必ずしも回答が正しいとは限らないという点には、気をつけなくては行けません。
タイトルにあるように、私もWindows環境でReact(Vite)×TailWindCssの構築方法を教えて
もらったのですが、回答が一部古い内容だったためか
かなりの時間を無駄にしてしまったので、備忘録も兼ねて、私が行った環境構築方法についてブログに記したいと思います。
このブログを書いている人について
普段は、パソコン初心者向けに記事を書いています。
今回は、少々踏み込んだ内容になります。
パソコンについての基礎的は記事も書いていますので、
ぜひそちらもご覧いただけますと嬉しいです!!
こちらの記事もおすすめです。
開発環境情報
- OS:Windows10
- npm::10.9.0
- Vite:7.1.2
- React:19.1.1
- Tailwind CSS:4.1.11
どこで環境構築に苦戦したのか？
私の場合、苦戦したのはTailwind CSSの導入です。
何度も、Chat GPTの指示通りに設定ファイルの編集を試してみても上手くいかなった。
react自体は、問題なく導入して動作確認できていたのですが…
結論から言うと、Tailwind CSSの導入に関しては、
Chat GPTが回答した内容ではなく、公式の導入方法をそのままやれば良い
それだけで問題なく導入することができました。
お恥ずかしながら、以前も似たようなミスをしてしまいました。
面倒でも結局、公式のドキュメントを見るのが一番確実だと改めて反省しました。
公式:Get started with Tailwind CSS
React(Vite)×TailWindCssの導入方法
1プロジェクト作成（Vite + React + TypeScript）
今回私はWidnwosで環境構築をしたいので、powershellで下記のコマンドを入力します。
# Vite でプロジェクト作成 npm create vite@latest my-app # フレームワーク等を聞かれるので、それぞれReactとTypeScriptを選択します。 # ※TypeScriptの部分は、みなさんが使用する言語に適宜変えてください。 # ? Select a framework: → React # ? Select a variant: → TypeScript
これで、Reactのプロジェクトは作成できました。
ここまでは、Chat GPTの指示通りで問題なく作成できています。
これ以降の工程は、Tailwind CSSの公式のインストール方法を元に進めていきます。
2 Tailwind CSS のインストール
powershellで下記のコマンドを入力しします。
cd my-app npm install tailwindcss @tailwindcss/vite
私がChat GPTに教えてもらった手順だと、プロジェクトフォルダに遷移したあと、
npx tailwindcss init -p
を叩くようにということなのですが、
この方法はおそらく以前行われていた導入手順だと思わわれます。
3configファイルの編集
`vite.config.ts` に以下のコードを追加します。
※javascriptの人はjsに読み替えてください。
```ts
import { defineConfig } from 'vite'import tailwindcss
from '@tailwindcss/vite'export default defineConfig({ plugins: [ tailwindcss(), ],})
```
—
4index.cssにてTailwind CSSをインポートします。
`src/index.css` に以下を追記します。
``index.`css @import "tailwindcss"; ```
5 開発サーバーを起動
powershell にて下記のコマンドを入力します。
``` npm run dev ```
これで、開発用サーバが起動するので、
ターミナルに表示されているURLにアクセスして、
プロジェクトのWEBページを確認しましょう。
6動作確認
Tailwind CSSが導入できているか確認します。
私は、App.tsxに下記のようなコードを追加しました。
```tsx
export default function App() {
return (
Hello Tailwind + React!
); }
htmlの方で、index.cssをに追加するのも忘れずに
html ‘’’
<link href="/src/style.css" rel="stylesheet">‘’’
まとめ
今回は、Windows環境でReact × Tailwind CSSの環境構築をする方法について書きました。
Chat GPTは非常に便利ではありますが、時には情報が間違っていたり、古かったりすることがあります。
特に、フロントのように情報の更新が早い分野に関しては、なおさら注意が必要です。
面倒くさがらずに公式のドキュメントにあたってみるとが大切だなと
改めて実感しましたので、自戒の意味も込めてブログに書き残しました。
