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

[thiramisu]

内容

AudioDetailを少し弄ろうと思ったのですが、割とごちゃごちゃしていてかなり難解に見えました。
なのでタイトル通り、AccentPhrase.vueを新規作成しAudioDetail.vueからアクセント句のコンポーネントを分離しました。
これによりコードの分割と行数の削減ができ、少しは分かりやすくなったと思います。

[追記:] 以下はPart.1(#1570)で一部解決し、また残りの分も別のPRで送ろうと思っているので、変更はありません。

ユーザー視点での変更として、以下の「単体アクセント句の読み変更時の挙動の改善」があります。
（次のアクセント句を参照する意味がなくなっていたためリファクタリング対象でした）
#766 (comment)
[追記の対象ここまで]

関連 Issue

• アクセント句やモーラごとのコンポーネントを作る #766
  上記の一部です。

その他

[Hiroshiba]

AccentPhraseの分離、いよいよって感じですね！！！

@thiramisu
1000行の変更なのでレビュワーから相談が。。

このコマンドでorigin/mainから単純に行ごと移動したもの以外を強調表示できます。レビュワーはこれとコードを見比べて、変更がある箇所に問題がないかを確認していく感じになります。

git diff -w --color-moved=dimmed-zebra --color-moved-ws=ignore-all-space origin/main

まだざっと見た感じなのですが、結構コードが移動しつつリファクタリングもされている箇所がありそうだなと感じました。
コメントで触れられているchangeSingleAccent周りと、他にもlastPitches初期値周りと、hovered周りの状態管理のコードが変わっていそうです。

可能ならコードの移動と変更を分けていただけるとレビュワー的に助かるかもです 🙇

めちゃめちゃ失礼なことを言うのですが、今までの経験上、この規模だとたぶん１〜２個ほど予想外の挙動変更が含まれてると思います。
それを洗い出して、ユーザーのバグ遭遇率を下げたり、緊急アプデする確率を下げられるかなと考えています。

[thiramisu]

コマンド、参考になりました。

ただ、分割は結構難しいものがあります…
ファイルを分けたことによりaccentPhraseが単体になりますが、accentPhrase"s"を残すとエラーになるので消す必要があります。
あとは割と密な結合なので、少しずつ移動も難しく、+-400行はほぼ確定な気がするんですよね…
コミットでいうと777a621以前はこの影響でちょっと分けられる気がしないです。
まあでも、それより後とで2分割にはできそうなので、一応やってみました！

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

[thiramisu]

Part1の方がマージされたので、レビューお願いできればと思います。
（割と差分が少なくなったはず…）

「単体アクセント句の読み変更時の挙動の改善」については、バグ修正・機能改善に近いのでまた別のPRで送ろうかなと思います。なのでRevertしました。

[Hiroshiba]

ほぼLGTMです！！！

リファクタリング本当にありがとうございます、読みやすくなったと思います！！
audio-parameterからaccent-phrase-indexが消せるの盲点でした！！！

ちょこっとだけ提案コメントをさせていただきました！

追加でさらにリファクタリングする時はプルリクエストを分けていただけるとすごく嬉しいです 🙇
（1～2行ぐらいならいいかも。）

[Hiroshiba]

LGTM！！！

読みやすさがさらに上がったと思います、ありがとうございます！！
リファクタリングは全エンジニアの作業速度を上げる形になるので、どんどん送っていただけると嬉しいです･･･！！

[Hiroshiba]

問題ないと思うのでマージします！