Step4: フロントエンド1
このStepでは、フロントエンド講座の前半（HTML／CSS・JavaScript・TypeScript・Next.js の基本）を学び、あわせて自作アプリケーションの画面一覧・画面遷移図を作成します。
1. 講座の履修
フロントエンド講座 の以下の章を実施してください。すでに同等の知識がある場合は、講座の履修はスキップしても構いません。
2. 課題の実施
2.1 目的・背景
フロントエンドの実装に入る前に、どんな画面を作り、どのようにユーザが画面を移動するかを整理します。ここで画面全体の見通しを立てておくことで、Step 5 の画面レイアウト設計や Step 6 の実装で迷いにくくなります。
2.2 実施要件
画面一覧
Step 2 の API 仕様書をもとに、必要な画面をすべて洗い出してください。各画面について以下の項目を整理してください。形式はマークダウン、Google スプレッドシート、Excel など自由です。
- 画面ID: 画面を識別するID（例: SCR-001）
- 画面名: 画面の名前
- 画面の目的: この画面で何ができるか
- 主要な要素: 表示する情報・入力欄・ボタンなど
- 関連する API エンドポイント: 画面表示・操作で呼び出す API
サンプル: sns-camp-front を例にした画面一覧サンプル
画面遷移図
洗い出した画面同士の遷移を図として整理してください。以下の観点を含めます。
- どの画面からどの画面に遷移できるか
- 遷移の契機（ボタン押下・リンククリック・自動遷移など）
- 認証が必要な画面と、未ログイン時の遷移先
draw.io などの図作成ツールで作成してください。
サンプル: sns-camp-front を例にした画面遷移図サンプル
2.3 課題提出
下記内容を提出フォームより提出してください（提出はプレミアムプランでご利用いただけます）。
| 項目 | 内容 |
|---|---|
| 画面一覧 | 各画面について「画面ID・画面名・目的・主要な要素・関連API」を含めた画面一覧を添付、またはリポジトリ／ドキュメントの URL |
| 画面遷移図 | draw.io などの図作成ツールで作成した画面遷移図を、画像として添付、またはリポジトリ／ドキュメントの URL |
| 設計判断 | 想定するユーザ動線・カバーしていない操作パターンなど、遷移設計上の判断 |
| まとめ | 設計中に苦労したこと、判断に迷ったこと、学んだこと |