CAMP日記 第9, 10週

6/8(月)
今日やること
・プロフィール編集ボタン → ダイアログオープン
・ダイアログで入力した情報を保存し表示する
やったこと
・プロフィール編集ボタン → ダイアログオープン
聞くこと
・tagの値の取り方
感想
今日のmtgで他の方のプロジェクトのデバッグを振られ時間はかかったけど何とか答えることができた。サブコレクションを取得するメソッドが対象で返ってくる値の型がリストになっていなかったり、引数として渡されたものを使っていなかったり、サブコレを取得したいのにthis.db.docになっていたりといくつかのポイントがあった。引数をメソッドの処理の中で使用していない点などは言われてみれば当たり前におかしいけど、その当たり前のことをパッとわかるまでにしないといけないなと思った。とは言え以前の型が大事という教訓から、まず返ってくる値と定義している型は整合性があるかを確認してそこから解決の糸口をつかめたのは成長していると言っていいと思う。人のコードを読むことはとても難しいことだけど、今のうちからこうやって慣れていけば少しずつ読めるようになってくると思うし、自分のコードも他の人に読まれることを意識しながらわかりやすいコードを心がける。

6/9 (火)
今日やること
・ダイアログのchipsのスタイル調整
・form入力データをデータのpostする
やったこと
・chipsについての5/18のmtgアーカイブ確認
・ダイアログのchipsのスタイル調整
感想
mtgで自分が立てたissueについて残りの日数と照らし合わせて相談させていただいた。自分では必要なissueを列挙したつもりだったけどバッファの考え方だったりするべきことはまだまだ多いなと思った。ただきちんとこなしていけば確実に成果物として完成させることはできるので、変わらず続けていくしかない。mat-form-fieldタグの中でinputやtextareaなどの入力欄を使う時は必ずmatInputを入れてあげる。もちろんModuleのimportも忘れずに。今日はなぜかmatInputのmを大文字にしていて挙動がおかしかった。こういうミスはありがちなんだけどもったいない。次にやる作業としてはプロフィール編集のダイアログで受け取った値をuserインターフェースのドキュメントに追加してあげるもので、targets配列に入力されたテキストをpushしてupdateメソッドを使ってuserに保存する方針でいいのかと思う。

6/10 (水)
今日やること
・tagのデータをfirestoreにpostする
・bioで入力されたデータをfirestoreにpostする
やったこと
・利用規約画面実装
・tagのデータをfirestoreにpostする
・bioで入力されたデータをfirestoreにpostする
感想
ダイアログで編集したデータをdbに保存して画面に表示するところまで実装することができた。userインターフェースにbioとtagsを追加して”?”をつけることで最初にユーザーデータが保存されるときに必須項目から外してあげることでうまくいった。chipsのinputを使う時は自分で配列にpushする処理を書いていたけど、すでにひな形に存在するaddメソッドでその処理は完了していたのでそもそも二回追加する形になっていて、dbの保存がダブってしまっていた。やっぱりmaterialのひな形をあまり細かくチェックしないまま使うのはよくないと思った。参加者のデバッグを最近協力してやっていて、かなり進んでいる方たちはここでswitchMapを使おうとかここはcombineLatestだよねと瞬時に判断している。その見え方が自分にはまだできていなくて、早くその世界に行きたい。そのためにも今扱っているデータはどんな型で最終的にどういう状態に持って行きたいのかを常に考える必要があるなと改めて痛感する。

6/11(木)
今日やること
・アカウント設定タブでどのような処理をするか(退会処理など)
・mypage画面のタブでURLで遷移させる
やったこと
・入力データをプロフィール画面に表示(saitoさんヘルプにより)
感想
今日は体調がすこぶる良くなくてできることをのんびりやっていた。とりあえずmypageタブの実装としてはURL遷移と入力したデータを表示することができたので一区切りついて、あとは設定タブの退会処理やクレジット情報などはどうしようか考えどころである。chipsの部分にタグのmatIconを入れたくて、でもtagやchiosで検索しても出てこないから目視で一つずつ確認していくと”local_offer”という名前で存在した。なんじゃそりゃ。MatIconのfilledやOulinedの切り替えは、index.htmlで定義されているmatIconに使いたいoutulinedのような文字列を追加し、html側の使いたい箇所でfontset属性で指定してあげると使えるようになる。

