# 今日やったこと
■ Reactマスター
　└10. Reactアプリ開発 : タスク詳細ページ作成

- /tasks/:idのルーティングとタスク詳細ページを作成
- URLのタスクIDを使ってモックデータから該当タスクを取得・表示
- ステータスのラベルと優先度のスタイルを決める関数を共通化
- 画面が真っ白になるエラーを調査・修正(前回のTaskと全く同じ種類のエラーだった)

# 今日理解できたこと
- /tasks/:idの:idはURLごとに変わる値で、useParamsを使って取得できる
- 取得したIDをgetTaskByIdに渡し、見つかったタスクをstateに保存すると詳細画面に反映される
- IDやタスクは取得できない場合もあるため、TypeScriptの型と存在チェックを使って扱う
- TaskDetailContainerがデータ取得とstate管理を担当し、TaskDetailがpropsで受け取ったデータを表示する
- getPriorityClassとgetStatusLabelを共通関数に切り出すと、一覧と詳細で同じ処理を再利用できる
- Priorityは実行時に存在する値ではなくTypeScriptの型なので、import typeで読み込む

# まだ理解できていないこと
流れは終えているが、型の設定やコンポーネント分割を自力で１から組み立てるのはまだ難しい。
教材に載ったコードが「ファイル全文」なのか「変更箇所の抜粋」なのかすぐに見分けられない

# 次にやること
■ Reactマスター
　└11. Reactアプリ開発 : タスク作成機能

# 感想など
TaskDetail.tsxの掲載コードを全文だと思って書き換え、必要な部分まで消し去ってしまった。コマンドですぐ戻してゆっくり確認して正しい箇所のみ対応した。
これまでのチャプターにあった「（省略）」などの目印が突然なくなるとは思わず…（泣）
閉じタグだけでなく、元の画面の機能がちゃんと残るかも確認しますちゃんと😐

修正後、また画面が真っ白だったけど、前回同様Console確認→priority.tsで型のPriorityを通常の値としてimportしてることでのエラーだったから、import typeへ変更して解消できた
型のimportはtype。型のimportはtype。型のimportはtype