From d0fcc10f758ca86019fb3a65cc44ae6d8adb17d1 Mon Sep 17 00:00:00 2001
From: cm-ayf <cm.ayf2734@gmail.com>
Date: Mon, 26 Feb 2024 22:45:23 +0900
Subject: [PATCH] =?UTF-8?q?template=E5=86=85=E3=81=AE=E3=82=B3=E3=83=B3?=
 =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E3=81=AE=E5=90=8D?=
 =?UTF-8?q?=E7=A7=B0=E3=82=92PascalCase=E3=81=AB=E5=A4=89=E6=9B=B4=20(#187?=
 =?UTF-8?q?4)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* use vue/component-name-in-template-casing rule

* change component name to PascalCase

* 設定変更

* vuedraggableのimportエラーが出てた

* SequencerPitch

* Fix QLayout and QPageContainer casing in wrapQPage function

---------

Co-authored-by: Hiroshiba <hihokaruta@gmail.com>
---
 .eslintrc.js                                  |   8 +
 src/components/App.vue                        |  14 +-
 src/components/CharacterButton.vue            |  90 +--
 .../Dialog/AcceptRetrieveTelemetryDialog.vue  |  46 +-
 src/components/Dialog/AcceptTermsDialog.vue   |  46 +-
 .../Dialog/CharacterOrderDialog.vue           |  42 +-
 .../Dialog/CharacterTryListenCard.vue         |  10 +-
 .../Dialog/DefaultStyleListDialog.vue         |  38 +-
 .../Dialog/DefaultStyleSelectDialog.vue       |  44 +-
 .../Dialog/DictionaryManageDialog.vue         |  92 +--
 src/components/Dialog/EngineManageDialog.vue  | 128 ++--
 .../Dialog/FileNamePatternDialog.vue          |  28 +-
 .../Dialog/HelpDialog/ContactInfo.vue         |   4 +-
 .../Dialog/HelpDialog/HelpDialog.vue          |  62 +-
 .../Dialog/HelpDialog/HelpPolicy.vue          |   4 +-
 src/components/Dialog/HelpDialog/HowToUse.vue |   4 +-
 .../Dialog/HelpDialog/LibraryPolicy.vue       |  24 +-
 .../Dialog/HelpDialog/OssCommunityInfo.vue    |   4 +-
 .../Dialog/HelpDialog/OssLicense.vue          |  18 +-
 src/components/Dialog/HelpDialog/QAndA.vue    |   4 +-
 .../Dialog/HelpDialog/UpdateInfo.vue          |   4 +-
 src/components/Dialog/HotkeySettingDialog.vue | 104 +--
 src/components/Dialog/PresetManageDialog.vue  |  50 +-
 src/components/Dialog/SaveAllResultDialog.vue |  87 ++-
 src/components/Dialog/SettingDialog.vue       | 652 +++++++++---------
 src/components/Dialog/ToolBarCustomDialog.vue |  92 +--
 .../UpdateNotificationDialog/Container.vue    |   2 +-
 .../UpdateNotificationDialog/Presentation.vue |  32 +-
 src/components/EngineStartupOverlay.vue       |  10 +-
 src/components/Menu/ContextMenu.vue           |  18 +-
 src/components/Menu/MenuBar/BaseMenuBar.vue   |  14 +-
 .../Menu/MenuBar/MinMaxCloseButtons.vue       |  36 +-
 .../Menu/MenuBar/TitleBarButtons.vue          |  42 +-
 .../Menu/MenuBar/TitleBarEditorSwitcher.vue   |   2 +-
 src/components/Menu/MenuButton.vue            |  14 +-
 src/components/Menu/MenuItem.vue              |  46 +-
 src/components/ProgressView.vue               |   6 +-
 .../Sing/CharacterMenuButton/MenuButton.vue   |  70 +-
 .../CharacterMenuButton/SelectedCharacter.vue |  12 +-
 src/components/Sing/MenuBar.vue               |   2 +-
 src/components/Sing/ScoreSequencer.vue        |  14 +-
 src/components/Sing/SequencerNote.vue         |   2 +-
 src/components/Sing/SingEditor.vue            |  12 +-
 src/components/Sing/ToolBar.vue               |  34 +-
 src/components/Talk/AccentPhrase.vue          |  34 +-
 src/components/Talk/AudioAccent.vue           |   2 +-
 src/components/Talk/AudioCell.vue             |  12 +-
 src/components/Talk/AudioDetail.vue           |  24 +-
 src/components/Talk/AudioInfo.vue             | 171 +++--
 src/components/Talk/AudioParameter.vue        |   6 +-
 src/components/Talk/CharacterPortrait.vue     |   2 +-
 src/components/Talk/MenuBar.vue               |   2 +-
 src/components/Talk/TalkEditor.vue            |  74 +-
 src/components/Talk/ToolBar.vue               |  14 +-
 src/components/ToolTip.vue                    |   8 +-
 tests/unit/utils.ts                           |   8 +-
 vite.config.ts                                |   2 +-
 57 files changed, 1213 insertions(+), 1213 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index ee1b654ccb..174b4a429a 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -50,6 +50,14 @@ module.exports = {
         ignoreRestSiblings: true,
       },
     ],
+    "vue/component-name-in-template-casing": [
+      "error",
+      "PascalCase",
+      {
+        registeredComponentsOnly: false,
+        ignores: [],
+      },
+    ],
     "vue/component-tags-order": [
       "error",
       {
diff --git a/src/components/App.vue b/src/components/App.vue
index ed8dac7c6f..be61edb9bd 100644
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -1,16 +1,16 @@
 <template>
-  <error-boundary>
+  <ErrorBoundary>
     <!-- TODO: メニューバーをEditorHomeから移動する -->
-    <router-view v-slot="{ Component }">
-      <keep-alive>
-        <component
+    <RouterView v-slot="{ Component }">
+      <KeepAlive>
+        <Component
           :is="Component"
           :is-engines-ready="isEnginesReady"
           :project-file-path="projectFilePath"
         />
-      </keep-alive>
-    </router-view>
-  </error-boundary>
+      </KeepAlive>
+    </RouterView>
+  </ErrorBoundary>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/CharacterButton.vue b/src/components/CharacterButton.vue
index 1a011e0567..a59f860d5a 100644
--- a/src/components/CharacterButton.vue
+++ b/src/components/CharacterButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-btn
+  <QBtn
     ref="buttonRef"
     flat
     class="q-pa-none character-button"
@@ -15,39 +15,39 @@
         :src="selectedStyleInfo.iconPath"
         :alt="selectedVoiceInfoText"
       />
-      <q-avatar v-else-if="!emptiable" rounded size="2rem" color="primary"
-        ><span color="text-display-on-primary">?</span></q-avatar
+      <QAvatar v-else-if="!emptiable" rounded size="2rem" color="primary"
+        ><span color="text-display-on-primary">?</span></QAvatar
       >
     </div>
     <div v-if="loading" class="loading">
-      <q-spinner color="primary" size="1.6rem" :thickness="7" />
+      <QSpinner color="primary" size="1.6rem" :thickness="7" />
     </div>
-    <q-menu
+    <QMenu
       class="character-menu"
       transition-show="none"
       transition-hide="none"
       :max-height="maxMenuHeight"
       @before-show="updateMenuHeight"
     >
-      <q-list style="min-width: max-content" class="character-item-container">
-        <q-item
+      <QList style="min-width: max-content" class="character-item-container">
+        <QItem
           v-if="selectedStyleInfo == undefined && !emptiable"
           class="warning-item row no-wrap items-center"
         >
           <span class="text-warning vertical-middle"
             >有効なスタイルが選択されていません</span
           >
-        </q-item>
-        <q-item
+        </QItem>
+        <QItem
           v-if="characterInfos.length === 0"
           class="warning-item row no-wrap items-center"
         >
           <span class="text-warning vertical-middle"
             >選択可能なスタイルがありません</span
           >
-        </q-item>
-        <q-item v-if="emptiable" class="to-unselect-item q-pa-none">
-          <q-btn
+        </QItem>
+        <QItem v-if="emptiable" class="to-unselect-item q-pa-none">
+          <QBtn
             v-close-popup
             flat
             no-caps
@@ -56,16 +56,16 @@
             @click="$emit('update:selectedVoice', undefined)"
           >
             <span>選択解除</span>
-          </q-btn>
-        </q-item>
-        <q-item
+          </QBtn>
+        </QItem>
+        <QItem
           v-for="(characterInfo, characterIndex) in characterInfos"
           :key="characterIndex"
           class="q-pa-none"
           :class="isSelectedItem(characterInfo) && 'selected-character-item'"
         >
-          <q-btn-group flat class="col full-width">
-            <q-btn
+          <QBtnGroup flat class="col full-width">
+            <QBtn
               v-close-popup
               flat
               no-caps
@@ -74,8 +74,8 @@
               @mouseover="reassignSubMenuOpen(-1)"
               @mouseleave="reassignSubMenuOpen.cancel()"
             >
-              <q-avatar rounded size="2rem" class="q-mr-md">
-                <q-img
+              <QAvatar rounded size="2rem" class="q-mr-md">
+                <QImg
                   v-if="characterInfo"
                   no-spinner
                   no-transition
@@ -84,7 +84,7 @@
                     getDefaultStyle(characterInfo.metas.speakerUuid).iconPath
                   "
                 />
-                <q-avatar
+                <QAvatar
                   v-if="showEngineInfo && characterInfo.metas.styles.length < 2"
                   class="engine-icon"
                   rounded
@@ -97,13 +97,13 @@
                       ]
                     "
                   />
-                </q-avatar>
-              </q-avatar>
+                </QAvatar>
+              </QAvatar>
               <div>{{ characterInfo.metas.speakerName }}</div>
-            </q-btn>
+            </QBtn>
             <!-- スタイルが2つ以上あるものだけ、スタイル選択ボタンを表示する-->
             <template v-if="characterInfo.metas.styles.length >= 2">
-              <q-separator vertical />
+              <QSeparator vertical />
 
               <div
                 class="flex items-center q-px-sm q-py-none cursor-pointer"
@@ -117,8 +117,8 @@
                 @mouseleave="reassignSubMenuOpen.cancel()"
                 @keyup.right="reassignSubMenuOpen(characterIndex)"
               >
-                <q-icon name="keyboard_arrow_right" color="grey-6" size="sm" />
-                <q-menu
+                <QIcon name="keyboard_arrow_right" color="grey-6" size="sm" />
+                <QMenu
                   v-model="subMenuOpenFlags[characterIndex]"
                   no-parent-event
                   anchor="top end"
@@ -127,8 +127,8 @@
                   transition-hide="none"
                   class="character-menu"
                 >
-                  <q-list style="min-width: max-content">
-                    <q-item
+                  <QList style="min-width: max-content">
+                    <QItem
                       v-for="(style, styleIndex) in characterInfo.metas.styles"
                       :key="styleIndex"
                       v-close-popup
@@ -151,14 +151,14 @@
                         })
                       "
                     >
-                      <q-avatar rounded size="2rem" class="q-mr-md">
-                        <q-img
+                      <QAvatar rounded size="2rem" class="q-mr-md">
+                        <QImg
                           no-spinner
                           no-transition
                           :ratio="1"
                           :src="characterInfo.metas.styles[styleIndex].iconPath"
                         />
-                        <q-avatar
+                        <QAvatar
                           v-if="showEngineInfo"
                           rounded
                           class="engine-icon"
@@ -170,26 +170,26 @@
                               ]
                             "
                           />
-                        </q-avatar>
-                      </q-avatar>
-                      <q-item-section v-if="style.styleName"
+                        </QAvatar>
+                      </QAvatar>
+                      <QItemSection v-if="style.styleName"
                         >{{ characterInfo.metas.speakerName }}（{{
                           style.styleName
-                        }}）</q-item-section
+                        }}）</QItemSection
                       >
-                      <q-item-section v-else>{{
+                      <QItemSection v-else>{{
                         characterInfo.metas.speakerName
-                      }}</q-item-section>
-                    </q-item>
-                  </q-list>
-                </q-menu>
+                      }}</QItemSection>
+                    </QItem>
+                  </QList>
+                </QMenu>
               </div>
             </template>
-          </q-btn-group>
-        </q-item>
-      </q-list>
-    </q-menu>
-  </q-btn>
+          </QBtnGroup>
+        </QItem>
+      </QList>
+    </QMenu>
+  </QBtn>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Dialog/AcceptRetrieveTelemetryDialog.vue b/src/components/Dialog/AcceptRetrieveTelemetryDialog.vue
index 64db1533f7..b67bbf66f5 100644
--- a/src/components/Dialog/AcceptRetrieveTelemetryDialog.vue
+++ b/src/components/Dialog/AcceptRetrieveTelemetryDialog.vue
@@ -1,24 +1,24 @@
 <template>
-  <q-dialog
+  <QDialog
     v-model="modelValueComputed"
     maximized
     transition-show="jump-up"
     transition-hide="jump-down"
     class="accept-retrieve-telemetry-dialog transparent-backdrop"
   >
-    <q-layout container view="hHh Lpr lff" class="bg-background">
-      <q-header class="q-py-sm">
-        <q-toolbar>
+    <QLayout container view="hHh Lpr lff" class="bg-background">
+      <QHeader class="q-py-sm">
+        <QToolbar>
           <div class="column">
-            <q-toolbar-title class="text-display"
-              >使いやすさ向上のためのお願い</q-toolbar-title
+            <QToolbarTitle class="text-display"
+              >使いやすさ向上のためのお願い</QToolbarTitle
             >
           </div>
 
-          <q-space />
+          <QSpace />
 
           <div class="row items-center no-wrap">
-            <q-btn
+            <QBtn
               unelevated
               label="拒否"
               color="toolbar-button"
@@ -27,7 +27,7 @@
               @click="handler(false)"
             />
 
-            <q-btn
+            <QBtn
               unelevated
               label="許可"
               color="toolbar-button"
@@ -36,11 +36,11 @@
               @click="handler(true)"
             />
           </div>
-        </q-toolbar>
-      </q-header>
+        </QToolbar>
+      </QHeader>
 
-      <q-page-container>
-        <q-page>
+      <QPageContainer>
+        <QPage>
           <p class="text-body1 q-mb-lg">
             VOICEVOXはより使いやすいソフトウェアを目指して開発されています。<br /><br />
             ボタンの配置換えなどの方針を決める際は、各UIの利用率などの情報が重要になります。<br />
@@ -48,20 +48,20 @@
             <br />
             （入力されたテキストデータや音声データの情報は収集しておりませんのでご安心ください。）
           </p>
-          <q-card flat bordered>
-            <q-card-section>
+          <QCard flat bordered>
+            <QCardSection>
               <div class="text-h5">プライバシーポリシー</div>
-            </q-card-section>
+            </QCardSection>
 
-            <q-card-section class="text-body1">
+            <QCardSection class="text-body1">
               <!-- eslint-disable-next-line vue/no-v-html -->
               <div v-html="privacyPolicy"></div>
-            </q-card-section>
-          </q-card>
-        </q-page>
-      </q-page-container>
-    </q-layout>
-  </q-dialog>
+            </QCardSection>
+          </QCard>
+        </QPage>
+      </QPageContainer>
+    </QLayout>
+  </QDialog>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Dialog/AcceptTermsDialog.vue b/src/components/Dialog/AcceptTermsDialog.vue
index 6ad2047f28..e2f8e9b9b5 100644
--- a/src/components/Dialog/AcceptTermsDialog.vue
+++ b/src/components/Dialog/AcceptTermsDialog.vue
@@ -1,24 +1,24 @@
 <template>
-  <q-dialog
+  <QDialog
     v-model="modelValueComputed"
     maximized
     transition-show="jump-up"
     transition-hide="jump-down"
     class="accept-terms-dialog transparent-backdrop"
   >
-    <q-layout container view="hHh Lpr lff" class="bg-background">
-      <q-header class="q-py-sm">
-        <q-toolbar>
+    <QLayout container view="hHh Lpr lff" class="bg-background">
+      <QHeader class="q-py-sm">
+        <QToolbar>
           <div class="column">
-            <q-toolbar-title class="text-display"
-              >利用規約に関するお知らせ</q-toolbar-title
+            <QToolbarTitle class="text-display"
+              >利用規約に関するお知らせ</QToolbarTitle
             >
           </div>
 
-          <q-space />
+          <QSpace />
 
           <div class="row items-center no-wrap">
-            <q-btn
+            <QBtn
               unelevated
               label="同意せずに終了"
               color="toolbar-button"
@@ -27,7 +27,7 @@
               @click="handler(false)"
             />
 
-            <q-btn
+            <QBtn
               unelevated
               label="同意して使用開始"
               color="toolbar-button"
@@ -36,29 +36,29 @@
               @click="handler(true)"
             />
           </div>
-        </q-toolbar>
-      </q-header>
+        </QToolbar>
+      </QHeader>
 
-      <q-page-container>
-        <q-page>
+      <QPageContainer>
+        <QPage>
           <p class="text-body1 q-mb-lg">
             多くの人が安心して VOICEVOX
             を使えるよう、利用規約への同意をお願いします。
           </p>
-          <q-card flat bordered>
-            <q-card-section>
+          <QCard flat bordered>
+            <QCardSection>
               <div class="text-h5">利用規約</div>
-            </q-card-section>
+            </QCardSection>
 
-            <q-card-section>
+            <QCardSection>
               <!-- eslint-disable-next-line vue/no-v-html -->
               <div class="q-pa-md markdown markdown-body" v-html="terms" />
-            </q-card-section>
-          </q-card>
-        </q-page>
-      </q-page-container>
-    </q-layout>
-  </q-dialog>
+            </QCardSection>
+          </QCard>
+        </QPage>
+      </QPageContainer>
+    </QLayout>
+  </QDialog>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Dialog/CharacterOrderDialog.vue b/src/components/Dialog/CharacterOrderDialog.vue
index 14f3a5447f..711947c7f3 100644
--- a/src/components/Dialog/CharacterOrderDialog.vue
+++ b/src/components/Dialog/CharacterOrderDialog.vue
@@ -1,26 +1,26 @@
 <template>
-  <q-dialog
+  <QDialog
     v-model="modelValueComputed"
     maximized
     transition-show="jump-up"
     transition-hide="jump-down"
     class="transparent-backdrop"
   >
-    <q-layout container view="hHh Lpr lff" class="bg-background">
-      <q-header class="q-py-sm">
-        <q-toolbar>
+    <QLayout container view="hHh Lpr lff" class="bg-background">
+      <QHeader class="q-py-sm">
+        <QToolbar>
           <div class="column">
-            <q-toolbar-title class="text-display">{{
+            <QToolbarTitle class="text-display">{{
               hasNewCharacter
                 ? "追加キャラクターの紹介"
                 : "設定 / キャラクター並び替え・試聴"
-            }}</q-toolbar-title>
+            }}</QToolbarTitle>
           </div>
 
-          <q-space />
+          <QSpace />
 
           <div class="row items-center no-wrap">
-            <q-btn
+            <QBtn
               unelevated
               label="完了"
               color="toolbar-button"
@@ -29,10 +29,10 @@
               @click="closeDialog"
             />
           </div>
-        </q-toolbar>
-      </q-header>
+        </QToolbar>
+      </QHeader>
 
-      <q-drawer
+      <QDrawer
         bordered
         show-if-above
         :model-value="true"
@@ -42,10 +42,10 @@
         <div class="character-portrait-wrapper">
           <img :src="portrait" class="character-portrait" />
         </div>
-      </q-drawer>
+      </QDrawer>
 
-      <q-page-container>
-        <q-page class="main">
+      <QPageContainer>
+        <QPage class="main">
           <div class="character-items-container">
             <span class="text-h6 q-py-md">サンプルボイス一覧</span>
             <div>
@@ -71,7 +71,7 @@
             <div class="text-subtitle1 text-weight-bold text-center q-py-md">
               キャラクター並び替え
             </div>
-            <draggable
+            <Draggable
               v-model="characterOrder"
               class="character-order q-px-sm"
               :item-key="keyOfCharacterOrderItem"
@@ -96,12 +96,12 @@
                   {{ element.metas.speakerName }}
                 </div>
               </template>
-            </draggable>
+            </Draggable>
           </div>
-        </q-page>
-      </q-page-container>
-    </q-layout>
-  </q-dialog>
+        </QPage>
+      </QPageContainer>
+    </QLayout>
+  </QDialog>
 </template>
 
 <script setup lang="ts">
@@ -111,6 +111,8 @@ import CharacterTryListenCard from "./CharacterTryListenCard.vue";
 import { useStore } from "@/store";
 import { CharacterInfo, SpeakerId, StyleId, StyleInfo } from "@/type/preload";
 
