JSON.parse(JSON.stringify())の代わりにstructuredClone(toRaw())を使う

src/components/DefaultStyleSelectDialog.vue

@@ -117,16 +117,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from "vue";
+import { computed, ref, toRaw, watch } from "vue";
 import { useStore } from "@/store";
 import { DEFAULT_STYLE_NAME } from "@/store/utility";
-import {
-  CharacterInfo,
-  DefaultStyleId,
-  SpeakerId,
-  StyleId,
-  StyleInfo,
-} from "@/type/preload";
+import { CharacterInfo, SpeakerId, StyleId, StyleInfo } from "@/type/preload";
 
 const props =
   defineProps<{
@@ -211,9 +205,7 @@ const stop = () => {
 
 // 既に設定が存在する場合があるので、新しい設定と既存設定を合成させる
 const closeDialog = () => {
-  const defaultStyleIds = JSON.parse(
-    JSON.stringify(store.state.defaultStyleIds)
-  ) as DefaultStyleId[];
+  const defaultStyleIds = structuredClone(toRaw(store.state.defaultStyleIds));
   store.dispatch("SET_DEFAULT_STYLE_IDS", [
     ...defaultStyleIds.filter(
       (defaultStyleId) =>

src/store/audio.ts

@@ -1,6 +1,7 @@
 import path from "path";
 import { v4 as uuidv4 } from "uuid";
 import Encoding from "encoding-japanese";
+import { toRaw } from "vue";
 import { createUILockAction, withProgress } from "./ui";
 import {
   AudioItem,
@@ -57,7 +58,7 @@ async function generateUniqueIdAndQuery(
   state: State,
   audioItem: AudioItem
 ): Promise<[string, EditorAudioQuery | undefined]> {
-  audioItem = JSON.parse(JSON.stringify(audioItem)) as AudioItem;
+  audioItem = structuredClone(toRaw(audioItem));
   const audioQuery = audioItem.query;
   if (audioQuery != undefined) {
     audioQuery.outputSamplingRate =
@@ -1275,9 +1276,7 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
 
   GENERATE_AUDIO: {
     async action({ dispatch, state }, { audioKey }: { audioKey: AudioKey }) {
-      const audioItem: AudioItem = JSON.parse(
-        JSON.stringify(state.audioItems[audioKey])
-      );
+      const audioItem = structuredClone(toRaw(state.audioItems[audioKey]));
       return dispatch("GENERATE_AUDIO_FROM_AUDIO_ITEM", { audioItem });
     },
   },
@@ -2182,9 +2181,7 @@ export const audioCommandStore = transformCommandStore(
       ) {
         const query = state.audioItems[audioKey].query;
         if (query != undefined) {
-          const newAccentPhrases: AccentPhrase[] = JSON.parse(
-            JSON.stringify(query.accentPhrases)
-          );
+          const newAccentPhrases = structuredClone(toRaw(query.accentPhrases));
           newAccentPhrases[accentPhraseIndex].accent = accent;
 
           try {
@@ -2244,9 +2241,7 @@ export const audioCommandStore = transformCommandStore(
             "`COMMAND_CHANGE_ACCENT_PHRASE_SPLIT` should not be called if the query does not exist."
           );
         }
-        const newAccentPhrases: AccentPhrase[] = JSON.parse(
-          JSON.stringify(query.accentPhrases)
-        );
+        const newAccentPhrases = structuredClone(toRaw(query.accentPhrases));
         const changeIndexes = [accentPhraseIndex];
         // toggleAccentPhrase to newAccentPhrases and record changeIndexes
         {

src/store/preset.ts

@@ -1,4 +1,5 @@
 import { v4 as uuidv4 } from "uuid";
+import { toRaw } from "vue";
 import { createPartialStore } from "./vuex";
 import { PresetStoreState, PresetStoreTypes, State } from "@/store/type";
 import { Preset, PresetKey, Voice, VoiceId } from "@/type/preload";
@@ -168,8 +169,8 @@ export const presetStore = createPartialStore<PresetStoreTypes>({
       }: { presetItems: Record<PresetKey, Preset>; presetKeys: PresetKey[] }
     ) {
       const result = await window.electron.setSetting("presets", {
-        items: JSON.parse(JSON.stringify(presetItems)),
-        keys: JSON.parse(JSON.stringify(presetKeys)),
+        items: structuredClone(toRaw(presetItems)),
+        keys: structuredClone(toRaw(presetKeys)),
       });
       context.commit("SET_PRESET_ITEMS", {
         // z.BRAND型のRecordはPartialになる仕様なのでasで型を変換

src/store/utility.ts

@@ -1,6 +1,7 @@
 import path from "path";
 import { Platform } from "quasar";
 import { diffArrays } from "diff";
+import { toRaw } from "vue";
 import { ToolbarButtonTagType, isMac } from "@/type/preload";
 import { AccentPhrase, Mora } from "@/openapi";
 
@@ -221,8 +222,8 @@ export class TuningTranscription {
   beforeAccent: AccentPhrase[];
   afterAccent: AccentPhrase[];
   constructor(beforeAccent: AccentPhrase[], afterAccent: AccentPhrase[]) {
-    this.beforeAccent = JSON.parse(JSON.stringify(beforeAccent));
-    this.afterAccent = JSON.parse(JSON.stringify(afterAccent));
+    this.beforeAccent = structuredClone(toRaw(beforeAccent));
+    this.afterAccent = structuredClone(toRaw(afterAccent));
   }
 
   private createFlatArray<T, K extends keyof T>(