このプロジェクトは以下の技術スタックを使用した開発のためのテンプレートプロジェクトです。
| カテゴリ | 技術 |
|---|---|
| フロントエンドフレームワーク | Nuxt3/Vue3 |
| 状態管理ライブラリ | Pinia |
| 言語 | TypeScript/JavaScript |
| バックエンドフレームワーク(BFF) | Hono |
| スタイリング | TailwindCSS |
| テスティングフレームワーク | Vitest (happy-dom, jsdom環境サポート) |
| コード品質 | ESLint/Prettier |
| Git hooks | husky/lint-staged |
| コミット管理 | Commitizen/commitlint (gitmoji対応) |
| パッケージマネージャ | pnpm |
| ランタイム | Node.js |
| UI コンポーネントライブラリ | shadcn-vue/shadcn-nuxt |
| アイコン | Lucide |
| CI/CD | GitHub Actions |
| アナリティクス | Google Tag Manager (Vue GTM) |
| テーマ | カラーモード対応 (@nuxtjs/color-mode) |
このテンプレートは以下のバージョンで動作確認されています。
{
"engines": {
"node": "22.14.0",
"pnpm": "9.15.7"
}
}このプロジェクトでは、パッケージマネージャとして pnpm を使用しています。
また、Node.jsのバージョン管理ツールとしてVoltaを採用しています。
インストールされていない場合は、インストールを行うと便利です。
まだ pnpm がインストールされていない場合は、インストールを行ってから以下の手順を実行してください。
pnpm install-
プロジェクトのルートディレクトリに
.envファイルを作成してください。 -
環境に応じて以下の値を設定してください（
.env.exampleを参考に）：
開発環境の場合（.env）:
NUXT_ENV=development
API_URL=http://localhost:3000/ # Hono Clientが使用するベースURL本番環境の場合（.env.prod）:
NUXT_ENV=production
API_URL=https://your-production-domain.com/ # デプロイ先のドメインを設定ローカル開発から始めると思うので、ひとまず .env ファイルの作成のみで良いです。
Note
- API_URLには、開発環境ではローカルホストを、本番環境では実際のデプロイ先のドメインを設定してください。
- この設定は、クライアントサイドでのHono ClientによるAPI呼び出しに使用されます。
- APIのベースパスは /api に設定されており、例えば /api/title のようなエンドポイントにアクセスできます。
pnpm devCaution
このリポジトリにはサンプルファイルが追加されています。 開発を開始する前に、不要なファイルを削除してください。
- src/components/features/sample
- src/components/template/sample
- src/pages/sample
- src/services/get/sampleServices.ts
- src/store/sampleStore.ts
- src/test/unit/components/features/sample
- src/test/unit/store/sampleStore.spec.ts
- src/test/unit/utils/sample.spec.ts
- src/utils/sample.ts
など
srcディレクトリ配下の構成は以下の通りです:
src/
├── app.vue # アプリケーションのルートコンポーネント
│ # すべてのページで共有されるレイアウトを定義可能
│
├── assets/ # 画像やCSSなどの静的ファイルを定義するディレクトリ
│ # ビルド時に処理・最適化される
│
├── components/ # 再利用可能なVueコンポーネントを定義するディレクトリ
│
├── composables/ # Composition APIを使用した再利用可能なロジックを定義
│ # useXxxの形式で命名することが慣習的
│
├── constants/ # アプリケーション全体で使用される定数を定義
│ # 環境変数以外の静的な値を管理
│
├── layouts/ # ページレイアウトを定義するディレクトリ
│ # default.vueが基本レイアウトとして使用される
│
├── lib/ # サードパーティライブラリに依存するロジックを定義
│ # ライブラリのラッパーやカスタム設定を配置
│
├── middleware/ # ページ遷移時に実行されるミドルウェアを定義
│ # グローバルミドルウェア（全ルート対象）
│ # ページミドルウェア（特定ページ対象）の2種類が利用可能
│
├── pages/ # ページコンポーネントを定義するディレクトリ
│ # ファイルベースのルーティングにより自動的にルートが生成される
│ # 動的ルーティングは[id].vueのような命名で実現
│
├── plugins/ # Vueインスタンス生成時に実行されるプラグインを定義
│ # グローバルコンポーネント、関数、変数の登録に使用
│
├── public/ # 静的ファイルを配置するディレクトリ
│ # favicon.ico, robots.txt等
│ # ビルド時に処理されず、そのまま/ルートで配信される
│
├── server/ # サーバーサイドのロジックを定義
│ # APIエンドポイント、サーバーミドルウェア等
│ # api/ディレクトリ内のファイルは自動的にAPIエンドポイントとして扱われる
│
├── services/ # APIコールを行うロジックを定義するディレクトリ
│
├── store/ # Piniaを使用した状態管理を定義
│
├── test/ # テストファイルを配置
│ # ユニットテスト、E2Eテスト等
│
├── types/ # TypeScriptの型定義ファイルを配置
│
└── utils/ # 純粋なJavaScript/TypeScriptユーティリティを定義mainもしくはmasterブランチへのプルリクエスト作成時に、以下の自動チェックが実行されます。
- TypeScriptの型チェック
- ESLint/Prettierによるコードフォーマットチェック
- テスト実行
- ビルド確認
チェック結果はプルリクエストのステータスで確認できます。
このプロジェクトでは、コミットメッセージの体裁を整えるため、commitlintを導入しています。
git commitコマンドを実行すると、コミットメッセージのprefixをCLI上で選択することができます。
Note
コミットメッセージのprefixをカスタマイズする場合は、以下のファイルを編集してください。
- .cz-config.cts
- commitlint.config.cts
Warning
注意: CLIの対話形式でコミットメッセージの体裁が決まるため、sourceTreeなどのGUIツールを使用する場合は想定されていません。
Piniaで定義されたstateをstoreToRefsを使用して参照するとき、接尾辞に State という文字列の使用を強制するルールです。
// ❌ 非推奨
const { foo } = storeToRefs(fooStore);
// ✅ 推奨
const { foo: fooState } = storeToRefs(fooStore);※ gettersもstoreToRefsで取得するため、区別を明確にする目的があります。
settings/rules/srcにルール定義ファイルを作成（例:store-state-suffix.ts）pnpm build:custom-ruleを実行して、settings/rules/distに出力settings/rules/index.jsでルールを読み込みeslint.config.mjsで有効化
ご自身のプロジェクトに合わせて、必要に応じてルールをoffにしてください。
How To Component Test For Vitest
上記のリポジトリを参照してください。
vi.spyOn() を使用するケース：
- 既存の実装を保持したまま関数の呼び出しを監視したい場合
mockImplementation()で一時的に実装を上書きする場合も可能
vi.fn() を使用するケース：
- 完全に新しいモック実装に置き換えたい場合
- テストケースごとに異なる振る舞いを定義したい場合