+const Draggable = draggable;
+
 const props =
   defineProps<{
     modelValue: boolean;
diff --git a/src/components/Dialog/CharacterTryListenCard.vue b/src/components/Dialog/CharacterTryListenCard.vue
index 985dfbef7d..77c48ecbda 100644
--- a/src/components/Dialog/CharacterTryListenCard.vue
+++ b/src/components/Dialog/CharacterTryListenCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-item
+  <QItem
     v-ripple="isHoverableItem"
     clickable
     class="q-pa-none character-item"
@@ -25,7 +25,7 @@
         v-if="characterInfo.metas.styles.length > 1"
         class="style-select-container"
       >
-        <q-btn
+        <QBtn
           flat
           dense
           icon="chevron_left"
@@ -42,7 +42,7 @@
         <span aria-live="polite">{{
           selectedStyle.styleName || DEFAULT_STYLE_NAME
         }}</span>
-        <q-btn
+        <QBtn
           flat
           dense
           icon="chevron_right"
@@ -58,7 +58,7 @@
         />
       </div>
       <div class="voice-samples">
-        <q-btn
+        <QBtn
           v-for="voiceSampleIndex of [...Array(3).keys()]"
           :key="voiceSampleIndex"
           round
@@ -89,7 +89,7 @@
         NEW!
       </div>
     </div>
-  </q-item>
+  </QItem>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Dialog/DefaultStyleListDialog.vue b/src/components/Dialog/DefaultStyleListDialog.vue
index 1b8e8dcfb8..0832f98bf0 100644
--- a/src/components/Dialog/DefaultStyleListDialog.vue
+++ b/src/components/Dialog/DefaultStyleListDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <default-style-select-dialog
+  <DefaultStyleSelectDialog
     v-if="
       selectedCharacterInfo &&
       selectedStyleIndexes[selectedCharacterInfo.metas.speakerUuid] !==
@@ -11,26 +11,26 @@
     "
     :character-info="selectedCharacterInfo"
   />
-  <q-dialog
+  <QDialog
     v-model="modelValueComputed"
     maximized
     transition-show="jump-up"
     transition-hide="jump-down"
     class="transparent-backdrop"
   >
-    <q-layout container view="hHh Lpr lff" class="bg-background">
-      <q-header class="q-py-sm">
-        <q-toolbar>
+    <QLayout container view="hHh Lpr lff" class="bg-background">
+      <QHeader class="q-py-sm">
+        <QToolbar>
           <div class="column">
-            <q-toolbar-title class="text-display"
-              >設定 / デフォルトスタイル・試聴</q-toolbar-title
+            <QToolbarTitle class="text-display"
+              >設定 / デフォルトスタイル・試聴</QToolbarTitle
             >
           </div>
 
-          <q-space />
+          <QSpace />
 
           <div class="row items-center no-wrap">
-            <q-btn
+            <QBtn
               unelevated
               label="完了"
               color="toolbar-button"
@@ -39,14 +39,14 @@
               @click="closeDialog"
             />
           </div>
-        </q-toolbar>
-      </q-header>
+        </QToolbar>
+      </QHeader>
 
-      <q-page-container>
-        <q-page class="main">
+      <QPageContainer>
+        <QPage class="main">
           <div class="character-items-container">
             <div>
-              <q-item
+              <QItem
                 v-for="speaker of speakerWithMultipleStyles"
                 :key="speaker.metas.speakerUuid"
                 v-ripple="isHoverableItem"
@@ -91,13 +91,13 @@
                     >
                   </div>
                 </div>
-              </q-item>
+              </QItem>
             </div>
           </div>
-        </q-page>
-      </q-page-container>
-    </q-layout>
-  </q-dialog>
+        </QPage>
+      </QPageContainer>
+    </QLayout>
+  </QDialog>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Dialog/DefaultStyleSelectDialog.vue b/src/components/Dialog/DefaultStyleSelectDialog.vue
index c6803f7123..9d2cb2d8f7 100644
--- a/src/components/Dialog/DefaultStyleSelectDialog.vue
+++ b/src/components/Dialog/DefaultStyleSelectDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-dialog
+  <QDialog
     v-model="isOpenComputed"
     maximized
     transition-show="none"
@@ -7,20 +7,20 @@
     transition-duration="100"
     class="default-style-select-dialog transparent-backdrop"
   >
-    <q-layout container view="hHh Lpr lff" class="bg-background">
-      <q-header class="q-py-sm">
-        <q-toolbar>
+    <QLayout container view="hHh Lpr lff" class="bg-background">
+      <QHeader class="q-py-sm">
+        <QToolbar>
           <div class="column">
-            <q-toolbar-title class="text-display"
+            <QToolbarTitle class="text-display"
               >設定 / デフォルトスタイル・試聴 /
-              {{ characterInfo.metas.speakerName }}</q-toolbar-title
+              {{ characterInfo.metas.speakerName }}</QToolbarTitle
             >
           </div>
 
-          <q-space />
+          <QSpace />
 
           <div class="row items-center no-wrap">
-            <q-btn
+            <QBtn
               unelevated
               :label="isModified ? '保存' : '戻る'"
               color="toolbar-button"
@@ -29,10 +29,10 @@
               @click="closeDialog"
             />
           </div>
-        </q-toolbar>
-      </q-header>
+        </QToolbar>
+      </QHeader>
 
-      <q-drawer
+      <QDrawer
         bordered
         show-if-above
         :model-value="true"
@@ -42,13 +42,13 @@
         <div class="character-portrait-wrapper">
           <img :src="characterInfo.portraitPath" class="character-portrait" />
         </div>
-      </q-drawer>
+      </QDrawer>
 
-      <q-page-container>
-        <q-page>
+      <QPageContainer>
+        <QPage>
           <div class="style-items-container">
             <div class="q-py-md">
-              <q-item
+              <QItem
                 v-for="(style, styleIndex) of characterInfo.metas.styles"
                 :key="styleIndex"
                 v-ripple="isHoverableStyleItem"
@@ -67,7 +67,7 @@
                     style.styleName || DEFAULT_STYLE_NAME
                   }}</span>
                   <div class="voice-samples">
-                    <q-btn
+                    <QBtn
                       v-for="voiceSampleIndex of [...Array(3).keys()]"
                       :key="voiceSampleIndex"
                       round
@@ -99,7 +99,7 @@
                             )
                       "
                     />
-                    <q-radio
+                    <QRadio
                       class="absolute-top-right no-pointer-events text-primary"
                       :model-value="selectedStyleIndexComputed"
                       :val="styleIndex"
@@ -107,13 +107,13 @@
                     />
                   </div>
                 </div>
-              </q-item>
+              </QItem>
             </div>
           </div>
-        </q-page>
-      </q-page-container>
-    </q-layout>
-  </q-dialog>
+        </QPage>
+      </QPageContainer>
+    </QLayout>
+  </QDialog>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Dialog/DictionaryManageDialog.vue b/src/components/Dialog/DictionaryManageDialog.vue
index 45ec975936..3259967803 100644
--- a/src/components/Dialog/DictionaryManageDialog.vue
+++ b/src/components/Dialog/DictionaryManageDialog.vue
@@ -1,21 +1,21 @@
 <template>
-  <q-dialog
+  <QDialog
     v-model="dictionaryManageDialogOpenedComputed"
     maximized
     transition-show="jump-up"
     transition-hide="jump-down"
     class="setting-dialog transparent-backdrop"
   >
-    <q-layout container view="hHh Lpr fFf" class="bg-background">
-      <q-page-container>
-        <q-header class="q-pa-sm">
-          <q-toolbar>
-            <q-toolbar-title class="text-display"
-              >読み方＆アクセント辞書</q-toolbar-title
+    <QLayout container view="hHh Lpr fFf" class="bg-background">
+      <QPageContainer>
+        <QHeader class="q-pa-sm">
+          <QToolbar>
+            <QToolbarTitle class="text-display"
+              >読み方＆アクセント辞書</QToolbarTitle
             >
-            <q-space />
+            <QSpace />
             <!-- close button -->
-            <q-btn
+            <QBtn
               round
               flat
               icon="close"
@@ -23,12 +23,12 @@
               :disable="wordEditing"
               @click="discardOrNotDialog(closeDialog)"
             />
-          </q-toolbar>
-        </q-header>
-        <q-page class="row">
+          </QToolbar>
+        </QHeader>
+        <QPage class="row">
           <div v-if="loadingDictState" class="loading-dict">
             <div>
-              <q-spinner color="primary" size="2.5rem" />
+              <QSpinner color="primary" size="2.5rem" />
               <div class="q-mt-xs">
                 <template v-if="loadingDictState === 'loading'"
                   >読み込み中・・・</template
@@ -48,34 +48,34 @@
             <div class="word-list-header text-no-wrap">
               <div class="row word-list-title text-h5">単語一覧</div>
               <div class="row no-wrap">
-                <q-btn
+                <QBtn
                   outline
                   text-color="warning"
                   class="text-no-wrap text-bold col-sm q-ma-sm"
                   :disable="uiLocked || !isDeletable"
                   @click="deleteWord"
-                  >削除</q-btn
+                  >削除</QBtn
                 >
-                <q-btn
+                <QBtn
                   outline
                   text-color="display"
                   class="text-no-wrap text-bold col-sm q-ma-sm"
                   :disable="uiLocked || !selectedId"
                   @click="editWord"
-                  >編集</q-btn
+                  >編集</QBtn
                 >
-                <q-btn
+                <QBtn
                   outline
                   text-color="display"
                   class="text-no-wrap text-bold col-sm q-ma-sm"
                   :disable="uiLocked"
                   @click="newWord"
-                  >追加</q-btn
+                  >追加</QBtn
                 >
               </div>
             </div>
-            <q-list class="word-list">
-              <q-item
+            <QList class="word-list">
+              <QItem
                 v-for="(value, key) in userDict"
                 :key="key"
                 v-ripple
@@ -86,14 +86,14 @@
                 @click="selectWord(key)"
                 @dblclick="editWord"
               >
-                <q-item-section>
-                  <q-item-label class="text-display">{{
+                <QItemSection>
+                  <QItemLabel class="text-display">{{
                     value.surface
-                  }}</q-item-label>
-                  <q-item-label caption>{{ value.yomi }}</q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
+                  }}</QItemLabel>
+                  <QItemLabel caption>{{ value.yomi }}</QItemLabel>
+                </QItemSection>
+              </QItem>
+            </QList>
           </div>
 
           <!-- 右側のpane -->
@@ -103,7 +103,7 @@
           >
             <div class="row q-pl-md q-mt-md">
               <div class="text-h6">単語</div>
-              <q-input
+              <QInput
                 ref="surfaceInput"
                 v-model="surface"
                 class="word-input"
@@ -115,7 +115,7 @@
             </div>
             <div class="row q-pl-md q-pt-sm">
               <div class="text-h6">読み</div>
-              <q-input
+              <QInput
                 ref="yomiInput"
                 v-model="yomi"
                 class="word-input q-pb-none"
@@ -128,7 +128,7 @@
                 <template #error>
                   読みに使える文字はひらがなとカタカナのみです。
                 </template>
-              </q-input>
+              </QInput>
             </div>
             <div class="row q-pl-md q-mt-lg text-h6">アクセント調整</div>
             <div class="row q-pl-md desc-row">
@@ -136,7 +136,7 @@
             </div>
             <div class="row q-px-md" style="height: 130px">
               <div class="play-button">
-                <q-btn
+                <QBtn
                   v-if="!nowPlaying && !nowGenerating"
                   fab
                   color="primary"
@@ -144,7 +144,7 @@
                   icon="play_arrow"
                   @click="play"
                 />
-                <q-btn
+                <QBtn
                   v-else
                   fab
                   color="primary"
@@ -159,7 +159,7 @@
                 class="accent-phrase-table overflow-hidden-y"
               >
                 <div v-if="accentPhrase" class="mora-table">
-                  <audio-accent
+                  <AudioAccent
                     :accent-phrase="accentPhrase"
                     :accent-phrase-index="0"
                     :ui-locked="uiLocked"
@@ -198,7 +198,7 @@
                 justifyContent: 'center',
               }"
             >
-              <q-slider
+              <QSlider
                 v-model="wordPriority"
                 snap
                 dense
@@ -214,38 +214,38 @@
               />
             </div>
             <div class="row q-px-md save-delete-reset-buttons">
-              <q-space />
-              <q-btn
+              <QSpace />
+              <QBtn
                 v-show="!!selectedId"
                 outline
                 text-color="display"
                 class="text-no-wrap text-bold q-mr-sm"
                 :disable="uiLocked || !isWordChanged"
                 @click="resetWord"
-                >リセット</q-btn
+                >リセット</QBtn
               >
-              <q-btn
+              <QBtn
                 outline
                 text-color="display"
                 class="text-no-wrap text-bold q-mr-sm"
                 :disable="uiLocked"
                 @click="discardOrNotDialog(cancel)"
-                >キャンセル</q-btn
+                >キャンセル</QBtn
               >
-              <q-btn
+              <QBtn
                 outline
                 text-color="display"
                 class="text-no-wrap text-bold q-mr-sm"
                 :disable="uiLocked || !isWordChanged"
                 @click="saveWord"
-                >保存</q-btn
+                >保存</QBtn
               >
             </div>
           </div>
-        </q-page>
-      </q-page-container>
-    </q-layout>
-  </q-dialog>
+        </QPage>
+      </QPageContainer>
+    </QLayout>
+  </QDialog>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Dialog/EngineManageDialog.vue b/src/components/Dialog/EngineManageDialog.vue
index d96fb8fa76..7bacc69c70 100644
--- a/src/components/Dialog/EngineManageDialog.vue
+++ b/src/components/Dialog/EngineManageDialog.vue
@@ -1,21 +1,19 @@
 <template>
-  <q-dialog
+  <QDialog
     v-model="engineManageDialogOpenedComputed"
     maximized
     transition-show="jump-up"
     transition-hide="jump-down"
     class="setting-dialog transparent-backdrop"
   >
-    <q-layout container view="hHh Lpr fFf" class="bg-background">
-      <q-page-container>
-        <q-header class="q-pa-sm">
-          <q-toolbar>
-            <q-toolbar-title class="text-display"
-              >エンジンの管理</q-toolbar-title
-            >
-            <q-space />
+    <QLayout container view="hHh Lpr fFf" class="bg-background">
+      <QPageContainer>
+        <QHeader class="q-pa-sm">
+          <QToolbar>
+            <QToolbarTitle class="text-display">エンジンの管理</QToolbarTitle>
+            <QSpace />
             <!-- close button -->
-            <q-btn
+            <QBtn
               round
               flat
               icon="close"
@@ -23,12 +21,12 @@
               :disabled="isAddingEngine || uiLocked"
               @click="toDialogClosedState"
             />
-          </q-toolbar>
-        </q-header>
-        <q-page class="row">
+          </QToolbar>
+        </QHeader>
+        <QPage class="row">
           <div v-if="uiLockedState" class="ui-lock-popup">
             <div class="q-pa-md">
-              <q-spinner color="primary" size="2.5rem" />
+              <QSpinner color="primary" size="2.5rem" />
               <div class="q-mt-xs">
                 <template v-if="uiLockedState === 'addingEngine'"
                   >追加中・・・</template
@@ -44,28 +42,26 @@
             <div class="engine-list-header text-no-wrap">
               <div class="row engine-list-title text-h5">エンジン一覧</div>
               <div class="row no-wrap">
-                <q-btn
+                <QBtn
                   outline
                   text-color="display"
                   class="text-no-wrap text-bold col-sm q-ma-sm"
                   :disable="uiLocked"
                   @click="toAddEngineState"
-                  >追加</q-btn
+                  >追加</QBtn
                 >
               </div>
             </div>
-            <q-list class="engine-list">
+            <QList class="engine-list">
               <template
                 v-for="([type, engineIds], i) in Object.entries(
                   categorizedEngineIds
                 )"
                 :key="`engine-list-${i}`"
               >
-                <q-separator v-if="i > 0" spaced />
-                <q-item-label header>
-                  {{ getEngineTypeName(type) }}</q-item-label
-                >
-                <q-item
+                <QSeparator v-if="i > 0" spaced />
+                <QItemLabel header> {{ getEngineTypeName(type) }}</QItemLabel>
+                <QItem
                   v-for="id in engineIds"
                   :key="id"
                   v-ripple
@@ -75,29 +71,29 @@
                   active-class="active-engine"
                   @click="selectEngine(id)"
                 >
-                  <q-item-section avatar>
-                    <q-avatar rounded color="primary">
+                  <QItemSection avatar>
+                    <QAvatar rounded color="primary">
                       <img
                         v-if="engineIcons[id]"
                         :src="engineIcons[id]"
                         :alt="engineInfos[id].name"
                       />
                       <span v-else class="text-display-on-primary"> ? </span>
-                    </q-avatar>
-                  </q-item-section>
-                  <q-item-section>
-                    <q-item-label class="text-display">{{
+                    </QAvatar>
+                  </QItemSection>
+                  <QItemSection>
+                    <QItemLabel class="text-display">{{
                       engineInfos[id].name
-                    }}</q-item-label>
-                    <q-item-label caption class="engine-path">{{
+                    }}</QItemLabel>
+                    <QItemLabel caption class="engine-path">{{
                       engineManifests[id] != undefined
                         ? engineManifests[id].brandName
                         : engineInfos[id].uuid
-                    }}</q-item-label>
-                  </q-item-section>
-                </q-item>
+                    }}</QItemLabel>
+                  </QItemSection>
+                </QItem>
               </template>
-            </q-list>
+            </QList>
           </div>
 
           <!-- 右側のpane -->
@@ -109,7 +105,7 @@
               <div class="text-h5 q-ma-sm">エンジンの追加</div>
 
               <div class="q-ma-sm">
-                <q-btn-toggle
+                <QBtnToggle
                   v-model="engineLoaderType"
                   :options="[
                     { value: 'vvpp', label: 'VVPPファイル' },
@@ -129,7 +125,7 @@
                 VVPPファイルでエンジンをインストールします。
               </div>
               <div class="q-ma-sm">
-                <q-input
+                <QInput
                   ref="vvppFilePathInput"
                   v-model="vvppFilePath"
                   dense
@@ -138,7 +134,7 @@
                   @click="selectVvppFile"
                 >
                   <template #append>
-                    <q-btn
+                    <QBtn
                       square
                       dense
                       flat
@@ -146,10 +142,10 @@
                       icon="folder_open"
                       @click="selectVvppFile"
                     >
-                      <q-tooltip :delay="500" anchor="bottom left">
+                      <QTooltip :delay="500" anchor="bottom left">
                         ファイル選択
-                      </q-tooltip>
-                    </q-btn>
+                      </QTooltip>
+                    </QBtn>
                   </template>
                   <template #error>
                     {{
@@ -160,13 +156,13 @@
                         : undefined
                     }}
                   </template>
-                </q-input>
+                </QInput>
               </div>
             </div>
             <div v-if="engineLoaderType === 'dir'" class="no-wrap q-pl-md">
               <div class="q-ma-sm">PC内にあるエンジンを追加します。</div>
               <div class="q-ma-sm">
-                <q-input
+                <QInput
                   ref="newEngineDirInput"
                   v-model="newEngineDir"
                   dense
@@ -179,7 +175,7 @@
                   @click="selectEngineDir"
                 >
                   <template #append>
-                    <q-btn
+                    <QBtn
                       square
                       dense
                       flat
@@ -187,10 +183,10 @@
                       icon="folder_open"
                       @click="selectEngineDir"
                     >
-                      <q-tooltip :delay="500" anchor="bottom left">
+                      <QTooltip :delay="500" anchor="bottom left">
                         フォルダ選択
-                      </q-tooltip>
-                    </q-btn>
+                      </QTooltip>
+                    </QBtn>
                   </template>
                   <template #error>
                     {{
@@ -201,26 +197,26 @@
                         : undefined
                     }}
                   </template>
-                </q-input>
+                </QInput>
               </div>
             </div>
             <div class="row q-px-md right-pane-buttons">
-              <q-space />
+              <QSpace />
 
-              <q-btn
+              <QBtn
                 outline
                 text-color="display"
                 class="text-no-wrap text-bold q-mr-sm"
                 @click="toInitialState"
-                >キャンセル</q-btn
+                >キャンセル</QBtn
               >
-              <q-btn
+              <QBtn
                 outline
                 text-color="display"
                 class="text-no-wrap text-bold q-mr-sm"
                 :disabled="!canAddEngine"
                 @click="addEngine"
-                >追加</q-btn
+                >追加</QBtn
               >
             </div>
           </div>
@@ -236,9 +232,9 @@
                 class="engine-icon"
               />
               <div v-else class="q-mt-sm inline-block">
-                <q-avatar rounded color="primary" size="2rem">
+                <QAvatar rounded color="primary" size="2rem">
                   <span class="text-display-on-primary"> ? </span>
-                </q-avatar>
+                </QAvatar>
               </div>
               <div class="text-h5 q-ma-sm">
                 {{ engineInfos[selectedId].name }}
@@ -302,7 +298,7 @@
                   'q-ma-sm' + (engineInfos[selectedId].path ? '' : ' disabled')
                 "
               >
-                <q-input
+                <QInput
                   ref="pathInput"
                   v-model="engineDir"
                   disabled
@@ -312,9 +308,9 @@
               </div>
             </div>
             <div class="row q-px-md right-pane-buttons">
-              <q-space />
+              <QSpace />
 
-              <q-btn
+              <QBtn
                 outline
                 text-color="warning"
                 class="text-no-wrap text-bold q-mr-sm"
@@ -323,30 +319,30 @@
                   !['path', 'vvpp'].includes(engineInfos[selectedId].type)
                 "
                 @click="deleteEngine"
-                >削除</q-btn
+                >削除</QBtn
               >
-              <q-btn
+              <QBtn
                 outline
                 text-color="display"
                 class="text-no-wrap text-bold q-mr-sm"
                 :disable="uiLocked || !engineInfos[selectedId].path"
                 @click="openSelectedEngineDirectory"
-                >フォルダを開く</q-btn
+                >フォルダを開く</QBtn
               >
-              <q-btn
+              <QBtn
                 outline
                 text-color="display"
                 class="text-no-wrap text-bold q-mr-sm"
                 :disable="uiLocked || engineStates[selectedId] === 'STARTING'"
                 @click="restartSelectedEngine"
-                >再起動</q-btn
+                >再起動</QBtn
               >
             </div>
           </div>
-        </q-page>
-      </q-page-container>
-    </q-layout>
-  </q-dialog>
+        </QPage>
+      </QPageContainer>
+    </QLayout>
+  </QDialog>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Dialog/FileNamePatternDialog.vue b/src/components/Dialog/FileNamePatternDialog.vue
index b329e02657..6bba2b8745 100644
--- a/src/components/Dialog/FileNamePatternDialog.vue
+++ b/src/components/Dialog/FileNamePatternDialog.vue
@@ -1,20 +1,20 @@
 <template>
-  <q-dialog
+  <QDialog
     :model-value="props.openDialog"
     @update:model-value="updateOpenDialog"
     @before-show="initializeInput"
   >
-    <q-card class="q-pa-md dialog-card">
-      <q-card-section>
+    <QCard class="q-pa-md dialog-card">
+      <QCardSection>
         <div class="text-h5">書き出しファイル名パターン</div>
         <div class="text-body2 text-grey-8">
           「$キャラ$」のようなタグを使って書き出すファイル名をカスタマイズできます
         </div>