6/12(金)
今日やること
・search画面に着手
やったこと
・search画面のマークアップ
・Algoliaキャッチアップ
聞くこと
・matタグの要素を中央揃えにする方法
感想
search画面に着手した。検索のinputと表示させるユーザーのコンポーネントを一旦表示させるところまではできた。ここからAlgoliaの知識が必要になってくるのでそのキャッチアップをcampの動画を見ながらしていく。今日思ったのは回り回ってCSSってかなり難しいなということで、例えば要素を横方向に中央揃えにしたいときにtext-align: center;かmargin: 0 auto;を使おうかと選択肢がいくつか存在すると思うけど、それらの使い分けが分かっていなかった。まずマークアップにおいて扱いたい要素がインラインなのかブロックなのかを意識する。選択肢①: 中央に揃えたい要素がインラインならば、text-align: center;を使う。②: ブロック要素の場合、margin: auto;を使う。③: display: flex; と justify-content: center; を組み合わせて強制的に子要素をブロック的に扱って揃える。どの要素がインラインorブロックかはdevツールでカーソルを当てることで確認することができるので、今この要素はどっちなのかをマークアップをするときは意識してみることにする。この基本的な考え方に<mat>のタグが加わってくるとだいぶクセが出てくるので、<mat>を<div>などで囲ってmaterialの影響を受けないようにスタイルを当てていくのもポイントになってくると思う。

6/15(月)
今日やること
・algoliaの導入
やったこと
・algoliaの導入
聞くこと
・function.tsで使う、firestore.document(‘users/{id}’)のidってどこかで定義されているもの？(1)
・algolia.tsは自作する必要があるのか。(2)
感想
user.function.tsを作成していてfirestoreにデータが追加、更新、削除されたタイミングでalgoliaにデータを保存する処理を書いたけど、indiceを見るとなぜかrecordが入っていなかった。でもなんのことはなくfunctionはdeployしないと走らないことを忘れていて、functionがおかしいときはfirebaseのログを見て処理が走っているかを確認する。あとはindex.tsで作成したfunctionをexportする。(1)onCreate()のスコープの中でdocumentに対して処理させたい場合はidという変数を使って処理させることができる。idでなくてもなんでも大丈夫。constとかで定義する必要はない。(2)処理は動くけどalgolia.tsを実際に自分で作れるかというと微妙なのでそこのところを聞いてみたところ、実際に現場に入って僕たちがそのファイルを作る場面はあまりないらしく、通常であればリードエンジニアの方がalgoliaを使える状態にしておいているらしい。ただ新規にプロジェクトを作る場合などは自分で手を挙げればその作成に携わることはできるとのこと。今の段階ではalgolia.tsがどんな処理をしているのか理解するために、処理ごとにコメントをしていってもいいかもしれないとアドバイスをいただいた。

