CAMP日記 第3週

4/21(火)
今日やること
・inputフォームのレイアウト作る
・フォームのテキストデータをchat画面で受け取る
やったこと
・inputフォームのレイアウト作る
感想
チャット画面を作るというゴールがあった時に、どのようなロードマップで進めばいいのかがわかっていなかった。
・DBとやりとりする時はserviceを介して行う。
・serviceの分類は機能ベースで作る。(chatService, userServiceなど)
・一つのサービスの中のメソッドは見た目ベースで分類する(postChat, getChat,など)

4/22(水)
今日やること
・入力フォーム作成
・Firebaseとservicesを実装する。
・zoomのアイコン、録画機能、asyncについて確認
聞くこと
・sharedModuleでFormModuleとReactiveFormModuleをインポートした場合、使いたいモジュール内でもう一度インポートさせる必要がある？(1)
・mat-form-fieldの使い方(2)
やったこと
・入力フォーム作成
感想
(1)に関して。ない。(2)に関して。mat-form-moduleは<mat-form-module>で囲まれている要素にAngularMaterialを適用する時に使うもの。
サッと見た目のフォームだけ実装してserviceの実装に入れるかなと思っていたけど、フォームが思っていたよりも濃い内容だった。インポートするモジュールやフォームグループの作成などやることはかなりあった。でもこれで一からフォームを作るということをしたからいい経験になったと思う。

4/23(木)
今日やること
・chatServiceを作りFirebaseと連携させる
・ざっくりと全体のissueを立てる
聞くこと
・firebase-toolsはどのディレクトリでするもの？(1)
・sharedModuleの確認(2)
やったこと
・chatSriviceの作成
・Firebaseの環境構築
感想
(1)に関して。npm install -g firebase-tools コマンドは一度実行したら自分のPCのローカルにインストールされるのでプロジェクトやディレクトリごとに実行するものではない。-g はglobalの意味。(2)に関して。sharedModuleは基本的にModuleやComponentをexportsに入れてあげないと他のModuleで使用することはできない。sharedModuleにcomponentがないといけないと思っていたけどそうではなく、sharedModuleに定義したmoduleであれcomponentであれそもそもexportsに入れてあげないと他のModuleで使うことはできないのでこの点に注意する。
・[declarations] sharedModuleにcomponentを作成していた場合そのcomponentを記述する。
・[imports] 作成したcomponentで使用するModuleがあればここでインポートする
・[exports] 他のModuleで使えるようにModuleやComponentを記述する

4/24(金)
今日やること
・angularFireの導入
・postChatメソッドの実装
・getChatメソッドの実装
聞くこと
・Firebaseのアプリってなに？(1)
・Git fetch on pull(2)
・refってなに？(3)
やったこと
・angularFireの導入
・postChatメソッドの実装
・データ設計についての理解
感想
今まではファイルを作ってルーティングを設定するしか基本的に実装できていなくて開発している感覚があまり持てなかった。今日はpostChatメソッドで入力したテキストデータをdatabaseに保存する処理を書いたことでなんとなく動きのある部分ができたので楽しいと感じた。(1)Firebseと作成するプロジェクトは一対一対応ではないことが分かった。同じDBを使ってwebアプリとモバイルアプリを実装できたりもする。これがSPAの強みの一つでrailsとかで実装したMPAだとモバイル版を作る時にまた新たにバック側を作る必要が出てくるとのこと。(3)DBからデータを取得する時にフィールドの値を参照するが、その際にgitPetで使っていたrefがどこから提供されている機能でドキュメントのどこに記載があるのかがわからなかった。簡単にまとめるとrefはFirebaseの機能として提供されており、  whereに関してはFireStoreの機能として使えるものである。.collection<Pet>('pets', ref => ref.where('trainerId', '==', trainerId))のような書き方は、もともとFirebaseのデータへのアクセス方法としてref(参照)という機能があるが、それに加えてAngularFireによるFireStoreのwhereが使えるので両者を合わせたコードの書き方となっていて少し複雑な感じはする。とりあえず動くことももちろん大切だけど、この機能ってなぜ使えて何がしたいから使うのかが個人的にはすごく気になってしまう。スピード感も気にしながらでも大事なことだとも思うのでそのバランス感覚を持っていきたい。

4/20(月)
体調不良によりmtg欠席