CAMP日記 第5週

5/11(月)
Live勉強会

5/12(火)
今日やること
・chat画面レイアウト修正
・mypage画面レイアウト
・入力したデータをmypage画面のカードに渡す
今日やったこと
・chat画面レイアウト修正
・mypage画面にテキストデータを反映
・勉強会マークアップ動画
聞くこと
・materialのスタイル調整
感想
chat画面で最初に実装した時には数日かかっていたテキストデータの反映が、mypage画面で今日実装した際には5分とかからなかった。同じような実装をする時に再現性を持てたので素直に嬉しかった。<mat-card>を使ったマークアップもspeech.componentを作成した時よりもはるかにスムーズにできた。目に見えるレベルアップが嬉しいのはそれはそれとして、一喜一憂せず取り組んでいく。他の人の進捗を毎日見るたびに自分もまだまだやれると思わされる。明日Ninoさんがchat機能について時間をとって解説してくれると言ってくれたのでそこでchatについては一区切りつけたい。

5/13(水)
私用によりお休み。

5/14(木)
今日やること
・welcome画面レイアウト調整
・mypageのカードで表示される文字数のコントロール
やったこと
・welcome画面レイアウト調整
・mypageのカードで表示される文字数のコントロール
・SCHOOLS開発LIVE
聞くこと
・vscodeのカーソル移動
・mergeしていないブランチを削除してしまった時の対処
感想
文字数コントロールについてはcssで簡単にできることがわかった。ただうまくいかなかった原因としてインライン要素に” text-overflow ”をあてる必要があった。なので今回の場合は<div>にではなく、p要素に指定してあげることで解決。SCHOOLS開発LIVEを見ていて自分のプロジェクトでも使える要素がとてもあって参考になりそうだなと感じた。実際の開発を見れることは本当に貴重だと思う。繰り返し見ているうちに頻繁に出てくるFormの使い方だったりは、だいぶ慣れてきてNinoさんが手を動かすよりも早く頭の中で次はこれをインポートするんだよなという風にイメージできるようになってきた。こういった考えができるようになってくるといざ自分で開発する時も再現性が高まると思う。

5/15(金)
今日やること
・チャットbot機能実装 10::00〜キャンセル
・質問タイム 14:00〜
・チャットフォームのエラーハンドリング、細かいスタイル調整
やったこと
・チャットフォームのエラーハンドリング、細かいスタイル調整
・フリー質問タイム
感想
フリー質問タイムを開催してくれてチャット機能の実装について質問した。チャットの見た目を整える細かいテクニックみたいなものは数多くあるのだろうけど、本質的に必要な機能を考えるとそこまで難しいものではないのかなと思った。やっていることはCRUDに枝葉がついた程度で、難しいのは期待する実装をする時にどのパーツを使って組み立てるかという部分だと思う。チャット機能に関して言えばメッセージの発言はfirestoreにsetするというシンプルなものだけど、lastAccessのプロパティを持たせたりbotの発言を返すタイミングを制御したりそこに必要なロードマップを組み立てるアイデアは経験からくるものが多いのでそこは膨大なインプットをしていって慣れるしかないのだと思う。
・promiseに関して色々な記事を読んだけどいまいち実際のプロジェクトの使用例として分からなかったので聞いてみた。基本的にはサーバー通信を行う際に使うもので、処理A,B,Cが順番にあった場合に処理BでAで取得した値を使いたいときに処理Aに対してpromiseを使う。変数にawiatを使った時にはその変数がある関数にasyncをつける必要がある。
・FireStoreのコレクションに対してvalueChanges()で値を取得した場合には値は配列で帰ってくる。
・formのエラーハンドリングを扱うときにFormControlというModuleを使ったのだけど、get textControl() {}のような書き方をしていてこのgetってなんだろうと気になった。これはゲッターと呼ばれるものでセッターとセットで説明されることが多い。プロパティをメソッド内で扱うときに、クラス外からプロパティを参照する場合メソッドを変数のように扱うことができるようになる。
・日付を扱う時は、moment.jsというライブラリを参考にするといいかも。
・すでに作成したファイルの名前を変更する時基本的には手動で一つ一つ変更するが、変更したい部分を選択して shift + ⌘ + H を押すとvscodeでは紐づいたファイル名を一括で変更してくれるのでやってみる。
・toPromise()はsubscribeする代わりにObservableで受け取る値をpromiseとして扱うことができる。