CAMP日記 第6週

5/18(月)
今日やること
・チャット機能実装
やったこと
・チャット機能設計修正
感想
チャット昨日の設計として前回チャット画面を開いたときの差分をとって一日以上開いていたらbotの発言を差し込むという方針にしようとしていたけど、普段自分が書いているときに一日以上必ず空いているかと言えばそうではないので、これだと使いづらいかなと感じた。なのでUIをまず変更して、今日やることなどのボタンを作りそれを押してチャットの画面を切り替えることにした。今日することボタンに例えば処理Aというパラメータを持たせてそれがクリックされると、html側では*ngIfで処理Aがtrueの内容を表示させるという実装をしたい。

5/20(水)
今日やること
・チャット機能の実装
やったこと
・チャットボタンの作成
・ボタンに紐付けるメソッドの実装
聞くこと
・input欄とボタンの位置の固定
・実装したいものについてどのようなフローで考えていけばいいのか。今日の場合だと、ボタンを押すとそれに応じたチャット画面が表示されるという実装をしたいときに、(1)ボタンをクリックするとメソッドが走る。 (2)html側で*ngIfを使って表示を切り替える というのはなんとなくイメージできるがhtml側から考えるのか、どのように実装していけばいいのか。
感想
実装を完成させるまでの自分の引き出しが少ない。期待する実装をするためにどんな手順をいくつ踏めばいいのかが分からない。まずは見た目のところからとりあえずやってみるというのは分かるのだけど、メソッドにどういう処理を書けばいいのだろうといつも止まってしまう。コンポーネントの基本を思い出してHTMLやコンポーネントで使う値をプロパティとして持たせるという意識がなかった。今回の場合chatTypeの値によって表示を変えたいのならばまずchatTypeをプロパティとして定義する必要がある。次にその値を使ってhtml側で条件を分けて表示をさせるという段階に行ける。じゃあそこでどういう書き方をすればいいのかはググるなりして調べていく。こうやって一つずつやっていくしかない。のは分かっているのだけど、、。

5/21(木)
今日やること
・＠output, ngSwitchについてドキュメント確認
・ボタンによるbotTypeの切り替え
・botTypeによって表示させるテキストを区別
やったこと
・＠output, ngSwitchについてドキュメント確認
・ボタンによるbotTypeの切り替え
聞くこと
・@outputで親コンポーネントに渡したデータをserviceを介して兄弟コンポーネントに渡す方法(1)
・git reset —hard コミットid は大丈夫？(2)
感想
(1)子コンポーネントのデータを親コンポーネントだけに渡すのなら@outputでokだけど他のコンポーネントにも渡したい場合にはserviceを介すようにする。苦し紛れにserviceでchatComponentをインポートしたけどコンポーネントを他の箇所でインポートするのは基本NG。(2)コミット状態を管理するには拡張機能で入れたgitlensで行うと分かりやすい。コミットログを右クリック → switch to commitでそのコミットの状態に移動。pushする場合には注意が必要で、git pufh -f でプッシュする。チャット機能は使いづらいのではないかと実装するにつれ思う。もっとシンプルでマテリアルなUIがいい。vscodeで赤波線で怒られているとき” shadow~~ ”が表示されるときは変数名などが重複しているという意味になる。htmlで値が表示されないときに<pre> { xxx | json } </pre> をファイルの一番上などに書くとそのデータがjson形式でブラウザに表示されるのでデバッグの際に使ってみるとよし。

5/22(金)
今日やること
・企画練り直し
やったこと
・企画練り直し
・リポジトリ作成、開発準備のための各種設定, インポート
感想
ミニマムに出したい気持ちが強く今のチャットボットの設計だと少し複雑すぎた。学習を記録して投稿するという最小限のコアな機能だけをつけて形にするために一旦プロジェクトを作り直すことにした。プロジェクトとしては０ベースだけど今まで得た知識は共通するものなので爆速で実装していく。
最初はメモを記録して投稿できるというメインの最小限の機能を実装したい。つみあげという名前があるのだから連続強化の一つとして何かブロックや積み木のようなグラフィックを記録数に応じてつけてもいいかもしれない。マークアップの際に「シングルクラスの鉄則」を意識する必要がある。<mat>タグには元々クラス名がついているのでそこにクラスをつけたりはしない。さらに<mat>タグは基本的にcssを当てることはせずに使うもので、例えばmat-iconの大きさを変更したい場合にはmat-iconを使わず自分でスクラッチすべき。@inputで受け取った値を加工するときはngOnInit() {} の中で扱う必要がある。よく見かけるdoc<型>やcollection<型>という書き方はそのあとに続くset, updateなどに入ってくる型を示すもの。