CAMP日記 第4週

4/27(月)
今日やること
・getChatの実装
・Rxについての理解
やったこと
・getChatの実装
・Rxについての理解
・data設計
聞くこと
・rooIdの持たせ方
感想
roomIdをgetChat()に渡してあげたいがどのようにmessageインターフェースに持たせればいいのかが分からなかった。方法としては記事にもあったようにfireStoreのcreateId()を使うのがベストということが分かった。あとはdata設計としてfirebaseのドキュメントにもあったようにサブコレクションを持たせるのをやってみることにする。あとはユーザーの動作としてどのタイミングでchat画面に行くかを考えてそこをトリガーにする。

4/28(火)
今日やること
・getChatで引数として渡すダミーユーザー情報の追加
・getChatの実装
・Rxの課題
聞くこと
・クラス内での変数はconst使えない？
やったこと
・getChatで引数として渡すダミーユーザー情報の追加
・getChatの実装
感想
Firestoreに保存したデータをObservableで受け取ってmapで加工するといういわゆるRxの部分が苦戦した。まとまった進捗が出せてないのも結構つらい。期待する動作は何であるか、そのために必要な手順は何かと一つずつ洗い出してどこで詰まっているのかも意識する。mtgで聞いたらいとも簡単にNinoさんは解決方針を示してくれて「え、自分が何時間も悩んだのをこんな一瞬で。。」と絶句しそうになるけど地道な積み重ねがベースにあってこそできる芸当なのだと思う。思いたい。笑　messageドキュメントのテキストデータを参照する際にjsのmapを使うという発想になっていなかったので配列の各要素に対して処理を行う時はmapの選択肢を持てるようにする。Rxに関しては正直すんなりとはいかないのは正直ある。ただAngular固有のものでもなくFlutterでも出てくるということなので慣れていくしかない。あとFirebaseのcollectionへのアクセス方法として親から一つずつ辿ることを忘れないようにしよう。例えば今日出てきたものだと、.collection<Message>(`rooms/${uid}/messages`) こんな具合に。

4/29(水)
今日やること
・RxJSの課題 (mapにはreturn必要？)
・getChatで受け取ったメッセージデータを画面に表示させる
・NinoさんとしまぶーさんのYouTube
聞くこと
・getChat()の返り値をObservable<Message>のように指定したいが、エラーが出てしまう。
やったこと
・getChatの実装
・RxJS課題(1)
感想
課題の一つ目ができたときになんとなく使い方がわかったという感覚があった。mapを使った同じように処理であれば再現できると思う。自分のプロジェクトで同様の実装をしたあとだったので理解もしやすかったのかもしれない。この”なんとなく”の確度を頑張って上げていく。時間がかかったgitChatも実装できたので良かった。

4/30(木)
今日やること
・RxJS課題(2)
・チャット画面実装
聞くこと
・課題(2)におけるセミコロンの位置
今日やったこと
・RxJS課題(2)
・チャット画面実装
感想
セミコロンの位置に関してはカッコが引数の場合は当たり前だけどつけない。コードが複雑になってくると区別が難しくなるけどその点に気をつければ基本的につけとけばオーケー。serviceの中でsubscribeをする必要はないことがわかった。テンプレのように.pipe().subscribeとしていたけど、受け取る部分はcomponetなどで実行すればいい。serviceの中でsubscribeをしてしまうとメソッドの返り値としてイメージ図で言う値を受け取るおじさんが返ってきてしまう。JavaScriptの書き方としてメソッドの{}を使うときは必ずreturn を入れてあげないとダメ。省略記法で書いたときはreturnなしでok。マークアップに関しては既存のwebページを模倣してみるのが一番いいという。mtgでは楽天のサイトを参考にしていて土日などにやってみようと思う。

5/1(金)
今日やること
・@inputと| asyncを使った値の受け渡しを理解する
・chat画面でmessageを表示させるようにする
やったこと
・@inputと| asyncを使った値の受け渡しを理解する
・シェアハウスのコーディング動画
聞くこと
・gitPetのObservableで取得するペットデータを親のコンポーネントであるhome.component.tsで取得しているのはどうしてか、情報表示を行うpet.component.tsで取得してもいいのではないか。(1)
・getAllChat()のオプションに: Observableを書く時の引数はどうすればいいのか。(2)
感想
gitPetで@input, asyncを復習していたけど、結構さらっと高度なことをしているなと感じた。自分のプロジェクトで再現できてないと理解していることにはならない。(1)値を受け取ることはどこのコンポーネントでもできるが、子コンポーネントには親から値を渡すだけの設計がリファクトもしやすくて設計としてスマート。(2)返ってくるObservableの値としてMessageインターフェースのtextプロパティだけを取得し、さらに配列として返ってくるので書き方としてはObservable<string[]>となる。stringまでは書けていたので惜しかった。こういう書き方があることに気づけたので良しとする。自動インポートの補完について、エンターを押すと自動的にインポートされる訳だけど同じ名前のコンポーネントなどが合った場合目的のものが選択されているかを確認する必要がある。今回Messageインターフェースをインポートする時に違うものをインポートしていてエラーが出てしまった。

一応GWだったのでプロジェクトは進めずマークアップの練習などをした。

5/7(木)
今日やること
・chat画面で*ngForでメッセージを表示させる
やったこと
・chat画面で*ngForでメッセージを表示させる
聞くこと
・firestoreのcollectionの整理
感想
Observableをhtmlで受け取るときは” | async “何回言ったら分かるんだ自分。どうにも詰まってNinoさんに画面共有していただいて気づいた反省点。(1)親から子コンポーネントへ値を渡すときは子側で@inputするという認識があって疑っていなかった。でも正しくはそれプラス親のhtmlで[data]=“data”のように渡す必要があった。エラー箇所を見当つけてデバッグする時に自分の記憶力ではなくドキュメントなりを確認しないといけない。(2)デバッグの考え方としてエラーに近いところから追うことを意識する。今回であればspeech.htmlで表示されていないのだからそこからconsole.logで確かめてみる。speech.component.tsでchatがインポートできているかをconsole.log(chat)としてデバッグするのがベターであった。(3)Observableの値を確かめるときは単にconsole.logでは出力されないので(レールに流れているだけを確認できない)、基本的にtapを使うようにする。

5/8(金)
今日やること
・messageに日時のプロパティを追加して、日付順にソートさせる
・日付を日本語で表示させる
やったこと
・messageに日時のプロパティを追加して、日付順にソートさせる
・日付を日本語で表示させる
・textのデータ構造修正
聞くこと
・dbのインデックス(1)
・firebaseのデータ削除(2)
感想
PR待機中の作業としては、origin/masterから新しくブランチを切ってPRで出した作業とかぶらないようにする。(1)ソートなどをする際に必要となるがそんなに意識しなくても大丈夫とのこと。出てきた時にはエラー文のリンクを開いてインデックス作成ボタンを押せばok！(2)テストデータとしてテキストを入力しすぎた結果firestoreが雑多になってしまった。コレクションやドキュメントの削除方法については、CLIやコードを書くやり方もあるがシンプルにfirebaseのコンソールからGUIで操作するのが良さそう。textのデータ構造がおかしくて原因を探っていた時に、FormGroupのtextプロパティを参照していたが本来であればform.value.textとするべきだった。原因が見つかってしまえば何のことはないのだけど自力で解決できたのは嬉しい。やっとリアルタイムで入力したテキストデータが画面に反映されたのでチャットっぽくなってきた。