フロントエンド
自動生成ドキュメントは TypeDoc（フロントエンド） を参照してください。
概要
フロントエンドは Next.js 15 / React 19 / TypeScript で実装され、output: 'export' による静的エクスポート前提で動作します。
認証は AWS Amplify 経由で Amazon Cognito に接続し、認証済みユーザーだけがお問い合わせ一覧・登録画面へ進める構成です。
参照ソース
| パス | 内容 |
|---|---|
frontend/package.json |
Next.js、React、Amplify、Tailwind、ESLint の依存関係 |
frontend/next.config.js |
trailingSlash: true と output: 'export' を設定 |
frontend/app/page.tsx |
ログインページと認証済みユーザーの自動リダイレクト |
frontend/app/mypage/page.tsx |
マイページ |
frontend/app/inquiries/page.tsx |
問い合わせ一覧 |
frontend/app/inquiries/new/page.tsx |
問い合わせ登録フォーム |
frontend/components/AmplifyProvider.tsx |
Cognito 向け Amplify 設定 |
frontend/template.yaml |
S3 + CloudFront 配信用インフラ |
画面構成
| ルート | 実装 | 役割 |
|---|---|---|
/ |
app/page.tsx |
Amplify Authenticator を表示し、認証済みなら /mypage/index.html へ遷移 |
/mypage/index.html |
app/mypage/page.tsx |
サインアウト、問い合わせ一覧、新規登録へのハブ |
/inquiries/index.html |
app/inquiries/page.tsx |
GET /inquiries を呼び出して一覧表示 |
/inquiries/new/index.html |
app/inquiries/new/page.tsx |
POST /inquiries で新規登録 |
trailingSlash: true のため、画面遷移リンクは index.html 付きの静的パスを使用しています。
認証連携
| 項目 | 内容 |
|---|---|
| 認証ライブラリ | aws-amplify と @aws-amplify/ui-react |
| ユーザー確認 | getCurrentUser() |
| トークン取得 | fetchAuthSession() から ID トークンを取得 |
| 送信ヘッダー | Authorization: Bearer <idToken> |
| サインアウト | signOut() を使用 |
Amplify は NEXT_PUBLIC_USER_POOL_ID と NEXT_PUBLIC_USER_POOL_CLIENT_ID を使って構成されます。
詳細は 認証 を参照してください。
API 連携
| 呼び出し元 | エンドポイント | 処理 |
|---|---|---|
app/inquiries/page.tsx |
GET /inquiries |
自分の問い合わせ一覧を取得 |
app/inquiries/new/page.tsx |
POST /inquiries |
件名・本文を送信して問い合わせを作成 |
API ベース URL は NEXT_PUBLIC_API_ENDPOINT から注入されます。
この値は CI/CD の frontend_cicd.yaml が CloudFormation Export から取り込みます。
スタイリングとビルド
| 項目 | 内容 |
|---|---|
| UI | Tailwind CSS を使用 |
| グローバル CSS | app/globals.css で Tailwind の base/components/utilities を読み込み |
| TypeScript 設定 | strict: true、moduleResolution: bundler |
| 配信先 | S3 バケット + CloudFront |
frontend/template.yaml では CloudFront の 403/404 を /index.html にフォールバックさせており、静的 SPA として配信できるようにしています。
実装上のポイント
- ログインページは Authenticator をそのまま使い、UI を簡潔に保っています。
- マイページと問い合わせ画面は、未認証時に
/へ戻すクライアントサイドガードを実装しています。 - 一覧画面では
created_atをtoLocaleString('ja-JP')で表示します。 - バリデーションは主に HTML の
required属性と API のレスポンス判定に依存しています。 - 検証用ビルドではプレースホルダー環境変数を使い、本番デプロイ時のみ実値を注入します。