refactor: SequencerPitchをリファクタ

[sigprogramming]

内容

SequencerPitchのリファクタリングです。

主に以下を行います。

• templateタグ内でcanvas要素を定義して、vueのrefで参照する形に変更
• PitchLineをクラス化し、updateLineStripsの処理をPitchLineクラスに移動
• PitchDataを{ ticksArray: number[]; data: number[] }から{ baseX: number; baseY: number }[]に変更
• toPitchData、splitPitchData、setPitchDataToPitchLineの処理をtoPitchDataMapにまとめる

その他

[voicevox-preview-pages]

🚀 プレビュー用ページを作成しました 🚀

• 📝 エディタ
• 📖 Storybook

更新時点でのコミットハッシュ：b5f821c

[Hiroshiba]

LGTM！！

１点だけこちらで変更させていただこうと思います！ 🙇

---

ちょっとずうずうしいお願いなのですが、もしできれば今度からコードの移動とコードの変更はコミットを分けていただけるとありがたいです･･･！
移動と変更を同時にすると、PR内でbefore/afterでコードの変更箇所がわからなくなってしまい。。（gitが差分として見つけられない）
移動と変更が別PRだと最高ですが、移動だけ最初にコミットとかでもかなり助かります 🙏

（ちなみにこれはGoogleのベストプラクティス似たことが書いてたりします。）
https://google-engineering-practices.translation.shuuji3.xyz/review/developer/small-cls.html

[sigprogramming]

@Hiroshiba
レビューしにくい差分で申し訳ないです…（一気にやろうとしてこうなりました…）
次回から移動と変更を分けるようにします…！

[Hiroshiba]

LGTM！！

いろいろ注文付けてしまってすみません。。 🙇
リファクタリングはウェルカムです、ぜひぜひ！！！

---

ちょこっと思ったのですが、たぶん今回のリファクタリングは将来描画を自前で行う（今は一部VueやHTMLを使ってる）のも見据えての感じなのかなと思います。
HTMLをあまり使わないのは賛成よりですが、レンダリングに関してはVueのreactive（refとかcomputedとかwatchとか）ドリブンでも良いのかもと少し思いました！
毎フレーム描画だとわりと重い処理だと思うのと、Vueのreactiveの機構が特に計算負荷にならなそうだなーと思い。

･･･ここまで書いて気づいたのですが、このプルリクエストはまさに「値が変わったらレンダリングする」になってますね！！！！！