2024/10/25 【学習記録】アウトプット・ポートフォリオ進行状況
学んだこと（復習も含める）
async と await：非同期処理。時間のかかる処理を後回しにして、他の処理を先に進めることができる。
async
関数を定義するときに、asyncキーワードを使うと、その関数が非同期処理であると示すことができる。
await
awaitキーワードを使用することで、非同期処理の結果を同期処理のように受け取ることができる。
interface：TypeScriptでオブジェクトの型を定義するために使われる
オブジェクトが持つべきプロパティの型を指定する。
オブジェクトの意図を理解しやすくなって、コードの保守性と可読性が上がる。
型チェックを通して、コードの安全性が上がる。
データを取得する前にstateを用意する理由
データを受け取る準備をするため。
もし、stateを用意せずにデータを受け取ると、
データの保存先がないため、エラーを起こす
データが適切に処理されずに、予期しない結果を起こす。
もし、stateを用意すると、
データを取得した時点で、すぐにstateに保管できる
データを安全に管理できる
stateの変化に応じて、プログラムの表示や動作を変更できる。
useEffect：Reactで「副作用」を実行するためのフック
「副作用」とは？
Reactは、webサイトやアプリの画面に表示するのがメイン。
副作用とは、
データの取得（API通信など）
タイマーの設定
などの処理が必要になることもある。
画面に表示する以外の処理を「副作用」という。
useEffectを使うと…
画面の表示後や、特定のデータが変更したタイミングで、副作用を実行できる（useEffectの第2引数に指定する値によって処理をするタイミングを制御できる）
副作用をコンポーネントから切り離して、コードを整理できる
try { ... }：JavaScriptのエラー処理に使われる一部の構文で、エラーが発生する可能性のあるコードを実効する部分を囲む。（データの取得などには、エラーが発生する場合がある。）
catch (err) { ... } :エラーが発生した場合の処理を記述する。
mapとforEach：どちらもJavaScriptの配列のメソッド。配列の各要素に対して処理を行うために使用される。
map
元の配列の各要素に対して、指定した関数を適用して、その結果を新しい配列として作成する。
元の配列は変更されない。
戻り値は、新しい配列を返す。
forEach
元の配列の各要素に対して、指定した関数を適用する。
戻り値は、undefinedを返す。
ポートフォリオの進行状況
フッターのレイアウトを作成
カレンダーナビゲーションの実装（TailwindUiライブラリを使用）
「<」「>」ボタンで次月と前月の切り替えを実装（TailwindUiライブラリを使用）
Firebaseのセットアップ
FireStoreにデータを登録、型定義をする
データを取得するためのstateを用意する
FireStoreからデータを取得する（途中）
ホーム画面のレイアウトを7割でも進めたかったけど、FireStoreからデータを取得するのに時間がかかってしまいました😅
ただ、JavaScriptの復習もできたから、前よりは理解が深まっている！！
明日は用があるから作業時間はいつもより短くなるけど、できる時間はがんばって進めます！