フロントエンドチェックリスト
本章ではTQS-S/W認証のフロントエンド領域に対する詳細チェックリストを定義します。フロントエンドチェックリストはコードおよびコンポーネント、ルーティングおよび状態管理、データ通信、ビルドおよびツール、UIおよびスタイリング、テストおよび品質の6つの領域で構成されます。各項目の分類は必須(O)、推奨(R)、任意(S)に区分され、検証方法を併せて明示します。
32.3.1. コードおよびコンポーネント
コードおよびコンポーネントチェックリストはVue 3とTypeScriptの正しい使用、コンポーネント設計規則、ディレクトリ構造の標準遵守を検証します。
| 番号 | 項目 | 分類 | 検証方法 |
|---|---|---|---|
| 1 | Vue 3 + <script setup> + TypeScriptの組み合わせを使用する | O | コード確認 |
| 2 | Composition APIを使用する（Options API未使用） | O | コードレビュー |
| 3 | SFCブロック順序を<script> → <template> → <style>で維持する | O | コードレビュー |
| 4 | コンポーネントファイル名にPascalCaseを使用する | O | ファイル名確認 |
| 5 | definePropsとdefineEmitsにTypeScript型を明示する | O | コードレビュー |
| 6 | 標準ディレクトリ構造を適用する（views / components / composables / stores） | O | ディレクトリ構造確認 |
| 7 | v-htmlディレクティブを使用しない（やむを得ない場合はDOMPurify適用） | O | コード検索 |
| 8 | v-forディレクティブに:keyをバインドする（配列index未使用） | O | コードレビュー |
| 9 | TypeScript strictモードを有効化する | O | tsconfig.jsonのstrict: true確認 |
| 10 | any型を使用しない（no-explicit-anyルール適用） | O | ESLint実行結果確認 |
| 11 | 型定義をsrc/types/ディレクトリで管理する | R | ディレクトリ構造確認 |
コードおよびコンポーネント領域はフロントエンドチェックリストの基盤です。Vue 3 Composition APIとTypeScript strictモードはTQS規格の核心要件であり、必ず充足しなければなりません。
32.3.2. ルーティングおよび状態管理
ルーティングおよび状態管理チェックリストはVue RouterとPiniaの正しい使用を検証します。
| 番号 | 項目 | 分類 | 検証方法 |
|---|---|---|---|
| 12 | Vue RouterでcreateWebHistoryモードを使用する | O | ルーター設定ファイル確認 |
| 13 | ルートを遅延ロードで設定する（() => import()） | O | ルーター設定ファイル確認 |
| 14 | 認証ガードをbeforeEachに実装する | O | ルーター設定コード確認 |
| 15 | Piniaを状態管理ライブラリとして使用する（Vuex未使用） | O | package.json依存関係確認 |
| 16 | Setup Store構文を使用する | O | ストアファイルコード確認 |
| 17 | storeToRefsを使用してリアクティビティを維持する | O | コードレビュー |
ルーティングと状態管理はフロントエンドアプリケーションの構造的安定性を決定する核心要素です。Vue Routerの遅延ロードは初期ロード性能に直接的に影響を及ぼすため、必ず適用しなければなりません。
32.3.3. データ通信
データ通信チェックリストはAxiosベースのHTTP通信実装とエラー処理、フォームバリデーションを検証します。
| 番号 | 項目 | 分類 | 検証方法 |
|---|---|---|---|
| 18 | Axiosインスタンスを生成して使用する（グローバルAxios未使用） | O | コード確認 |
| 19 | リクエストインターセプターで認証トークンを注入する | O | インターセプターコード確認 |
| 20 | レスポンスインターセプターでエラーを標準形式に変換する | O | インターセプターコード確認 |
| 21 | HTTPステータスコード別のエラー処理を実装する（401、403、404、500等） | O | エラーハンドラーコード確認 |
| 22 | フォームバリデーションをクライアント側で実行する | O | コードレビュー |
| 23 | ファイルアップロード時にクライアント側で拡張子とサイズを検証する | R | コードレビュー |
データ通信領域はAxiosインスタンスベースの標準化されたHTTP通信実装を検証します。インターセプターを通じたトークン注入とエラー変換はコード重複を防止し一貫性を保証する必須パターンです。
32.3.4. ビルドおよびツール
ビルドおよびツールチェックリストはViteビルド構成、環境変数管理、コード品質ツールの適用を検証します。
| 番号 | 項目 | 分類 | 検証方法 |
|---|---|---|---|
| 24 | Viteで@エイリアスをsrc/パスに設定する | O | vite.config.ts確認 |
| 25 | 環境変数にVITE_プレフィックスを使用する | O | .envファイル確認 |
| 26 | 環境変数の型をenv.d.tsに定義する | O | env.d.tsファイル存在および内容確認 |
| 27 | 初期ロードJavaScriptバンドルサイズが300KB以下である（gzip基準） | O | ビルド結果またはLighthouseレポート確認 |
| 28 | ESLint Flat Configを使用する | O | eslint.config.jsファイル確認 |
| 29 | Prettierを適用する | O | .prettierrcまたはprettier.config.jsファイル確認 |
| 30 | husky + lint-stagedを設定してコミット前にリントを自動実行する | O | .husky/ディレクトリおよびlint-staged設定確認 |
| 31 | prettier-plugin-tailwindcssを適用してクラス整列を自動化する | R | Prettier設定ファイルでプラグイン確認 |
ビルドおよびツール領域は開発生産性とコード一貫性を保証する自動化ツールの適用を検証します。ESLintとPrettierの組み合わせはコードスタイルの一貫性を自動的に維持する核心ツールです。
32.3.5. UIおよびスタイリング
UIおよびスタイリングチェックリストはTailwind CSS適用、スタイル管理規則、アクセシビリティ標準の遵守を検証します。
| 番号 | 項目 | 分類 | 検証方法 |
|---|---|---|---|
| 32 | Tailwind CSSをスタイリングフレームワークとして適用する | O | tailwind.config.jsファイル確認 |
| 33 | コンポーネントの<style>ブロックにscoped属性を適用する | O | コードレビュー |
| 34 | インラインスタイル（style属性）を使用しない | O | コード検索 |
| 35 | WCAG 2.1 AA水準のアクセシビリティを遵守する | O | Lighthouseアクセシビリティスコア確認 |
| 36 | テキストと背景の色コントラストを4.5:1以上に維持する | O | アクセシビリティツール検査結果確認 |
| 37 | キーボードナビゲーションをサポートする（Tabキー順序、フォーカス表示） | R | 手動テスト |
UIおよびスタイリング領域は視覚的一貫性とアクセシビリティを検証します。WCAG (Web Content Accessibility Guidelines) 2.1 AA水準のアクセシビリティはユーザーエクスペリエンスの基本要件であり、色コントラストとキーボードナビゲーションを含みます。
32.3.6. テストおよび品質
テストおよび品質チェックリストはテストフレームワーク適用、カバレッジ基準、パフォーマンス指標、国際化適用を検証します。
| 番号 | 項目 | 分類 | 検証方法 |
|---|---|---|---|
| 38 | Vitestをテストフレームワークとして適用する | O | vitest.config.tsまたはvite.config.ts確認 |
| 39 | Vue Test Utilsを使用してコンポーネントテストを作成する | O | テストファイル存在確認 |
| 40 | ラインカバレッジ80%以上を達成する | O | カバレッジレポート確認 |
| 41 | ブランチカバレッジ70%以上を達成する | O | カバレッジレポート確認 |
| 42 | Lighthouseパフォーマンススコア90点以上を達成する | O | Lighthouseレポート確認 |
| 43 | vue-i18nを適用して国際化をサポートする | R | package.json依存関係および設定確認 |
| 44 | ハードコーディングされた文字列なしに翻訳キーを使用する | R | コードレビュー |
テストおよび品質領域はフロントエンドコードの信頼性とパフォーマンスを検証します。VitestとVue Test Utilsを使用したコンポーネントテストは必須であり、Lighthouseパフォーマンス基準はユーザーエクスペリエンス品質を保証します。
32.3.7. 項目要約
フロントエンドチェックリストの全項目数と分類別分布は以下のとおりです。
| 領域 | 必須(O) | 推奨(R) | 任意(S) | 合計 |
|---|---|---|---|---|
| コードおよびコンポーネント | 10 | 1 | 0 | 11 |
| ルーティングおよび状態管理 | 6 | 0 | 0 | 6 |
| データ通信 | 5 | 1 | 0 | 6 |
| ビルドおよびツール | 7 | 1 | 0 | 8 |
| UIおよびスタイリング | 5 | 1 | 0 | 6 |
| テストおよび品質 | 5 | 2 | 0 | 7 |
| 合計 | 38 | 6 | 0 | 44 |
フロントエンドチェックリストは合計44項目で構成されます。必須項目38個を全て充足しなければ基本認証を取得できず、推奨項目6個の充足率に応じて優秀または最優秀認証等級が決定されます。