Vue 3 + Vite + Vuetify 4 構成に移行＆リファクタリング#57
Open
mtsgi wants to merge 1 commit into
Open
Conversation
Co-authored-by: Copilot <copilot@github.com>
✅ Deploy Preview for chart-editor-v2 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
Vue 2.7 + RSBuild + Vuetify 2 の Chart Editor V2 を、Vue 3 + Vite 8 + Vuetify 4（+ Vitest）構成へ移行し、既存の Options API / mixin 中心の実装を Composition API composable ベースに再編する PR です。開発手順・構成ドキュメントも新スタックに合わせて更新されています。
Changes:
- Vite/Vitest ベースのビルド・テスト基盤へ移行（設定ファイル、tsconfig、エントリ、依存関係更新）
- mixin を廃止し、譜面編集ロジックを composable 群へ切り出し（注入キーも typed 化）
- Vuetify 4 に合わせて主要コンポーネントを
<script setup>へ移行し、UI API 差分を反映
Reviewed changes
Copilot reviewed 37 out of 42 changed files in this pull request and generated 12 comments.
Show a summary per file
| File | Description |
|---|---|
| vitest.config.ts | Vitest の基本設定（Vue plugin / alias / jsdom）を追加 |
| vite.config.ts | Vite の base/alias/サーバ設定 + Vuetify plugin 設定を追加 |
| tsconfig.json | Vite/ESM 向けに moduleResolution などを更新 |
| src/types.d.ts | Vuetify 4 の ColorPicker 仕様に合わせた型調整 |
| src/shims-vuetify.d.ts | Vuetify 4 では不要な shim を削除 |
| src/plugins/vuetify.ts | Vuetify 4 の createVuetify 構成へ更新 |
| src/mixins/noteTypes.ts | 旧 mixin を削除（composable へ移行） |
| src/mixins/noteCheck.ts | 旧 mixin を削除（composable へ移行） |
| src/main.ts | Vue 3 createApp ベースの起動に変更 |
| src/env.d.ts | Vite client 型と Vue 3 向け *.vue 宣言へ更新 |
| src/composables/useTextureDB.ts | テクスチャ DB 取得/適用 composable を追加 |
| src/composables/useSelection.ts | ノート一括選択/操作 composable を追加 |
| src/composables/useNoteTypes.ts | ノートタイプ定義・オプション定義生成を composable 化 |
| src/composables/useNoteEditor.ts | ノート仮配置/挿入/コピーなどの編集 composable を追加 |
| src/composables/useNoteCheck.ts | 重複判定・バリデーションを純粋関数化して追加 |
| src/composables/useFileIO.ts | JSON 入出力/音声ファイル操作 composable を追加 |
| src/composables/useChartData.ts | 譜面データ/measureData 計算 composable を追加 |
| src/composables/useBackup.ts | スナックバー/バックアップ/分析 composable を追加 |
| src/composables/injectionKeys.ts | provide/inject を typed key 化 |
| src/composables/tests/* | composable/純粋関数のユニットテストを追加 |
| src/components/Preview.vue | <script setup> 化 + Vuetify 4 API 反映、プレビュー処理を移植 |
| src/components/ObjectBasedMeasure.vue | <script setup> 化 + mixin 廃止、composable 利用へ移行 |
| src/components/NoteShadow.vue | <script setup> 化 + 一部描画計算の移行 |
| src/components/Note.vue | <script setup> 化 + Vuetify 4 の slot/props 形式へ移行 |
| src/components/Measure.vue | <script setup> 化 + inject key 化 + UI を Vuetify 4 へ合わせ込み |
| src/components/LongNote.vue | <script setup> 化 + Vuetify 4 slot props へ移行 |
| src/components/EndForm.vue | <script setup> 化 + 再帰フォームを Vuetify 4 API に更新 |
| rsbuild.config.ts | RSBuild 設定を削除 |
| package.json | Vue 3/Vite/Vuetify 4/Vitest へ依存関係・scripts を更新、ESM 化 |
| index.html | Vite エントリ用のルート index.html を追加 |
| Usage.md | 使い方ドキュメントを大幅拡充 |
| REFACTORING_PLAN.md | 移行・リファクタ計画書を追加 |
| README.md | 新スタックの開発手順（dev/test/typecheck/env）を反映 |
| .npmrc | min-release-age=7 を追加 |
| .github/copilot-instructions.md | 新スタック/新構成に合わせて開発ガイドを更新 |
Comment on lines
+177
to
+186
| function addEndToAppendNote(): void { | ||
| appendNote.value.end.push({ | ||
| type: 1, | ||
| lane: appendNote.value.lane, | ||
| measure: appendNote.value.measure, | ||
| position: Math.min(appendNote.value.position + 1, appendNote.value.split), | ||
| split: appendNote.value.split, | ||
| option: [], | ||
| end: [], | ||
| }) |
Comment on lines
+281
to
+288
| function appendNoteToDown(): void { | ||
| const note = appendNote.value | ||
| if (note.position === 0) { | ||
| note.measure-- | ||
| note.position = note.split - 1 | ||
| // 小節切替時に自動追従 | ||
| if (isAutoFollow.value) scrollToMeasure(note.measure) | ||
| } else note.position-- |
Comment on lines
+148
to
+157
| function addEndToThis(): void { | ||
| props.end.end.push({ | ||
| type: 1, | ||
| lane: props.end.lane, | ||
| measure: props.end.measure, | ||
| position: Math.min(props.end.position + 1, props.end.split), | ||
| split: props.end.split, | ||
| option: [], | ||
| end: [], | ||
| }) |
Comment on lines
+190
to
+198
| function endToDown(event: KeyboardEvent): void { | ||
| const note = props.end | ||
| if (note.position === 0) { | ||
| note.measure-- | ||
| note.position = note.split - 1 | ||
| } else note.position-- | ||
| // Shift同時押しで親も移動 | ||
| if (event.shiftKey) emit('append-to-down', props.index) | ||
| } |
Comment on lines
+69
to
+77
| function restoreBackup(): void { | ||
| const confirmed = window.confirm( | ||
| 'バックアップからデータを復元しますか？(現在の譜面データは失われます)' | ||
| ) | ||
| const backupData = localStorage.getItem('chart-editor__backup') | ||
| if (confirmed && backupData) { | ||
| chartObject.value = JSON.parse(backupData) | ||
| showSnackbar('バックアップから復元しました') | ||
| } |
Comment on lines
+25
to
+30
| function fetchTextures(): void { | ||
| fetch('https://otofuda.microcms.io/api/v1/textures?limit=1000', { | ||
| headers: { | ||
| 'X-API-KEY': '91c69bf8-3df5-445f-81e7-30b54ab4a7d4', | ||
| }, | ||
| }) |
Comment on lines
32
to
35
| "volta": { | ||
| "node": "22.19.0", | ||
| "npm": "10.9.3" | ||
| "node": "24.15.0", | ||
| "npm": "11.12.1" | ||
| } |
Comment on lines
+163
to
+167
| chart.push({ | ||
| isSelected: false, | ||
| ...structuredClone(toRaw(note)), | ||
| index: chart.length, | ||
| }) |
Comment on lines
+550
to
+556
| setTimeout(() => { | ||
| // 打鍵音を再生 | ||
| if (event.sound && isPlayKeySound.value) { | ||
| const keySound = new Audio('/chart-editor/guide.mp3') | ||
| keySound.currentTime = 0.1 | ||
| keySound.play() | ||
| } |
Comment on lines
+7
to
+8
| <link rel="icon" href="/favicon.png" /> | ||
| <link rel="manifest" href="/manifest.webmanifest" /> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces a comprehensive migration and modernization of the Chart Editor V2 project, moving from a Vue 2 + RSBuild + Vuetify 2 stack to a Vue 3 + Vite 8 + Vuetify 4 architecture. The changes include major updates to the build system, codebase structure, dependency management, and documentation, as well as the introduction of a detailed refactoring plan. The documentation now reflects the new architecture, development workflow, and usage patterns, and a new
.npmrcsetting has been added.Project Modernization and Migration
.github/copilot-instructions.md,README.md) [1] [2] [3]REFACTORING_PLAN.md, outlining each migration phase, composable extraction, dependency changes, and testing strategies. The plan documents the transition to the Composition API, typed provide/inject, and the removal of legacy utilities and mixins.Documentation and Developer Experience
.github/copilot-instructions.mdto provide accurate, up-to-date setup, build, testing, and architecture instructions for the new stack. Added sections on common pitfalls, validation scenarios, and detailed explanations of new patterns (e.g., Vuetify 4 slots, file input events, ESM config files).README.mdto match the new development workflow, including new commands for dev server, unit testing, and type checking. Added an environment variables section and clarified usage ofBASE_URLfor different deployment scenarios. [1] [2]Dependency and Build System Updates
.npmrcfile withmin-release-age=7to control package release age for dependency installation.Key Thematic Changes
Migration and Architecture
Documentation and Developer Workflow
Testing and Validation
Build and Dependency Management
.npmrcto enforce a minimum release age for installed packages, improving build stability.These changes lay the foundation for a modern, maintainable, and well-documented codebase, with clear migration steps and improved developer experience.