-      </q-card-section>
-      <q-card-actions class="setting-card q-px-md q-py-sm">
+      </QCardSection>
+      <QCardActions class="setting-card q-px-md q-py-sm">
         <div class="row full-width justify-between">
           <div class="col">
-            <q-input
+            <QInput
               ref="patternInput"
               v-model="currentBaseNamePattern"
               dense
@@ -27,7 +27,7 @@
               :error-message="errorMessage"
             >
               <template #after>
-                <q-btn
+                <QBtn
                   label="デフォルトにリセット"
                   outline
                   text-color="display"
@@ -35,14 +35,14 @@
                   @click="resetToDefault"
                 />
               </template>
-            </q-input>
+            </QInput>
           </div>
         </div>
         <div class="text-body2 text-ellipsis">
           出力例）{{ previewFileName }}
         </div>
         <div class="row full-width q-my-md">
-          <q-btn
+          <QBtn
             v-for="tagString in tagStrings"
             :key="tagString"
             :label="`$${tagString}$`"
@@ -53,14 +53,14 @@
           />
         </div>
         <div class="row full-width justify-end">
-          <q-btn
+          <QBtn
             label="キャンセル"
             outline
             text-color="display"
             class="text-no-wrap text-bold q-mr-sm col-2"
             @click="updateOpenDialog(false)"
           />
-          <q-btn
+          <QBtn
             label="確定"
             unelevated
             color="primary"
@@ -70,9 +70,9 @@
             @click="submit"
           />
         </div>
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
+      </QCardActions>
+    </QCard>
+  </QDialog>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Dialog/HelpDialog/ContactInfo.vue b/src/components/Dialog/HelpDialog/ContactInfo.vue
index 7120407ecd..7503291342 100644
--- a/src/components/Dialog/HelpDialog/ContactInfo.vue
+++ b/src/components/Dialog/HelpDialog/ContactInfo.vue
@@ -1,8 +1,8 @@
 <template>
-  <q-page class="relative-absolute-wrapper scroller bg-background">
+  <QPage class="relative-absolute-wrapper scroller bg-background">
     <!-- eslint-disable-next-line vue/no-v-html -->
     <div class="q-pa-md markdown markdown-body" v-html="contact"></div>
-  </q-page>
+  </QPage>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Dialog/HelpDialog/HelpDialog.vue b/src/components/Dialog/HelpDialog/HelpDialog.vue
index b323397705..1716b4c648 100644
--- a/src/components/Dialog/HelpDialog/HelpDialog.vue
+++ b/src/components/Dialog/HelpDialog/HelpDialog.vue
@@ -1,13 +1,13 @@
 <template>
-  <q-dialog
+  <QDialog
     v-model="modelValueComputed"
     maximized
     transition-show="jump-up"
     transition-hide="jump-down"
     class="help-dialog transparent-backdrop"
   >
-    <q-layout container view="hHh Lpr lff">
-      <q-drawer
+    <QLayout container view="hHh Lpr lff">
+      <QDrawer
         bordered
         show-if-above
         class="bg-background"
@@ -16,9 +16,9 @@
         :breakpoint="0"
       >
         <div class="column full-height">
-          <q-list>
+          <QList>
             <template v-for="(page, pageIndex) of pagedata" :key="pageIndex">
-              <q-item
+              <QItem
                 v-if="page.type === 'item'"
                 v-ripple
                 clickable
@@ -26,34 +26,34 @@
                 :active="selectedPageIndex === pageIndex"
                 @click="selectedPageIndex = pageIndex"
               >
-                <q-item-section> {{ page.name }} </q-item-section>
-              </q-item>
+                <QItemSection> {{ page.name }} </QItemSection>
+              </QItem>
               <template v-else-if="page.type === 'separator'">
-                <q-separator />
-                <q-item-label header>{{ page.name }}</q-item-label>
+                <QSeparator />
+                <QItemLabel header>{{ page.name }}</QItemLabel>
               </template>
             </template>
-          </q-list>
+          </QList>
         </div>
-      </q-drawer>
+      </QDrawer>
 
-      <q-page-container>
-        <q-page>
-          <q-tab-panels v-model="selectedPageIndex">
-            <q-tab-panel
+      <QPageContainer>
+        <QPage>
+          <QTabPanels v-model="selectedPageIndex">
+            <QTabPanel
               v-for="(page, pageIndex) of pagedata"
               :key="pageIndex"
               :name="pageIndex"
               class="q-pa-none"
             >
               <div v-if="page.type === 'item'" class="root">
-                <q-header class="q-pa-sm">
-                  <q-toolbar>
-                    <q-toolbar-title class="text-display">
+                <QHeader class="q-pa-sm">
+                  <QToolbar>
+                    <QToolbarTitle class="text-display">
                       ヘルプ / {{ page.parent ? page.parent + " / " : ""
                       }}{{ page.name }}
-                    </q-toolbar-title>
-                    <q-btn
+                    </QToolbarTitle>
+                    <QBtn
                       v-if="page.component === ContactInfo"
                       unelevated
                       color="toolbar-button"
@@ -62,9 +62,9 @@
                       @click="openLogDirectory"
                     >
                       ログフォルダを開く
-                    </q-btn>
+                    </QBtn>
                     <!-- close button -->
-                    <q-btn
+                    <QBtn
                       round
                       flat
                       icon="close"
@@ -72,16 +72,16 @@
                       aria-label="ヘルプを閉じる"
                       @click="modelValueComputed = false"
                     />
-                  </q-toolbar>
-                </q-header>
-                <component :is="page.component" v-bind="page.props" />
+                  </QToolbar>
+                </QHeader>
+                <Component :is="page.component" v-bind="page.props" />
               </div>
-            </q-tab-panel>
-          </q-tab-panels>
-        </q-page>
-      </q-page-container>
-    </q-layout>
-  </q-dialog>
+            </QTabPanel>
+          </QTabPanels>
+        </QPage>
+      </QPageContainer>
+    </QLayout>
+  </QDialog>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Dialog/HelpDialog/HelpPolicy.vue b/src/components/Dialog/HelpDialog/HelpPolicy.vue
index a256ce57a9..07b4da18f5 100644
--- a/src/components/Dialog/HelpDialog/HelpPolicy.vue
+++ b/src/components/Dialog/HelpDialog/HelpPolicy.vue
@@ -1,8 +1,8 @@
 <template>
-  <q-page class="relative-absolute-wrapper scroller bg-background">
+  <QPage class="relative-absolute-wrapper scroller bg-background">
     <!-- eslint-disable-next-line vue/no-v-html -->
     <div class="q-pa-md markdown markdown-body" v-html="policyHtml"></div>
-  </q-page>
+  </QPage>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Dialog/HelpDialog/HowToUse.vue b/src/components/Dialog/HelpDialog/HowToUse.vue
index da3bc7ba8b..2eb0fd2259 100644
--- a/src/components/Dialog/HelpDialog/HowToUse.vue
+++ b/src/components/Dialog/HelpDialog/HowToUse.vue
@@ -1,8 +1,8 @@
 <template>
-  <q-page class="relative-absolute-wrapper scroller markdown-body">
+  <QPage class="relative-absolute-wrapper scroller markdown-body">
     <!-- eslint-disable-next-line vue/no-v-html -->
     <div class="q-pa-md markdown" v-html="howToUse"></div>
-  </q-page>
+  </QPage>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Dialog/HelpDialog/LibraryPolicy.vue b/src/components/Dialog/HelpDialog/LibraryPolicy.vue
index 404b61c163..1fa47b7503 100644
--- a/src/components/Dialog/HelpDialog/LibraryPolicy.vue
+++ b/src/components/Dialog/HelpDialog/LibraryPolicy.vue
@@ -1,10 +1,10 @@
 <template>
-  <q-page
+  <QPage
     ref="scroller"
     class="relative-absolute-wrapper scroller bg-background"
   >
     <div class="q-pa-md markdown-body">
-      <q-list v-if="selectedInfo === undefined">
+      <QList v-if="selectedInfo === undefined">
         <template
           v-for="(engineId, engineIndex) in sortedEngineInfos.map(
             (engineInfo) => engineInfo.uuid
@@ -13,10 +13,10 @@
         >
           <!-- エンジンが一つだけの場合は名前を表示しない -->
           <template v-if="engineInfos.size > 1">
-            <q-separator v-if="engineIndex > 0" spaced />
-            <q-item-label header>{{
+            <QSeparator v-if="engineIndex > 0" spaced />
+            <QItemLabel header>{{
               mapNullablePipe(engineInfos.get(engineId), (v) => v.name)
-            }}</q-item-label>
+            }}</QItemLabel>
           </template>
           <template
             v-for="([, characterInfo], characterIndex) in mapNullablePipe(
@@ -25,7 +25,7 @@
             )"
             :key="characterIndex"
           >
-            <q-item
+            <QItem
               clickable
               @click="
                 selectCharacterInfo({
@@ -34,16 +34,14 @@
                 })
               "
             >
-              <q-item-section>{{
-                characterInfo.metas.speakerName
-              }}</q-item-section>
-            </q-item>
+              <QItemSection>{{ characterInfo.metas.speakerName }}</QItemSection>
+            </QItem>
           </template>
         </template>
-      </q-list>
+      </QList>
       <div v-else>
         <div class="q-mb-md">
-          <q-btn
+          <QBtn
             outline
             color="primary"
             icon="keyboard_arrow_left"
@@ -65,7 +63,7 @@
         <div v-if="policy" class="markdown" v-html="policy"></div>
       </div>
     </div>
-  </q-page>
+  </QPage>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Dialog/HelpDialog/OssCommunityInfo.vue b/src/components/Dialog/HelpDialog/OssCommunityInfo.vue
index 9d421b731c..14510d1258 100644
--- a/src/components/Dialog/HelpDialog/OssCommunityInfo.vue
+++ b/src/components/Dialog/HelpDialog/OssCommunityInfo.vue
@@ -1,8 +1,8 @@
 <template>
-  <q-page class="relative-absolute-wrapper scroller markdown-body">
+  <QPage class="relative-absolute-wrapper scroller markdown-body">
     <!-- eslint-disable-next-line vue/no-v-html -->
     <div class="q-pa-md markdown" v-html="ossCommunityInfos"></div>
-  </q-page>
+  </QPage>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Dialog/HelpDialog/OssLicense.vue b/src/components/Dialog/HelpDialog/OssLicense.vue
index 1b0ccd4354..c573bad65e 100644
--- a/src/components/Dialog/HelpDialog/OssLicense.vue
+++ b/src/components/Dialog/HelpDialog/OssLicense.vue
@@ -1,25 +1,25 @@
 <template>
-  <q-page
+  <QPage
     ref="scroller"
     class="relative-absolute-wrapper scroller bg-background"
   >
     <div class="q-pa-md markdown-body">
-      <q-list v-if="detailIndex === undefined">
-        <q-item
+      <QList v-if="detailIndex === undefined">
+        <QItem
           v-for="(license, index) in props.licenses"
           :key="index"
           clickable
           dense
           @click="selectLicenseIndex(index)"
         >
-          <q-item-section>{{
+          <QItemSection>{{
             license.name + (license.version ? " | " + license.version : "")
-          }}</q-item-section>
-        </q-item>
-      </q-list>
+          }}</QItemSection>
+        </QItem>
+      </QList>
       <div v-else>
         <div class="q-mb-md">
-          <q-btn
+          <QBtn
             outline
             color="primary"
             icon="keyboard_arrow_left"
@@ -31,7 +31,7 @@
         <pre>{{ licenses[detailIndex].text }}</pre>
       </div>
     </div>
-  </q-page>
+  </QPage>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Dialog/HelpDialog/QAndA.vue b/src/components/Dialog/HelpDialog/QAndA.vue
index d951bdb199..4a304b0bfa 100644
--- a/src/components/Dialog/HelpDialog/QAndA.vue
+++ b/src/components/Dialog/HelpDialog/QAndA.vue
@@ -1,8 +1,8 @@
 <template>
-  <q-page class="relative-absolute-wrapper scroller bg-background">
+  <QPage class="relative-absolute-wrapper scroller bg-background">
     <!-- eslint-disable-next-line vue/no-v-html -->
     <div class="q-pa-md markdown markdown-body" v-html="qAndA"></div>
-  </q-page>
+  </QPage>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Dialog/HelpDialog/UpdateInfo.vue b/src/components/Dialog/HelpDialog/UpdateInfo.vue
index b33bc2e2df..c9807fe893 100644
--- a/src/components/Dialog/HelpDialog/UpdateInfo.vue
+++ b/src/components/Dialog/HelpDialog/UpdateInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-page
+  <QPage
     ref="scroller"
     class="relative-absolute-wrapper scroller markdown-body"
   >
@@ -34,7 +34,7 @@
         </p>
       </template>
     </div>
-  </q-page>
+  </QPage>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Dialog/HotkeySettingDialog.vue b/src/components/Dialog/HotkeySettingDialog.vue
index 9b007b1c8d..5db60724cb 100644
--- a/src/components/Dialog/HotkeySettingDialog.vue
+++ b/src/components/Dialog/HotkeySettingDialog.vue
@@ -1,18 +1,18 @@
 <template>
-  <q-dialog
+  <QDialog
     v-model="hotkeySettingDialogOpenComputed"
     maximized
     transition-show="jump-up"
     transition-hide="jump-down"
     class="hotkey-setting-dialog transparent-backdrop"
   >
-    <q-layout container view="hHh Lpr lff" class="bg-background">
-      <q-header class="q-py-sm">
-        <q-toolbar>
-          <q-toolbar-title class="text-display"
-            >設定 / キー割り当て</q-toolbar-title
+    <QLayout container view="hHh Lpr lff" class="bg-background">
+      <QHeader class="q-py-sm">
+        <QToolbar>
+          <QToolbarTitle class="text-display"
+            >設定 / キー割り当て</QToolbarTitle
           >
-          <q-input
+          <QInput
             v-model="hotkeyFilter"
             hide-bottom-space
             dense
@@ -21,31 +21,31 @@
             class="q-mr-sm search-box"
           >
             <template #prepend>
-              <q-icon name="search" />
+              <QIcon name="search" />
             </template>
             <template #append>
-              <q-icon
+              <QIcon
                 v-if="hotkeyFilter !== ''"
                 name="close"
                 class="cursor-pointer"
                 @click="hotkeyFilter = ''"
               />
-              <q-icon v-else />
+              <QIcon v-else />
             </template>
-          </q-input>
-          <q-btn
+          </QInput>
+          <QBtn
             round
             flat
             icon="close"
             color="display"
             @click="hotkeySettingDialogOpenComputed = false"
           />
-        </q-toolbar>
-      </q-header>
+        </QToolbar>
+      </QHeader>
 
-      <q-page-container>
-        <q-page>
-          <q-table
+      <QPageContainer>
+        <QPage>
+          <QTable
             v-model:pagination="hotkeyPagination"
             flat
             dense
@@ -59,32 +59,32 @@
             class="hotkey-table"
           >
             <template #header="tableProps">
-              <q-tr :props="tableProps">
-                <q-th
+              <QTr :props="tableProps">
+                <QTh
                   v-for="col of tableProps.cols"
                   :key="col.name"
                   :props="tableProps"
                 >
                   {{ col.label }}
-                </q-th>
-              </q-tr>
+                </QTh>
+              </QTr>
             </template>
 
             <template #body="tableProps">
-              <q-tr :props="tableProps">
-                <q-td
+              <QTr :props="tableProps">
+                <QTd
                   :key="tableProps.cols[0].name"
                   no-hover
                   :props="tableProps"
                 >
                   {{ tableProps.row.action }}
-                </q-td>
-                <q-td
+                </QTd>
+                <QTd
                   :key="tableProps.cols[1].name"
                   no-hover
                   :props="tableProps"
                 >
-                  <q-btn
+                  <QBtn
                     dense
                     text-color="display"
                     padding="none sm"
@@ -106,7 +106,7 @@
                     "
                     @click="openHotkeyDialog(tableProps.row.action)"
                   />
-                  <q-btn
+                  <QBtn
                     rounded
                     flat
                     icon="settings_backup_restore"
@@ -115,18 +115,18 @@
                     :disable="checkHotkeyReadonly(tableProps.row.action)"
                     @click="resetHotkey(tableProps.row.action)"
                   >
-                    <q-tooltip :delay="500">デフォルトに戻す</q-tooltip>
-                  </q-btn>
-                </q-td>
-              </q-tr>
+                    <QTooltip :delay="500">デフォルトに戻す</QTooltip>
+                  </QBtn>
+                </QTd>
+              </QTr>
             </template>
-          </q-table>
-        </q-page>
-      </q-page-container>
-    </q-layout>
-  </q-dialog>
+          </QTable>
+        </QPage>
+      </QPageContainer>
+    </QLayout>
+  </QDialog>
 
-  <q-dialog
+  <QDialog
     no-esc-dismiss
     no-shake
     transition-show="none"
@@ -134,20 +134,20 @@
     :model-value="isHotkeyDialogOpened"
     @update:model-value="closeHotkeyDialog"
   >
-    <q-card class="q-py-sm q-px-md">
-      <q-card-section align="center">
+    <QCard class="q-py-sm q-px-md">
+      <QCardSection align="center">
         <div class="text-h6">ショートカットキーを入力してください</div>
-      </q-card-section>
-      <q-card-section align="center">
+      </QCardSection>
+      <QCardSection align="center">
         <template v-for="(hotkey, index) in lastRecord.split(' ')" :key="index">
           <span v-if="index !== 0"> + </span>
           <!--
           Mac の Meta キーは Cmd キーであるため、Meta の表示名を Cmd に置換する
           Windows PC では Meta キーは Windows キーだが、使用頻度低と考えられるため暫定的に Mac 対応のみを考慮している
           -->
-          <q-chip :ripple="false" color="surface">
+          <QChip :ripple="false" color="surface">
             {{ hotkey === "Meta" ? "Cmd" : hotkey }}
-          </q-chip>
+          </QChip>
         </template>
         <span v-if="lastRecord !== '' && confirmBtnEnabled"> +</span>
         <div v-if="duplicatedHotkey != undefined" class="text-warning q-mt-lg">
@@ -158,9 +158,9 @@
             「{{ duplicatedHotkey.action }}」
           </div>
         </div>
-      </q-card-section>
-      <q-card-actions align="center">
-        <q-btn
+      </QCardSection>
+      <QCardActions align="center">
+        <QBtn
           padding="xs md"
           label="キャンセル"
           unelevated
@@ -169,7 +169,7 @@
           class="q-mt-sm"
           @click="closeHotkeyDialog"
         />
-        <q-btn
+        <QBtn
           padding="xs md"
           label="ショートカットキーを未設定にする"
           unelevated
@@ -181,7 +181,7 @@
             closeHotkeyDialog();
           "
         />
-        <q-btn
+        <QBtn
           v-if="duplicatedHotkey == undefined"
           padding="xs md"
           label="OK"
@@ -196,7 +196,7 @@
             )
           "
         />
-        <q-btn
+        <QBtn
           v-else
           padding="xs md"
           label="上書きする"
@@ -207,9 +207,9 @@
           :disabled="confirmBtnEnabled"
           @click="solveDuplicated().then(() => closeHotkeyDialog())"
         />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
+      </QCardActions>
+    </QCard>
+  </QDialog>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Dialog/PresetManageDialog.vue b/src/components/Dialog/PresetManageDialog.vue
index c7711070c2..416b1930a2 100644
--- a/src/components/Dialog/PresetManageDialog.vue
+++ b/src/components/Dialog/PresetManageDialog.vue
@@ -1,45 +1,45 @@
 <template>
-  <q-dialog
+  <QDialog
     :model-value="props.openDialog"
     @update:model-value="updateOpenDialog"
   >
-    <q-card class="setting-card q-pa-md dialog-card">
-      <q-card-section>
+    <QCard class="setting-card q-pa-md dialog-card">
+      <QCardSection>
         <div class="text-h5">プリセット管理</div>
-      </q-card-section>
-      <q-card-actions class="q-px-md q-py-sm">
+      </QCardSection>
+      <QCardActions class="q-px-md q-py-sm">
         <div class="full-width row wrap justify-between">
-          <q-list bordered separator class="col-sm-grow">
-            <draggable
+          <QList bordered separator class="col-sm-grow">
+            <Draggable
               :model-value="previewPresetList"
               item-key="key"
               @update:model-value="reorderPreset"
             >
               <template #item="{ element: item }">
-                <q-item>
-                  <q-item-section>{{ item.name }}</q-item-section>
-                  <q-space />
-                  <q-item-section avatar>
-                    <q-btn
+                <QItem>
+                  <QItemSection>{{ item.name }}</QItemSection>
+                  <QSpace />
+                  <QItemSection avatar>
+                    <QBtn
                       icon="delete"
                       flat
                       color="display"
                       @click="deletePreset(item.key)"
-                    ></q-btn>
-                  </q-item-section>
-                </q-item>
+                    ></QBtn>
+                  </QItemSection>
+                </QItem>
               </template>
-            </draggable>
-            <q-item v-if="presetList.length === 0">
-              <q-item-section class="display">
+            </Draggable>
+            <QItem v-if="presetList.length === 0">
+              <QItemSection class="display">
                 プリセットがありません
-              </q-item-section>
-            </q-item>
-          </q-list>
+              </QItemSection>
+            </QItem>
+          </QList>
         </div>
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
+      </QCardActions>
+    </QCard>
+  </QDialog>
 </template>
 
 <script setup lang="ts">
@@ -50,6 +50,8 @@ import { useStore } from "@/store";
 import { useDefaultPreset } from "@/composables/useDefaultPreset";
 import { Preset, PresetKey } from "@/type/preload";
 
