ページ構成
Page Structure
1. URL ルーティング
URL Routing
| URL | ページ | 説明 |
|---|---|---|
/ |
用語一覧ページ | 検索・フィルタ・一覧表示。アプリのメイン画面 |
/terms/[id] |
用語詳細ページ | 指定 ID の用語詳細（説明・画像・参照URL）を表示 |
存在しない ID を指定した場合、Next.js の notFound() により 404 ページへ遷移する。
2. ページ詳細
Page Details
2-1. 用語一覧ページ（/）
Term List Page
ファイル: src/app/page.tsx → src/features/terms/components/GlossaryPage.tsx
localhost:3000
🌙 AWS 用語集
⌘K
管理者ログイン
＋ 用語を追加
AWS 用語集
AWS サービスの用語・略称を素早く調べられるリファレンス
単語名 ●○ 説明文
⊞ ▦
すべて
Compute
Storage
Database
Networking
Security
…
| No. | 用語名 | 略称 | カテゴリ | 説明 | 操作 |
|---|---|---|---|---|---|
| 1 | Amazon EC2 | EC2 | Compute | スケーラブルな仮想サーバーをクラウドで提供 | ✏️ 🗑️ |
| 2 | Amazon S3 | S3 | Storage | 高耐久性のオブジェクトストレージ | ✏️ 🗑️ |
| 3 | Amazon RDS | RDS | Database | マネージド型リレーショナルデータベース | ✏️ 🗑️ |
| … 57 件 … | |||||
←
1
2
3
→
全 60 件 / 3 ページ
主要エリア:
| エリア | コンポーネント | 説明 |
|---|---|---|
| ヘッダー | AppShell |
テーマ切替・コマンドパレットボタン・認証コントロール |
| Hero | Hero |
アプリタイトルと説明文 |
| 検索バー | SearchBar + SearchModeToggle |
キーワード入力・検索対象（単語名 / 説明文）切替 |
| 表示切替 | ViewToggle |
テーブル表示 / カード表示の切替 |
| カテゴリフィルター | CategoryChipFilter |
カテゴリ絞り込みチップ（複数選択不可） |
| 用語一覧（テーブル） | TermTable + TermTablePagination |
TanStack Table によるテーブル表示・ページング |
| 用語一覧（カード） | TermCardGrid + TermCard |
カードグリッド表示 |
オーバーレイ（ダイアログ・モーダル）:
| ダイアログ | トリガー | 対象ユーザー |
|---|---|---|
CommandPalette |
ヘッダーの ⌘K ボタン または Cmd+K キー |
全員 |
AdminLoginDialog |
ヘッダーの「管理者ログイン」ボタン | 未ログイン |
TermDetailDialog |
テーブル行 / カードのクリック | 全員 |
AddTermDialog |
ヘッダーの「＋用語を追加」ボタン / FABボタン（モバイル） | 管理者のみ |
EditTermDialog |
テーブル行 / カードの ✏️ ボタン | 管理者のみ |
DeleteConfirmDialog |
テーブル行 / カードの 🗑️ ボタン | 管理者のみ |
URL パラメータ（nuqs 管理）:
| パラメータ | 型 | デフォルト | 説明 |
|---|---|---|---|
q |
string |
"" |
検索キーワード |
searchBy |
"name" | "description" |
"name" |
検索対象モード |
category |
string |
"" |
カテゴリフィルター |
page |
number |
1 |
現在ページ番号 |
view |
"table" | "card" |
"table" |
表示形式 |
2-2. 用語詳細ページ（/terms/[id]）
Term Detail Page
ファイル: src/app/terms/[id]/page.tsx → src/app/terms/[id]/TermDetailPageClient.tsx
localhost:3000/terms/1
← 一覧に戻る
ヒーロー画像（登録済みの場合に表示）
Amazon EC2
最終更新: 2025-12-01
説明
Amazon Elastic Compute Cloud（EC2）は、スケーラブルな仮想サーバーをクラウドで提供する AWS のコアサービスです。
用途に応じてインスタンスタイプを選択し、数分でサーバーを起動できます。
🔗 公式ドキュメント
主要エリア:
| エリア | 説明 |
|---|---|
| ヒーロー画像 | descriptionImageSlimKey がある場合に表示。ページ最上部にフルワイド表示 |
| カテゴリ + 略称バッジ | カテゴリチップ（色分け）と略称タグ |
| 用語名 | H1 見出し |
| コピーボタン | 用語名をクリップボードにコピー |
| 最終更新日 | updatedAt の整形日付 |
| 説明本文 | マークアップなしのプレーンテキスト |
| 参照 URL | 「公式ドキュメント」リンク（referenceUrl がある場合のみ表示） |
| 戻るリンク | ← 一覧に戻る（/ へのリンク） |
データ取得:
- Server Component（
page.tsx）がgetPrisma()経由で D1 から用語を取得し、TermDetailPageClientに props として渡す generateMetadataで用語名・説明文を OGP メタタグに反映
3. レスポンシブ対応
Responsive Design
| ブレークポイント | 動作 |
|---|---|
モバイル（< 768px） |
起動時に表示形式を自動でカード表示に切替（useMobileCardDefault）。「＋用語を追加」ボタンは FAB（画面右下の固定ボタン）に変化 |
タブレット以上（≥ 768px） |
テーブル表示がデフォルト。ヘッダーに「＋用語を追加」ボタンを表示 |
4. 認証によるページ差分
Page Differences by Auth State
| 表示要素 | 一般ユーザー | 管理者 |
|---|---|---|
| ヘッダー右 | 「管理者ログイン」ボタン | 「ログアウト」ボタン + 「＋用語を追加」ボタン |
| テーブル列 | No. / 用語名 / 略称 / カテゴリ / 説明 | 上記 + 操作列（✏️ / 🗑️） |
| カード | 閲覧のみ | 操作アイコン（✏️ / 🗑️）を表示 |
| モバイル FAB | 非表示 | 表示（「＋用語を追加」） |