適切にメモ化する

VOICEVOX · Oct 6, 2023 · 97048c8 · 97048c8
1 parent f3025fe
commit 97048c8
Show file tree

Hide file tree

Showing 3 changed files with 315 additions and 305 deletions.
diff --git a/src/components/audioSample.tsx b/src/components/audioSample.tsx
@@ -2,64 +2,66 @@ import React, { useMemo } from "react"
 import PlayButton from "./playButton"
 import StyleDropdown, { useStyleDropdownController } from "./styleDropdown"
 
-const AudioSample = ({
-  audioSamples,
-  characterName,
-  className,
-}: {
-  audioSamples: { style: string; urls: readonly string[] }[]
-  characterName: string
-} & React.HTMLAttributes<HTMLDivElement>) => {
-  const styles = useMemo(
-    () => audioSamples.map(value => value.style),
-    [audioSamples]
-  )
-  const { selectedStyle, setSelectedStyle } = useStyleDropdownController({
-    styles,
-  })
-  const selectedAudioUrls = useMemo(
-    () => audioSamples.find(({ style }) => style == selectedStyle)!.urls,
-    [audioSamples, selectedStyle]
-  )
+const AudioSample = React.memo(
+  ({
+    audioSamples,
+    characterName,
+    className,
+  }: {
+    audioSamples: { style: string; urls: readonly string[] }[]
+    characterName: string
+  } & React.HTMLAttributes<HTMLDivElement>) => {
+    const styles = useMemo(
+      () => audioSamples.map(value => value.style),
+      [audioSamples]
+    )
+    const { selectedStyle, setSelectedStyle } = useStyleDropdownController({
+      styles,
+    })
+    const selectedAudioUrls = useMemo(
+      () => audioSamples.find(({ style }) => style == selectedStyle)!.urls,
+      [audioSamples, selectedStyle]
+    )
 
-  return (
-    <div className={"audio-sample " + className}>
-      <hr className="my-3" />
-      <div className="audio-sample-pair">
-        <div className="audio-sample-label">
-          <span>音声サンプル</span>
-        </div>
-        <div className="audio-sample-content">
-          {selectedAudioUrls.map((url, index) => (
-            <PlayButton
-              key={index}
-              url={url}
-              name={`${characterName}の${selectedStyle}スタイルのサンプルボイス${
-                index + 1
-              }`}
-              className="is-small"
-            />
-          ))}
-        </div>
-      </div>
-      {styles.length > 1 && (
+    return (
+      <div className={"audio-sample " + className}>
+        <hr className="my-3" />
         <div className="audio-sample-pair">
           <div className="audio-sample-label">
-            <span>スタイル</span>
+            <span>音声サンプル</span>
           </div>
           <div className="audio-sample-content">
-            <StyleDropdown
-              styles={styles}
-              selectedStyle={selectedStyle}
-              setSelectedStyle={setSelectedStyle}
-              characterName={characterName}
-            />
+            {selectedAudioUrls.map((url, index) => (
+              <PlayButton
+                key={index}
+                url={url}
+                name={`${characterName}の${selectedStyle}スタイルのサンプルボイス${
+                  index + 1
+                }`}
+                className="is-small"
+              />
+            ))}
           </div>
         </div>
-      )}
-      <hr className="my-3" />
-    </div>
-  )
-}
+        {styles.length > 1 && (
+          <div className="audio-sample-pair">
+            <div className="audio-sample-label">
+              <span>スタイル</span>
+            </div>
+            <div className="audio-sample-content">
+              <StyleDropdown
+                styles={styles}
+                selectedStyle={selectedStyle}
+                setSelectedStyle={setSelectedStyle}
+                characterName={characterName}
+              />
+            </div>
+          </div>
+        )}
+        <hr className="my-3" />
+      </div>
+    )
+  }
+)
 
 export default AudioSample
diff --git a/src/hooks/useDetailedCharacterInfo.ts b/src/hooks/useDetailedCharacterInfo.ts
@@ -1,9 +1,6 @@
 import { graphql, useStaticQuery } from "gatsby"
-import {
-  CharacterInfo,
-  CharacterKey,
-  Generation,
-} from "../types/dormitoryCharacter"
+import { useMemo } from "react"
+import { CharacterInfo, CharacterKey } from "../types/dormitoryCharacter"
 import { useCharacterInfo } from "./useCharacterInfo"
 
 export const useDetailedCharacterInfo = () => {
@@ -251,7 +248,9 @@ export const useDetailedCharacterInfo = () => {
     return item
   }
 
-  const characterInfos: {
+  // キャラクターの詳細情報
+  // ネストを浅くするために一旦変数に格納
+  const _characterInfos: {
     [key in CharacterKey]: CharacterInfo
   } = {
     四国めたん: {
@@ -917,28 +916,16 @@ export const useDetailedCharacterInfo = () => {
     },
   } as const
 
-  const generationInfos: {
-    [key in Generation]: { characterKeys: readonly CharacterKey[] }
-  } = {
-    一期生: { characterKeys: ["四国めたん", "ずんだもん"] },
-    二期生: {
-      characterKeys: ["春日部つむぎ", "雨晴はう", "波音リツ"],
-    },
-    三期生: {
-      characterKeys: [
-        "玄野武宏",
-        "白上虎太郎",
-        "青山龍星",
-        "冥鳴ひまり",
-        "九州そら",
-      ],
-    },
-  } as const
+  const characterInfos = useMemo(() => _characterInfos, [])
+  const callNameInfos = useMemo(() => _callNameInfos, [])
 
-  return { characterInfos, callNameInfos, generationInfos } as const
+  return {
+    characterInfos,
+    callNameInfos,
+  } as const
 }
 
-const callNameInfos: {
+const _callNameInfos: {
   [key in CharacterKey]: {
     [key in CharacterKey]?: string | undefined
   } & { me: readonly string[]; you: readonly string[] }