CAMP日記 第11, 12週

6/22(月)
今日やること
・noteが追加されたタイミングでAlgoliaにデータを注入するfunctionsを作成
・無限スクロールのonScrollメソッドの理解と実装
・タグ絞り込みのデバッグ
やったこと
・noteが追加されたタイミングでAlgoliaにデータを注入するfunctionsを作成
・無限スクロールのonScrollメソッドの理解と実装
・タグ絞り込みのデバッグ
感想
Algoliaのsearch()の第二引数には単に配列ではなく、facet名: 値のように配列の要素がオブジェクトである必要があってこれが配列となっていたのでうまくタグ絞り込みができていなかった。ドキュメントの該当箇所が見つけられず時間がかかったけどAPI Referenceの方に書いてあってAlgoliaのドキュメントはそこを参照した方がまとまっていることが多いとのことだったので、次にドキュメントを見るときはそこも確認する。無限スクロールについてはonScrollの処理が何をすべきかを理解するのに時間がかかった。search()のresponseデータにはnbPagesというプロパティがあってこれが最大ページ数に該当するということらしい。Algoliaは検索結果がページという単位で分割されて返ってくることが分かっていなく苦労した。nbPagesで現在の検索条件における最大ページ数が取得して、その値が現在のページよりも大きければさらに読み込む必要があるのでその判定をIf文で行い追加処理をさせる。コード数で見ると対して多くはないけれど結構複雑な処理だなと感じる。慣れていこう。

6/23(火)
今日やること
・ユーザー検索の結果をuser-cardに表示させる
・user-cardをクリックすると各ユーザーのmypageに遷移させる
・ジャンルの表示
・mypageタブの切り替えで各ユーザーの情報を表示
やったこと
・ユーザー検索の結果をuser-cardに表示させる
・user-cardをクリックすると各ユーザーのmypageに遷移させる
・ジャンルの表示
感想
campの参加者の方が数人自分のプロジェクトにログインしてくださってユーザーが自分一人だった時とは挙動が違うことに気づいた。例えば自分ひとりの場合はユーザーに関するデータは自分のものだけを引っ張ってくればいいけど、ユーザーが増えるとそのユーザーに応じたデータを表示させなければいけないので大幅に修正した。当たり前のように思えるけどユーザーが複数いる場合を想定した実装ができていなかった。今日はまずsearch画面からマイページに遷移する際にクエリパラメータを持つURL駆動にし、各ユーザーのデータを表示できるようにした。URL駆動について先日まとめていたおかげで比較的スムーズに実装できたのではないかと思う。明日はタイムラインでも同じことが起こっているのでその点を修正する作業になるかと。

6/24(水)
今日やること
・jsの配列におけるfind, filterの確認
・タイムラインでユーザーとnoteの情報を合わせたプロパティを作成し、そのデータを表示できるようにする
やったこと
・jsの配列におけるfind, filterの確認
・タイムラインでユーザーとnoteの情報を合わせたプロパティを作成し、そのデータを表示できるようにする
・マークアップ動画でレスポンシブ対応の確認
・stripeのキャッチアップ
　感想
タイムラインでどのユーザーが投稿したかを判別するためにユーザーデータと投稿データを混ぜたものを作る必要があった。やっとcombineLatestを使う場面が来たと思いちょっと嬉しかった。mtgでの他の肩のデバッグと違い、データ構造やインターフェースが全部わかっている自分のプロジェクトで実装するのでその分理解度として一歩進んだ気がする。とはいえ調べながらというかかなり時間はかかったので今回の実装をいい経験として場数を踏んでいくしかないと思う。ユーザーが増えたことでmypage画面でプロフィール編集をできるのが本人しかできない実装にしなければいけないことに気づいたのでそこの修正と、こないだtwitteで見たモダンな画像を作れるサイトを見てホーム画面に使えそうか確認してみる。

6/25(木)
今日やること
・サイドメニューのアクティブクラス確認
・mypageでプロフィール編集ボタンの表示切り替え
やったこと
・サイドメニューのデフォルト表示
・細かいスタイル調整
感想
今日は私用であまり時間がとれなかったので、細かいスタイル調整をしていた。今見返すとスタイルが結構崩れていて、意図しない部分にアクティブクラスが当たっていたり動きとしては同じでも修正すべきところもあった。現状として誰でも他のユーザーのプロフィールを編集できるのでここは修正しなければいけない。その前にテストとして他のユーザーの情報を変更して見たのだけど、Firestoreには反映されているもののAlgoliaでは情報が更新されていなかったのでこれもクリティカルな点として直していく。

6/25(金)
今日やること
・mypageのプロフィール編集機能の修正
やったこと
・mypageのプロフィール編集機能の修正
感想
ユーザーが増えたときにauth.service.tsのuser＄にどういうデータが入ってくるのか分からなくなってスムーズに進めることができなかった。今まではユーザーが自分一人の状態しか想定していなくuser$にはログインしているかどうかの自分のデータが入ってくるイメージだったけど、じゃあユーザーが複数になった場合にはそこに他の人のユーザーデータがボコボコ入ってくるのかと言うとそうではないらしい。ログインに使用したブラウザの情報も含めuser$にデータが入るので、そのブラウザを使用したユーザー以外のデータが入ってくることはない。ちょっと難しくて正直完全に分かったとは言い難いけど今の時点ではこういう認識で実装を進めてみようと思う。あとはfirestoreのルール周りを抑えればこのブランチはPRを出せる。

