CodeSandboxでFirebaseを使う
できるのかなーと思ったら、案の定できるようだ
やってみる
23:03:54 した
API keyがばれるのは今回は気にしない
どうせ無料だし、なんとかなるだろ
firebaseのprojectを作っておくか
できた
idは後ろに通し番号をつけておくべきだったかな……
後の祭り
appを登録する
codesandbox.ioからのaccessを許可しておく必要がある
23:15:36 あとは、ここの記事のとおりにやってみる
入れておく
なぜかreact-router-domを入れているのに、存在しないとlint errorが出る
2020-11-27 14:22:18 @types/react-router-domを入れていないのが原因だった
compileは成功しているので無視する
2020-11-26 12:16:02 続きをやる
とりあえずここからコピペして動かせるようにしてみる 12:23:59 検索wordに「hook」まで入れたらいろいろ出てきた
ここがドンピシャ
2020-11-26 12:31:31 書いた
22:59:05 <label>を入れ子にすると、validationが効かないみたい？ これがだめ
code:tsx
<label className="label">
Label
<input type="text" name="text" ref={register({required: true})}/>
{errors.text && (<span>Invalid value</span>)}
</label>
これなら動く
code:tsx
<label className="label">Label</label>
<input type="text" name="text" ref={register({required: true})}/>
{errors.text && (<span>Invalid value</span>)}
もしかしてvalidation messageを<label>の中に入れたのがまずかったのかな？ あとrequired: trueもいる
submitを押さないと検証が更新されない？
いや、registerの変数をきちんと設定すれば、入力ごとにちゃんと更新されている
codesandboxのpreview欄をreloadしたかどうかでも変わる
あとBulmaでform controlを使用する場合は、以下のページにある構造に沿ってつくったほうがよさそう これ使う方向に切り替えるか。
23:45:15 今日はここまでにする
明日
2020-11-27 12:16:13
ほんと親切に書かれている
12:17:12 これもを元にpages/Index.tsxを少し書き換えた
どう使用かな
公式documentを見て勉強し直す
裏で動いている処理を知っていたほうがいいから、こっちだな。
13:23:43 調べるのだんだんめんどくさくなってきた
まあでも書くかあ
/icons/done.icon14:04:47 書き終わった
real-time 更新は書いていない
14:10:50 だいたいFirestoreの挙動は理解した
16:43:53 再開
Detail.tsxを実装
16:55:20 今使っている記事、真似るにはあまりよろしくない気がしてきた
Firebaseと関係ないForm frameworkを使っている
そのcodeを書き直さないといけない
user情報もなぜかFirestoreに統一してしまっている
まあでももう少しやってみるか
Formに関しては書き換え方だいたいわかったし
17:21:28 /members/に対して一時的にaccessできるようにした
試し終わったらlock modeにしよう
17:24:08 うごいたうごいた
https://gyazo.com/fc9e3c98b797a33761a2daaa8344119e
17:24:55 <Detail />に閲覧したいuser dataのdocument idを渡すようにしよう
そうしないと実装がおかしくなる
17:28:55 useDocumentDataOnceを使えば、document Idからデータをhookで取得できるか。
調べる
17:44:15 調べた
17:45:12 できたっぽい？
動作確認したこと
UserDataの新規作成
Dataの詳細表示
Dataの更新
Dataの削除
確認してみる
404 pageへジャンプ
UserDataをfirebase consoleから削除した後、詳細ボタンを押してみる
17:46:45 確認できないや
real time同期されているから、表示がすぐに変わってしまう
いい感じみたい！takker.icon
17:49:10 この練習はこんなものかな
まだやるとしたらやること
Bulmaでlayoutを調節する
んーそれを今する気はないかな。
先にauthendicationを使うのが先だな
17:53:31 テスト終了したので、security ruleをlock modeに戻す
次
References