+const Draggable = draggable;
+
 const props =
   defineProps<{
     openDialog: boolean;
diff --git a/src/components/Dialog/SaveAllResultDialog.vue b/src/components/Dialog/SaveAllResultDialog.vue
index 74005d4f74..0a2d83ae81 100644
--- a/src/components/Dialog/SaveAllResultDialog.vue
+++ b/src/components/Dialog/SaveAllResultDialog.vue
@@ -1,69 +1,62 @@
 <template>
-  <q-dialog ref="dialogRef" persistent>
-    <q-layout
-      container
-      view="hhh lpr fFf"
-      class="q-dialog-plugin bg-background"
-    >
-      <q-page-container class="q-px-md">
+  <QDialog ref="dialogRef" persistent>
+    <QLayout container view="hhh lpr fFf" class="q-dialog-plugin bg-background">
+      <QPageContainer class="q-px-md">
         <h5 class="text-h5 q-my-md">音声書き出し結果</h5>
-        <q-list separator bordered class="rounded-borders">
-          <q-expansion-item
+        <QList separator bordered class="rounded-borders">
+          <QExpansionItem
             v-if="props.writeErrorArray.length > 0"
             :label="`${props.writeErrorArray.length}件の書き込みエラーによる失敗`"
             bordered
             header-class="text-warning text-bold"
             icon="warning"
           >
-            <q-item
-              v-for="(value, index) in props.writeErrorArray"
-              :key="index"
-            >
-              <q-item-section>
-                <q-item-label>{{ value.path }}</q-item-label>
-                <q-item-label>詳細：{{ value.message }}</q-item-label>
-              </q-item-section>
-            </q-item>
-          </q-expansion-item>
-          <q-expansion-item
+            <QItem v-for="(value, index) in props.writeErrorArray" :key="index">
+              <QItemSection>
+                <QItemLabel>{{ value.path }}</QItemLabel>
+                <QItemLabel>詳細：{{ value.message }}</QItemLabel>
+              </QItemSection>
+            </QItem>
+          </QExpansionItem>
+          <QExpansionItem
             v-if="props.engineErrorArray.length > 0"
             :label="`${props.engineErrorArray.length}件のエンジンエラーによる失敗`"
             bordered
             header-class="text-warning text-bold"
             icon="warning"
           >
-            <q-item
+            <QItem
               v-for="(value, index) in props.engineErrorArray"
               :key="index"
             >
-              <q-item-section>
-                <q-item-label>{{ value.path }}</q-item-label>
-                <q-item-label v-if="value.message"
-                  >詳細：{{ value.message }}</q-item-label
+              <QItemSection>
+                <QItemLabel>{{ value.path }}</QItemLabel>
+                <QItemLabel v-if="value.message"
+                  >詳細：{{ value.message }}</QItemLabel
                 >
-              </q-item-section>
-            </q-item>
-          </q-expansion-item>
-          <q-expansion-item
+              </QItemSection>
+            </QItem>
+          </QExpansionItem>
+          <QExpansionItem
             :label="`${props.successArray.length}件の成功`"
             bordered
             icon="check"
             header-class="text-bold"
           >
-            <q-list v-if="props.successArray.length > 0" separator>
-              <q-item v-for="(value, index) in props.successArray" :key="index">
-                <q-item-section>
-                  <q-item-label>{{ value }}</q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-expansion-item>
-        </q-list>
-      </q-page-container>
-      <q-footer>
-        <q-toolbar>
-          <q-space />
-          <q-btn
+            <QList v-if="props.successArray.length > 0" separator>
+              <QItem v-for="(value, index) in props.successArray" :key="index">
+                <QItemSection>
+                  <QItemLabel>{{ value }}</QItemLabel>
+                </QItemSection>
+              </QItem>
+            </QList>
+          </QExpansionItem>
+        </QList>
+      </QPageContainer>
+      <QFooter>
+        <QToolbar>
+          <QSpace />
+          <QBtn
             unelevated
             align="right"
             label="閉じる"
@@ -72,10 +65,10 @@
             class="text-no-wrap text-bold q-mr-sm"
             @click="close"
           />
-        </q-toolbar>
-      </q-footer>
-    </q-layout>
-  </q-dialog>
+        </QToolbar>
+      </QFooter>
+    </QLayout>
+  </QDialog>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Dialog/SettingDialog.vue b/src/components/Dialog/SettingDialog.vue
index 184ab3943e..d40976b87a 100644
--- a/src/components/Dialog/SettingDialog.vue
+++ b/src/components/Dialog/SettingDialog.vue
@@ -1,21 +1,21 @@
 <template>
-  <q-dialog
+  <QDialog
     v-model="settingDialogOpenedComputed"
     maximized
     transition-show="jump-up"
     transition-hide="jump-down"
     class="setting-dialog transparent-backdrop"
   >
-    <q-layout container view="hHh Lpr fFf" class="bg-background">
-      <q-page-container class="root">
-        <q-header class="q-pa-sm">
-          <q-toolbar>
-            <q-toolbar-title class="text-display"
-              >設定 / オプション</q-toolbar-title
+    <QLayout container view="hHh Lpr fFf" class="bg-background">
+      <QPageContainer class="root">
+        <QHeader class="q-pa-sm">
+          <QToolbar>
+            <QToolbarTitle class="text-display"
+              >設定 / オプション</QToolbarTitle
             >
-            <q-space />
+            <QSpace />
             <!-- close button -->
-            <q-btn
+            <QBtn
               round
               flat
               icon="close"
@@ -23,17 +23,17 @@
               aria-label="設定を閉じる"
               @click="settingDialogOpenedComputed = false"
             />
-          </q-toolbar>
-        </q-header>
-        <q-page ref="scroller" class="scroller">
+          </QToolbar>
+        </QHeader>
+        <QPage ref="scroller" class="scroller">
           <div class="q-pa-md row items-start q-gutter-md">
             <!-- Engine Mode Card -->
-            <q-card flat class="setting-card">
-              <q-card-actions>
+            <QCard flat class="setting-card">
+              <QCardActions>
                 <h5 class="text-h5">エンジン</h5>
                 <template v-if="engineIds.length > 1">
-                  <q-space />
-                  <q-select
+                  <QSpace />
+                  <QSelect
                     v-model="selectedEngineId"
                     borderless
                     dense
@@ -42,15 +42,15 @@
                     :option-label="renderEngineNameLabel"
                   />
                 </template>
-              </q-card-actions>
-              <q-card-actions class="q-px-md bg-surface">
+              </QCardActions>
+              <QCardActions class="q-px-md bg-surface">
                 <div>エンジンモード</div>
                 <div
                   aria-label=" GPU モードの利用には GPU が必要です。Linux は
                       NVIDIA&trade; 製 GPU のみ対応しています。また、エンジンが対応していない場合、切り替えられません。"
                 >
-                  <q-icon name="help_outline" size="sm" class="help-hover-icon">
-                    <q-tooltip
+                  <QIcon name="help_outline" size="sm" class="help-hover-icon">
+                    <QTooltip
                       :delay="500"
                       anchor="center right"
                       self="center left"
@@ -59,11 +59,11 @@
                     >
                       GPU モードの利用には GPU が必要です。Linux は
                       NVIDIA&trade; 製 GPU のみ対応しています。
-                    </q-tooltip>
-                  </q-icon>
+                    </QTooltip>
+                  </QIcon>
                 </div>
-                <q-space />
-                <q-btn-toggle
+                <QSpace />
+                <QBtnToggle
                   v-model="engineUseGpu"
                   padding="xs md"
                   unelevated
@@ -74,23 +74,23 @@
                   :options="engineUseGpuOptions"
                   :disable="!gpuSwitchEnabled(selectedEngineId)"
                 >
-                  <q-tooltip
+                  <QTooltip
                     :delay="500"
                     :target="!gpuSwitchEnabled(selectedEngineId)"
                   >
                     {{
                       engineInfos[selectedEngineId].name
                     }}はCPU版のためGPUモードを利用できません。
-                  </q-tooltip>
-                </q-btn-toggle>
-              </q-card-actions>
-              <q-card-actions class="q-px-md bg-surface">
+                  </QTooltip>
+                </QBtnToggle>
+              </QCardActions>
+              <QCardActions class="q-px-md bg-surface">
                 <div>音声のサンプリングレート</div>
                 <div
                   aria-label="再生と保存時の音声のサンプリングレートを変更できます（サンプリングレートを上げても音声の品質は上がりません）。"
                 >
-                  <q-icon name="help_outline" size="sm" class="help-hover-icon">
-                    <q-tooltip
+                  <QIcon name="help_outline" size="sm" class="help-hover-icon">
+                    <QTooltip
                       :delay="500"
                       anchor="center right"
                       self="center left"
@@ -98,11 +98,11 @@
                       transition-hide="jump-left"
                     >
                       再生・保存時の音声のサンプリングレートを変更できます（サンプリングレートを上げても音声の品質は上がりません）。
-                    </q-tooltip>
-                  </q-icon>
+                    </QTooltip>
+                  </QIcon>
                 </div>
-                <q-space />
-                <q-select
+                <QSpace />
+                <QSelect
                   v-model="outputSamplingRate"
                   borderless
                   dense
@@ -110,21 +110,21 @@
                   :options="samplingRateOptions"
                   :option-label="renderSamplingRateLabel"
                 >
-                </q-select>
-              </q-card-actions>
-            </q-card>
+                </QSelect>
+              </QCardActions>
+            </QCard>
             <!-- Preservation Setting -->
-            <q-card flat class="setting-card">
-              <q-card-actions>
+            <QCard flat class="setting-card">
+              <QCardActions>
                 <h5 class="text-h5">操作</h5>
-              </q-card-actions>
-              <q-card-actions class="q-px-md bg-surface">
+              </QCardActions>
+              <QCardActions class="q-px-md bg-surface">
                 <div>プリセット機能</div>
                 <div
                   aria-label="プリセット機能を有効にします。パラメータを登録したり適用したりできます。"
                 >
-                  <q-icon name="help_outline" size="sm" class="help-hover-icon">
-                    <q-tooltip
+                  <QIcon name="help_outline" size="sm" class="help-hover-icon">
+                    <QTooltip
                       :delay="500"
                       anchor="center right"
                       self="center left"
@@ -132,32 +132,32 @@
                       transition-hide="jump-left"
                     >
                       プリセット機能を有効にします。パラメータを登録したり適用したりできます。
-                    </q-tooltip>
-                  </q-icon>
+                    </QTooltip>
+                  </QIcon>
                 </div>
-                <q-space />
-                <q-toggle
+                <QSpace />
+                <QToggle
                   :model-value="experimentalSetting.enablePreset"
                   @update:model-value="changeEnablePreset"
                 >
-                </q-toggle>
-              </q-card-actions>
-              <q-slide-transition>
+                </QToggle>
+              </QCardActions>
+              <QSlideTransition>
                 <!-- q-slide-transitionはheightだけをアニメーションするのでdivで囲う -->
                 <div v-show="experimentalSetting.enablePreset">
-                  <q-card-actions
+                  <QCardActions
                     class="q-px-md bg-surface in-slide-transition-workaround"
                   >
                     <div>スタイル変更時にデフォルトプリセットを適用</div>
                     <div
                       aria-label="ONの場合、キャラやスタイルの変更時にデフォルトプリセットが自動的に適用されます。"
                     >
-                      <q-icon
+                      <QIcon
                         name="help_outline"
                         size="sm"
                         class="help-hover-icon"
                       >
-                        <q-tooltip
+                        <QTooltip
                           :delay="500"
                           anchor="center right"
                           self="center left"
@@ -165,11 +165,11 @@
                           transition-hide="jump-left"
                         >
                           ONの場合、キャラやスタイルの変更時にデフォルトプリセットが自動的に適用されます。
-                        </q-tooltip>
-                      </q-icon>
+                        </QTooltip>
+                      </QIcon>
                     </div>
-                    <q-space />
-                    <q-toggle
+                    <QSpace />
+                    <QToggle
                       :model-value="
                         experimentalSetting.shouldApplyDefaultPresetOnVoiceChanged
                       "
@@ -180,17 +180,17 @@
                         )
                       "
                     >
-                    </q-toggle>
-                  </q-card-actions>
+                    </QToggle>
+                  </QCardActions>
                 </div>
-              </q-slide-transition>
-              <q-card-actions class="q-px-md bg-surface">
+              </QSlideTransition>
+              <QCardActions class="q-px-md bg-surface">
                 <div>パラメータの引き継ぎ</div>
                 <div
                   aria-label="ONの場合、テキスト欄追加の際に、現在の話速等のパラメータが引き継がれます。"
                 >
-                  <q-icon name="help_outline" size="sm" class="help-hover-icon">
-                    <q-tooltip
+                  <QIcon name="help_outline" size="sm" class="help-hover-icon">
+                    <QTooltip
                       :delay="500"
                       anchor="center right"
                       self="center left"
@@ -198,23 +198,23 @@
                       transition-hide="jump-left"
                     >
                       ONの場合、テキスト欄追加の際に、現在の話速等のパラメータが引き継がれます。
-                    </q-tooltip>
-                  </q-icon>
+                    </QTooltip>
+                  </QIcon>
                 </div>
-                <q-space />
-                <q-toggle
+                <QSpace />
+                <QToggle
                   :model-value="inheritAudioInfoMode"
                   @update:model-value="changeinheritAudioInfo($event)"
                 >
-                </q-toggle>
-              </q-card-actions>
-              <q-card-actions class="q-px-md bg-surface">
+                </QToggle>
+              </QCardActions>
+              <QCardActions class="q-px-md bg-surface">
                 <div>再生位置を追従</div>
                 <div
                   aria-label="音声再生中の、詳細調整欄の自動スクロールのモードを選べます。"
                 >
-                  <q-icon name="help_outline" size="sm" class="help-hover-icon">
-                    <q-tooltip
+                  <QIcon name="help_outline" size="sm" class="help-hover-icon">
+                    <QTooltip
                       :delay="500"
                       anchor="center right"
                       self="center left"
@@ -222,11 +222,11 @@
                       transition-hide="jump-left"
                     >
                       音声再生中の、詳細調整欄の自動スクロールのモードを選べます。
-                    </q-tooltip>
-                  </q-icon>
+                    </QTooltip>
+                  </QIcon>
                 </div>
-                <q-space />
-                <q-btn-toggle
+                <QSpace />
+                <QBtnToggle
                   v-model="activePointScrollMode"
                   padding="xs md"
                   unelevated
@@ -253,29 +253,29 @@
                   ]"
                 >
                   <template #CONTINUOUSLY>
-                    <q-tooltip :delay="500">
+                    <QTooltip :delay="500">
                       現在の再生位置を真ん中に表示します。
-                    </q-tooltip>
+                    </QTooltip>
                   </template>
                   <template #PAGE>
-                    <q-tooltip :delay="500">
+                    <QTooltip :delay="500">
                       現在の再生位置が表示範囲外にある場合にスクロールします。
-                    </q-tooltip>
+                    </QTooltip>
                   </template>
                   <template #OFF>
-                    <q-tooltip :delay="500">
+                    <QTooltip :delay="500">
                       自動でスクロールしません。
-                    </q-tooltip>
+                    </QTooltip>
                   </template>
-                </q-btn-toggle>
-              </q-card-actions>
-              <q-card-actions class="q-px-md bg-surface">
+                </QBtnToggle>
+              </QCardActions>
+              <QCardActions class="q-px-md bg-surface">
                 <div>テキスト自動分割</div>
                 <div
                   aria-label="テキスト貼り付けの際のテキストの分割箇所を選べます。"
                 >
-                  <q-icon name="help_outline" size="sm" class="help-hover-icon">
-                    <q-tooltip
+                  <QIcon name="help_outline" size="sm" class="help-hover-icon">
+                    <QTooltip
                       :delay="500"
                       anchor="center right"
                       self="center left"
@@ -283,12 +283,12 @@
                       transition-hide="jump-left"
                     >
                       テキスト貼り付けの際のテキストの分割箇所を選べます。
-                    </q-tooltip>
-                  </q-icon>
+                    </QTooltip>
+                  </QIcon>
                 </div>
-                <q-space />
+                <QSpace />
                 <!-- FIXME: ツールチップの内容をaria-labelに付ける -->
-                <q-btn-toggle
+                <QBtnToggle
                   padding="xs md"
                   unelevated
                   :model-value="splitTextWhenPaste"
@@ -312,27 +312,27 @@
                   @update:model-value="changeSplitTextWhenPaste($event)"
                 >
                   <template #splitTextPeriodAndNewLine>
-                    <q-tooltip :delay="500">
+                    <QTooltip :delay="500">
                       句点と改行を基にテキストを分割します。
-                    </q-tooltip>
+                    </QTooltip>
                   </template>
                   <template #splitTextNewLine>
-                    <q-tooltip :delay="500">
+                    <QTooltip :delay="500">
                       改行のみを基にテキストを分割します。
-                    </q-tooltip>
+                    </QTooltip>
                   </template>
                   <template #splitTextOFF>
-                    <q-tooltip :delay="500"> 分割を行いません。 </q-tooltip>
+                    <QTooltip :delay="500"> 分割を行いません。 </QTooltip>
                   </template>
-                </q-btn-toggle>
-              </q-card-actions>
-              <q-card-actions class="q-px-md bg-surface">
+                </QBtnToggle>
+              </QCardActions>
+              <QCardActions class="q-px-md bg-surface">
                 <div>メモ機能</div>
                 <div
                   aria-label="ONの場合、テキストを [] で囲むことで、テキスト中にメモを書けます。"
                 >
-                  <q-icon name="help_outline" size="sm" class="help-hover-icon">
-                    <q-tooltip
+                  <QIcon name="help_outline" size="sm" class="help-hover-icon">
+                    <QTooltip
                       :delay="500"
                       anchor="center right"
                       self="center left"
@@ -341,23 +341,23 @@
                     >
                       ONの場合、テキストを []
                       で囲むことで、テキスト中にメモを書けます。
-                    </q-tooltip>
-                  </q-icon>
+                    </QTooltip>
+                  </QIcon>
                 </div>
-                <q-space />
-                <q-toggle
+                <QSpace />
+                <QToggle
                   :model-value="enableMemoNotation"
                   @update:model-value="changeEnableMemoNotation($event)"
                 >
-                </q-toggle>
-              </q-card-actions>
-              <q-card-actions class="q-px-md bg-surface">
+                </QToggle>
+              </QCardActions>
+              <QCardActions class="q-px-md bg-surface">
                 <div>ルビ機能</div>
                 <div
                   aria-label="ONの場合、テキストに {ルビ対象|よみかた} と書くことで、テキストの読み方を変えられます。"
                 >
-                  <q-icon name="help_outline" size="sm" class="help-hover-icon">
-                    <q-tooltip
+                  <QIcon name="help_outline" size="sm" class="help-hover-icon">
+                    <QTooltip
                       :delay="500"
                       anchor="center right"
                       self="center left"
@@ -366,23 +366,23 @@
                     >
                       ONの場合、テキストに {ルビ対象|よみかた}
                       と書くことで、テキストの読み方を変えられます。
-                    </q-tooltip>
-                  </q-icon>
+                    </QTooltip>
+                  </QIcon>
                 </div>
-                <q-space />
-                <q-toggle
+                <QSpace />
+                <QToggle
                   :model-value="enableRubyNotation"
                   @update:model-value="changeEnableRubyNotation($event)"
                 >
-                </q-toggle>
-              </q-card-actions>
-              <q-card-actions class="q-px-md bg-surface">
+                </QToggle>
+              </QCardActions>
+              <QCardActions class="q-px-md bg-surface">
                 <div>非表示にしたヒントを全て再表示</div>
                 <div
                   aria-label="過去に非表示にしたヒントを全て再表示できます。"
                 >
-                  <q-icon name="help_outline" size="sm" class="help-hover-icon">
-                    <q-tooltip
+                  <QIcon name="help_outline" size="sm" class="help-hover-icon">
+                    <QTooltip
                       :delay="500"
                       anchor="center right"
                       self="center left"
@@ -390,20 +390,20 @@
                       transition-hide="jump-left"
                     >
                       過去に非表示にしたヒントを全て再表示できます。
-                    </q-tooltip>
-                  </q-icon>
+                    </QTooltip>
+                  </QIcon>
                 </div>
-                <q-space />
+                <QSpace />
                 <!-- ボタンクリックのフィードバックのためのチェックマーク -->
-                <q-icon
+                <QIcon
                   v-if="isDefaultConfirmedTips && hasResetConfirmedTips"
                   name="check"
                   size="sm"
                   color="primary"
                   style="margin-right: 8px"
                 >
-                </q-icon>
-                <q-btn
+                </QIcon>
+                <QBtn
                   label="再表示する"
                   unelevated
                   color="background"
@@ -417,21 +417,21 @@
                     }
                   "
                 >
-                </q-btn>
-              </q-card-actions>
-            </q-card>
+                </QBtn>
+              </QCardActions>
+            </QCard>
             <!-- Saving Card -->
-            <q-card flat class="setting-card">
-              <q-card-actions>
+            <QCard flat class="setting-card">
+              <QCardActions>
                 <h5 class="text-h5">保存</h5>
-              </q-card-actions>
-              <q-card-actions class="q-px-md bg-surface">
+              </QCardActions>
+              <QCardActions class="q-px-md bg-surface">
                 <div>書き出し先を固定</div>
                 <div
                   aria-label="ONの場合、書き出す際のフォルダをあらかじめ指定できます。"
                 >
-                  <q-icon name="help_outline" size="sm" class="help-hover-icon">
-                    <q-tooltip
+                  <QIcon name="help_outline" size="sm" class="help-hover-icon">
+                    <QTooltip
                       :delay="500"
                       anchor="center right"
                       self="center left"
@@ -439,11 +439,11 @@
                       transition-hide="jump-left"
                     >
                       ONの場合、書き出す際のフォルダをあらかじめ指定できます。
-                    </q-tooltip>
-                  </q-icon>
+                    </QTooltip>
+                  </QIcon>
                 </div>
-                <q-space />
-                <q-input
+                <QSpace />
+                <QInput
                   v-if="savingSetting.fixedExportEnabled"
                   dense
                   maxheight="10px"
@@ -464,7 +464,7 @@
                   "
                 >
                   <template #append>
-                    <q-btn
+                    <QBtn
                       square
                       dense
                       flat
@@ -472,32 +472,32 @@
                       icon="folder_open"
                       @click="openFileExplore"
                     >