6/29(月)
今日やること
・中央揃えについてのissueをclose
・ホーム画面設計
・404ページ作成
聞くこと
・buttonにmargin-topを指定できるのはどうして？
感想
ホーム画面を作っていてやはりマークアップは奥が深いなと感じる。今回で言えば中央寄せにしたい要素の特定とその方法までは到達できていたけど、水平方向にしたい要素の中をさらに垂直中央にしていて、その部分が作用しあってうまくいかなかった。ググり方の指標として、(1) 方法を調べる(インライン要素 中央揃えなど) (2) なぜ効かないのかを調べる。(text-align: center; 効かないなど) shellComponentを作った上で404ページのコンポーネントを表示できるようにしたいのだけど、ルーティングがうまくいかず明日はそこをみていく。buttonタグはインライン要素なのにどうして上部にmarginが指定できるのだろうと不思議に思っていた。MDNでbuttonタグがインライン要素であることも確認したし、左右の余白しかつけられないことも調べた上で。結果から言うとdev toolでbuttonにカーソルを当ててみてみるとインラインブロック要素になっていることがわかった。だから上部にmarginが当てられた。このタグはどの要素なのかをdev toolで確認する習慣をつけていくといいのかもしれない。

6/30(火)
今日やること
・issueの件でルーティングを設定し404ページを表示させる
やったこと
・zoomLong
・issueの件でルーティングを設定し404ページを表示させる
聞くこと
・body部分がサイドナビに潜り込んでしまう現象について
感想
404ページを作るのと同時にshellComponentも作成した。shellのhtmlにはヘッダーとフッターにrouter-outletが挟まれた状態で入っていてそのrouter-outletにapp.routingで設定したモジュールが入ってくるという世界観になってくる。最初はapp.htmlの中身をそのままshellのhtmlに移してしまい、これが原因でエラーが出てしまっていた。app.htmlには必ずrouter-outletを入れる必要があり、これがないとブラウザには何も表示されなくなってしまう。ヘッダーとフッターなどを含まない404ページなどはこのapp.htmlのrouter-outletに入ってくる。あとpathMatch: ‘full’; に関してはredirectToを使う場面では必ず設定し、それ以外では入れる必要はないとのことだった。ルーティング周りもshellが入ってきて少し曖昧になっていたけどこれでスッキリした。formの値を異なるコンポーネントで使いたい場合にどうするかという質問で、今までは当たり前のようにformに対応するコンポーネントでformControlを設定していたけど、これをseriviceに持たせつという発想はなかった。コンポーネント間のデータのやり取りにはserviceを使うことは頭にあったけど、実際の場面ではこういう使い方があったのかとハッとした。あとサイドナビにメイン要素が潜り込んでしまう現象に関してはmat-sidenavに幅を指定することで解決した。

7/1(水)
今日やること
・プロフィール編集のダイアログのフォームにデータを表示させる
やったこと
・プロフィール編集のダイアログのフォームにデータを表示させる
聞くこと
・formControlってhasError以外にどう使うの？ formBuilder, formControl, などの関係性がわからん
・ローカルのmasterブランチの挙動
感想
patchValueに引数にオブジェクトとして値を渡す発想がなかった。フォームのプロパティと一致させた変数を入れるだけだと思っていて、そこから変数の値を展開してあげればよかった。こういうところが発送できるかがまだできていないところだと思う。以前にも同様のミスがあったような覚えがある。Google Cloud SDKのインストールでとても手間取った。pathを通すとか久しぶりに聞いたし、半日粘ったけどエラー続きなので明日一からやり直すことにする。

7/2(木)
今日やること
・Google Cloud SDKのインストール
・content画面の作成
やったこと
・Google Cloud SDKのインストール
・content画面の作成
・フォームに離脱ガードをかける
感想
Google Cloud SDKのインストールでつまづいていて、新しくプロジェクトから作り直しログインアカウントを整合性を保つことに注意しながら教材に沿って進めたところ一応エラーは表示されなくなったけど、twitterカードでシミュレーションしたら画像が表示されなかったのでissueで聞いてみることにする。コンテンツページに関してはリッチな見た目にしたかったけど、一旦最低限の情報を持たせることに留めた。フォームの離脱ガードに関しては、app-routingにガードをかけるとエラーが出たけど、note-routingの方に適用すると正常に動いた。あとはauthガードも含めどのコンポーネントに適用させるかを考える。明日はレスポンシブ対応のissueをつぶしていく。

7/3(金)
今日やること
・ガードの設定
・レスポンシブ対応
やったこと
・ガードの設定
感想
レスポンシブ対応について、mixinsのファイルを作成して他のコンポーネントで使いたいときは@useか@importの選択肢があるようで、@useを使うと現段階ではエラーが出てしまったので@importを使うことで正常に動いた。ただ今後は@useが主流になっていくらしい。コンテンツの幅をpxなどで固定にする実装は実務においてほぼ無いらしい。自分は固定幅をいくつか使用していてその影響でダイアログのスマホ対応のところでつまづいてしまった。基本的な考え方としてmax-widthで最大幅を指定してあげてることを意識する。今日のmtgでfor文で取り出した要素のインデックスを使う場面で、*ngFor = “item of items; index as i” とすると取得できることがわかった。配列のindexをiとして扱うことができる。campも気づけば残り１ヶ月になり自分のプロジェクトも形になってきた段階で、今までやってきたことが本当に自分の力になっているのかを確認したいという気持ちがあった。そのタイミングでNinoさんから実務力テストの提案をいただいて、とても求めているもので嬉しいという一方で全然できなかったらどうしようという不安もあるけど、必ず自分のためになるので頑張って挑んでいこうと思う。