WIP: 読み方＆アクセント辞書ダイアログの右側パネルを別コンポーネントにする

[jdkfx]

内容

• 辞書の単語・読み、アクセントなどの追加・編集を行う部分を新しいコンポーネントに移動

関連 Issue

close #2234

スクリーンショット・動画など

その他

関連： #2237

[Hiroshiba]

リファクタリング本当にありがたいです！！！
分からないとこあったら何でもお聞きいただけると･･･！ 🙏

[jdkfx]

まだ作業中段階ではありますが、新規に編集部分のコンポーネントを作成しました。
元からあったコンポーネントと、新規に作成したコンポーネントの双方で同じ処理を行っている部分に関しては新たなコンポーザブルとして切り分けました。

ただ、今のところこの状態で動かすとUIなどの表示部分が動いていない模様で、その原因の追求と改善を行っていきたいと考えております。

[jdkfx]

dictionaryManageDialogOpenedComputedをコンポーザブルに渡してあげているのですが、そのせいか辞書ダイアログを読み込んだ際にエンジンの読み込みが終わらないという挙動が起きており、その原因がわかりません。
dictionaryManageDialogOpenedComputedを定義は以下のようになっています。

const dictionaryManageDialogOpenedComputed: WritableComputedRef<boolean>

この変数をコンポーザブルに渡す際、

型 'WritableComputedRef<boolean>' の引数を型 '() => number' のパラメーターに割り当てることはできません。
型 'WritableComputedRef<boolean>' にはシグネチャ '(): number' に一致するものがありません。

というエラーが出ておりました。
computed()の型付けなども考えてみましたが、うまくいきませんでした。
https://ja.vuejs.org/guide/typescript/composition-api#typing-computed

[Hiroshiba]

エンジンの読み込みが終わらないという挙動が起きており、その原因がわかりません。

読み込み中かどうかの判定にはloadingDictStateを使ってますが、これをコンポーザブルに渡してないから値が変わらないためですね！！

今回の場合はコンポーザブルにするかどうかはどちらでも良いはずで、先にコンポーネントを切り出してあげた方がやりやすいかもです。
その後にコンポーザブルを使ってリファクタリングを行うかどうか、となるかも･･･！

参考になれば！！

[jdkfx]

• modelValueにbooleanの値が入るべきなのだが、辞書単語の読みの値（String）が入ってしまっている。
• それ以外にも、型の不一致エラーによってエディターコンポーネントが開かないという意図せぬ挙動が起きてしまっている。
• シングルコメントを残したのだが、uiLockedに関係しているのではないかと考えている。

現状出ているエラーについて

23:24:25 [vite] hmr update /components/Dialog/DictionaryManageDialog.vue

 ERROR(vue-tsc)  Property 'computeRegisteredAccent' does not exist on type '{ wordPriority: Ref<number, number>; userDict: Ref<Record<string, UserDictWord>, Record<string, UserDictWord>>; voiceComputed: ComputedRef<...>; ... 8 more ...; toWordEditingState: () => void; }'.
 FILE  /Users/jdkfx/Desktop/workspace/voicevox/src/components/Dialog/DictionaryEditWordDialog.vue:351:3

    349 |   setYomi,
    350 |   createUILockAction,
  > 351 |   computeRegisteredAccent,
        |   ^^^^^^^^^^^^^^^^^^^^^^^
    352 |   loadingDictProcess,
    353 |   discardOrNotDialog,
    354 |   cancel,

 ERROR(vue-tsc)  Argument of type 'Ref<string, string>' is not assignable to parameter of type 'Ref<"loading" | "synchronizing" | null, "loading" | "synchronizing" | null>'.
  Type 'string' is not assignable to type '"loading" | "synchronizing" | null'.
 FILE  /Users/jdkfx/Desktop/workspace/voicevox/src/components/Dialog/DictionaryEditWordDialog.vue:362:3

    360 |   surface,
    361 |   uiLocked,
  > 362 |   yomi,
        |   ^^^^
    363 |   accentPhrase,
    364 |   surfaceInput,
    365 | );

 ERROR(vue-tsc)  Argument of type 'WritableComputedRef<boolean, boolean>' is not assignable to parameter of type 'Ref<string, string>'.
  Types of property 'value' are incompatible.
    Type 'boolean' is not assignable to type 'string'.
 FILE  /Users/jdkfx/Desktop/workspace/voicevox/src/components/Dialog/DictionaryManageDialog.vue:226:3

    224 |   uiLocked,
    225 |   loadingDictState,
  > 226 |   dictionaryManageDialogOpenedComputed,
        |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    227 | );
    228 | </script>
    229 |

[vue-tsc] Found 3 errors. Watching for file changes.
[ESLint] Found 0 error and 0 warning

[Hiroshiba]

ちょっと見てみてました！　これかなり難しいですね！！！

たぶんなのですが、コンポーザブルなしでリファクタリングを考えるほうがずっと単純になりそうな予感がしました。
コンポーザブルは「別々のコンポーネントで別々のインスタンスなどを作る」ためのものですが（再利用性が高い）、今欲しいのは「別々のコンポーネントで同じインスタンスを作る」（共有）なので、目的と少しずれてるかもです。

ちなみに共有する場合はContextをInject/Provideすると良い感じになることがあります。
https://ja.vuejs.org/guide/components/provide-inject
とりあえず一旦これはやらないで、一旦変数や関数をひたすら子コンポーネントに渡すのが良い気がします。

---

とりあえずの方針として、まずUI系だけをコンポーネントから切り出し、saveとかの操作用の関数は全部親から子に渡すのはどうでしょうか？ 👀
ぱっと仕分けしてるので間違ってるかもですが、雰囲気こんな感じかなと

• 子コンポーネント側
  • HTML構造全部
  • 音声再生機構
    • nowGenerating, nowPlaying, play, stopとか
  • メニュー系
    • surfaceInput, yomiInputとか
  • アクセント系
    • changeAccent
• 親コンポーネント側
  • uiLock、createUILockAction
  • wordEditing
  • 状態変数とそのsetter
    • surfaceとかsetSurfaceとか
    • accentTypeの状態変数がなぜか無いので作ると良さそう
  • 関数いろいろ
    • saveWord, deleteWord, resetWordとか
    • あとステートの移動用の関数とか
    • 子コンポーネントに移動できるのもありそうだけど、不明

[jdkfx]

@Hiroshiba

ちなみに共有する場合はContextをInject/Provideすると良い感じになることがあります。

初めて知りました！inject/provide見てみます！

とりあえずの方針として、まずUI系だけをコンポーネントから切り出し、saveとかの操作用の関数は全部親から子に渡すのはどうでしょうか？ 👀

少し前のコミットの戻して対応してみます！

[Hiroshiba]

参考になれば…！
コードをがっつり読んでみてわかったのですが、これは切り分けかなり難しいなと感じました。。
不明な点あれば結構気軽に聞いていただければ！！🙏

[jdkfx]

ぱっと仕分けしてるので間違ってるかもですが、雰囲気こんな感じかなと

ここで仕分けられている関数などは、仕分けられている親・子に移動or実装と言う形であっていますでしょうか？

[Hiroshiba]

あ、そのニュアンスで書いていました！
親は現DictionaryManageDialog.vue、子はDictionaryEditWordDialog.vueみたいな想定です！
（ちなみに全然間違ってるところもあると思います、間違ってたらすみません。。 🙇 ）