見出し画像

開発環境に苦戦

要件定義を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
プロジェクトディレクトリ(poitoku-app)直下に新しいフォルダ my-app を作成し、その中にTypeScript対応のReactプロジェクトを構築する

しかし、これでは階層が深くなってしまうことに気付きます。

AIに質問しながら、新しいプロジェクトディレクトリを作成しディレクトリの中身を空にしてから、以下のコードを使用しました。

npx create-react-app . --template typescript
現在のディレクトリ(poitoku-app)に直接、TypeScript対応のReactプロジェクトを構築

. を指定することで、現在のディレクトリにプロジェクトを作成。
 これが階層を深くしないための重要なポイントだと、とても勉強になりました!

スッキリしたー!と思っていましたが、プロジェクト作成だけでかかった時間は、約4時間…

次回はスムーズに進められるように、しっかりログに残しておきました。

Filebaseの設定もすごく苦戦しましたが、AIに聞いても分からず、結局アドバイスを貰いながらなんとか設定ができました。

今日は、Authenticationの設定から始めて、認証機能の実装を中心に開発を進めていきます!

いいなと思ったら応援しよう!