Step5: フロントエンド2
このStepでは、フロントエンド講座の後半（スタイリング・データ取得とバックエンド連携・認証／セッション管理・CRUDアプリケーション）を学び、あわせて Step 4 で洗い出した画面のレイアウトとイベント設計を作成します。
1. 講座の履修
フロントエンド講座 の以下の章を実施してください。すでに同等の知識がある場合は、講座の履修はスキップしても構いません。
2. 課題の実施
2.1 目的・背景
Step 4 で作成した画面一覧・遷移図に沿って、各画面のレイアウトと、画面上でどのタイミングで API を呼び出すかというイベント設計を具体化します。ここまで詰めておくことで、後の実装で判断のブレを減らせます。
2.2 実施要件
画面レイアウト
Step 4 で洗い出したすべての画面について、以下の項目を含む画面レイアウトを作成してください。作成ツールは、draw.io、Figma、Google スライド、PowerPoint など、画面イメージを描けるものであれば自由です。
各画面について、以下を明示してください。
- 領域構成: ヘッダー・メインコンテンツ・フッター・サイドバー・フォーム・一覧など、画面をどう区切って配置するか
- 各要素の目的: 入力欄・表示情報・ボタン・リンクなど、各要素が何のためにあるか
- 状態のバリエーション: 未ログイン時／ローディング中／エラー時／空状態など、必要に応じて
- レスポンシブ・アクセシビリティ: 必須ではないが、スマホでの表示や基本的なアクセシビリティ（読みやすい配色・十分な余白など）にも意識を向ける
| 💡 ポイント |
|---|
| 画面レイアウトの書き方（粒度・記法）に迷いがあれば、遠慮なく講師にご相談ください。 |
イベント設計
各画面で「いつ何を実行するか」を整理してください。特にバックエンドで作成した API をどのタイミングで呼び出し、その結果を画面にどう反映するかを設計します。以下の項目を含めます。
- イベント: 何が発生するか（初期表示、ボタン押下、フォーム送信など）
- トリガー: どの操作・タイミングがイベントを起こすか
- 呼び出すAPI: 該当イベントで呼び出すバックエンドAPI（呼び出さない場合はその旨）
- 表示・処理内容: 呼び出しの結果として画面に表示・遷移する内容
サンプル: sns-camp-front を例にしたイベント設計サンプル（一覧系・登録系の 2 例）
2.3 課題提出
下記内容を提出フォームより提出してください（提出はプレミアムプランでご利用いただけます）。
| 項目 | 内容 |
|---|---|
| 画面レイアウト | 各画面について「領域構成・各要素の目的・状態のバリエーション」を含めた画面レイアウトを添付、またはリポジトリ／ドキュメントの URL |
| イベント設計 | 各画面について「イベント・トリガー・呼び出すAPI・表示／処理内容」を整理した表を添付、またはリポジトリ／ドキュメントの URL |
| 設計判断 | レイアウトの意図、優先度、認証や状態管理の想定、イベント設計の方針などの判断 |
| まとめ | 設計中に苦労したこと、判断に迷ったこと、学んだこと |