feat: migrate to Vue 3 Composition API

.github/workflows/client.yml

@@ -1,6 +1,10 @@
 name: CI (client)
 
-on: [push, pull_request]
+on:
+  push:
+    branches:
+      - master
+  pull_request:
 
 jobs:
   packages:
@@ -11,7 +15,7 @@ jobs:
     steps:
       - uses: actions/setup-node@v6
         with:
-          node-version: 18.x
+          node-version: 22.x
       - uses: actions/checkout@v6
       - uses: actions/cache@v4
         with:
@@ -28,7 +32,7 @@ jobs:
     steps:
       - uses: actions/setup-node@v6
         with:
-          node-version: 18.x
+          node-version: 22.x
       - uses: actions/checkout@v6
       - uses: actions/cache@v4
         with:
@@ -47,7 +51,7 @@ jobs:
     steps:
       - uses: actions/setup-node@v6
         with:
-          node-version: 18.x
+          node-version: 22.x
       - uses: actions/checkout@v6
       - uses: actions/cache@v4
         with:
@@ -56,3 +60,39 @@ jobs:
           restore-keys: |
             node_modules-
       - run: cd client && npm run lint
+  type-check:
+    name: Client Type Check
+    runs-on: ubuntu-latest
+    needs: [packages]
+    env:
+      CI: true
+    steps:
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 22.x
+      - uses: actions/checkout@v6
+      - uses: actions/cache@v4
+        with:
+          path: client/node_modules
+          key: node_modules-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            node_modules-
+      - run: cd client && npm run type-check
+  test:
+    name: Client Test
+    runs-on: ubuntu-latest
+    needs: [packages]
+    env:
+      CI: true
+    steps:
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 18.x
+      - uses: actions/checkout@v6
+      - uses: actions/cache@v4
+        with:
+          path: client/node_modules
+          key: node_modules-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            node_modules-
+      - run: cd client && npm run test

.github/workflows/go.yml

@@ -1,5 +1,9 @@
 name: Go
-on: [push, pull_request]
+on:
+  push:
+    branches:
+      - master
+  pull_request:
 
 jobs:
   build:

.github/workflows/image.yml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - master
+  pull_request:
 
 env:
   IMAGE_NAME: jomon
@@ -18,6 +19,7 @@ jobs:
         uses: docker/setup-buildx-action@v3
       - name: Login to DockerHub
         uses: docker/login-action@v3
+        if: github.event_name != 'pull_request'
         with:
           registry: ghcr.io
           username: traptitech
@@ -26,7 +28,7 @@ jobs:
         uses: docker/build-push-action@v6
         with:
           context: .
-          push: true
+          push: ${{ github.event_name != 'pull_request' }}
           platforms: linux/amd64
           tags: |
             ghcr.io/traptitech/${{ env.IMAGE_NAME }}:${{ env.IMAGE_TAG }}

.gitignore

