🐣
React（TypeScript） + Firebaseでメモアプリ開発
背景
- 前回Vite + React + FirebaseでGoogle認証機能を作ったときのメモで認証機能は作ってみた
- 今回はその続きでメモを記録するアプリを作ってみた
今回使用したライブラリーのバージョン
- React: 18.2.0
- TypeScript: 5.0.2
- Vite: 4.4.5
- Firebase: 10.4.0
- MUI: 5.14.10
- Recoil: 0.7.7
メモアプリの機能
以下の機能を持つアプリを作成し、Firebaseにホスティングした。
- サインイン、サインアウト
- メモの一覧表示
- メモの登録、更新
学んだことのまとめ
Firestore
- Firestoreは事前にテーブル的なものを定義する必要はなく、いきなりTypeScriptからデータを登録（addDoc）してしまってOK
- データ登録、更新、取得処理はFirebase入門 FireStore編(v9) ※編集中を参考に実装
- ただし、Cloud Firestore データベースを作成するでロックモードを選択しているとデフォルトでは全ての読み書きを拒否するようになっているため、Cloud Firestore セキュリティ ルールの条件の記述などを参考にローカルのfirestore.rulesを修正し、
firebase deployコマンドでデプロイする必要がある
Hosting
- React(SPA)アプリをFirebase Hostingにデプロイを参考に作業した
- Github Actionsとの連携を行わない方が簡単に実現できると思うので、初めての人にはそちらがおすすめ
- まずはローカルでReactをビルドする（
npm run build）。これによりデフォルトではdistディレクトリ以下に静的ファイルが作成される -
firebase initを行ったディレクトリ直下の公開用ディレクトリ（デフォルトではpublic）に、distディレクトリの中身をコピー - その後
firebase deployコマンドでデプロイするとホスティングできる
Recoil
- ログインユーザーの情報をグローバルな状態として管理しようと思い、これまではReactの Contextを利用してきたが、興味のあったRecoilを初めて使ってみた
- Reactの新しい状態管理ライブラリ「Recoil」とは？ Reduxとの違いを解説を参考に実装
- Contextよりもシンプルな印象を受けた
はまったところ
Google認証後、Firestoreにメモを取得、作成しようとするとTypeError: Cannot add property 0, object is not extensibleのエラーが発生。どうもsignInWithPopupの戻り値に含まれるUser型の値をそのまま保持するとエラーが発生するようで、uidやdisplayNameのみ保持するよう処理を変更しエラー解消した。
コード
アプリケーション
今後の予定
- メモの削除機能の追加
- GithubにプッシュするとFirebaseにデプロイするようにする（Github Actions利用）
- React Hook Form、Zodの利用
- Functions、Messagingなどのまだ利用していないFirebaseの機能を試す
Discussion