5/25(月)
今日やること
・コンフリクト対応
・ヘッダー、フッター作成
・sidenav実装
やったこと
・コンフリクト対応
・ヘッダー、フッター作成
・sidenav実装
・ログイン処理のインプット
感想
初めてコンフリクトが起きて競合解決の対応をした。git pullをしてもリモートのmasterが反映されず、mergeをすることでmasterが反映されて修正することができた。いつか競合解決は一度経験しておきたいと思っていたけど、気をつけている手前なかなかコンフリクトが起きなかったけど、今回流一連のれを抑えられたのは良かった。フラットな状態から再びプロジェクトを作ることになった訳だけど、実装スピードが前回よりも比較にならないくらい早くできて身についている感覚があって嬉しかった。回数を重ねた分だけ再現度もスピードも上がるのだろう。mtgでとある参加者のデバッグをみんなで考えようという時間があって、自分もなんとかコードを見てみたけれどスッと解決方法が出てこなかった。数人の方たちはこれはこうしたらいいんじゃないかと声を上げていて自分はまだそのレベルに至っていないのだと少し悔しかった。現場に入ってまずやることは先輩の作ったコードを読むことらしい。確かにeにいた時もそうだった。他の人のコードを読むのは難しいけれど、細かいRxJSとかは抜きにしてこの変数にはこんな値が入っていてこのメソッドではこの型を返しているくらいの読み取りはできるようにしたい。campは他の参加者のコードも公開しているから見てみようと思う。分割代入を使っている方がいて実際に書いている場面に初めて遭遇した。あまり分かっていないのでやめ太郎さんのQiitaを読んでみたけどとても分かりやすかった。使って初めて自分のものにできるので使える場面があれば積極的に使っていこう。

5/26(火)
今日やること
・認証機能の実装
やったこと
・firebaseでtwitter認証の有効化
・GithubActionによる自動デプロイ
聞くこと
・twitter機能申請
・npm i について
・auth.functionでfirestoreにセットした値を、serviceで参照する時にはfirestoreはどうなっている？
感想
今日は認証機能の実装をした。以前のプロジェクトの時はログイン機能が結構重たいので後回しにしていたので今回が初めて触れる範囲になる。確かにObservableを使ったりfirestoreの知識も使うけどやっぱり少し慣れていたせいかそこまで複雑な感じはしなかった。ただswitchMapをserviceで使うところとかは少し時間がかかったので色んな動画やら教材を確認する必要がある。今日はバック側が概ねできたので明日はフロントと細かい修正ができたらいいかなと思う。

5/27(水)
今日やること
・フロント側を作って認証を実行できるようにする
・twitterログインの有効化
やったこと
・フロント側を作って認証を実行できるようにする
・twitterログインの有効化
感想
Htmlで*ngIfタグのelseでIDを指定するときに他のメソッドなどと名前がかぶらないようにする。今回 else login としていたことでlogin()メソッドど同じ名前になっていたことでエラーが出てしまっていた。functionをdeployがこけているけど概ね認証はできたのかなと思う。functionのimportの書き方をしっかり押さえておきたい。認証のPRを出している間に最近mtgでやっているマークアップの部分をアーカイブで見直してみる。

5/28(木)
今日やること
・noteページのcomponent作成
やったこと
・noteページのcomponentでフォーム作成
・ログイン情報をヘッダーに表示
聞くこと
・index.tsの内容確認 (1)
感想
今日はフォームを使うnoteページを実装し終わらせることができた。以前に一度やったことがあることがこれほど実装を楽にしてくれるのかと驚きを隠せない。Formを使うには何をインポートする必要があるのか、エラーハンドリングはどうするのか、確かtextareaには自動で高さを調節してくれるオプションがあったなと以前のプロジェクトと共通するものはスムーズに進めることができた。またauthServiceのメソッドでreturnをするのを忘れていてエラーが出ていたけど、stackoverflowを読んで自力で解決できたのも成長と言える。たまたまかもしれないけど。とは言えまだまだ教材など見つつやっているので頭の中でもっとスムーズに手順を押さえられるようにしよう。(1) functionファイルの扱い方がいまいち分かっていなくて質問した。ファイルの先頭でimportしたりinitializeしたり何をやっているのかと思ったけど、util.tsというファイルに分割しそれを各functionで読み込み、index.tsでexportするのがベストプラクティスだとわかった。(言葉で書くと複雑っぽく見えるけどファイルを見るとわかりやすい。)またfunctionに関して、createUserで認証データをfirestoreにセットするときにどうやってUserインターフェースと整合性を取るのかわからなくてfunctionファイルでインターフェースを作るしかないのかなと思っていたけど、アプリのルートにinterfacesディレクトリを作るのではなく、functions/src/interfacesに作成するとfunctionからAngularのインターフェースを参照することができる。これは覚えておきたい。

5/29(金)
今日やること
・完了ボタンを押すとfirestoreにデータを保存する処理
・formエラーハンドリング修正
やったこと
・完了ボタンを押すとfirestoreにデータを保存する処理
聞くこと
・authServiceにどうやってuidをもたせるか
感想
Firestoreにデータを追加するのは以前にやったのでできると思っていたけど、ユーザーのデータを持たせた状態で追加するということが難しかった。やることとしてはauth.serviceにuidを持たせそのuidを各コンポーネントで参照するのだけど、Authenticationのデータがくる→authServiceでuidをセット→コンポーネントでuidを取得という順番になるらしいがそれができていなかった。処理がされる順序を意識して整合性が取れるようなコードにする必要があって、その点はこれまで意識することがなかったのでいいポイントになると思う。マークアップのfreeeの中でpositionについて質問している方がいて、まさしく自分も聞きたいところだった。absolluteをかける要素の起点となるものにrelativeをつけるということらしいけど、こればっかりは自分でやってみないとわからないのでやってみることにする。

