ホットキー設定ダイアログのコンポーネントにホットキー設定に関連する処理を移動する

[jdkfx]

内容

• キー割り当て画面からホットキー設定ダイアログを抜き出してコンポーネント化する #2209

上記のPRにおいて、キー割り当て画面からホットキー設定ダイアログを新たなコンポーネント（src/components/Dialog/HotkeyRecordingDialog.vue）に切り出すことができました。
しかし、現状切り出したのは表示部分に関するものが大半となっており、「ショートカットキー入力を受け付ける」などの処理は親コンポーネント（src/components/Dialog/HotkeySettingDialog.vue）で行っています。

入力に関する処理も新しく切り分けたコンポーネントに移し替えたいと考えており、コンポーネントごとに役割を以下のようにしたいです。

• src/components/Dialog/HotkeySettingDialog.vue: ホットキーの表示、検索などの表示に関わる部分
• src/components/Dialog/HotkeyRecordingDialog.vue: ホットキーの編集、入力、未設定にするなど入力に関わる部分

Pros 良くなる点

• コンポーネントの役割が明確になる

Cons 悪くなる点

実現方法

• recordCombination、changeHotkeySettingsなど入力に関する処理を移動する

https://github.com/VOICEVOX/voicevox/blob/8cd4ac2de2766661254c906e99625f77b0d3c749/src/components/Dialog/HotkeySettingDialog.vue#L190C1-L217C3

VOICEVOXのバージョン

0.20.0

OSの種類/ディストリ/バージョン

• Windows
• macOS
• Linux

その他

[Hiroshiba]

issue作成ありがとうございます！！
ぜひぜひ挑戦していただければ！！！

プルリクエストの方でもお伝えしたのですが、ここは処理が入り組んでいるので結構判断が難しい場面もあるかもしれません。
他にもVueのことや、あとVuexのことも少し絡んでくるかもしれず、難しいところもあると思います。
なので困ったらいつでもお呼びいただければと･･･！

[jdkfx]

こちらについて、recordCombinationや、changeHotkeySettingsなど、HotkeyRecordingDialogでもHotkeySettingDialogでも使用されているようなコードは、コンポーザブルとして処理を実装し、再利用可能にしてあげたいと考えています。

入力に関する処理も新しく切り分けたコンポーネントに移し替えたいと考えており、コンポーネントごとに役割を以下のようにしたいです。

• src/components/Dialog/HotkeySettingDialog.vue: ホットキーの表示、検索などの表示に関わる部分
• src/components/Dialog/HotkeyRecordingDialog.vue: ホットキーの編集、入力、未設定にするなど入力に関わる部分

元の設計方針とは変わってしまうのですが、そうした方が分かりやすくなるかなと思っています（個人的主観ではありますが...）。

[Hiroshiba]

なるほどです、ありだと思います！
（もしかしたらrecordCombinationはHotkeyRecordingDialog側でしか使わないかもです･･･！）

ちなみにコンポーザブルを作ってもこの２つのダイアログ以外では使わない＆２つは親子なので、コンポーザブル使わないのも普通にアリだと思います。
コンポーザブルを使う場合、目的はは再利用性ではなくリファクタリングになると思います。
なのでコンポーザブル作ってみてもし複雑性が上がっているように感じたら、崩すのもありだと思います！