Module 03

ReactでUIを設計する

課題に進む → 学ぶことを確認
ゴールコンポーネント分割と状態管理を行い、UIをReactで組み上げる
必須スキルJSX / props / state / hooks / コンポーネント設計
納品物コード + 動作キャプチャ

✏️ 学ぶこと

React UIの基礎

基礎

  • JSXとコンポーネント分割
  • props / state / コンポジション
  • イベントとフォームハンドリング

Hooks

  • useState / useEffect
  • カスタムフックの切り出し
  • 依存配列と副作用の整理

設計・品質

  • コンポーネント設計指針（責務分割）
  • UIステートの種別

📝 課題：コンポーネント化されたカード一覧

React + Hooks

要件

  • プロフィールカードをコンポーネント化
  • propsでデータを受け渡し
  • フィルタ/ソートをステートで管理
  • 空データ時のプレースホルダー表示
JSX useState コンポーネント設計

必要ファイル

React UI (受講者用) 回答サンプル

🎯 完成イメージ / 制約

守るポイント

UI

  • PC 3列 / SP 1列
  • カード間に余白・影
  • ボタンのhover/activeを用意

実装

  • 関心ごと別にコンポーネント分割
  • 親→子はprops、子→親はイベントで通知
  • ステートの初期値・型を明示

品質

  • 不要な再レンダーを避ける（メモ化は任意）

✅ セルフチェック

提出前に確認

機能

  • データが正しくカードに表示される
  • フィルタ/ソートが反映される
  • 空・ローディング・エラーを出し分け

コード

  • コンポーネントが単一責務
  • propsの型・初期値が明確
  • 不要なconsole.logがない

理解

  • stateとpropsの違い
  • 再レンダーが起きるタイミング
  • キーが必要な理由

🆘 詰まったら

質問テンプレ付き

デバッグ手順

  1. Consoleに出たエラーを読む
  2. 最小の再現ケースを作る
  3. 依存配列やpropsが正しいか確認
  4. 公式ドキュメント/React.devを参照

質問するときに書くこと

  • やりたいこと
  • 現在の状況
  • エラー内容
  • 試したこと
  • わからない点

📚 参考

Docs & Tools
React 公式: Learn Thinking in React Udemy-React（v18）完全入門ガイド