-                      <q-tooltip :delay="500" anchor="bottom left">
+                      <QTooltip :delay="500" anchor="bottom left">
                         フォルダ選択
-                      </q-tooltip>
-                    </q-btn>
+                      </QTooltip>
+                    </QBtn>
                   </template>
-                </q-input>
-                <q-toggle
+                </QInput>
+                <QToggle
                   :model-value="savingSetting.fixedExportEnabled"
                   @update:model-value="
                     handleSavingSettingChange('fixedExportEnabled', $event)
                   "
                 >
-                </q-toggle>
-              </q-card-actions>
+                </QToggle>
+              </QCardActions>
 
-              <file-name-pattern-dialog
+              <FileNamePatternDialog
                 v-model:open-dialog="showsFilePatternEditDialog"
               />
 
-              <q-card-actions class="q-px-md bg-surface">
+              <QCardActions class="q-px-md bg-surface">
                 <div>書き出しファイル名パターン</div>
                 <div
                   aria-label="書き出す際のファイル名のパターンをカスタマイズできます。"
                 >
-                  <q-icon name="help_outline" size="sm" class="help-hover-icon">
-                    <q-tooltip
+                  <QIcon name="help_outline" size="sm" class="help-hover-icon">
+                    <QTooltip
                       :delay="500"
                       anchor="center right"
                       self="center left"
@@ -505,14 +505,14 @@
                       transition-hide="jump-left"
                     >
                       書き出す際のファイル名のパターンをカスタマイズできます。
-                    </q-tooltip>
-                  </q-icon>
+                    </QTooltip>
+                  </QIcon>
                 </div>
-                <q-space />
+                <QSpace />
                 <div class="q-px-sm text-ellipsis">
                   {{ savingSetting.fileNamePattern }}
                 </div>
-                <q-btn
+                <QBtn
                   label="編集する"
                   unelevated
                   color="background"
@@ -520,15 +520,15 @@
                   class="text-no-wrap q-mr-sm"
                   @click="showsFilePatternEditDialog = true"
                 />
-              </q-card-actions>
+              </QCardActions>
 
-              <q-card-actions class="q-px-md bg-surface">
+              <QCardActions class="q-px-md bg-surface">
                 <div>上書き防止</div>
                 <div
                   aria-label="ONの場合、書き出す際に同名ファイルが既にあったとき、ファイル名に連番を付けて別名で保存されます。"
                 >
-                  <q-icon name="help_outline" size="sm" class="help-hover-icon">
-                    <q-tooltip
+                  <QIcon name="help_outline" size="sm" class="help-hover-icon">
+                    <QTooltip
                       :delay="500"
                       anchor="center right"
                       self="center left"
@@ -536,25 +536,25 @@
                       transition-hide="jump-left"
                     >
                       ONの場合、書き出す際に同名ファイルが既にあったとき、ファイル名に連番を付けて別名で保存されます。
-                    </q-tooltip>
-                  </q-icon>
+                    </QTooltip>
+                  </QIcon>
                 </div>
-                <q-space />
-                <q-toggle
+                <QSpace />
+                <QToggle
                   :model-value="savingSetting.avoidOverwrite"
                   @update:model-value="
                     handleSavingSettingChange('avoidOverwrite', $event)
                   "
                 >
-                </q-toggle>
-              </q-card-actions>
-              <q-card-actions class="q-px-md bg-surface">
+                </QToggle>
+              </QCardActions>
+              <QCardActions class="q-px-md bg-surface">
                 <div>文字コード</div>
                 <div
                   aria-label="テキストファイルを書き出す際の文字コードを選べます。"
                 >
-                  <q-icon name="help_outline" size="sm" class="help-hover-icon">
-                    <q-tooltip
+                  <QIcon name="help_outline" size="sm" class="help-hover-icon">
+                    <QTooltip
                       :delay="500"
                       anchor="center right"
                       self="center left"
@@ -562,11 +562,11 @@
                       transition-hide="jump-left"
                     >
                       テキストファイルを書き出す際の文字コードを選べます。
-                    </q-tooltip>
-                  </q-icon>
+                    </QTooltip>
+                  </QIcon>
                 </div>
-                <q-space />
-                <q-btn-toggle
+                <QSpace />
+                <QBtnToggle
                   padding="xs md"
                   unelevated
                   :model-value="savingSetting.fileEncoding"
@@ -582,14 +582,14 @@
                     handleSavingSettingChange('fileEncoding', $event)
                   "
                 />
-              </q-card-actions>
-              <q-card-actions class="q-px-md bg-surface">
+              </QCardActions>
+              <QCardActions class="q-px-md bg-surface">
                 <div>txtファイルを書き出し</div>
                 <div
                   aria-label="ONの場合、音声書き出しの際にテキストがtxtファイルとして書き出されます。"
                 >
-                  <q-icon name="help_outline" size="sm" class="help-hover-icon">
-                    <q-tooltip
+                  <QIcon name="help_outline" size="sm" class="help-hover-icon">
+                    <QTooltip
                       :delay="500"
                       anchor="center right"
                       self="center left"
@@ -597,26 +597,26 @@
                       transition-hide="jump-left"
                     >
                       ONの場合、音声書き出しの際にテキストがtxtファイルとして書き出されます。
-                    </q-tooltip>
-                  </q-icon>
+                    </QTooltip>
+                  </QIcon>
                 </div>
-                <q-space />
-                <q-toggle
+                <QSpace />
+                <QToggle
                   :model-value="savingSetting.exportText"
                   color="primary"
                   @update:model-value="
                     handleSavingSettingChange('exportText', $event)
                   "
                 >
-                </q-toggle>
-              </q-card-actions>
-              <q-card-actions class="q-px-md bg-surface">
+                </QToggle>
+              </QCardActions>
+              <QCardActions class="q-px-md bg-surface">
                 <div>labファイルを書き出し</div>
                 <div
                   aria-label="ONの場合、音声書き出しの際にリップシンク用のlabファイルが書き出されます。"
                 >
-                  <q-icon name="help_outline" size="sm" class="help-hover-icon">
-                    <q-tooltip
+                  <QIcon name="help_outline" size="sm" class="help-hover-icon">
+                    <QTooltip
                       :delay="500"
                       anchor="center right"
                       self="center left"
@@ -624,29 +624,29 @@
                       transition-hide="jump-left"
                     >
                       ONの場合、音声書き出しの際にリップシンク用のlabファイルが書き出されます。
-                    </q-tooltip>
-                  </q-icon>
+                    </QTooltip>
+                  </QIcon>
                 </div>
-                <q-space />
-                <q-toggle
+                <QSpace />
+                <QToggle
                   :model-value="savingSetting.exportLab"
                   @update:model-value="
                     handleSavingSettingChange('exportLab', $event)
                   "
                 >
-                </q-toggle>
-              </q-card-actions>
-            </q-card>
+                </QToggle>
+              </QCardActions>
+            </QCard>
             <!-- Theme Card -->
-            <q-card flat class="setting-card">
-              <q-card-actions>
+            <QCard flat class="setting-card">
+              <QCardActions>
                 <h5 class="text-h5">外観</h5>
-              </q-card-actions>
-              <q-card-actions class="q-px-md bg-surface">
+              </QCardActions>
+              <QCardActions class="q-px-md bg-surface">
                 <div>テーマ</div>
                 <div aria-label="エディタの色を選べます。">
-                  <q-icon name="help_outline" size="sm" class="help-hover-icon">
-                    <q-tooltip
+                  <QIcon name="help_outline" size="sm" class="help-hover-icon">
+                    <QTooltip
                       :delay="500"
                       anchor="center right"
                       self="center left"
@@ -654,11 +654,11 @@
                       transition-hide="jump-left"
                     >
                       エディタの色を選べます。
-                    </q-tooltip>
-                  </q-icon>
+                    </QTooltip>
+                  </QIcon>
                 </div>
-                <q-space />
-                <q-btn-toggle
+                <QSpace />
+                <QBtnToggle
                   v-model="currentThemeNameComputed"
                   unelevated
                   padding="xs md"
@@ -668,13 +668,13 @@
                   toggle-text-color="display-on-primary"
                   :options="availableThemeNameComputed"
                 />
-              </q-card-actions>
+              </QCardActions>
 
-              <q-card-actions class="q-px-md bg-surface">
+              <QCardActions class="q-px-md bg-surface">
                 <div>フォント</div>
                 <div aria-label="エディタのフォントを選べます。">
-                  <q-icon name="help_outline" size="sm" class="help-hover-icon">
-                    <q-tooltip
+                  <QIcon name="help_outline" size="sm" class="help-hover-icon">
+                    <QTooltip
                       :delay="500"
                       anchor="center right"
                       self="center left"
@@ -682,11 +682,11 @@
                       transition-hide="jump-left"
                     >
                       エディタのフォントを選べます。
-                    </q-tooltip>
-                  </q-icon>
+                    </QTooltip>
+                  </QIcon>
                 </div>
-                <q-space />
-                <q-btn-toggle
+                <QSpace />
+                <QBtnToggle
                   padding="xs md"
                   unelevated
                   :model-value="editorFont"
@@ -700,14 +700,14 @@
                   ]"
                   @update:model-value="changeEditorFont($event)"
                 />
-              </q-card-actions>
-              <q-card-actions class="q-px-md bg-surface">
+              </QCardActions>
+              <QCardActions class="q-px-md bg-surface">
                 <div>行番号の表示</div>
                 <div
                   aria-label="ONの場合、テキスト欄の左側に行番号が表示されます。"
                 >
-                  <q-icon name="help_outline" size="sm" class="help-hover-icon">
-                    <q-tooltip
+                  <QIcon name="help_outline" size="sm" class="help-hover-icon">
+                    <QTooltip
                       :delay="500"
                       anchor="center right"
                       self="center left"
@@ -715,23 +715,23 @@
                       transition-hide="jump-left"
                     >
                       ONの場合、テキスト欄の左側に行番号が表示されます。
-                    </q-tooltip>
-                  </q-icon>
+                    </QTooltip>
+                  </QIcon>
                 </div>
-                <q-space />
-                <q-toggle
+                <QSpace />
+                <QToggle
                   :model-value="showTextLineNumber"
                   @update:model-value="changeShowTextLineNumber($event)"
                 >
-                </q-toggle>
-              </q-card-actions>
-              <q-card-actions class="q-px-md bg-surface">
+                </QToggle>
+              </QCardActions>
+              <QCardActions class="q-px-md bg-surface">
                 <div>テキスト追加ボタンの表示</div>
                 <div
                   aria-label="OFFの場合、右下にテキスト追加ボタンが表示されません。（テキスト欄は Shift + Enter で追加できます）"
                 >
-                  <q-icon name="help_outline" size="sm" class="help-hover-icon">
-                    <q-tooltip
+                  <QIcon name="help_outline" size="sm" class="help-hover-icon">
+                    <QTooltip
                       :delay="500"
                       anchor="center right"
                       self="center left"
@@ -740,28 +740,28 @@
                     >
                       OFFの場合、右下にテキスト追加ボタンが表示されません。（テキスト欄は
                       Shift + Enter で追加できます）
-                    </q-tooltip>
-                  </q-icon>
+                    </QTooltip>
+                  </QIcon>
                 </div>
-                <q-space />
-                <q-toggle
+                <QSpace />
+                <QToggle
                   :model-value="showAddAudioItemButton"
                   @update:model-value="changeShowAddAudioItemButton($event)"
                 >
-                </q-toggle>
-              </q-card-actions>
-            </q-card>
+                </QToggle>
+              </QCardActions>
+            </QCard>
 
             <!-- Advanced Card -->
-            <q-card flat class="setting-card">
-              <q-card-actions>
+            <QCard flat class="setting-card">
+              <QCardActions>
                 <h5 class="text-h5">高度な設定</h5>
-              </q-card-actions>
-              <q-card-actions class="q-px-md bg-surface">
+              </QCardActions>
+              <QCardActions class="q-px-md bg-surface">
                 <div>マルチエンジン機能</div>
                 <div>
-                  <q-icon name="help_outline" size="sm" class="help-hover-icon">
-                    <q-tooltip
+                  <QIcon name="help_outline" size="sm" class="help-hover-icon">
+                    <QTooltip
                       :delay="500"
                       anchor="center right"
                       self="center left"
@@ -769,23 +769,23 @@
                       transition-hide="jump-left"
                     >
                       複数のVOICEVOX準拠エンジンを利用可能にする
-                    </q-tooltip>
-                  </q-icon>
+                    </QTooltip>
+                  </QIcon>
                 </div>
-                <q-space />
-                <q-toggle
+                <QSpace />
+                <QToggle
                   :model-value="enableMultiEngine"
                   @update:model-value="setEnableMultiEngine($event)"
                 >
-                </q-toggle>
-              </q-card-actions>
-              <q-card-actions class="q-px-md bg-surface">
+                </QToggle>
+              </QCardActions>
+              <QCardActions class="q-px-md bg-surface">
                 <div>音声をステレオ化</div>
                 <div
                   aria-label="ONの場合、音声データがモノラルからステレオに変換されてから再生・保存が行われます。"
                 >
-                  <q-icon name="help_outline" size="sm" class="help-hover-icon">
-                    <q-tooltip
+                  <QIcon name="help_outline" size="sm" class="help-hover-icon">
+                    <QTooltip
                       :delay="500"
                       anchor="center right"
                       self="center left"
@@ -793,26 +793,26 @@
                       transition-hide="jump-left"
                     >
                       ONの場合、音声データがモノラルからステレオに変換されてから再生・保存が行われます。
-                    </q-tooltip>
-                  </q-icon>
+                    </QTooltip>
+                  </QIcon>
                 </div>
-                <q-space />
-                <q-toggle
+                <QSpace />
+                <QToggle
                   :model-value="savingSetting.outputStereo"
                   @update:model-value="
                     handleSavingSettingChange('outputStereo', $event)
                   "
                 >
-                </q-toggle>
-              </q-card-actions>
-              <q-card-actions
+                </QToggle>
+              </QCardActions>
+              <QCardActions
                 class="q-px-md bg-surface"
                 :class="{ disabled: !canSetAudioOutputDevice }"
               >
                 <div>再生デバイス</div>
                 <div aria-label="音声の再生デバイスを変更できます。">
-                  <q-icon name="help_outline" size="sm" class="help-hover-icon">
-                    <q-tooltip
+                  <QIcon name="help_outline" size="sm" class="help-hover-icon">
+                    <QTooltip
                       :delay="500"
                       anchor="center right"
                       self="center left"
@@ -823,11 +823,11 @@
                       <template v-if="!canSetAudioOutputDevice">
                         この機能はお使いの環境でサポートされていないため、使用できません。
                       </template>
-                    </q-tooltip>
-                  </q-icon>
+                    </QTooltip>
+                  </QIcon>
                 </div>
-                <q-space />
-                <q-select
+                <QSpace />
+                <QSelect
                   v-model="currentAudioOutputDeviceComputed"
                   :disable="!canSetAudioOutputDevice"
                   dense
@@ -835,23 +835,23 @@
                   :options="availableAudioOutputDevices"
                   class="col-7"
                 >
-                </q-select>
-              </q-card-actions>
-            </q-card>
+                </QSelect>
+              </QCardActions>
+            </QCard>
 
             <!-- Experimental Card -->
-            <q-card flat class="setting-card">
-              <q-card-actions>
+            <QCard flat class="setting-card">
+              <QCardActions>
                 <div class="text-h5">実験的機能</div>
-              </q-card-actions>
+              </QCardActions>
               <!-- 今後実験的機能を追加する場合はここに追加 -->
-              <q-card-actions class="q-px-md bg-surface">
+              <QCardActions class="q-px-md bg-surface">
                 <div>疑問文を自動調整</div>
                 <div
                   aria-label="ONの場合、疑問文の語尾の音高が自動的に上げられます。"
                 >
-                  <q-icon name="help_outline" size="sm" class="help-hover-icon">
-                    <q-tooltip
+                  <QIcon name="help_outline" size="sm" class="help-hover-icon">
+                    <QTooltip
                       :delay="500"
                       anchor="center right"
                       self="center left"
@@ -859,11 +859,11 @@
                       transition-hide="jump-left"
                     >
                       ONの場合、疑問文の語尾の音高が自動的に上げられます。
-                    </q-tooltip>
-                  </q-icon>
+                    </QTooltip>
+                  </QIcon>
                 </div>
-                <q-space />
-                <q-toggle
+                <QSpace />
+                <QToggle
                   :model-value="experimentalSetting.enableInterrogativeUpspeak"
                   @update:model-value="
                     changeExperimentalSetting(
@@ -872,15 +872,15 @@
                     )
                   "
                 >
-                </q-toggle>
-              </q-card-actions>
-              <q-card-actions class="q-px-md bg-surface">
+                </QToggle>
+              </QCardActions>
+              <QCardActions class="q-px-md bg-surface">
                 <div>モーフィング機能</div>
                 <div
                   aria-label="モーフィング機能を有効にします。2つの音声混ぜられるようになります。"
                 >
-                  <q-icon name="help_outline" size="sm" class="help-hover-icon">
-                    <q-tooltip
+                  <QIcon name="help_outline" size="sm" class="help-hover-icon">
+                    <QTooltip
                       :delay="500"
                       anchor="center right"
                       self="center left"
@@ -888,23 +888,23 @@
                       transition-hide="jump-left"
                     >
                       モーフィング機能を有効にします。2つの音声混ぜられるようになります。
-                    </q-tooltip>
-                  </q-icon>
+                    </QTooltip>
+                  </QIcon>
                 </div>
-                <q-space />
-                <q-toggle
+                <QSpace />
+                <QToggle
                   :model-value="experimentalSetting.enableMorphing"
                   @update:model-value="
                     changeExperimentalSetting('enableMorphing', $event)
                   "
                 >
-                </q-toggle>
-              </q-card-actions>
-              <q-card-actions class="q-px-md bg-surface">
+                </QToggle>
+              </QCardActions>
+              <QCardActions class="q-px-md bg-surface">
                 <div>複数選択</div>
                 <div aria-label="複数のテキスト欄を選択できるようにします。">
-                  <q-icon name="help_outline" size="sm" class="help-hover-icon">
-                    <q-tooltip
+                  <QIcon name="help_outline" size="sm" class="help-hover-icon">
+                    <QTooltip
                       :delay="500"
                       anchor="center right"
                       self="center left"
@@ -912,36 +912,36 @@
                       transition-hide="jump-left"
                     >
                       複数のテキスト欄を選択できるようにします。
-                    </q-tooltip>
-                  </q-icon>
+                    </QTooltip>
+                  </QIcon>
                 </div>
-                <q-space />
-                <q-toggle
+                <QSpace />
+                <QToggle
                   :model-value="experimentalSetting.enableMultiSelect"
                   @update:model-value="
                     changeExperimentalSetting('enableMultiSelect', $event)
                   "
                 >
-                </q-toggle>
-              </q-card-actions>
-              <q-card-actions v-if="!isProduction" class="q-px-md bg-surface">
+                </QToggle>
+              </QCardActions>
+              <QCardActions v-if="!isProduction" class="q-px-md bg-surface">
                 <div>[開発時のみ機能] 調整結果の保持</div>
                 <div
                   aria-label="テキスト変更時、同じ読みのアクセント区間内の調整結果を保持します。"
                 >
-                  <q-icon name="help_outline" size="sm" class="help-hover-icon">
-                    <q-tooltip
+                  <QIcon name="help_outline" size="sm" class="help-hover-icon">
+                    <QTooltip
                       :delay="500"
                       anchor="center right"
                       self="center left"
                       transition-show="jump-right"
                       transition-hide="jump-left"
-                      >ONの場合、テキスト変更時、同じ読みのアクセント区間内の調整結果を保持します。</q-tooltip
+                      >ONの場合、テキスト変更時、同じ読みのアクセント区間内の調整結果を保持します。</QTooltip
                     >
-                  </q-icon>
+                  </QIcon>
                 </div>
-                <q-space />
-                <q-toggle
+                <QSpace />
+                <QToggle
                   :model-value="
                     experimentalSetting.shouldKeepTuningOnTextChange
                   "
@@ -952,43 +952,43 @@
                     )
                   "
                 >
-                </q-toggle>
-              </q-card-actions>
-              <q-card-actions v-if="!isProduction" class="q-px-md bg-surface">
+                </QToggle>
+              </QCardActions>
+              <QCardActions v-if="!isProduction" class="q-px-md bg-surface">
                 <div>[開発時のみ機能] ピッチの表示</div>
                 <div aria-label="ソングエディターで、ピッチを表示します。">
-                  <q-icon name="help_outline" size="sm" class="help-hover-icon">
-                    <q-tooltip
+                  <QIcon name="help_outline" size="sm" class="help-hover-icon">
+                    <QTooltip
                       :delay="500"
                       anchor="center right"
                       self="center left"
                       transition-show="jump-right"
                       transition-hide="jump-left"
-                      >ONの場合、ソングエディターで、レンダリング後にピッチが表示されます。</q-tooltip
+                      >ONの場合、ソングエディターで、レンダリング後にピッチが表示されます。</QTooltip
                     >
-                  </q-icon>
+                  </QIcon>
                 </div>
-                <q-space />
-                <q-toggle
+                <QSpace />
+                <QToggle
                   :model-value="experimentalSetting.showPitchInSongEditor"
                   @update:model-value="
                     changeExperimentalSetting('showPitchInSongEditor', $event)
                   "
                 >
-                </q-toggle>
-              </q-card-actions>
-            </q-card>
-            <q-card flat class="setting-card">
-              <q-card-actions>
+                </QToggle>
+              </QCardActions>
+            </QCard>
+            <QCard flat class="setting-card">
+              <QCardActions>
                 <h5 class="text-h5">データ収集</h5>
-              </q-card-actions>
-              <q-card-actions class="q-px-md bg-surface">
+              </QCardActions>
+              <QCardActions class="q-px-md bg-surface">
                 <div>ソフトウェア利用状況のデータ収集を許可</div>
                 <div
                   aria-label="ONの場合、各UIの利用率などのデータが送信され、VOICEVOXの改善に役立てられます。テキストデータや音声データは送信されません。"
                 >
