フロントエンド標準概要
本章では、TQS 認証プロジェクトのフロントエンド開発に必要なすべての標準を定義します。6つのカテゴリ、13のトピック、50の詳細項目で構成されています。
コードおよびコンポーネント
Vue.js コンポーネント作成規則と TypeScript 型システムに関する標準です。
| トピック | 詳細項目 |
|---|---|
| Vue.js コンポーネント標準 (10章) | Composition API 基本規則、コンポーネントネーミングおよび設計、ディレクトリ構造、SFC 作成規則 |
| TypeScript 使用標準 (11章) | 型定義規則、Props/Emits タイピング、ユーティリティ型、タイプガードおよびアサーション |
ルーティングおよび状態管理
Vue Router 設定と Pinia 状態管理に関する標準です。
| トピック | 詳細項目 |
|---|---|
| Vue Router (12章) | ルーター設定、ルートガード、遅延ローディング、ネーミング規則 |
| Pinia 状態管理 (13章) | Setup Store 標準、Store 設計規則、リアクティビティパターン、Store テスト |
データ通信
API 通信とフォーム処理に関する標準です。
| トピック | 詳細項目 |
|---|---|
| API クライアント (14章) | Axios 設定、インターセプター、エラー処理、認証トークン管理 |
| フォームおよびバリデーション (15章) | フォームパターン、バリデーション規則、サーバーエラー統合、ファイルアップロード |
ビルドおよびツール
Vite ビルドツールとコード品質ツールに関する標準です。
| トピック | 詳細項目 |
|---|---|
| Vite ビルド設定 (16章) | 設定ファイル、環境変数、ビルド最適化 |
| ESLint + Prettier (17章) | ESLint 設定、Prettier 設定、VSCode 連携、husky + lint-staged |
UI およびスタイリング
Tailwind CSS とアクセシビリティに関する標準です。
| トピック | 詳細項目 |
|---|---|
| Tailwind CSS (18章) | 設定および初期化、ユーティリティ規則、コンポーネントスタイリング、レスポンシブデザイン |
| アクセシビリティ (19章) | WCAG 2.1 基準、ARIA 属性、キーボードナビゲーション |
テストおよび品質
フロントエンドテスト、パフォーマンス、国際化に関する標準です。
| トピック | 詳細項目 |
|---|---|
| フロントエンドテスト (20章) | Vitest 設定、コンポーネントテスト、Composable テスト、カバレッジ基準、E2E テスト概要 |
| パフォーマンス最適化 (21章) | Core Web Vitals、コード分割、画像最適化、バンドルモニタリング |
| 国際化 (22章) | vue-i18n 設定、翻訳ファイル構造、ロケールフォーマッティング |