React初心者がFirebaseを使ってブログを作るのでメモ
ツクモンUdemyでReactを勉強中。
3つのアプリを動画見ながら作成中で、一通り終わった。
次は自分で1から作り、わからないところは動画で確認するつもり。
いったん、ReactとFirebaseでブログを作る上でどんな機能が必要か、書き出すことで考えを整理したい。
ツクモン画面を整理
- ホーム画面
- 記事作成画面
- ログイン
- ログアウト
ホーム
投稿した記事が表示される。
記事には本文、タイトル、編集ボタン(自分が投稿したもののみ)が表示される。
記事作成
タイトル、本文の入力欄、投稿ボタンが表示される。
入力されたテキストはuseStateで管理、onChangeイベント発火時に更新。
投稿ボタンが押されることでFirebaseのデータベース（FireStore）に登録される。
ログイン
Firebaseの認証機能（Authentication）を使ってGoogleアカウントでログインできるようにする。
ログイン済みの場合は表示されないようにする。
ログインされているかはStateで管理？
ログアウト
ログアウトボタンが表示される。
ログアウト時は表示されない。
ナビゲーション
画面ではないが。
各画面へのリンクを表示。
ログイン画面・ログアウト画面へのリンクがログイン状態によって表示・非表示される。
ツクモンログイン
ログイン状態を管理するStateをApp.jsに追加。
Login.jsに渡す。
Login.jsではFirebaseの認証機能（signInWithPopup）を使って、成功時にStateをtrueに更新。
ローカルストレージにもログイン状態を保存。
ログイン成功時にはホーム画面に遷移させるため、react-router-domのuseNavigateを使用。
ツクモンログアウト
ログイン画面のLogin.jsを丸コピ。
ログイン部分をログアウトの処理に書き換える（FirebaseのsignOut）
ログアウトボタン押下時に、ログイン状態とローカルストレージをfalseにして、useNavigateでログインページに遷移。
また、ナビゲーションのログイン・ログアウトのリンクの出し分けを、ログイン状態を見て三項演算子で実装。
ツクモン記事作成
入力されたテキストをStateで管理。
FirestoreのaddDocでコレクションに追加。
途中、エラーが出ないのに投稿がfirestoreに入らないことがあったが、単純に前に作ったFirebaseプロジェクトの方に入っていただけだった。
try~catch文を何気に初めて使うなどしたが、凡ミスでした☺️
ツクモンホーム画面
Firestoreから投稿データを読み取り、map関数で表示。
Firestoreのデータのネストが深く、読み取るのが大変そう。
記事の削除ボタンは、現在ログイン中のユーザーIDと記事の著者IDが一致する場合のみ表示させる。
記事の削除時、ホーム画面の投稿一覧が更新されないので、window.location.hrefでホームに遷移するようにした。
（記事リストの更新をuseEffectで監視し、その際に表示を更新するとかができそうか？）
ツクモンその他
未ログイン時に記事投稿ができないように、未ログイン時に記事投稿へのリンクを表示させないように変更。
また、記事作成画面のURLを叩いたときも、未ログインであればログイン画面に遷移するように。
ツクモン追加でできそうなこと
- tailwind css
- Redux
- Typescript
- 記事の編集
- 記事リストが変更されたときにホーム画面を更新（useEffect）
- Markdownエディター
ツクモン全部自分で作った後に気付いたこと
- Googleログインはリロード後にもログイン状態が維持されているのか