-                  <q-icon name="help_outline" size="sm" class="help-hover-icon">
-                    <q-tooltip
+                  <QIcon name="help_outline" size="sm" class="help-hover-icon">
+                    <QTooltip
                       :delay="500"
                       anchor="center right"
                       self="center left"
@@ -996,18 +996,18 @@
                       transition-hide="jump-left"
                     >
                       ONの場合、各UIの利用率などのデータが送信され、VOICEVOXの改善に役立てられます。テキストデータ・音声データは送信されません。
-                    </q-tooltip>
-                  </q-icon>
+                    </QTooltip>
+                  </QIcon>
                 </div>
-                <q-space />
-                <q-toggle v-model="acceptRetrieveTelemetryComputed" />
-              </q-card-actions>
-            </q-card>
+                <QSpace />
+                <QToggle v-model="acceptRetrieveTelemetryComputed" />
+              </QCardActions>
+            </QCard>
           </div>
-        </q-page>
-      </q-page-container>
-    </q-layout>
-  </q-dialog>
+        </QPage>
+      </QPageContainer>
+    </QLayout>
+  </QDialog>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Dialog/ToolBarCustomDialog.vue b/src/components/Dialog/ToolBarCustomDialog.vue
index 5adc11b2cb..56cef9d1de 100644
--- a/src/components/Dialog/ToolBarCustomDialog.vue
+++ b/src/components/Dialog/ToolBarCustomDialog.vue
@@ -1,51 +1,51 @@
 <template>
-  <q-dialog
+  <QDialog
     v-model="ToolBarCustomDialogOpenComputed"
     maximized
     transition-show="jump-up"
     transition-hide="jump-down"
     class="tool-bar-custom-dialog transparent-backdrop"
   >
-    <q-layout container view="hHh Lpr fFf" class="bg-background">
-      <q-page-container class="root">
-        <q-header class="q-py-sm">
-          <q-toolbar>
-            <q-toolbar-title class="text-display"
-              >ツールバーのカスタマイズ</q-toolbar-title
+    <QLayout container view="hHh Lpr fFf" class="bg-background">
+      <QPageContainer class="root">
+        <QHeader class="q-py-sm">
+          <QToolbar>
+            <QToolbarTitle class="text-display"
+              >ツールバーのカスタマイズ</QToolbarTitle
             >
-            <q-space />
-            <q-btn
+            <QSpace />
+            <QBtn
               unelevated
               color="toolbar-button"
               text-color="toolbar-button-display"
               class="text-no-wrap text-bold q-mr-sm"
               :disable="isDefault"
               @click="applyDefaultSetting"
-              >デフォルトに戻す</q-btn
+              >デフォルトに戻す</QBtn
             >
-            <q-btn
+            <QBtn
               unelevated
               color="toolbar-button"
               text-color="toolbar-button-display"
               class="text-no-wrap text-bold q-mr-sm"
               :disable="!isChanged"
               @click="saveCustomToolbar"
-              >保存</q-btn
+              >保存</QBtn
             >
             <!-- close button -->
-            <q-btn
+            <QBtn
               round
               flat
               icon="close"
               color="display"
               @click="finishOrNotDialog"
             />
-          </q-toolbar>
-        </q-header>
-        <q-page>
-          <q-card flat square class="preview-card">
-            <q-toolbar class="bg-toolbar preview-toolbar">
-              <draggable
+          </QToolbar>
+        </QHeader>
+        <QPage>
+          <QCard flat square class="preview-card">
+            <QToolbar class="bg-toolbar preview-toolbar">
+              <Draggable
                 v-model="toolbarButtons"
                 :item-key="toolbarButtonKey"
                 @start="toolbarButtonDragging = true"
@@ -54,7 +54,7 @@
                 <template
                   #item="{ element: button }: { element: ToolbarButtonTagType }"
                 >
-                  <q-btn
+                  <QBtn
                     unelevated
                     color="toolbar-button"
                     text-color="toolbar-button-display"
@@ -64,7 +64,7 @@
                     "
                   >
                     {{ getToolbarButtonName(button) }}
-                    <q-tooltip
+                    <QTooltip
                       :delay="800"
                       anchor="center right"
                       self="center left"
@@ -73,42 +73,42 @@
                       :style="{
                         display: toolbarButtonDragging ? 'none' : 'block',
                       }"
-                      >{{ usableButtonsDesc[button] }}</q-tooltip
+                      >{{ usableButtonsDesc[button] }}</QTooltip
                     >
-                  </q-btn>
+                  </QBtn>
                 </template>
-              </draggable>
+              </Draggable>
               <div class="preview-toolbar-drag-hint">
                 ドラッグでボタンの並びを変更できます。
               </div>
-            </q-toolbar>
+            </QToolbar>
 
-            <q-card-actions>
+            <QCardActions>
               <div class="text-h5">表示するボタンの選択</div>
-            </q-card-actions>
-            <q-card-actions class="no-padding">
-              <q-list class="usable-button-list bg-surface">
-                <q-item
+            </QCardActions>
+            <QCardActions class="no-padding">
+              <QList class="usable-button-list bg-surface">
+                <QItem
                   v-for="(desc, key) in usableButtonsDesc"
                   :key="key"
                   v-ripple
                   tag="label"
                 >
-                  <q-item-section>
-                    <q-item-label>{{ getToolbarButtonName(key) }}</q-item-label>
-                    <q-item-label caption>{{ desc }}</q-item-label>
-                  </q-item-section>
-                  <q-item-section avatar>
-                    <q-toggle v-model="toolbarButtons" :val="key" />
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </q-card-actions>
-          </q-card>
-        </q-page>
-      </q-page-container>
-    </q-layout>
-  </q-dialog>
+                  <QItemSection>
+                    <QItemLabel>{{ getToolbarButtonName(key) }}</QItemLabel>
+                    <QItemLabel caption>{{ desc }}</QItemLabel>
+                  </QItemSection>
+                  <QItemSection avatar>
+                    <QToggle v-model="toolbarButtons" :val="key" />
+                  </QItemSection>
+                </QItem>
+              </QList>
+            </QCardActions>
+          </QCard>
+        </QPage>
+      </QPageContainer>
+    </QLayout>
+  </QDialog>
 </template>
 
 <script setup lang="ts">
@@ -118,6 +118,8 @@ import { useStore } from "@/store";
 import { ToolbarButtonTagType, ToolbarSettingType } from "@/type/preload";
 import { getToolbarButtonName } from "@/store/utility";
 
+const Draggable = draggable;
+
 const props =
   defineProps<{
     modelValue: boolean;
diff --git a/src/components/Dialog/UpdateNotificationDialog/Container.vue b/src/components/Dialog/UpdateNotificationDialog/Container.vue
index af1885872d..ca418319a1 100644
--- a/src/components/Dialog/UpdateNotificationDialog/Container.vue
+++ b/src/components/Dialog/UpdateNotificationDialog/Container.vue
@@ -4,7 +4,7 @@
 -->
 
 <template>
-  <update-notification-dialog
+  <UpdateNotificationDialog
     v-if="newUpdateResult.status == 'updateAvailable'"
     v-model="isDialogOpenComputed"
     :latest-version="newUpdateResult.latestVersion"
diff --git a/src/components/Dialog/UpdateNotificationDialog/Presentation.vue b/src/components/Dialog/UpdateNotificationDialog/Presentation.vue
index b7d99b555c..7813c61a99 100644
--- a/src/components/Dialog/UpdateNotificationDialog/Presentation.vue
+++ b/src/components/Dialog/UpdateNotificationDialog/Presentation.vue
@@ -1,16 +1,16 @@
 <template>
-  <q-dialog v-model="modelValueComputed">
-    <q-card class="q-py-sm q-px-md dialog-card">
-      <q-card-section>
+  <QDialog v-model="modelValueComputed">
+    <QCard class="q-py-sm q-px-md dialog-card">
+      <QCardSection>
         <div class="text-h5">アップデートのお知らせ</div>
         <div class="text-body2 text-grey-8">
           公式サイトから最新バージョンをダウンロードできます。
         </div>
-      </q-card-section>
+      </QCardSection>
 
-      <q-separator />
+      <QSeparator />
 
-      <q-card-section class="q-py-none scroll scrollable-area">
+      <QCardSection class="q-py-none scroll scrollable-area">
         <template
           v-for="(info, infoIndex) of props.newUpdateInfos"
           :key="infoIndex"
@@ -25,13 +25,13 @@
             </template>
           </ul>
         </template>
-      </q-card-section>
+      </QCardSection>
 
-      <q-separator />
+      <QSeparator />
 
-      <q-card-actions>
-        <q-space />
-        <q-btn
+      <QCardActions>
+        <QSpace />
+        <QBtn
           padding="xs md"
           label="閉じる"
           unelevated
@@ -40,7 +40,7 @@
           class="q-mt-sm"
           @click="closeUpdateNotificationDialog()"
         />
-        <q-btn
+        <QBtn
           padding="xs md"
           label="このバージョンをスキップ"
           unelevated
@@ -52,7 +52,7 @@
             closeUpdateNotificationDialog();
           "
         />
-        <q-btn
+        <QBtn
           padding="xs md"
           label="公式サイトを開く"
           unelevated
@@ -64,9 +64,9 @@
             closeUpdateNotificationDialog();
           "
         />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
+      </QCardActions>
+    </QCard>
+  </QDialog>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/EngineStartupOverlay.vue b/src/components/EngineStartupOverlay.vue
index ba78ca8048..c3370a4cac 100644
--- a/src/components/EngineStartupOverlay.vue
+++ b/src/components/EngineStartupOverlay.vue
@@ -11,7 +11,7 @@
     class="waiting-engine"
   >
     <div>
-      <q-spinner color="primary" size="2.5rem" />
+      <QSpinner color="primary" size="2.5rem" />
       <div class="q-mt-xs">
         {{
           allEngineState === "STARTING"
@@ -21,17 +21,17 @@
       </div>
 
       <template v-if="isEngineWaitingLong">
-        <q-separator spaced />
+        <QSeparator spaced />
         エンジン起動に時間がかかっています。<br />
-        <q-btn
+        <QBtn
           v-if="isMultipleEngine"
           outline
           :disable="reloadingLocked"
           @click="reloadAppWithMultiEngineOffMode"
         >
-          マルチエンジンをオフにして再読み込みする</q-btn
+          マルチエンジンをオフにして再読み込みする</QBtn
         >
-        <q-btn v-else outline @click="openQa">Q&Aを見る</q-btn>
+        <QBtn v-else outline @click="openQa">Q&Aを見る</QBtn>
       </template>
     </div>
   </div>
diff --git a/src/components/Menu/ContextMenu.vue b/src/components/Menu/ContextMenu.vue
index 871f0f42c9..1bd909bed2 100644
--- a/src/components/Menu/ContextMenu.vue
+++ b/src/components/Menu/ContextMenu.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-menu
+  <QMenu
     ref="contextMenu"
     touch-position
     context-menu
@@ -7,11 +7,11 @@
     transition-show="none"
     transition-hide="none"
   >
-    <q-list dense>
-      <q-item v-if="header" dense class="bg-background">
-        <q-item-section class="text-weight-bold">{{ header }}</q-item-section>
-      </q-item>
-      <menu-item
+    <QList dense>
+      <QItem v-if="header" dense class="bg-background">
+        <QItemSection class="text-weight-bold">{{ header }}</QItemSection>
+      </QItem>
+      <MenuItem
         v-for="(menu, index) of menudata"
         :key="index + 1"
         :menudata="menu"
@@ -20,9 +20,9 @@
           (uiLocked && menu.type !== 'separator' && menu.disableWhenUiLocked)
         "
       >
-      </menu-item>
-    </q-list>
-  </q-menu>
+      </MenuItem>
+    </QList>
+  </QMenu>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Menu/MenuBar/BaseMenuBar.vue b/src/components/Menu/MenuBar/BaseMenuBar.vue
index 5c30f940a2..3b7b3ea75f 100644
--- a/src/components/Menu/MenuBar/BaseMenuBar.vue
+++ b/src/components/Menu/MenuBar/BaseMenuBar.vue
@@ -1,11 +1,11 @@
 <template>
-  <q-bar class="bg-background q-pa-none relative-position">
+  <QBar class="bg-background q-pa-none relative-position">
     <div
       v-if="$q.platform.is.mac && !isFullscreen"
       class="mac-traffic-light-space"
     ></div>
     <img v-else src="/icon.png" class="window-logo" alt="application logo" />
-    <menu-button
+    <MenuButton
       v-for="(root, index) of menudata"
       :key="index"
       v-model:selected="subMenuOpenFlags[index]"
@@ -16,14 +16,14 @@
         root.type === 'button' ? (subMenuOpenFlags[index] = false) : undefined
       "
     />
-    <q-space />
+    <QSpace />
     <div class="window-title" :class="{ 'text-warning': isMultiEngineOffMode }">
       {{ titleText }}
     </div>
-    <q-space />
-    <title-bar-editor-switcher />
-    <title-bar-buttons />
-  </q-bar>
+    <QSpace />
+    <TitleBarEditorSwitcher />
+    <TitleBarButtons />
+  </QBar>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Menu/MenuBar/MinMaxCloseButtons.vue b/src/components/Menu/MenuBar/MinMaxCloseButtons.vue
index 1d29141650..b64be59bd8 100644
--- a/src/components/Menu/MenuBar/MinMaxCloseButtons.vue
+++ b/src/components/Menu/MenuBar/MinMaxCloseButtons.vue
@@ -1,12 +1,12 @@
 <template>
-  <q-badge
+  <QBadge
     v-if="$q.platform.is.mac"
     transparent
     color="transparent"
     text-color="display"
     class="full-height cursor-not-allowed no-border-radius"
   >
-    <q-btn
+    <QBtn
       dense
       flat
       round
@@ -16,8 +16,8 @@
       class="title-bar-buttons"
       aria-label="閉じる"
       @click="closeWindow()"
-    ></q-btn>
-    <q-btn
+    ></QBtn>
+    <QBtn
       dense
       flat
       round
@@ -27,8 +27,8 @@
       class="title-bar-buttons"
       aria-label="最小化"
       @click="minimizeWindow()"
-    ></q-btn>
-    <q-btn
+    ></QBtn>
+    <QBtn
       dense
       flat
       round
@@ -38,9 +38,9 @@
       class="title-bar-buttons"
       aria-label="最大化"
       @click="maximizeWindow()"
-    ></q-btn>
-  </q-badge>
-  <q-badge
+    ></QBtn>
+  </QBadge>
+  <QBadge
     v-else
     transparent
     color="transparent"
@@ -52,16 +52,16 @@
       title-bar-buttons-root
     "
   >
-    <q-btn
+    <QBtn
       dense
       flat
       icon="minimize"
       class="title-bar-buttons"
       aria-label="最小化"
       @click="minimizeWindow()"
-    ></q-btn>
+    ></QBtn>
 
-    <q-btn
+    <QBtn
       v-if="!isMaximized"
       dense
       flat
@@ -69,8 +69,8 @@
       class="title-bar-buttons"
       aria-label="最大化"
       @click="maximizeWindow()"
-    ></q-btn>
-    <q-btn
+    ></QBtn>
+    <QBtn
       v-else
       dense
       flat
@@ -79,17 +79,17 @@
       aria-label="最大化"
       @click="maximizeWindow()"
     >
-    </q-btn>
+    </QBtn>
 
-    <q-btn
+    <QBtn
       dense
       flat
       icon="close"
       class="title-bar-buttons close"
       aria-label="閉じる"
       @click="closeWindow()"
-    ></q-btn>
-  </q-badge>
+    ></QBtn>
+  </QBadge>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Menu/MenuBar/TitleBarButtons.vue b/src/components/Menu/MenuBar/TitleBarButtons.vue
index e41cf37a18..26171373b7 100644
--- a/src/components/Menu/MenuBar/TitleBarButtons.vue
+++ b/src/components/Menu/MenuBar/TitleBarButtons.vue
@@ -1,12 +1,12 @@
 <template>
-  <q-badge
+  <QBadge
     v-if="$q.platform.is.mac"
     transparent
     color="transparent"
     text-color="display"
     class="full-height cursor-not-allowed no-border-radius"
   >
-    <q-btn
+    <QBtn
       v-if="isPinned"
       id="pinned-btn"
       dense
@@ -18,11 +18,11 @@
       aria-label="最前面固定を解除"
       @click="changePinWindow()"
     >
-      <q-tooltip :delay="500" class="text-body2" :offset="[11, 11]">
+      <QTooltip :delay="500" class="text-body2" :offset="[11, 11]">
         最前面固定を解除
-      </q-tooltip>
-    </q-btn>
-    <q-btn
+      </QTooltip>
+    </QBtn>
+    <QBtn
       v-else
       id="pinned-btn"
       dense
@@ -34,12 +34,12 @@
       aria-label="最前面に固定"
       @click="changePinWindow()"
     >
-      <q-tooltip :delay="500" class="text-body2" :offset="[11, 11]">
+      <QTooltip :delay="500" class="text-body2" :offset="[11, 11]">
         最前面に固定
-      </q-tooltip>
-    </q-btn>
-  </q-badge>
-  <q-badge
+      </QTooltip>
+    </QBtn>
+  </QBadge>
+  <QBadge
     v-else
     transparent
     color="transparent"
@@ -51,7 +51,7 @@
       title-bar-buttons-root
     "
   >
-    <q-btn
+    <QBtn
       v-if="isPinned"
       id="pinned-btn"
       dense
@@ -63,11 +63,11 @@
       aria-label="最前面固定を解除"
       @click="changePinWindow()"
     >
-      <q-tooltip :delay="500" class="text-body2" :offset="[11, 11]">
+      <QTooltip :delay="500" class="text-body2" :offset="[11, 11]">
         最前面固定を解除
-      </q-tooltip>
-    </q-btn>
-    <q-btn
+      </QTooltip>
+    </QBtn>
+    <QBtn
       v-else
       id="pinned-btn"
       dense
@@ -78,12 +78,12 @@
       aria-label="最前面に固定"
       @click="changePinWindow()"
     >
-      <q-tooltip :delay="500" class="text-body2" :offset="[11, 11]">
+      <QTooltip :delay="500" class="text-body2" :offset="[11, 11]">
         最前面に固定
-      </q-tooltip>
-    </q-btn>
-  </q-badge>
-  <min-max-close-buttons v-if="!$q.platform.is.mac" />
+      </QTooltip>
+    </QBtn>
+  </QBadge>
+  <MinMaxCloseButtons v-if="!$q.platform.is.mac" />
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Menu/MenuBar/TitleBarEditorSwitcher.vue b/src/components/Menu/MenuBar/TitleBarEditorSwitcher.vue
index 532c9ed3ef..8a7e347dce 100644
--- a/src/components/Menu/MenuBar/TitleBarEditorSwitcher.vue
+++ b/src/components/Menu/MenuBar/TitleBarEditorSwitcher.vue
@@ -5,7 +5,7 @@
 <template>
   <!-- FIXME: 画面サイズが小さくなると表示が崩れるのを直す -->
   <!-- NOTE: デザインしづらいからQBtnかdivの方が良い -->
-  <q-btn-toggle
+  <QBtnToggle
     :model-value="nowEditor"
     unelevated
     :disable="uiLocked"
diff --git a/src/components/Menu/MenuButton.vue b/src/components/Menu/MenuButton.vue
index 40a723175c..738396f9d0 100644
--- a/src/components/Menu/MenuButton.vue
+++ b/src/components/Menu/MenuButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-btn
+  <QBtn
     flat
     text-color="display"
     class="
@@ -18,15 +18,15 @@
     "
   >
     {{ menudata.label }}
-    <q-menu
+    <QMenu
       v-if="'subMenu' in menudata"
       v-model="selectedComputed"
       transition-show="none"
       transition-hide="none"
       :fit="true"
     >
-      <q-list dense>
-        <menu-item
+      <QList dense>
+        <MenuItem
           v-for="(menu, index) of menudata.subMenu"
           :key="index"
           v-model:selected="subMenuOpenFlags[index]"
@@ -35,9 +35,9 @@
           @mouseenter="reassignSubMenuOpen(index)"
           @mouseleave="reassignSubMenuOpen.cancel()"
         />
-      </q-list>
-    </q-menu>
-  </q-btn>
+      </QList>
+    </QMenu>
+  </QBtn>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Menu/MenuItem.vue b/src/components/Menu/MenuItem.vue
index 4266b5d4ad..0e228a7129 100644
--- a/src/components/Menu/MenuItem.vue
+++ b/src/components/Menu/MenuItem.vue
@@ -1,6 +1,6 @@
 <template>
-  <q-separator v-if="menudata.type === 'separator'" class="bg-surface" />
-  <q-item
+  <QSeparator v-if="menudata.type === 'separator'" class="bg-surface" />
+  <QItem
     v-else-if="menudata.type === 'root'"
     class="bg-background"
     clickable
@@ -9,39 +9,39 @@
     :class="selected && 'active-menu'"
     @click="menudata.onClick"
   >
-    <q-item-section v-if="menudata.icon" side class="q-py-2">
+    <QItemSection v-if="menudata.icon" side class="q-py-2">
       <img :src="menudata.icon" class="engine-icon" />
-    </q-item-section>
+    </QItemSection>
 
-    <q-item-section>{{ menudata.label }}</q-item-section>
-    <q-item-section
+    <QItemSection>{{ menudata.label }}</QItemSection>
+    <QItemSection
       v-if="menudata.label != undefined && getMenuBarHotkey(menudata.label)"
       side
     >
       {{ getMenuBarHotkey(menudata.label) }}
-    </q-item-section>
+    </QItemSection>
 
-    <q-item-section side>
-      <q-icon name="keyboard_arrow_right" />
-    </q-item-section>
+    <QItemSection side>
+      <QIcon name="keyboard_arrow_right" />
+    </QItemSection>
 
-    <q-menu
+    <QMenu
       v-model="selectedComputed"
       anchor="top end"
       transition-show="none"
       transition-hide="none"
       :target="!uiLocked"
     >
-      <menu-item
+      <MenuItem
         v-for="(menu, i) of menudata.subMenu"
         :key="i"
         v-model:selected="subMenuOpenFlags[i]"
         :menudata="menu"
         @mouseover="reassignSubMenuOpen(i)"
       />
-    </q-menu>
-  </q-item>
-  <q-item
+    </QMenu>
+  </QItem>
+  <QItem
     v-else
     v-ripple
     v-close-popup
@@ -51,23 +51,23 @@
     :disable="menudata.disabled"
     @click="menudata.onClick"
   >
-    <q-item-section
+    <QItemSection
       v-if="'icon' in menudata && menudata.icon != undefined"
       avatar
     >
-      <q-avatar>
+      <QAvatar>
         <img :src="menudata.icon" />
-      </q-avatar>
-    </q-item-section>
+      </QAvatar>
+    </QItemSection>
 
-    <q-item-section>{{ menudata.label }}</q-item-section>
-    <q-item-section
+    <QItemSection>{{ menudata.label }}</QItemSection>
+    <QItemSection
       v-if="menudata.label != undefined && getMenuBarHotkey(menudata.label)"
       side
     >
       {{ getMenuBarHotkey(menudata.label) }}
-    </q-item-section>
-  </q-item>
+    </QItemSection>
+  </QItem>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/ProgressView.vue b/src/components/ProgressView.vue
index aff1b5f69b..a2bfe9689c 100644
--- a/src/components/ProgressView.vue
+++ b/src/components/ProgressView.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="isShowProgress" class="progress">
     <div>
-      <q-circular-progress
+      <QCircularProgress
         v-if="isDeterminate"
         show-value
         :value="progress"
@@ -14,8 +14,8 @@
         :thickness="0.3"
       >
         {{ formattedProgress }}%
-      </q-circular-progress>
-      <q-circular-progress
+      </QCircularProgress>
+      <QCircularProgress
         v-if="!isDeterminate"
         indeterminate
         color="primary"
diff --git a/src/components/Sing/CharacterMenuButton/MenuButton.vue b/src/components/Sing/CharacterMenuButton/MenuButton.vue
index 23b90e96a1..b043e66957 100644
--- a/src/components/Sing/CharacterMenuButton/MenuButton.vue
+++ b/src/components/Sing/CharacterMenuButton/MenuButton.vue
@@ -1,24 +1,24 @@
 <template>
-  <q-btn flat class="q-pa-none" :disable="uiLocked">
-    <selected-character
+  <QBtn flat class="q-pa-none" :disable="uiLocked">
+    <SelectedCharacter
       :show-skeleton="showSkeleton"
       :selected-character-info="selectedCharacterInfo"
       :selected-singer="selectedSinger"
     />
-    <q-menu
+    <QMenu
       class="character-menu"
       transition-show="none"
       transition-hide="none"
       touch-position
     >
-      <q-list>
-        <q-item
+      <QList>
+        <QItem
           v-for="(characterInfo, characterIndex) in userOrderedCharacterInfos"
           :key="characterIndex"
           class="q-pa-none"
         >
-          <q-btn-group flat class="col full-width">
-            <q-btn
+          <QBtnGroup flat class="col full-width">
+            <QBtn
               v-close-popup
               flat
               no-caps
@@ -36,8 +36,8 @@
               @mouseover="reassignSubMenuOpen(-1)"
               @mouseleave="reassignSubMenuOpen.cancel()"
             >
-              <q-avatar rounded size="2rem" class="q-mr-md">
-                <q-img
+              <QAvatar rounded size="2rem" class="q-mr-md">
+                <QImg
                   no-spinner
                   no-transition
                   :ratio="1"
@@ -45,7 +45,7 @@
                     getDefaultStyle(characterInfo.metas.speakerUuid).iconPath
                   "
                 />
-                <q-avatar
+                <QAvatar
                   v-if="
                     isMultipleEngine && characterInfo.metas.styles.length < 2
                   "
@@ -60,14 +60,14 @@
                       ]
                     "
                   />
-                </q-avatar>
-              </q-avatar>
+                </QAvatar>
+              </QAvatar>
               <div>{{ characterInfo.metas.speakerName }}</div>
-            </q-btn>
+            </QBtn>
 
             <!-- スタイルが2つ以上あるものだけ、スタイル選択ボタンを表示する-->
             <template v-if="characterInfo.metas.styles.length >= 2">
-              <q-separator vertical />
+              <QSeparator vertical />
 
               <div
                 class="flex items-center q-px-sm q-py-none cursor-pointer"
@@ -77,9 +77,9 @@
                 @mouseover="reassignSubMenuOpen(characterIndex)"
                 @mouseleave="reassignSubMenuOpen.cancel()"
               >
-                <q-icon name="keyboard_arrow_right" color="grey-6" size="sm" />
+                <QIcon name="keyboard_arrow_right" color="grey-6" size="sm" />
 
-                <q-menu
+                <QMenu
                   v-model="subMenuOpenFlags[characterIndex]"
                   no-parent-event
                   anchor="top end"
@@ -88,8 +88,8 @@
                   transition-hide="none"
                   class="character-menu"
                 >
-                  <q-list>
-                    <q-item
+                  <QList>
+                    <QItem
                       v-for="(style, styleIndex) in characterInfo.metas.styles"
                       :key="styleIndex"
                       v-close-popup
@@ -103,39 +103,39 @@
                         )
                       "
                     >
-                      <q-avatar rounded size="2rem" class="q-mr-md">
-                        <q-img
+                      <QAvatar rounded size="2rem" class="q-mr-md">
+                        <QImg
                           no-spinner
                           no-transition
                           :ratio="1"
                           :src="style.iconPath"
                         />
-                        <q-avatar
+                        <QAvatar
                           v-if="isMultipleEngine"
                           rounded
                           class="engine-icon"
                         >
                           <img :src="engineIcons[style.engineId]" />
-                        </q-avatar>
-                      </q-avatar>
-                      <q-item-section v-if="style.styleName">
+                        </QAvatar>
+                      </QAvatar>
+                      <QItemSection v-if="style.styleName">
                         {{ characterInfo.metas.speakerName }} ({{
                           getStyleDescription(style)
                         }})
-                      </q-item-section>
-                      <q-item-section v-else>{{
+                      </QItemSection>
+                      <QItemSection v-else>{{
                         characterInfo.metas.speakerName
-                      }}</q-item-section>
-                    </q-item>
-                  </q-list>
-                </q-menu>
+                      }}</QItemSection>
+                    </QItem>
+                  </QList>
+                </QMenu>
               </div>
             </template>
-          </q-btn-group>
-        </q-item>
-      </q-list>
-    </q-menu>
-  </q-btn>
+          </QBtnGroup>
+        </QItem>
+      </QList>
+    </QMenu>
+  </QBtn>
 </template>
 
 <script lang="ts">
diff --git a/src/components/Sing/CharacterMenuButton/SelectedCharacter.vue b/src/components/Sing/CharacterMenuButton/SelectedCharacter.vue
index ec16378ab5..8d2205ee3d 100644
--- a/src/components/Sing/CharacterMenuButton/SelectedCharacter.vue
+++ b/src/components/Sing/CharacterMenuButton/SelectedCharacter.vue
@@ -1,14 +1,14 @@
 <template>
   <div v-if="props.showSkeleton" class="selected-character">
-    <q-skeleton class="character-avatar" type="QAvatar" size="52px" />
+    <QSkeleton class="character-avatar" type="QAvatar" size="52px" />
     <div class="character-info">
-      <q-skeleton
+      <QSkeleton
         class="character-name skeleton"
         type="rect"
         width="65px"
         height="15px"
       />
-      <q-skeleton
+      <QSkeleton
         class="character-style"
         type="rect"
         width="110px"
@@ -17,13 +17,13 @@
     </div>
   </div>
   <div v-else class="selected-character">
-    <q-avatar
+    <QAvatar
       v-if="selectedStyleIconPath"
       class="character-avatar"
       size="3.5rem"
     >
       <img :src="selectedStyleIconPath" class="character-avatar-icon" />
-    </q-avatar>
+    </QAvatar>
     <div class="character-info">
       <div class="character-name">
         {{ selectedCharacterName }}
@@ -32,7 +32,7 @@
         {{ selectedCharacterStyleDescription }}
       </div>
     </div>
-    <q-icon
+    <QIcon
       name="arrow_drop_down"
       size="sm"
       class="character-menu-dropdown-icon"
diff --git a/src/components/Sing/MenuBar.vue b/src/components/Sing/MenuBar.vue
index e4f6a6d2ae..578b08cabf 100644
--- a/src/components/Sing/MenuBar.vue
+++ b/src/components/Sing/MenuBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <base-menu-bar editor="song" :file-sub-menu-data="fileSubMenuData" />
+  <BaseMenuBar editor="song" :file-sub-menu-data="fileSubMenuData" />
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Sing/ScoreSequencer.vue b/src/components/Sing/ScoreSequencer.vue
index 51533298df..0d5e019232 100644
--- a/src/components/Sing/ScoreSequencer.vue
+++ b/src/components/Sing/ScoreSequencer.vue
@@ -3,13 +3,13 @@
     <!-- 左上の角 -->
     <div class="sequencer-corner"></div>
     <!-- ルーラー -->
-    <sequencer-ruler
+    <SequencerRuler
       class="sequencer-ruler"
       :offset="scrollX"
       :num-of-measures="numOfMeasures"
     />
     <!-- 鍵盤 -->
-    <sequencer-keys
+    <SequencerKeys
       class="sequencer-keys"
       :offset="scrollY"
       :black-key-width="28"
@@ -29,7 +29,7 @@
       @scroll="onScroll"
     >
       <!-- キャラクター全身 -->
-      <character-portrait />
+      <CharacterPortrait />
       <!-- グリッド -->
       <!-- NOTE: 現状オクターブごとの罫線なし -->
       <svg
@@ -108,7 +108,7 @@
         }"
       ></div>
       <!-- TODO: 1つのv-forで全てのノートを描画できるようにする -->
