• Frontend repository for the accounting support service Jomon, developed and operated by the Digital Creation Club traP.
• Built with Vue 3 + TypeScript on top of Vite, following a feature-based module structure for maintainability.
• Uses the OpenAPI-generated TypeScript client for type-safe integration with the backend.

• Framework: Vue 3 (Composition API)
• Build: Vite 7, vue-tsc
• State Management: Pinia
• HTTP Client: axios
• Styling: Tailwind CSS 4, custom components
• Testing & Quality: ESLint, Prettier, vue-axe, MSW

• Node.js 22.12 or higher (Vite 7 requires Node.js 20.19+ / 22.12+; using the latest LTS is recommended)
• npm (bundled with Node.js)
• JVM (Java 17+ recommended for OpenAPI Generator)

We recommend locking Node.js versions via tools like Volta or fnm for consistent local environments.

1. Install dependencies.

   npm install

2. Configure environment variables.

   • Place .env.local at the project root and define settings with the VITE_ prefix.

3. Start the development server.

   npm run dev

   • Vite boots at http://localhost:5173 by default with hot module replacement enabled.

After npm install, the postinstall script automatically triggers npm run gen-api. When the API schema changes, run npm run clean && npm run gen-api manually.

src/
  components/            Reusable UI components
  features/
    <feature>/
      entities.ts        Domain entities and seed types
      store.ts           Pinia store (added per feature as needed)
      composables.ts     Composition API utilities (optional)
      data/              Layer handling OpenAPI data
        repository.ts    API access using the generated client
        converter.ts     Mapping between generated and domain models
        *.ts             Feature-specific utilities
      __mocks__/         MSW handlers and mock data
  lib/apis/generated/     Auto-generated OpenAPI client (Do not edit)
  pages/                 Page-level Vue components
  styles/                Global styles

GET flows convert generated models to domain models in data/converter.ts, while POST/PUT requests transform domain models back to generated schemas in data/repository.ts. Each feature includes only the stores or composables it truly needs.

• Implement with the Composition API under TypeScript strict mode.
• Use kebab-case for file names, PascalCase for types/interfaces, and prefix composables with use.
• Keep formatting consistent with Prettier (2 spaces, single quotes); run npm run format before committing.
• Rely on ESLint (plugin:vue/strongly-recommended, vuejs-accessibility) and verify ARIA attribute/label pairing.
• Perform manual accessibility checks with vue-axe for key forms and dialogs.

• Static checks: npm run lint, npm run type-check
• For UI logic tests, use Vue Test Utils with MSW, reusing handlers under src/features/<feature>/__mocks__.
• Conduct accessibility validation on major forms/dialogs with vue-axe during manual testing.

1. Update openapitools.json and scripts/generate-apis.ts to sync schema changes.
2. Run npm run gen-api to regenerate clients under src/lib/apis/generated.
3. Commit generated artifacts so reviewers can track differences.
4. To refresh the MSW worker, run npx msw init public/ --save.

• Jomon Backend
• Jomon API Documentation
• Vite Documentation
• Vue 3 Documentation

• 会計支援サービス Jomon のフロントエンドリポジトリです。デジタル創作同好会 traP で開発・運用しています。
• Vue 3 + TypeScript と Vite を用い、機能単位のモジュール構成で保守性を高めています。
• OpenAPI から生成した TypeScript クライアントを活用し、バックエンドと型安全に連携します。

• フレームワーク: Vue 3 (Composition API)
• ビルド: Vite 7, vue-tsc
• 状態管理: Pinia
• HTTP クライアント: axios
• スタイル: Tailwind CSS 4, 自作コンポーネント
• テスト/品質: ESLint, Prettier, vue-axe, MSW

• Node.js 22.12 以上 (Vite 7 が要求する Node.js 20.19+ / 22.12+ を満たすため最新 LTS を推奨)
• npm (Node.js に同梱)
• JVM (OpenAPI Generator 利用のため Java 17 以上を推奨)

Node.js 環境は Volta や fnm などのバージョンマネージャで固定すると安定します。

1. 依存パッケージをインストールします。

   npm install

2. 環境変数ファイルを設定します。

   • プロジェクトルートに .env.local を配置し、VITE_ プレフィックス付きで設定を記述します。

3. 開発サーバーを起動します。

   npm run dev

   • 既定では http://localhost:5173 で Vite の開発サーバーが起動し、HMR が有効になります。

npm install 後に postinstall スクリプトで npm run gen-api が自動実行されます。API スキーマ更新時は npm run clean && npm run gen-api を手動で再実行してください。

src/
  components/            再利用可能な UI コンポーネント
  features/
    <feature>/
      entities.ts        ドメインエンティティとシード型
      store.ts           Pinia ストア (必要な機能のみ配置)
      composables.ts     Composition API ベースのユーティリティ (任意)
      data/              OpenAPI 由来データを扱う層
        repository.ts    生成クライアントを利用した API アクセス
        converter.ts     生成型とドメイン型の相互変換
        *.ts             feature 固有の補助ロジック
      __mocks__/         MSW 用のモックハンドラとデータ
  lib/apis/generated/     OpenAPI から自動生成されたクライアント (編集禁止)
  pages/                 画面単位の Vue コンポーネント
  styles/                グローバルスタイル

GET 系データは data/converter.ts で生成型からドメイン型へ、POST/PUT 時は data/repository.ts でドメイン型から生成型へ変換しながら送信する設計です。store.ts や composables.ts は feature ごとに必要なもののみ配置しています。

• TypeScript strict 設定のもとで Composition API を用いて実装します。
• ファイル命名はケバブケース、型・インターフェースはパスカルケース、Composable は use プレフィックスで統一します。
• Prettier (2 スペース・シングルクォート) で整形し、コミット前に npm run format を推奨します。
• ESLint (plugin:vue/strongly-recommended, vuejs-accessibility) を活用し、ARIA 属性とラベルの対応を確認します。
• 主要フォームやダイアログでは vue-axe を活用した手動アクセシビリティ検証を行います。

• 静的解析: npm run lint, npm run type-check
• UI ロジックの自動テストを追加する場合は Vue Test Utils と MSW を利用し、モックは src/features/<feature>/__mocks__ を再利用します。
• 主要なフォーム・ダイアログでは vue-axe を併用してアクセシビリティ検証を行ってください。

1. openapitools.json と scripts/generate-apis.ts を更新してスキーマを同期します。
2. npm run gen-api を実行し、src/lib/apis/generated にクライアントを再生成します。
3. 生成物はコミットし、差分がレビューできるようにしてください。
4. MSW のワーカーを更新する際は npx msw init public/ --save を利用します。

• Jomon Backend
• Jomon API ドキュメント
• Vite ドキュメント
• Vue 3 ドキュメント