6/2(火)
今日やること
・authのデータ処理の順序確認
・guardをかける
やったこと
・firestoreへのテキストデータ保存処理
・authGuardの実装
聞くこと
・auth.service.tsでデータが読み込まれる順番
感想
Timelineコンポーネントでfirestoreからのデータを受け取り表示させる実装をした。概ねスムーズに実装できたものの、textデータの表示が手こずってしまった。noteインターフェースが持つauthorIdやcreatedAtと違ってtextプロパティだけ一つ階層が深い構造になっているので、その部分のhtml側での表示の方法が分からなかった。mtgではissueの立て方について教えていただき、まだまだissue一つとっても改善の余地があった。全体マップというissueを立ててそれを見れば全体のページ構成やページごとのissueの振り分けが見通せるというものである。そしてissueごとに時間の工数を大まかに設定して、あとどれくらいで完成できるかを掴む。この見積もりは最初はやっぱり難しくてなかなか予定通りにはいかないけど、やっていくうちに自分の実力なども分かってくるから正確にできるようにしていきたい。

6/3(水)
今日やること
・textデータをhtml側で表示できるようにする
・timelineのカードをaタグにしてクリックすると詳細ページに遷移できるようにする
やったこと
・フォーム送信時にsnackBarとRouterの処理を追加
聞くこと
・ネストされたデータ構造の値のとりかた
・データが読み込まれる順番
感想
Serviceで例えばsnackBarを使いたいときなどはAPIをapp.module.tsでインポートする必要がある。その上でservice内のconstructorの引数で使えるようにする。オブジェクトになっているtextデータをどうしてもhtml側で表示できなくてtodoなどそれぞれフラットに持たせることにしたけど、データ構造としてはオブジェクトの方が美しい。しかもninoさんが言うには本来であればドット参照でデータは取れるらしいので、そこはインターフェースを戻して確認したい。idによってページを遷移させる処理については想定していたよりもスムーズに実装することができた。issueに想定工数時間のラベルを振り分けることで、この作業はどれくらいでやる必要があるのかを意識するようになった。今までは開発の中に学習の要素がかなり入っていて時間がかかっていたけど、ある程度できることが増えてきた今の段階では自分の実力と想定時間に乖離がないようになるべく進めていく。

6/4(木)
今日やること
・mypage画面作成
・データが読み込まれる順序について整理 → 過去のissueなどから具体例で考える (*ngIfの使いどきは？)
・textデータをオブジェクトとして持たせた時のデータの取り方 → issue #283
やったこと
・mypage画面実装
・データが読み込まれる順序について整理 → 過去のissueなどから具体例で考える (*ngIfの使いどきは？)
感想
Ninoさんに質問してとてもスッキリした。どのファイルがどの段階で読み込まれるかが分かっていなかった。例えばコンポーネントからサービスの値を使う際にconstructorの引数でインジェクトして初めてサービスが読み込まれる。読み込まれたサービスで値がセットされる前にコンポーネントでその値を参照していたから例のエラーが何度も出てしまっていた。ではサービスの値がセットされていることをどう担保するのかというと、auth.serviceを例にとるとガードをかけることが挙げられる。auth.guardはuserの値がないとブロックされてしまうので、コンポーネントが読み込まれるということはガードを通った、すなわちユーザーが存在することが保証される。よってコンポーネント側でサービスの値も使えるようになる。じゃあこれを踏まえて以前に出たエラーの部分を解消する作業を次のtodoとしてやっていく。mtgでフォームの値を送信する際にユーザーの値を持たせたい方がエラーが出ていてそれのデバックに自分も参加した。やりたいこととしては自分も同じような処理をしていたのでこれは解決したいと思って頑張ってみんなの力もあってゴールできた。人のコードを読んで概要を理解するのは今後大事な力になってくると思うし、みんなで意見を出し合って解決するプロセスが純粋に楽しかった。

6/5(金)
今日やること
・authServiceを修正し、コンポーネントにガードをかけることでserviceの値を適切にcomponentで使えるようにする。
・mypage画面にユーザー情報とnote情報を表示させる
やったこと
・authServiceを修正し、コンポーネントにガードをかけることでserviceの値を適切にcomponentで使えるようにする。
・mypage画面にユーザー情報とnote情報を表示させる
・algoliaキャッチアップ
聞くこと
・[style.background-image] って結局何してるの？
感想
authServiceの値が存在することをガードをかけることで担保し、コンポーネント側で使えるようにすることが分かってmypage画面で表示させることができた。ユーザーにジャンルのタグデータを持たせて検索する機能をつけたいのでalgoliaの教材でキャッチアップしてみた。今日のmtgはRxJSのデバッグでとても複雑なものだった。正直序盤はついていけなくて、どうしてすぐにここでmapを使おうとかがわかるのだろうと不思議で、ただ大事なのは型を丁寧に書くことで今どんなデータの状態なのかを把握することだと思う。最終的にどんな値を返してあげたいのかを決め(例えばObservableでstringの配列など)そこに向かって答え合わせのようにデータを整えていく流れは押さえておきたい。何とかデバッグについて行きたかったけど理解が及んでいなくて悔しかった。でもNinoさんがポンと答えを出すのではなくてある程度知識も増えてきた今のメンバーでデバッグするのは楽しいし、人に説明できるレベルになっていれば自分の力としても申し分ないものになっていると思う。