-      <sequencer-note
+      <SequencerNote
         v-for="note in unselectedNotes"
         :key="note.id"
         :note="note"
@@ -118,7 +118,7 @@
         @right-edge-mousedown="onNoteRightEdgeMouseDown($event, note)"
         @lyric-mouse-down="onNoteLyricMouseDown($event, note)"
       />
-      <sequencer-note
+      <SequencerNote
         v-for="note in nowPreviewing ? previewNotes : selectedNotes"
         :key="note.id"
         :note="note"
@@ -129,7 +129,7 @@
         @lyric-mouse-down="onNoteLyricMouseDown($event, note)"
       />
     </div>
-    <sequencer-pitch
+    <SequencerPitch
       v-if="showPitch"
       class="sequencer-pitch"
       :style="{
@@ -147,7 +147,7 @@
         marginBottom: `${scrollBarWidth}px`,
       }"
     >
-      <sequencer-phrase-indicator
+      <SequencerPhraseIndicator
         v-for="phraseInfo in phraseInfos"
         :key="phraseInfo.key"
         :phrase-key="phraseInfo.key"
diff --git a/src/components/Sing/SequencerNote.vue b/src/components/Sing/SequencerNote.vue
index 606bebb4c1..a54e535f4e 100644
--- a/src/components/Sing/SequencerNote.vue
+++ b/src/components/Sing/SequencerNote.vue
@@ -15,7 +15,7 @@
     <div class="note-bar" @mousedown="onBarMouseDown">
       <div class="note-left-edge" @mousedown="onLeftEdgeMouseDown"></div>
       <div class="note-right-edge" @mousedown="onRightEdgeMouseDown"></div>
-      <context-menu ref="contextMenu" :menudata="contextMenuData" />
+      <ContextMenu ref="contextMenu" :menudata="contextMenuData" />
     </div>
     <!-- TODO: ピッチの上に歌詞入力のinputが表示されるようにする -->
     <div
diff --git a/src/components/Sing/SingEditor.vue b/src/components/Sing/SingEditor.vue
index 7251c37236..0d0d329d2f 100644
--- a/src/components/Sing/SingEditor.vue
+++ b/src/components/Sing/SingEditor.vue
@@ -1,15 +1,15 @@
 <template>
-  <menu-bar />
-  <tool-bar />
+  <MenuBar />
+  <ToolBar />
   <div class="sing-main">
-    <engine-startup-overlay :is-completed-initial-startup="isEnginesReady" />
+    <EngineStartupOverlay :is-completed-initial-startup="isEnginesReady" />
     <div v-if="nowAudioExporting" class="exporting-dialog">
       <div>
-        <q-spinner color="primary" size="2.5rem" />
+        <QSpinner color="primary" size="2.5rem" />
         <div class="q-mt-xs">
           {{ nowRendering ? "レンダリング中・・・" : "音声を書き出し中・・・" }}
         </div>
-        <q-btn
+        <QBtn
           v-if="nowRendering"
           padding="xs md"
           label="音声の書き出しをキャンセル"
@@ -20,7 +20,7 @@
         />
       </div>
     </div>
-    <score-sequencer :is-activated="isActivated" />
+    <ScoreSequencer :is-activated="isActivated" />
   </div>
 </template>
 
diff --git a/src/components/Sing/ToolBar.vue b/src/components/Sing/ToolBar.vue
index df9fe9d184..fc3707f07a 100644
--- a/src/components/Sing/ToolBar.vue
+++ b/src/components/Sing/ToolBar.vue
@@ -1,9 +1,9 @@
 <template>
-  <q-toolbar class="sing-toolbar">
+  <QToolbar class="sing-toolbar">
     <!-- configs for entire song -->
     <div class="sing-configs">
-      <character-menu-button />
-      <q-input
+      <CharacterMenuButton />
+      <QInput
         type="number"
         :model-value="keyShiftInputBuffer"
         label="ﾄﾗﾝｽﾎﾟｰｽﾞ"
@@ -13,7 +13,7 @@
         @update:model-value="setKeyShiftInputBuffer"
         @change="setKeyShift"
       />
-      <q-input
+      <QInput
         type="number"
         :model-value="bpmInputBuffer"
         label="テンポ"
@@ -24,11 +24,11 @@
         @change="setTempo"
       >
         <template #prepend>
-          <q-icon name="music_note" size="xs" class="sing-tempo-icon" />
+          <QIcon name="music_note" size="xs" class="sing-tempo-icon" />
         </template>
-      </q-input>
+      </QInput>
       <div class="sing-beats">
-        <q-input
+        <QInput
           type="number"
           :model-value="beatsInputBuffer"
           label="拍子"
@@ -39,7 +39,7 @@
           @change="setTimeSignature"
         />
         <div class="sing-beats-separator">/</div>
-        <q-input
+        <QInput
           type="number"
           :model-value="beatTypeInputBuffer"
           label=""
@@ -53,21 +53,21 @@
     </div>
     <!-- player -->
     <div class="sing-player">
-      <q-btn
+      <QBtn
         flat
         round
         class="sing-transport-button"
         icon="skip_previous"
         @click="goToZero"
       />
-      <q-btn
+      <QBtn
         v-if="!nowPlaying"
         round
         class="sing-playback-button"
         icon="play_arrow"
         @click="play"
       />
-      <q-btn
+      <QBtn
         v-else
         round
         class="sing-playback-button"
@@ -83,7 +83,7 @@
     </div>
     <!-- settings for edit controls -->
     <div class="sing-controls">
-      <q-btn
+      <QBtn
         flat
         dense
         round
@@ -92,7 +92,7 @@
         :disable="!canUndo"
         @click="undo"
       />
-      <q-btn
+      <QBtn
         flat
         dense
         round
@@ -101,9 +101,9 @@
         :disable="!canRedo"
         @click="redo"
       />
-      <q-icon name="volume_up" size="xs" class="sing-volume-icon" />
-      <q-slider v-model.number="volume" class="sing-volume" />
-      <q-select
+      <QIcon name="volume_up" size="xs" class="sing-volume-icon" />
+      <QSlider v-model.number="volume" class="sing-volume" />
+      <QSelect
         v-model="snapTypeSelectModel"
         :options="snapTypeSelectOptions"
         outlined
@@ -118,7 +118,7 @@
         class="sing-snap"
       />
     </div>
-  </q-toolbar>
+  </QToolbar>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Talk/AccentPhrase.vue b/src/components/Talk/AccentPhrase.vue
index da3dfe9e72..fb1e8cd191 100644
--- a/src/components/Talk/AccentPhrase.vue
+++ b/src/components/Talk/AccentPhrase.vue
@@ -5,11 +5,11 @@
     :class="[isActive && 'mora-table-focus', uiLocked || 'mora-table-hover']"
     @click="$emit('click', index)"
   >
-    <context-menu :menudata="contextMenudata" />
+    <ContextMenu :menudata="contextMenudata" />
     <!-- スライダーここから -->
     <!-- ｱｸｾﾝﾄ項目のスライダー -->
     <template v-if="selectedDetail === 'accent'">
-      <audio-accent
+      <AudioAccent
         :accent-phrase-index="index"
         :accent-phrase="accentPhrase"
         :ui-locked="uiLocked"
@@ -25,7 +25,7 @@
         class="q-mb-sm pitch-cell"
         :style="{ 'grid-column': `${moraIndex * 2 + 1} / span 1` }"
       >
-        <audio-parameter
+        <AudioParameter
           :mora-index="moraIndex"
           :value="mora.pitch"
           :ui-locked="uiLocked"
@@ -49,7 +49,7 @@
         :style="{ 'grid-column': `${moraIndex * 2 + 1} / span 1` }"
       >
         <!-- consonant length -->
-        <audio-parameter
+        <AudioParameter
           v-if="mora.consonant && mora.consonantLength != undefined"
           :mora-index="moraIndex"
           :value="mora.consonantLength"
@@ -64,7 +64,7 @@
           @mouse-over="handleLengthHoverText"
         />
         <!-- vowel length -->
-        <audio-parameter
+        <AudioParameter
           :mora-index="moraIndex"
           :value="mora.vowelLength"
           :ui-locked="uiLocked"
@@ -86,7 +86,7 @@
         }"
       >
         <!-- pause length -->
-        <audio-parameter
+        <AudioParameter
           :mora-index="accentPhrase.moras.length"
           :value="accentPhrase.pauseMora.vowelLength"
           :ui-locked="uiLocked"
@@ -115,26 +115,26 @@
         @click.stop="uiLocked || handleChangeVoicing(mora, moraIndex)"
       >
         <!-- tooltipを変更する場合、pauseMoraのものも合わせて変更すること-->
-        <q-tooltip
+        <QTooltip
           v-if="
             selectedDetail === 'pitch' && !unvoicableVowels.includes(mora.vowel)
           "
           :delay="500"
           transition-show="jump-up"
           transition-hide="jump-down"
-          >イ段とウ段以外の音は無声化できません</q-tooltip
+          >イ段とウ段以外の音は無声化できません</QTooltip
         >
-        <q-tooltip
+        <QTooltip
           v-if="selectedDetail === 'length'"
           :delay="500"
           transition-show="jump-up"
           transition-hide="jump-down"
-          >読みの変更はアクセント項目でのみ、<br />無声化はイントネーション項目でのみ操作できます</q-tooltip
+          >読みの変更はアクセント項目でのみ、<br />無声化はイントネーション項目でのみ操作できます</QTooltip
         >
         <span class="text-cell-inner">
           {{ getHoveredText(mora, moraIndex) }}
         </span>
-        <q-popup-edit
+        <QPopupEdit
           v-if="selectedDetail == 'accent' && !uiLocked"
           v-slot="scope"
           :model-value="pronunciation"
@@ -143,7 +143,7 @@
           transition-hide="none"
           @save="handleChangePronounce($event)"
         >
-          <q-input
+          <QInput
             v-model="scope.value"
             dense
             :input-style="{
@@ -155,7 +155,7 @@
             outlined
             @keyup.enter="scope.set"
           />
-        </q-popup-edit>
+        </QPopupEdit>
       </div>
       <div
         v-if="!isLast || moraIndex < accentPhrase.moras.length - 1"
@@ -176,19 +176,19 @@
       <div class="text-cell">
         <!-- FIXME: 共通化 -->
         <!-- tooltipを変更する場合、pauseMora以外のものも合わせて変更すること-->
-        <q-tooltip
+        <QTooltip
           v-if="selectedDetail === 'pitch'"
           :delay="500"
           transition-show="jump-up"
           transition-hide="jump-down"
-          >イ段とウ段以外の音は無声化できません</q-tooltip
+          >イ段とウ段以外の音は無声化できません</QTooltip
         >
-        <q-tooltip
+        <QTooltip
           v-if="selectedDetail === 'length'"
           :delay="500"
           transition-show="jump-up"
           transition-hide="jump-down"
-          >読みの変更はアクセント項目でのみ、<br />無声化はイントネーション項目でのみ操作できます</q-tooltip
+          >読みの変更はアクセント項目でのみ、<br />無声化はイントネーション項目でのみ操作できます</QTooltip
         >
         <span class="text-cell-inner">
           {{ accentPhrase.pauseMora.text }}
diff --git a/src/components/Talk/AudioAccent.vue b/src/components/Talk/AudioAccent.vue
index ebc9208f3c..e525bd2656 100644
--- a/src/components/Talk/AudioAccent.vue
+++ b/src/components/Talk/AudioAccent.vue
@@ -8,7 +8,7 @@
     <!-- div for input width -->
     <div>
       <div>
-        <q-slider
+        <QSlider
           v-if="accentPhrase.moras.length > 1"
           snap
           dense
diff --git a/src/components/Talk/AudioCell.vue b/src/components/Talk/AudioCell.vue
index 8ba67e4823..1ef15c7141 100644
--- a/src/components/Talk/AudioCell.vue
+++ b/src/components/Talk/AudioCell.vue
@@ -30,7 +30,7 @@
       tabindex="-1"
       @click="onClickWithModifierKey"
     />
-    <q-icon
+    <QIcon
       v-if="isActiveAudioCell"
       name="arrow_right"
       color="primary"
@@ -44,7 +44,7 @@
     >
       {{ textLineNumberIndex }}
     </div>
