Step6: フロントエンド実装
このStepでは、Step 4・5 で設計した画面一覧・画面遷移図・画面レイアウト・イベント設計に沿って、フロントエンドを実装します。Step 3 で実装したバックエンドと連携して、アプリケーションとして一通り動く状態を目標にします。
1. 課題の実施
1.1 目的・背景
ここまで積み上げてきたバックエンドとフロントエンドを疎通させて、自作アプリケーションとしてローカルで動く状態にします。ここで動くものが揃うことで、Step 7 以降のインフラ・DevOps 適用の対象がはっきりします。
1.2 実施要件
使用するフレームワーク
Step 4・5 で学んだ Next.js（TypeScript）を使ってフロントエンドを実装してください。
実装範囲
Step 4 で洗い出したすべての画面を、Step 5 で作成したレイアウトとイベント設計に沿って実装してください。Step 3 で実装したバックエンド API と連携して、認証・セッション管理も含めて画面から一連の操作ができる状態にしてください。
品質担保
Step 4 で学んだ TypeScript の型チェックと、Next.js に組み込まれている ESLint を実行し、コミット前に手元で違反ゼロの状態を保てるようにしてください。自動テスト（Jest、React Testing Library など）はフロントエンド講座では扱っていませんが、余裕があれば組み込んでください。
サンプル: sns-camp-front のソースコード（設計サンプル）
1.3 判定基準
画面の動作確認
以下の2点を確認してください。
- Step 5 で作成した画面レイアウトに沿って、Step 4 の各画面が表示される
- Step 5 で作成したイベント設計に沿って、画面の動作が行われる
静的解析・自動テスト
静的解析コマンド（TypeScript の型チェック、ESLint）と、組み込んだ場合は自動テストコマンドを実行し、いずれも正常終了することを確認してください（違反ゼロ、テスト全パス）。
1.4 課題提出
下記内容を提出フォームより提出してください（提出はプレミアムプランでご利用いただけます）。
| 項目 | 内容 |
|---|---|
| 概要 | 実装したフロントエンドの構成・使用したフレームワーク・工夫した点を簡潔に記載する |
| ソースコード | 実装したフロントエンドを反映した GitHub リポジトリの URL |
| 画面の動作確認 | Step 5 で作成した画面レイアウト・イベント設計に沿って画面が表示され動作することを、ブラウザ画面のスクリーンショットで記載する |
| 静的解析・自動テスト | 静的解析コマンドと自動テストコマンド（自動テストは組み込んだ場合）の実行結果を、コマンドと出力がわかる形で記載する |
| まとめ | 実装中に苦労したこと、工夫したこと、学んだこと |