diff --git a/src/components/Dialog/HotkeySettingDialog.vue b/src/components/Dialog/HotkeySettingDialog.vue
index f7243f3daf..fe50a3759a 100644
--- a/src/components/Dialog/HotkeySettingDialog.vue
+++ b/src/components/Dialog/HotkeySettingDialog.vue
@@ -118,94 +118,20 @@
     </QLayout>
   </QDialog>
 
-  <QDialog
-    noEscDismiss
-    noShake
-    transitionShow="none"
-    transitionHide="none"
-    :modelValue="isHotkeyDialogOpened"
+  <SetHotkeyDialog
+    :isHotkeyDialogOpened
+    :lastAction
+    :lastRecord
+    :duplicatedHotkey
     @update:modelValue="closeHotkeyDialog"
-  >
-    <QCard class="q-py-sm q-px-md">
-      <QCardSection align="center">
-        <div class="text-h6">ショートカットキーを入力してください</div>
-      </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 対応のみを考慮している
-          -->
-          <QChip :ripple="false" color="surface">
-            {{ hotkey === "Meta" ? "Cmd" : hotkey }}
-          </QChip>
-        </template>
-        <span v-if="lastRecord !== '' && confirmBtnEnabled"> +</span>
-        <div v-if="duplicatedHotkey != undefined" class="text-warning q-mt-lg">
-          <div class="text-warning">
-            ショートカットキーが次の操作と重複しています
-          </div>
-          <div class="q-mt-sm text-weight-bold text-warning">
-            「{{ duplicatedHotkey.action }}」
-          </div>
-        </div>
-      </QCardSection>
-      <QCardActions align="center">
-        <QBtn
-          padding="xs md"
-          label="キャンセル"
-          unelevated
-          color="surface"
-          textColor="display"
-          class="q-mt-sm"
-          @click="closeHotkeyDialog"
-        />
-        <QBtn
-          padding="xs md"
-          label="ショートカットキーを未設定にする"
-          unelevated
-          color="surface"
-          textColor="display"
-          class="q-mt-sm"
-          @click="
-            deleteHotkey(lastAction);
-            closeHotkeyDialog();
-          "
-        />
-        <QBtn
-          v-if="duplicatedHotkey == undefined"
-          padding="xs md"
-          label="OK"
-          unelevated
-          color="primary"
-          textColor="display-on-primary"
-          class="q-mt-sm"
-          :disabled="confirmBtnEnabled"
-          @click="
-            changeHotkeySettings(lastAction, lastRecord).then(() =>
-              closeHotkeyDialog(),
-            )
-          "
-        />
-        <QBtn
-          v-else
-          padding="xs md"
-          label="上書きする"
-          unelevated
-          color="primary"
-          textColor="display-on-primary"
-          class="q-mt-sm"
-          :disabled="confirmBtnEnabled"
-          @click="solveDuplicated().then(() => closeHotkeyDialog())"
-        />
-      </QCardActions>
-    </QCard>
-  </QDialog>
+    @deleteHotkey="deleteHotkey"
+    @changeHotkeySettings="changeHotkeySettings"
+  />
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from "vue";
+import SetHotkeyDialog from "./SetHotkeyDialog.vue";
 import { useStore } from "@/store";
 import {
   HotkeyActionNameType,
@@ -327,29 +253,10 @@ const openHotkeyDialog = (action: string) => {
   document.addEventListener("keydown", recordCombination);
 };
 
-const closeHotkeyDialog = () => {
-  lastAction.value = "";
-  lastRecord.value = HotkeyCombination("");
-  isHotkeyDialogOpened.value = false;
-  document.removeEventListener("keydown", recordCombination);
+const closeHotkeyDialog = (value: boolean) => {
+  isHotkeyDialogOpened.value = value;
 };
 
-const solveDuplicated = () => {
-  if (duplicatedHotkey.value == undefined)
-    throw new Error("duplicatedHotkey.value == undefined");
-  deleteHotkey(duplicatedHotkey.value.action);
-  return changeHotkeySettings(lastAction.value, lastRecord.value);
-};
-
-const confirmBtnEnabled = computed(() => {
-  return (
-    lastRecord.value == "" ||
-    ["Ctrl", "Shift", "Alt", "Meta"].includes(
-      lastRecord.value.split(" ")[lastRecord.value.split(" ").length - 1],
-    )
-  );
-});
-
 const resetHotkey = async (action: string) => {
   const result = await store.dispatch("SHOW_CONFIRM_DIALOG", {
     title: "ショートカットキーを初期値に戻します",
diff --git a/src/components/Dialog/SetHotkeyDialog.vue b/src/components/Dialog/SetHotkeyDialog.vue
new file mode 100644
index 0000000000..3ddb7a9181
--- /dev/null
+++ b/src/components/Dialog/SetHotkeyDialog.vue
@@ -0,0 +1,129 @@
+<template>
+  <QDialog
+    noEscDismiss
+    noShake
+    transitionShow="none"
+    transitionHide="none"
+    :modelValue="isHotkeyDialogOpened"
+    @update:modelValue="closeHotkeyDialog"
+  >
+    <QCard class="q-py-sm q-px-md">
+      <QCardSection align="center">
+        <div class="text-h6">ショートカットキーを入力してください</div>
+      </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 対応のみを考慮している
+          -->
+          <QChip :ripple="false" color="surface">
+            {{ hotkey === "Meta" ? "Cmd" : hotkey }}
+          </QChip>
+        </template>
+        <span v-if="lastRecord !== '' && confirmBtnEnabled"> +</span>
+        <div v-if="duplicatedHotkey != undefined" class="text-warning q-mt-lg">
+          <div class="text-warning">
+            ショートカットキーが次の操作と重複しています
+          </div>
+          <div class="q-mt-sm text-weight-bold text-warning">
+            「{{ duplicatedHotkey.action }}」
+          </div>
+        </div>
+      </QCardSection>
+      <QCardActions align="center">
+        <QBtn
+          padding="xs md"
+          label="キャンセル"
+          unelevated
+          color="surface"
+          textColor="display"
+          class="q-mt-sm"
+          @click="closeHotkeyDialog"
+        />
+        <QBtn
+          padding="xs md"
+          label="ショートカットキーを未設定にする"
+          unelevated
+          color="surface"
+          textColor="display"
+          class="q-mt-sm"
+          @click="
+            emit('deleteHotkey', props.lastAction);
+            closeHotkeyDialog();
+          "
+        />
+        <QBtn
+          v-if="duplicatedHotkey == undefined"
+          padding="xs md"
+          label="OK"
+          unelevated
+          color="primary"
+          textColor="display-on-primary"
+          class="q-mt-sm"
+          :disabled="confirmBtnEnabled"
+          @click="confirmHotkey"
+        />
+        <QBtn
+          v-else
+          padding="xs md"
+          label="上書きする"
+          unelevated
+          color="primary"
+          textColor="display-on-primary"
+          class="q-mt-sm"
+          :disabled="confirmBtnEnabled"
+          @click="overwriteHotkey"
+        />
+      </QCardActions>
+    </QCard>
+  </QDialog>
+</template>
+
+<script setup lang="ts">
+import { computed, defineProps, defineEmits } from "vue";
+import { HotkeyCombination } from "@/type/preload";
+
+const props = defineProps<{
+  isHotkeyDialogOpened: boolean;
+  lastAction: string;
+  lastRecord: HotkeyCombination;
+  duplicatedHotkey?: { action: string };
+}>();
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: boolean): void;
+  (e: "deleteHotkey", action: string): void;
+  (
+    e: "changeHotkeySettings",
+    action: string,
+    combination: HotkeyCombination,
+  ): void;
+}>();
+
+const confirmBtnEnabled = computed(() => {
+  return (
+    props.lastRecord == "" ||
+    ["Ctrl", "Shift", "Alt", "Meta"].includes(
+      props.lastRecord.split(" ")[props.lastRecord.split(" ").length - 1],
+    )
+  );
+});
+
+const closeHotkeyDialog = () => {
+  emit("update:modelValue", false);
+};
+
+const confirmHotkey = () => {
+  emit("changeHotkeySettings", props.lastAction, props.lastRecord);
+  closeHotkeyDialog();
+};
+
+const overwriteHotkey = () => {
+  if (props.duplicatedHotkey) {
+    emit("deleteHotkey", props.duplicatedHotkey.action);
+    confirmHotkey();
+  }
+};
+</script>