@@ -101,4 +101,7 @@ tmp
 Jomon
 uploads/*
 
-.vscode
+.vscode
+coverage/
+
+.task/checksum/run

AGENTS.md

@@ -5,27 +5,27 @@
 ## プロジェクト構成
 
 - サーバー: `main.go` を起点に `router/`（Echo のエンドポイント）と `model/`（GORM モデル・DB アクセス）で構成。
-- クライアント: `client/src/` に Vue 2.7 + Vuetify の SPA。静的ファイルは `client/public/`。
+- クライアント: `client/src/` に Vue 3 + Vuetify 3 + Pinia + TypeScript の SPA。静的ファイルは `client/public/`。
 - インフラ/開発補助: `docker-compose.yml` と `Dockerfile`、テスト用 `server-test.yml`・モック用 `mock.yml`。CI は `.github/workflows/` に Go/Client/Image の 3 つ。
 - ドキュメントとデータ: `docs/`、一時保存は `uploads/`、永続化ボリューム用に `storage/`。
 
 ## ビルド・実行・開発コマンド
 
 - サーバーモック+DB 付き統合テスト: `make server-test`（Docker で mariadb を起動して Go テストを実行）。
-- クライアント開発: `make client` （`npm run lint` → `npm run serve`。localhost:8080 で確認）。
+- クライアント開発: `make client` （`npm run lint` → `npm run dev`。localhost:8080 で確認）。
 - 単体ビルド: `go build ./...`（Go 1.25+ 推奨） / `cd client && npm run build`。
 - ローカル起動（Docker 本番イメージ確認用）: `docker-compose up -d --build`。停止は `make down`。
 
 ## コーディングスタイル
 
 - Go: `gofmt`（タブインデント）必須。`go vet ./...` で静的検査。公開シンボルは PascalCase、テストダブルには `_test` 接尾辞。
-- Vue/TS: ESLint + Prettier 設定済み（`npm run lint`）。コンポーネントは `PascalCase.vue`、ルートや小要素は `kebab-case` ファイル名。CSS/SCSS は BEM か Vuetify のユーティリティを優先。
+- Vue/TS: ESLint + Prettier 設定済み（`npm run lint`）。Composition API (`<script setup lang="ts">`) を推奨。コンポーネントは `PascalCase.vue`、ルートや小要素は `kebab-case` ファイル名。CSS/SCSS は BEM か Vuetify のユーティリティを優先。
 - API/DB: モデル名は単数形、テーブル/カラムはスネークケース。JSON フィールドは camelCase を維持。
 
 ## テスト指針
 
 - Go: `go test ./...` を基本。DB を使うテストは `MARIADB_USERNAME`/`PASSWORD`/`HOSTNAME`/`DATABASE` 環境変数を設定（CI と同値: `root/password/localhost:50000/jomon`）。
-- Vue: 現状は静的検証中心。UI 振る舞いを追加する際は `@vue/test-utils` + Jest を推奨し、`client/tests/unit/` に `_spec.js` で配置。
+- Vue: `vitest` を使用。`client/tests/` 以下にテストファイルを配置。ユーティリティ関数やロジックのテストを推奨。UI テストが必要な場合は `@vue/test-utils` を使用。
 - カバレッジはクリティカルパス（決裁フロー、認可、アップロード処理）を優先し、回帰バグは再現テストを追加。
 
 ## コミット & プルリク運用

Dockerfile

@@ -1,5 +1,5 @@
 ## build backend
-FROM golang:1.17.5-alpine as server-build
+FROM golang:1.25-alpine as server-build
 
 WORKDIR /github.com/traPtitech/Jomon
 COPY go.mod go.sum ./
@@ -13,7 +13,7 @@
 RUN go build -o /Jomon -ldflags "-s -w"
 
 ## build frontend
-FROM node:13.12.0-alpine as client-build
+FROM node:22-alpine as client-build
 WORKDIR /github.com/traPtitech/Jomon/client
 COPY ./client/package.json ./client/package-lock.json ./
 RUN npm ci
@@ -23,7 +23,7 @@
 ## run
 
 FROM alpine:3.9
 ENV TZ Asia/Tokyo
 
 RUN apk --update --no-cache add tzdata \
   && cp /usr/share/zoneinfo/Asia/Tokyo /etc/localtime \
@@ -36,4 +36,4 @@
 COPY --from=server-build /Jomon ./
 COPY --from=client-build /github.com/traPtitech/Jomon/client/dist ./client/dist/
 
 ENTRYPOINT ./Jomon

Makefile

@@ -11,7 +11,7 @@ server-test:
 
 .PHONY: client
 client:
-	cd client; npm run lint; npm run serve
+	cd client; npm run lint; npm run dev
 
 .PHONY: mock
 mock:

README.md

@@ -26,7 +26,15 @@ make server-test
 make client
 ```
 
-Now you can access to `http://localhost:3000` for Jomon client page.
+Or run manually:
+
+```shell script
+cd client
+npm install
+npm run dev
+```
+
+Now you can access to `http://localhost:8080` for Jomon client page.
 And you can access to `http://localhost:1323` for Jomon mock server using `swagger.yaml`.
 
 ## Staging

Taskfile.yml

@@ -11,8 +11,6 @@ tasks:
     deps: [build]
     cmds:
       - /app/Jomon
-    sources:
-      - '**/*.go'
 
   build:
     desc: Build the Go application

client/.eslintrc.cjs

@@ -0,0 +1,27 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  extends: [
+    "plugin:vue/vue3-recommended",
+    "eslint:recommended",
+    "@vue/typescript/recommended",
+    "plugin:prettier/recommended"
+  ],
+  rules: {
+    // "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "vue/multi-word-component-names": "off",
+    "vue/max-attributes-per-line": "off",
+    "vue/html-indent": "off",
+    "vue/html-closing-bracket-newline": "off",
+    "vue/singleline-html-element-content-newline": "off",
+    "vue/multiline-html-element-content-newline": "off",
+    "vue/html-self-closing": "off"
+  },
+  parserOptions: {
+    ecmaVersion: 2020
+  }
+};

client/.gitignore

@@ -19,3 +19,10 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw?
+
+# Playwright
+/test-results/
+/playwright-report/
+/playwright/.cache/
+coverage/
+

client/README.md

@@ -1,24 +1,54 @@
-# client
+# Jomon Client
+
+This is the frontend application for Jomon, built with Vue 3, Vite, and Pinia.
+
+## Tech Stack
+
+- **Framework**: Vue 3 (Composition API)
+- **Build Tool**: Vite
+- **State Management**: Pinia
+- **UI Framework**: Vuetify 3
+- **Testing**: Vitest (Unit), Playwright (E2E)
+- **Language**: TypeScript
 
 ## Project setup
+
 ```
 npm install
 ```
 
 ### Compiles and hot-reloads for development
+
 ```
-npm run serve
+npm run dev
 ```
 
 ### Compiles and minifies for production
+
 ```
 npm run build
 ```
 
 ### Lints and fixes files
+
 ```
 npm run lint
 ```
 
+### Run Tests
+
+#### Component Tests (Vitest)
+
+```bash
+npm run test
+```
+
+#### E2E Tests (Playwright)
+
+```bash
+npm run test:e2e
+```
+
 ### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).

client/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <title>Jomon</title>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
+    />
+  </head>
+  <body>
+    <noscript>
+      <strong
+        >We're sorry but client doesn't work properly without JavaScript
+        enabled. Please enable it to continue.</strong
+      >
+    </noscript>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>