6/16(火)
今日やること
・タグ絞り込みでuserを検索できるようにする
・入力したタグで検索できるようにする
やったこと
・タグ絞り込みでuserを検索できるようにする
聞くこと
・selectedTags()の処理について
・paramMapとqueryParamMapの違い
・patchValue
感想
今日のmtgではcombineLatestの相互デバッグにトライしてみた。RxJSがどれだけ分かっているかを確認したかったけど自分のプロジェクトでは直近で使うがタイミングがなかったのでいい機会だった。結果としては解決に導くことはできなくて本当に悔しかった。テーマが難しかったのは差し置いても最後のNinoさんの解説を聞いて他の参加者の中には「ああ、なるほど！」と腑に落ちていた方もいたけど、自分はそのレベルにすらいないことが本当に悔しかった。類似問題のようなものをNinoさんからいただいて今日はそれが終わるまで寝れないと思い必死に終わらせた。やっていて感じたのは最終的にどういった形でデータを使いたいのかを明確にすること、型をいちいち書くことがキーになってくると思う。あとはcombineLatestは複数のObservableを一つにまとめるもので、解説図のレールが二つだったので二つと決めうちにしないのは注意して、今回の場合は三つの値をまとめる処理だった。combineLatestでまとめたものを受け取る時は引数に順番にその要素の数だけ入ってくる。少しずつではあるけど確実に理解は進んでいるのでめげずにやっていくしかない。明日の朝一でcampの教材のRxJSの課題をやってもう一度確認する。

6/17(水)
今日やること
・RxJSの教材の課題
・Angularにおけるフォームの確認 (FormBuilderとFormControl)
・searchComponent内の処理を自力で理解する。 (searchForFacetValuesなど)
やったこと
・RxJSの課題
・listの(selectionChange)においてのeventの受け渡し
感想
今日はドキュメントを読み漁る時間が多かった。inputで入力された値をもとにタグの絞り込みをする実装で、searchForFacetValuesの第二引数にinputデータをfacetQueryとして入れてあげる必要があることがAlgoliaのドキュメントから分かり、ではinputで入力された値をどう取得するかをformのドキュメントでsubscribe()で取れそうだと確認し、やってみるもcontrolの値に代入してしまっていて正常に動かなかった。時間はかかったけどあと一歩のところまで来ていたのではないか。ドキュメントを読む力が少しついた気がする。教材なりstackoverflowなりこういう書き方があるというのをただコピペするだけではなんの学びにもならなくて、それがどういう働きをするのかをドキュメントで調べていくとだんだんと分かってきて自分のstackになっていくと信じてやっていこう。明日はURL駆動を完成させる。

6/18(木)
今日やること
・URL駆動
やったこと
・URL駆動
感想
今日は目標通りユーザー検索におけるURL駆動を実装できた。Algolia周りとURLの処理に関してのキャッチアップに時間がかかったけど、タグ絞り込みまでできたのはよかったと思う。今回で初めてクエリーパラメータを使ったのだけど、ルート周りの理解がまだ浅いなと感じた。ルートパラメータはcontentページに遷移する際に実装していたけど、そもそもクエリーパラメータとの区別も明確についていなかったので今一度確認しようと思う。個人的にはqueryParaMapとparamMapが似ていてどっちがどっちだか紛らわしく感じる時がある。ユーザー検索は挙動としては正常だと思うのだけど、現状ユーザーが自分一人の状態なのでダミーのユーザーを作ってその場合の挙動も確認したい。明日は無限スクロールに取り掛かる。

6/19(金)
今日やること
・ルートの知識を整理し、昨日のmtgのデバッグでやったことを確認する。
・timelien画面における無限スクロールのキャッチアップ + 実装
やったこと
・ルートの知識を整理し、昨日のmtgのデバッグでやったことを確認する。
・ngx-infinite-scrollのインストール
感想
無限スクロールのonScroll()メソッドの処理が分からなくてどう分からないかと言うと、page, maxPage, loadingなどスクロールを制御するために必要なプロパティの洗い出しとなぜそれらが必要になってくるのかが分からない。例えばpageについてはsearch indexで検索したデータに保持されている値と言うところまでは分かったけど、なぜそれを使うのかが分からない。そういった場合にはそれがなかったときにどう言う挙動になるのかを見るのも一つの手なのかもしれない。JSのレーティング力もまだまだだなと感じる。自分で書くことが力をつける唯一で最適な近道だと思うのだけど、もう少しスムーズに読めるようになりたいな。javascriptのふりがなみたいな本もあった気がしてけど、ぱらっと見てみるとちょっとは違うのかなとも思う。