![見出し画像](https://assets.st-note.com/production/uploads/images/159009518/rectangle_large_type_2_91c731d4a05f12c43e7905c1cde253b0.png?width=1200)
開発環境に苦戦
要件定義を3回書き直して、やっと本格的に開発の段階に入れそうです。
昨日は、主に開発環境を中心に進めました。
Node.jsとnpmのインストール
create-react-appを使って、Reactプロジェクトの作成
Firebase, zod, shadcn/ui, recharts, @mui/material など、必要なライブラリをインストール
ESLintとPrettierの設定
Firebaseの初期設定(Firebase CLI をインストール、プロジェクトを初期化)
Reactプロジェクトの作成では、最初は以下のコードを使用していました。
npx create-react-app my-app --template typescript
![](https://assets.st-note.com/img/1729132078-UXfAmtlSbZJ4FPLCB2pjcMNa.jpg)
しかし、これでは階層が深くなってしまうことに気付きます。
AIに質問しながら、新しいプロジェクトディレクトリを作成しディレクトリの中身を空にしてから、以下のコードを使用しました。
npx create-react-app . --template typescript
![](https://assets.st-note.com/img/1729132426-g7f9BZo5tjSQNepULExYrmJF.jpg)
. を指定することで、現在のディレクトリにプロジェクトを作成。
これが階層を深くしないための重要なポイントだと、とても勉強になりました!
スッキリしたー!と思っていましたが、プロジェクト作成だけでかかった時間は、約4時間…
次回はスムーズに進められるように、しっかりログに残しておきました。
Filebaseの設定もすごく苦戦しましたが、AIに聞いても分からず、結局アドバイスを貰いながらなんとか設定ができました。
今日は、Authenticationの設定から始めて、認証機能の実装を中心に開発を進めていきます!