-    <character-button
+    <CharacterButton
       v-model:selected-voice="selectedVoice"
       :character-infos="userOrderedCharacterInfos"
       :loading="isInitializingSpeaker"
@@ -60,7 +60,7 @@
       input.valueをスクリプトから変更した場合は@changeが発火しないため、
       @blurと@keydown.prevent.enter.exactに分けている
     -->
-    <q-input
+    <QInput
       ref="textField"
       filled
       dense
@@ -85,7 +85,7 @@
         句読点の位置で文章を分割してください。
       </template>
       <template v-if="enableDeleteButton" #after>
-        <q-btn
+        <QBtn
           round
           flat
           icon="delete_outline"
@@ -95,7 +95,7 @@
           @click="removeCell"
         />
       </template>
-      <context-menu
+      <ContextMenu
         ref="contextMenu"
         :header="contextMenuHeader"
         :menudata="contextMenudata"
@@ -105,7 +105,7 @@
         "
         @before-hide="endContextMenuOperation()"
       />
-    </q-input>
+    </QInput>
   </div>
 </template>
 
diff --git a/src/components/Talk/AudioDetail.vue b/src/components/Talk/AudioDetail.vue
index 2165455dc2..676f730842 100644
--- a/src/components/Talk/AudioDetail.vue
+++ b/src/components/Talk/AudioDetail.vue
@@ -3,34 +3,34 @@
     <div>
       <div class="side">
         <div class="detail-selector">
-          <q-tabs v-model="selectedDetail" dense vertical class="text-display">
-            <q-tab name="accent" label="ｱｸｾﾝﾄ" />
-            <q-tab
+          <QTabs v-model="selectedDetail" dense vertical class="text-display">
+            <QTab name="accent" label="ｱｸｾﾝﾄ" />
+            <QTab
               name="pitch"
               label="ｲﾝﾄﾈｰｼｮﾝ"
               :disable="
                 !(supportedFeatures && supportedFeatures.adjustMoraPitch)
               "
             />
-            <q-tab
+            <QTab
               name="length"
               label="長さ"
               :disable="
                 !(supportedFeatures && supportedFeatures.adjustPhonemeLength)
               "
             />
-          </q-tabs>
+          </QTabs>
         </div>
         <div class="play-button-wrapper">
-          <q-btn
+          <QBtn
             v-if="!nowPlaying && !nowGenerating"
             fab
             color="primary"
             text-color="display-on-primary"
             icon="play_arrow"
             @click="play"
-          ></q-btn>
-          <q-btn
+          ></QBtn>
+          <QBtn
             v-else
             fab
             color="primary"
@@ -38,12 +38,12 @@
             icon="stop"
             :disable="nowGenerating"
             @click="stop"
-          ></q-btn>
+          ></QBtn>
         </div>
       </div>
 
       <div ref="audioDetail" class="overflow-hidden-y accent-phrase-table">
-        <tool-tip
+        <ToolTip
           v-if="selectedDetail === 'pitch'"
           tip-key="tweakableSliderByScroll"
           class="tip-tweakable-slider-by-scroll"
@@ -57,8 +57,8 @@
           ±0.01<br />
           <span v-if="isMac">Option</span><span v-else>Alt</span> + ホイール:
           一括調整
-        </tool-tip>
-        <accent-phrase
+        </ToolTip>
+        <AccentPhrase
           v-for="(accentPhrase, accentPhraseIndex) in accentPhrases"
           :key="accentPhraseIndex"
           ref="accentPhraseComponents"
diff --git a/src/components/Talk/AudioInfo.vue b/src/components/Talk/AudioInfo.vue
index 6c86affc74..15a958e453 100644
--- a/src/components/Talk/AudioInfo.vue
+++ b/src/components/Talk/AudioInfo.vue
@@ -3,49 +3,49 @@
     <div v-if="enablePreset" class="q-px-md">
       <div class="row items-center no-wrap q-mb-xs">
         <div class="text-body1">プリセット</div>
-        <q-btn dense flat icon="more_vert" :disable="uiLocked">
-          <q-menu transition-duration="100">
-            <q-list>
-              <q-item
+        <QBtn dense flat icon="more_vert" :disable="uiLocked">
+          <QMenu transition-duration="100">
+            <QList>
+              <QItem
                 v-close-popup
                 clickable
                 @click="registerPreset({ overwrite: false })"
               >
-                <q-item-section avatar>
-                  <q-avatar
+                <QItemSection avatar>
+                  <QAvatar
                     icon="add_circle_outline"
                     color="primary"
                     text-color="display-on-primary"
-                  ></q-avatar>
-                </q-item-section>
-                <q-item-section>
-                  <q-item-label>プリセット新規登録</q-item-label>
-                </q-item-section>
-              </q-item>
-              <q-item
+                  ></QAvatar>
+                </QItemSection>
+                <QItemSection>
+                  <QItemLabel>プリセット新規登録</QItemLabel>
+                </QItemSection>
+              </QItem>
+              <QItem
                 v-close-popup
                 clickable
                 @click="showsPresetEditDialog = true"
               >
-                <q-item-section avatar>
-                  <q-avatar
+                <QItemSection avatar>
+                  <QAvatar
                     icon="edit_note"
                     color="primary"
                     text-color="display-on-primary"
-                  ></q-avatar>
-                </q-item-section>
-                <q-item-section>
-                  <q-item-label>プリセット管理</q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-menu>
-        </q-btn>
+                  ></QAvatar>
+                </QItemSection>
+                <QItemSection>
+                  <QItemLabel>プリセット管理</QItemLabel>
+                </QItemSection>
+              </QItem>
+            </QList>
+          </QMenu>
+        </QBtn>
       </div>
 
       <div class="full-width row" @wheel="setPresetByScroll($event)">
         <!-- TODO: 同じプリセットを選択したときにも複数選択中の他のAudioItemのプリセットを変更するようにする -->
-        <q-select
+        <QSelect
           v-model="presetSelectModel"
           :options="selectablePresetList"
           class="col overflow-hidden"
@@ -63,15 +63,15 @@
             </div>
           </template>
           <template #no-option>
-            <q-item>
-              <q-item-section class="text-grey">
+            <QItem>
+              <QItemSection class="text-grey">
                 プリセットはありません
-              </q-item-section>
-            </q-item>
+              </QItemSection>
+            </QItem>
           </template>
-        </q-select>
+        </QSelect>
 
-        <q-btn
+        <QBtn
           v-show="!isRegisteredPreset || isChangedPreset"
           dense
           outline
@@ -83,18 +83,18 @@
         />
       </div>
       <!-- プリセット管理ダイアログ -->
-      <preset-manage-dialog v-model:open-dialog="showsPresetEditDialog" />
+      <PresetManageDialog v-model:open-dialog="showsPresetEditDialog" />
 
       <!-- プリセット登録ダイアログ -->
-      <q-dialog v-model="showsPresetNameDialog" @before-hide="closeAllDialog">
-        <q-card style="min-width: 350px">
-          <q-card-section>
+      <QDialog v-model="showsPresetNameDialog" @before-hide="closeAllDialog">
+        <QCard style="min-width: 350px">
+          <QCardSection>
             <div class="text-h6">プリセット登録</div>
-          </q-card-section>
+          </QCardSection>
 
-          <q-form @submit.prevent="checkRewritePreset">
-            <q-card-section class="q-pt-none">
-              <q-select
+          <QForm @submit.prevent="checkRewritePreset">
+            <QCardSection class="q-pt-none">
+              <QSelect
                 fill-input
                 autofocus
                 hide-selected
@@ -107,68 +107,65 @@
                 @input-value="setPresetName"
                 @filter="filterPresetOptionsList"
               />
-            </q-card-section>
+            </QCardSection>
 
-            <q-card-actions align="right">
-              <q-btn
+            <QCardActions align="right">
+              <QBtn
                 v-close-popup
                 flat
                 label="キャンセル"
                 @click="closeAllDialog"
               />
-              <q-btn flat type="submit" label="確定" />
-            </q-card-actions>
-          </q-form>
-        </q-card>
-      </q-dialog>
+              <QBtn flat type="submit" label="確定" />
+            </QCardActions>
+          </QForm>
+        </QCard>
+      </QDialog>
 
       <!-- プリセット再登録ダイアログ -->
-      <q-dialog
-        v-model="showsPresetRewriteDialog"
-        @before-hide="closeAllDialog"
-      >
-        <q-card>
-          <q-card-section>
+      <QDialog v-model="showsPresetRewriteDialog" @before-hide="closeAllDialog">
+        <QCard>
+          <QCardSection>
             <div class="text-h6">プリセットの再登録</div>
-          </q-card-section>
-          <q-card-section>
-            <q-list>
-              <q-item clickable class="no-margin" @click="updatePreset(true)">
-                <q-item-section avatar>
-                  <q-avatar icon="arrow_forward" text-color="blue" />
-                </q-item-section>
-                <q-item-section>
+          </QCardSection>
+          <QCardSection>
+            <QList>
+              <QItem clickable class="no-margin" @click="updatePreset(true)">
+                <QItemSection avatar>
+                  <QAvatar icon="arrow_forward" text-color="blue" />
+                </QItemSection>
+                <QItemSection>
                   プリセットを再登録し、このプリセットが設定されたテキスト欄全てに再適用する
-                </q-item-section>
-              </q-item>
-              <q-item clickable class="no-margin" @click="updatePreset(false)">
-                <q-item-section avatar>
-                  <q-avatar icon="arrow_forward" text-color="blue" />
-                </q-item-section>
-                <q-item-section> プリセットの再登録のみ行う </q-item-section>
-              </q-item>
-              <q-item
+                </QItemSection>
+              </QItem>
+              <QItem clickable class="no-margin" @click="updatePreset(false)">
+                <QItemSection avatar>
+                  <QAvatar icon="arrow_forward" text-color="blue" />
+                </QItemSection>
+                <QItemSection> プリセットの再登録のみ行う </QItemSection>
+              </QItem>
+              <QItem
                 v-close-popup
                 clickable
                 class="no-margin"
                 @click="closeAllDialog"
               >
-                <q-item-section avatar>
-                  <q-avatar icon="arrow_forward" text-color="blue" />
-                </q-item-section>
-                <q-item-section>キャンセル</q-item-section>
-              </q-item>
-            </q-list>
-          </q-card-section>
-        </q-card>
-      </q-dialog>
-
-      <q-separator class="q-mt-md" />
+                <QItemSection avatar>
+                  <QAvatar icon="arrow_forward" text-color="blue" />
+                </QItemSection>
+                <QItemSection>キャンセル</QItemSection>
+              </QItem>
+            </QList>
+          </QCardSection>
+        </QCard>
+      </QDialog>
+
+      <QSeparator class="q-mt-md" />
     </div>
 
     <div class="parameters q-px-md">
       <div v-for="parameter in parameters" :key="parameter.label">
-        <q-input
+        <QInput
           dense
           borderless
           maxlength="5"
@@ -188,8 +185,8 @@
               parameter.label
             }}</span></template
           >
-        </q-input>
-        <q-slider
+        </QInput>
+        <QSlider
           dense
           snap
           color="primary"
@@ -215,10 +212,10 @@
         disabled: uiLocked,
       }"
     >
-      <q-separator class="q-my-md" />
+      <QSeparator class="q-my-md" />
       <span class="text-body1 q-mb-xs">モーフィング</span>
       <div class="row no-wrap items-center">
-        <character-button
+        <CharacterButton
           v-model:selected-voice="morphingTargetVoice"
           class="q-my-xs"
           :character-infos="morphingTargetCharacters"
@@ -273,7 +270,7 @@
               : undefined
           }}</span
         >
-        <q-slider
+        <QSlider
           dense
           snap
           color="primary"
diff --git a/src/components/Talk/AudioParameter.vue b/src/components/Talk/AudioParameter.vue
index 59a455cd7e..d16d75ccd4 100644
--- a/src/components/Talk/AudioParameter.vue
+++ b/src/components/Talk/AudioParameter.vue
@@ -3,7 +3,7 @@
     @mouseenter="handleMouseHover(true)"
     @mouseleave="handleMouseHover(false)"
   >
-    <q-badge
+    <QBadge
       v-if="
         !disable && (valueLabel.visible || previewSlider.state.isPanning.value)
       "
@@ -16,8 +16,8 @@
           ? previewSlider.state.currentValue.value.toFixed(precisionComputed)
           : undefined
       }}
-    </q-badge>
-    <q-slider
+    </QBadge>
+    <QSlider
       vertical
       reverse
       snap
diff --git a/src/components/Talk/CharacterPortrait.vue b/src/components/Talk/CharacterPortrait.vue
index fcf913c560..01382a5eaf 100644
--- a/src/components/Talk/CharacterPortrait.vue
+++ b/src/components/Talk/CharacterPortrait.vue
@@ -6,7 +6,7 @@
     }}</span>
     <img :src="portraitPath" class="character-portrait" :alt="characterName" />
     <div v-if="isInitializingSpeaker" class="loading">
-      <q-spinner color="primary" size="5rem" :thickness="4" />
+      <QSpinner color="primary" size="5rem" :thickness="4" />
     </div>
   </div>
 </template>
diff --git a/src/components/Talk/MenuBar.vue b/src/components/Talk/MenuBar.vue
index 18b1bfd155..6ed4b5e2d0 100644
--- a/src/components/Talk/MenuBar.vue
+++ b/src/components/Talk/MenuBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <base-menu-bar editor="talk" :file-sub-menu-data="fileSubMenuData" />
+  <BaseMenuBar editor="talk" :file-sub-menu-data="fileSubMenuData" />
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Talk/TalkEditor.vue b/src/components/Talk/TalkEditor.vue
index 906f897ebb..5ae2c9f854 100644
--- a/src/components/Talk/TalkEditor.vue
+++ b/src/components/Talk/TalkEditor.vue
@@ -1,17 +1,17 @@
 <template>
-  <menu-bar />
+  <MenuBar />
 
-  <q-layout reveal elevated container class="layout-container">
-    <tool-bar />
+  <QLayout reveal elevated container class="layout-container">
+    <ToolBar />
 
-    <q-page-container>
-      <q-page class="main-row-panes">
-        <progress-view />
-        <engine-startup-overlay
+    <QPageContainer>
+      <QPage class="main-row-panes">
+        <ProgressView />
+        <EngineStartupOverlay
           :is-completed-initial-startup="isCompletedInitialStartup"
         />
 
-        <q-splitter
+        <QSplitter
           horizontal
           reverse
           unit="px"
@@ -25,7 +25,7 @@
           @update:model-value="updateAudioDetailPane"
         >
           <template #before>
-            <q-splitter
+            <QSplitter
               :limits="[MIN_PORTRAIT_PANE_WIDTH, MAX_PORTRAIT_PANE_WIDTH]"
               separator-class="home-splitter"
               :separator-style="{ width: shouldShowPanes ? '3px' : '0' }"
@@ -35,10 +35,10 @@
               @update:model-value="updatePortraitPane"
             >
               <template #before>
-                <character-portrait />
+                <CharacterPortrait />
               </template>
               <template #after>
-                <q-splitter
+                <QSplitter
                   reverse
                   unit="px"
                   :limits="[audioInfoPaneMinWidth, audioInfoPaneMaxWidth]"
@@ -62,7 +62,7 @@
                       "
                       @click="onAudioCellPaneClick"
                     >
-                      <draggable
+                      <Draggable
                         ref="cellsRef"
                         class="audio-cells"
                         :model-value="audioKeys"
@@ -73,19 +73,19 @@
                         @update:model-value="updateAudioKeys"
                       >
                         <template #item="{ element }">
-                          <audio-cell
+                          <AudioCell
                             :ref="addAudioCellRef"
                             class="draggable-cursor"
                             :audio-key="element"
                             @focus-cell="focusCell"
                           />
                         </template>
-                      </draggable>
+                      </Draggable>
                       <div
                         v-if="showAddAudioItemButton"
                         class="add-button-wrapper"
                       >
-                        <q-btn
+                        <QBtn
                           fab
                           icon="add"
                           color="primary"
@@ -93,56 +93,56 @@
                           :disable="uiLocked"
                           aria-label="テキストを追加"
                           @click="addAudioItem"
-                        ></q-btn>
+                        ></QBtn>
                       </div>
                     </div>
                   </template>
                   <template #after>
-                    <audio-info
+                    <AudioInfo
                       v-if="activeAudioKey != undefined"
                       :active-audio-key="activeAudioKey"
                     />
                   </template>
-                </q-splitter>
+                </QSplitter>
               </template>
-            </q-splitter>
+            </QSplitter>
           </template>
           <template #after>
-            <audio-detail
+            <AudioDetail
               v-if="activeAudioKey != undefined"
               :active-audio-key="activeAudioKey"
             />
           </template>
-        </q-splitter>
+        </QSplitter>
 
-        <q-resize-observer
+        <QResizeObserver
           ref="resizeObserverRef"
           @resize="({ height }) => changeAudioDetailPaneMaxHeight(height)"
         />
-      </q-page>
-    </q-page-container>
-  </q-layout>
-  <help-dialog v-model="isHelpDialogOpenComputed" />
-  <setting-dialog v-model="isSettingDialogOpenComputed" />
-  <hotkey-setting-dialog v-model="isHotkeySettingDialogOpenComputed" />
-  <tool-bar-custom-dialog v-model="isToolbarSettingDialogOpenComputed" />
-  <character-order-dialog
+      </QPage>
+    </QPageContainer>
+  </QLayout>
+  <HelpDialog v-model="isHelpDialogOpenComputed" />
+  <SettingDialog v-model="isSettingDialogOpenComputed" />
+  <HotkeySettingDialog v-model="isHotkeySettingDialogOpenComputed" />
+  <ToolBarCustomDialog v-model="isToolbarSettingDialogOpenComputed" />
+  <CharacterOrderDialog
     v-if="orderedAllCharacterInfos.length > 0"
     v-model="isCharacterOrderDialogOpenComputed"
     :character-infos="orderedAllCharacterInfos"
   />
-  <default-style-list-dialog
+  <DefaultStyleListDialog
     v-if="orderedTalkCharacterInfos.length > 0"
     v-model="isDefaultStyleSelectDialogOpenComputed"
     :character-infos="orderedTalkCharacterInfos"
   />
-  <dictionary-manage-dialog v-model="isDictionaryManageDialogOpenComputed" />
-  <engine-manage-dialog v-model="isEngineManageDialogOpenComputed" />
-  <accept-retrieve-telemetry-dialog
+  <DictionaryManageDialog v-model="isDictionaryManageDialogOpenComputed" />
+  <EngineManageDialog v-model="isEngineManageDialogOpenComputed" />
+  <AcceptRetrieveTelemetryDialog
     v-model="isAcceptRetrieveTelemetryDialogOpenComputed"
   />
-  <accept-terms-dialog v-model="isAcceptTermsDialogOpenComputed" />
-  <update-notification-dialog-container
+  <AcceptTermsDialog v-model="isAcceptTermsDialogOpenComputed" />
+  <UpdateNotificationDialogContainer
     :can-open-dialog="canOpenNotificationDialog"
   />
 </template>
@@ -183,6 +183,8 @@ import {
 import { filterCharacterInfosByStyleType } from "@/store/utility";
 import { useHotkeyManager } from "@/plugins/hotkeyPlugin";
 
+const Draggable = draggable;
+
 const props =
   defineProps<{
     projectFilePath?: string;
diff --git a/src/components/Talk/ToolBar.vue b/src/components/Talk/ToolBar.vue
index 42449f5e41..dc49db8cce 100644
--- a/src/components/Talk/ToolBar.vue
+++ b/src/components/Talk/ToolBar.vue
@@ -1,9 +1,9 @@
 <template>
-  <q-header class="q-py-sm">
-    <q-toolbar>
+  <QHeader class="q-py-sm">
+    <QToolbar>
       <template v-for="button in buttons" :key="button.text">
-        <q-space v-if="button.text === null" />
-        <q-btn
+        <QSpace v-if="button.text === null" />
+        <QBtn
           v-else
           unelevated
           color="toolbar-button"
@@ -11,11 +11,11 @@
           class="text-no-wrap text-bold q-mr-sm"
           :disable="button.disable.value"
           @click="button.click"
-          >{{ button.text }}</q-btn
+          >{{ button.text }}</QBtn
         >
       </template>
-    </q-toolbar>
-  </q-header>
+    </QToolbar>
+  </QHeader>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/ToolTip.vue b/src/components/ToolTip.vue
index af7e359abd..c57931b3ad 100644
--- a/src/components/ToolTip.vue
+++ b/src/components/ToolTip.vue
@@ -1,19 +1,19 @@
 <template>
   <div v-if="!tipConfirmed" style="z-index: 10">
-    <q-banner class="bg-surface text-display" dense rounded inline-actions>
+    <QBanner class="bg-surface text-display" dense rounded inline-actions>
       <template #avatar>
-        <q-icon name="info" color="primary" />
+        <QIcon name="info" color="primary" />
       </template>
       <slot></slot>
       <template #action>
-        <q-btn
+        <QBtn
           color="primary"
           text-color="display-on-primary"
           label="OK"
           @click="tipConfirmed = true"
         />
       </template>
-    </q-banner>
+    </QBanner>
   </div>
 </template>
 
diff --git a/tests/unit/utils.ts b/tests/unit/utils.ts
index b4f576bfca..3bc85e6dd9 100644
--- a/tests/unit/utils.ts
+++ b/tests/unit/utils.ts
@@ -6,11 +6,11 @@ import { Component } from "vue";
 export const wrapQPage = (page: Component) => {
   return {
     template: `
-      <q-layout>
-        <q-page-container>
+      <QLayout>
+        <QPageContainer>
           <page />
-        </q-page-container>
-      </q-layout>
+        </QPageContainer>
+      </QLayout>
     `,
     components: {
       page,
diff --git a/vite.config.ts b/vite.config.ts
index b9484003fc..99f010e221 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -75,7 +75,7 @@ export default defineConfig((options) => {
 
     plugins: [
       vue(),
-      quasar(),
+      quasar({ autoImportComponentCase: "pascal" }),
       nodePolyfills(),
       options.mode !== "test" &&
         checker({