この記事は先日初めてWEBアプリを作った時の備忘録です。
アプリの内容はさして重要じゃないので割愛します。
1.はじめに
今回作ったWEBアプリは以下技術スタックで構成されています。
開発言語：TypeScript
フレームワーク：Node.js
UIライブラリ：React
スタイリング：Tailwind CSS / lucide-react
グラフ描画：Chart.js
データベース：Firebase Firestore
デプロイ：Firebase hosting
外部API連携：OpenAI API
本記事ではこれらを使う為の環境構築について記述します。
2.前提環境(2025年7月時点)
OS：Windows10 Home
ブラウザ：Google Chrome
エディタ：VScode
3.Node.jsのインストール
まず以下URLからNode.jsをダウンロードし、インストールを実施します。
インストールが成功したかどうかは以下コマンドで確認します。
node -v
npm -v
これでバージョンが表示されればインストール成功です。
補足：npmとは？
Node.jsのパッケージ管理ツール（Node Package Manager）です。
ライブラリ(React等)を簡単にインストールする事が出来ます。
4.Reactのインストール
続いてReactをインストールします。
「インストール」と言いますが、実際にはReactを使った
プロジェクトのひな形を作成することになります。
npmにはReactを使ったWEBアプリのプロジェクトを生成する為のコマンドがあり、
そちらを実行していきます。
cd project-dir
npx create-react-app my-app --template typescript
※ project-dirはプロジェクトを作成したいパス
※ my-appは作成するプロジェクト名(英語)
このコマンドを実行すると、指定したパスに React が
インストールされたプロジェクトが自動で作成されます。
5.lucide-reactとChart.jsのインストール
次はlucide-react(アイコンライブラリ)と
Chart.js(グラフ描画ライブラリ)をインストールしていきます。
以下コマンドはTerminalでプロジェクトのルートパスで作業して下さい。
分からない方は`npx create-react-app my-app`を実行した後に
そのまま実行すれば大丈夫です。
npm install lucide-react
npm install chart.js react-chartjs-2
`chart.js`だけでなく`react-chartjs-2`も
インストールしていますが、こちらはReactでchart.jsを使いやすくする為の
ライブラリと認識しておけば大丈夫です。
6.Tailwind CSSのインストール
次はTailwind CSSをインストールしていきます。
インストールする項目が多くて疲れますね…。
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
そして、これを実行した後に`src/index.css `の先頭に
以下内容を追加します。
@tailwind base;
@tailwind components;
@tailwind utilities;
その後、index.tsxやapp.tsxに
import './index.css'
を追加します。
TailWind CSS v4.0だとtailwind.config.js の content パスは自動検出されるので、
他に設定をしなくても使えるようです。
今まではもう少し設定をしないといけないようだったので、簡単になったようです。
それでも初心者には難しいですが…。
7.おわりに
FireBaseのインストールからアカウント作成も記載するつもりでしたが、
記事を分けたほうがいいと思ったので、一旦終わります。
WEBアプリは何かとターミナルで作業する事が多くて、
環境を整えるだけでも大変ですね…。
でもその分作ったWEBアプリが動いた時の感動は大きかったので、
引き続き備忘録をまとめていきたいと思います。