refactor: AccentPhrase.vueを新規作成しAudioDetail.vueからアクセント句のコンポーネントを分離 Part.1

[thiramisu]

内容

#1569 から一部分割したもののその1です。

関連 Issue

• アクセント句やモーラごとのコンポーネントを作る #766

その他

accentPhrase"s"を消す必要があるのと、element同士やelementと関数の関わりが強く一部ずつの移動が難しいのとで、機能を保ったままでの分割はこれ以上は難しいように感じています…。
コミット単位でもある程度意味のある塊に分割したつもりなので、github上でコミット順に流し見ていくと全体の流れが少しつかみやすくなるかもです。
それでもまだ辛そうでしたら、もう少し考えてみます。

[Hiroshiba]

分離ありがとうございます！！これだったら相当負担少なくレビューできると思います！！！

最後の方の 44ab7ee はPRタイトルから外れているかもです。
これだけは特別にこのコミットで差分を見てレビューすることも可能ではあるので、分離面倒であればコメント頂ければ 🙏
（あとからrevertしたいときにできない、くらい）

[Hiroshiba]

@thiramisu もし切り分け作業してくださってたらすみません、今からレビューしたいと思います！

[Hiroshiba]

プルリクエストありがとうございます！！！！
切り分けていただけて短時間でしっかりレビューできたと思います！！！

一つだけ消えてそうなのを見つけたのでコメントしました。

---

クラスの切り出しではないファクタリング範囲は別途レビューしたのでコメントです。

pronunciation周りのリファクタリング。OKそう。
b1da352

handleChangePronounce周りのリファクタリング。
OKだけど、これだけこっちのプルリクに入ってるのはちょっと文脈的に分かりづらいかも＆色々一気にリファクタリングした方が見通しがよさそう。revertしてもいいかも。（そのままでもとりあえずOKです）
44ab7ee

[thiramisu]

レビューありがとうございます！今やっとコメントの方確認しました、すいません。

handleChangePronounce
これに関しては、pronunciationByPhraseから次のアクセント句の情報が消えたのでそのまま持ってくるのは無理なんですよね。ただ今考え直したら変更は

-    newPronunciation += pronunciationByPhrase.value[phraseIndex + 1];
+    newPronunciation += "ア";

だけにして、とりあえず移動だけ優先するのはありかもです、まあこれでも若干中途半端さが残りますが…どうしましょうか？

[Hiroshiba]

@thiramisu そこの変更は必須だと思います！
今思ったら,を、にリプレイスする機能が消えてるかも？（そもそもいるのかと言われると微妙ですが）

うーん！
まあでも変更作業お願いするのもあれなので、こっちでちょっと変更してマージさせていただこうと思います！

[Hiroshiba]

LGTM！！！

ずっとやりたかった切り出しなのでとても嬉しいです！！

handleChangePronounceの処理を元の形っぽく戻させていただいてからマージしたいと思います。

[thiramisu]

変更ありがとうございます、確認しました。

,を、にリプレイスする機能が消えてる

以前のコードにgオプションがついてなかったのは微妙ポイントだったのですが、それはそれとして消すのもkanaRegex.testがfalseになるので問題ありそうでしたね…
以前のコードに戻していただいたので、次のPRでgオプションつけた形に書き直してみます。