[refactor] HotkeyCombinationブランド型を導入

src/components/Dialog/HotkeySettingDialog.vue

@@ -215,7 +215,11 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import { useStore } from "@/store";
-import { HotkeyActionNameType, HotkeySettingType } from "@/type/preload";
+import {
+  HotkeyActionNameType,
+  HotkeyCombo,
+  HotkeySettingType,
+} from "@/type/preload";
 import { useHotkeyManager, eventToCombination } from "@/plugins/hotkeyPlugin";
 
 const props =
@@ -265,7 +269,7 @@ const hotkeyColumns = ref<
 ]);
 
 const lastAction = ref("");
-const lastRecord = ref("");
+const lastRecord = ref(HotkeyCombo(""));
 
 const recordCombination = (event: KeyboardEvent) => {
   if (!isHotkeyDialogOpened.value) {
@@ -278,7 +282,7 @@ const recordCombination = (event: KeyboardEvent) => {
 };
 
 const { hotkeyManager } = useHotkeyManager();
-const changeHotkeySettings = (action: string, combo: string) => {
+const changeHotkeySettings = (action: string, combo: HotkeyCombo) => {
   hotkeyManager.replace({
     action: action as HotkeyActionNameType,
     combination: combo,
@@ -301,7 +305,7 @@ const duplicatedHotkey = computed(() => {
 
 // FIXME: actionはHotkeyAction型にすべき
 const deleteHotkey = (action: string) => {
-  changeHotkeySettings(action, "");
+  changeHotkeySettings(action, HotkeyCombo(""));
 };
 
 const getHotkeyText = (action: string, combo: string) => {
@@ -325,14 +329,14 @@ const checkHotkeyReadonly = (action: string) => {
 
 const openHotkeyDialog = (action: string) => {
   lastAction.value = action;
-  lastRecord.value = "";
+  lastRecord.value = HotkeyCombo("");
   isHotkeyDialogOpened.value = true;
   document.addEventListener("keydown", recordCombination);
 };
 
 const closeHotkeyDialog = () => {
   lastAction.value = "";
-  lastRecord.value = "";
+  lastRecord.value = HotkeyCombo("");
   isHotkeyDialogOpened.value = false;
   document.removeEventListener("keydown", recordCombination);
 };

src/plugins/hotkeyPlugin.ts

@@ -9,7 +9,11 @@
  */
 import { Plugin, inject, onMounted, onUnmounted } from "vue";
 import hotkeys from "hotkeys-js";
-import { HotkeyActionNameType, HotkeySettingType } from "@/type/preload";
+import {
+  HotkeyActionNameType,
+  HotkeyCombo,
+  HotkeySettingType,
+} from "@/type/preload";
 
 const hotkeyManagerKey = "hotkeyManager";
 export const useHotkeyManager = () => {
@@ -64,7 +68,7 @@ type Log = (message: string, ...args: unknown[]) => void;
 type RegisteredCombination = {
   editor: Editor;
   name: HotkeyActionNameType;
-  combination: string;
+  combination: HotkeyCombo;
 };
 
 interface HotkeyTarget {
@@ -121,7 +125,9 @@ export class HotkeyManager {
     return setting;
   }
 
-  private getRegisteredCombination(action: HotkeyAction): string | undefined {
+  private getRegisteredCombination(
+    action: HotkeyAction
+  ): HotkeyCombo | undefined {
     return this.registeredCombinations.find(isSameHotkeyTarget(action))
       ?.combination;
   }
@@ -263,7 +269,7 @@ export class HotkeyManager {
   }
 }
 
-const combinationToBindingKey = (combination: string) => {
+const combinationToBindingKey = (combination: HotkeyCombo) => {
   return combination.toLowerCase().replaceAll(" ", "+");
 };
 
@@ -275,7 +281,8 @@ export const hotkeyPlugin: Plugin = {
   },
 };
 
-export const eventToCombination = (event: KeyboardEvent): string => {
+/** キーボードイベントをショートカットキーの文字列に変換する */
+export const eventToCombination = (event: KeyboardEvent): HotkeyCombo => {
   let recordedCombination = "";
   if (event.ctrlKey) {
     recordedCombination += "Ctrl ";
@@ -300,5 +307,5 @@ export const eventToCombination = (event: KeyboardEvent): string => {
         event.key.length > 1 ? event.key : event.key.toUpperCase();
     }
   }
-  return recordedCombination;
+  return HotkeyCombo(recordedCombination);
 };

src/shared/ConfigManager.ts

@@ -9,6 +9,7 @@ import {
   defaultHotkeySettings,
   HotkeySettingType,
   ExperimentalSettingType,
+  HotkeyCombo,
 } from "@/type/preload";
 
 const lockKey = "save";
@@ -223,7 +224,7 @@ export abstract class BaseConfigManager {
   }
 
   private migrateHotkeySettings(data: ConfigType): ConfigType {
-    const COMBINATION_IS_NONE = "####";
+    const COMBINATION_IS_NONE = HotkeyCombo("####");
     const loadedHotkeys = structuredClone(data.hotkeySettings);
     const hotkeysWithoutNewCombination = defaultHotkeySettings.map(
       (defaultHotkey) => {
@@ -249,7 +250,7 @@ export abstract class BaseConfigManager {
         if (combinationExists) {
           const emptyHotkey: HotkeySettingType = {
             action: newHotkey.action,
-            combination: "",
+            combination: HotkeyCombo(""),
           };
           return emptyHotkey;
         } else {

src/type/preload.ts

@@ -31,6 +31,11 @@ const urlStringSchema = z.string().url().brand("URL");
 export type UrlString = z.infer<typeof urlStringSchema>;
 export const UrlString = (url: string): UrlString => urlStringSchema.parse(url);
 
+const hotkeyComboSchema = z.string().brand("HotkeyCombo");
+export type HotkeyCombo = z.infer<typeof hotkeyComboSchema>;
+export const HotkeyCombo = (hotkeyCombo: string): HotkeyCombo =>
+  hotkeyComboSchema.parse(hotkeyCombo);
+
 export const engineIdSchema = z.string().brand<"EngineId">();
 export type EngineId = z.infer<typeof engineIdSchema>;
 export const EngineId = (id: string): EngineId => engineIdSchema.parse(id);
@@ -60,91 +65,91 @@ export const VoiceId = (voice: Voice): VoiceId =>
 export const defaultHotkeySettings: HotkeySettingType[] = [
   {
     action: "音声書き出し",
-    combination: !isMac ? "Ctrl E" : "Meta E",
+    combination: HotkeyCombo(!isMac ? "Ctrl E" : "Meta E"),
   },
   {
     action: "選択音声を書き出し",
-    combination: "E",
+    combination: HotkeyCombo("E"),
   },
   {
     action: "音声を繋げて書き出し",
-    combination: "",
+    combination: HotkeyCombo(""),
   },
   {
     action: "再生/停止",
-    combination: "Space",
+    combination: HotkeyCombo("Space"),
   },
   {
     action: "連続再生/停止",
-    combination: "Shift Space",
+    combination: HotkeyCombo("Shift Space"),
   },
   {
     action: "ｱｸｾﾝﾄ欄を表示",
-    combination: "1",
+    combination: HotkeyCombo("1"),
   },
   {
     action: "ｲﾝﾄﾈｰｼｮﾝ欄を表示",
-    combination: "2",
+    combination: HotkeyCombo("2"),
   },
   {
     action: "長さ欄を表示",
-    combination: "3",
+    combination: HotkeyCombo("3"),
   },
   {
     action: "テキスト欄を追加",
-    combination: "Shift Enter",
+    combination: HotkeyCombo("Shift Enter"),
   },
   {
     action: "テキスト欄を複製",
-    combination: !isMac ? "Ctrl D" : "Meta D",
+    combination: HotkeyCombo(!isMac ? "Ctrl D" : "Meta D"),
   },
   {
     action: "テキスト欄を削除",
-    combination: "Shift Delete",
+    combination: HotkeyCombo("Shift Delete"),
   },
   {
     action: "テキスト欄からフォーカスを外す",
-    combination: "Escape",
+    combination: HotkeyCombo("Escape"),
   },
   {
     action: "テキスト欄にフォーカスを戻す",
-    combination: "Enter",
+    combination: HotkeyCombo("Enter"),
   },
   {
     action: "元に戻す",
-    combination: !isMac ? "Ctrl Z" : "Meta Z",
+    combination: HotkeyCombo(!isMac ? "Ctrl Z" : "Meta Z"),
   },
   {
     action: "やり直す",
-    combination: !isMac ? "Ctrl Y" : "Shift Meta Z",
+    combination: HotkeyCombo(!isMac ? "Ctrl Y" : "Shift Meta Z"),
   },
   {
     action: "新規プロジェクト",
-    combination: !isMac ? "Ctrl N" : "Meta N",
+    combination: HotkeyCombo(!isMac ? "Ctrl N" : "Meta N"),
   },
   {
     action: "プロジェクトを名前を付けて保存",
-    combination: !isMac ? "Ctrl Shift S" : "Shift Meta S",
+    combination: HotkeyCombo(!isMac ? "Ctrl Shift S" : "Shift Meta S"),
   },
   {
     action: "プロジェクトを上書き保存",
-    combination: !isMac ? "Ctrl S" : "Meta S",
+    combination: HotkeyCombo(!isMac ? "Ctrl S" : "Meta S"),
   },
   {
     action: "プロジェクト読み込み",
-    combination: !isMac ? "Ctrl O" : "Meta O",
+    combination: HotkeyCombo(!isMac ? "Ctrl O" : "Meta O"),
   },
   {
     action: "テキスト読み込む",
-    combination: "",
+    combination: HotkeyCombo(""),
   },
   {
     action: "全体のイントネーションをリセット",
-    combination: !isMac ? "Ctrl G" : "Meta G",
+    combination: HotkeyCombo(!isMac ? "Ctrl G" : "Meta G"),
   },
   {
     action: "選択中のアクセント句のイントネーションをリセット",
-    combination: "R",
+    combination: HotkeyCombo("R"),
   },
 ];
 
@@ -430,11 +435,9 @@ export const hotkeyActionNameSchema = z.enum([
 
 export type HotkeyActionNameType = z.infer<typeof hotkeyActionNameSchema>;
 
-export type HotkeyCombo = string;
-
 export const hotkeySettingSchema = z.object({
   action: hotkeyActionNameSchema,
-  combination: z.string(),
+  combination: hotkeyComboSchema,
 });
 export type HotkeySettingType = z.infer<typeof hotkeySettingSchema>;
 

tests/unit/lib/hotkeyManager.spec.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach } from "vitest";
 import { HotkeyManager, HotkeysJs, HotkeyAction } from "@/plugins/hotkeyPlugin";
-import { HotkeySettingType } from "@/type/preload";
+import { HotkeyCombo, HotkeySettingType } from "@/type/preload";
 
 type DummyHotkeysJs = HotkeysJs & {
   registeredHotkeys: {
@@ -70,7 +70,7 @@ it("unregisterできる", () => {
   hotkeyManager.load([
     {
       action: "音声書き出し",
-      combination: "1",
+      combination: HotkeyCombo("1"),
     },
   ]);
   hotkeyManager.register(action);
@@ -91,7 +91,7 @@ const dummyAction: HotkeyAction = {
 };
 const createDummySetting = (combination: string): HotkeySettingType => ({
   action: "音声書き出し",
-  combination,
+  combination: HotkeyCombo(combination),
 });
 
 describe("設定変更", () => {