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

- タスク一覧ページと`/tasks`のルーティング作成
- タスクデータの型定義
- モックデータの作成
- タスク一覧データを取得する関数の作成
- Container／Presentationalパターンによるコンポーネント分割
- useState・useEffectを使ったデータ取得と状態管理
- CSS Modulesによるタスク一覧・タスクカードの装飾
- TypeScript・CSS Modulesに関するエラーの調査と修正


# 今日理解できたこと
タスク一覧は以下の流れで画面に表示される

```
mockTasks
↓
getTasksで取得
↓
useEffectで初回表示時に実行
↓
setTasksでstateに保存
↓
tasks.mapで1件ずつ取り出す
↓
TaskCardへpropsで渡して表示
```

- useState<Task[]>([])➡️Task型のデータだけを格納できる配列のstateを定義してる
- useEffect(..., [])➡️コンポーネントの初回表示後にgetTasksを実行
- 取得したデータをsetTasksでstateに保存→再レンダリングされて一覧に反映される
- tasks.mapを使って、複数のタスクからTaskCardを繰り返し生成できる
- <TaskCard key={task.id} task={task} / >➡️各タスクをpropsとしてTaskCardへ渡している
- keyには各要素を識別できる一意なidを指定する

**TypeScriptの型定義**
- Task型によってタスクが持つプロパティと各データの型を定義できる
- Priorityを"high" | "medium" | "low"というリテラル型にすると、それ以外の値が入ることを防げる
- mockTasks: Task[]とすることで、モックデータの構造も型チェックできる
- Promise<Task[]>は、非同期処理の結果としてTask型の配列を返すことを表す
- dueDate・createdAt・updatedAtは、今回は文字列として扱っている
- ビルド成功＝ブラウザでも正常に動くとは限らない

**CSS Modulesと表示の切り替え**
- CSS Modulesでは、styles.containerのようにクラスを指定する
- クラス名の影響範囲が限定されるため、ほかのコンポーネントとの名前衝突を防げる
- 三項演算子を利用すると、タスクの状態に応じてクラスや表示内容を変更できる
- getPriorityClassは優先度に応じたクラスを返す
- getStatusLabelはstatusの真偽値に応じて「完了」「未完了」を返す

# まだ理解できていないこと
- 各ファイルの役割とデータが表示される大まかな流れは理解できたが、何もを見ずに 型定義・非同期処理・state管理・コンポーネント分割を一から組み立てることはできない。

- TypeScriptの型情報がJavaScriptへの変換時にどう削除されるかとか、tsconfig.app.jsonの各設定がViteの処理にどう影響するかとかが、まだ十分に理解できていない。

# 次にやること
■ Reactマスター
　└ タスク詳細ページの作成

# 感想など
途中で画面が真っ白になって、カリキュラム内の「画面が真っ白で何も表示されない場合」の対応をとってもエラーが解消できなかったので、こちらの頭も真っ白になった。

```
モジュール '../styles/TaskListContainer.module.css'
またはそれに対応する型宣言が見つかりません
```

- ファイルの配置とimportパスを確認➡️問題なし
- tsconfig.app.jsonに "types": ["vite/client"]追加しViteの型定義を読み込み
- エラー出ていたのがなくなってビルドは成功したけど、ブラウザは真っ白な画面のまま
- Consoleを確認➡️TaskやPriorityを実行時の値として読み込もうとしているエラー
- カリキュラムに記載されてた対応だけでは解消しなかったため型のimportだと明示するように変更

⭐️**TaskとPriorityはTypeScriptの型で、JavaScriptへの変換後には存在しない**
⭐️**そのため、import typeを使って型チェック専用のimportであると明示する必要があった**

予定外のエラーは焦るけど、verbatimModuleSyntax: falseにするより、`import type`と明示する方が、**「これは型である」というコードの意図も分かりやすく、設定にも依存しにくい対応** という学びもえられてよかった^^