Refactor: SequencerGridをPresentation/Containerに分離

[sevenc-nanashi]

内容

タイトル通りです。

関連 Issue

• ref: Add: BPM・拍子変更機能を追加 #2303

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

その他

（なし）

[Hiroshiba]

テスト回すために空commitさせていただきます！

[Hiroshiba]

LGTM！！！

完璧な切り出し差分だと思います、ありがとうございます！！！

[Hiroshiba]

@romot-co @sigprogramming
たぶんPresentation/ContainerパターンはSing系で初めてだと思うので、ちょっと目的や利点を含めて説明させていただこうと思います！

---

目的は 見た目のテストをしやすくすること です。

VOICEVOXは大体のコンポーネントがVuexに依存していて、そのVuexを初期化するには結構な苦労が必要となっています。
そこで、１つのコンポーネントを、 外部のデータ＝Vuexに依存するもの（Container） と、 見た目とUIの挙動だけを司るもの（Presentation） に分離するのがこのパターンです。
（コンテナ・プレゼンテーションパターンはこちらのブログがわかりやすいです。）

このパターンを使うとStorybookととても相性が良くなります。
今回のPRでできたStoryはStorybookで確認できて（npm run storybookでも見れます）、electronの起動をせずとも見た目を確認できます。
Controlsに書いてるパラメータを書き換えることで見た目が変わったり、上部のdark/lightを押してテーマを変えたり,
コンポーネントだけ先に作れたりと、いろいろ便利です。

あとクリック時の挙動のテストも書けたり、最近だと @sevenc-nanashi さんがスクショテストもできるようになり、リファクタリング前後で見た目が変わってないことを自動で確認してくれます。
今回は１パターンのスクショのみのテストですが、例えばもっとズームを引いたときの見た目とか、あとは変わった拍子にしたときの見た目とかもチェックできるはずです。

ただ最初はこのPRのようにファイル分離が必要で、コンフリクトは起きやすいはずです。
ということで、ちゃんと利点もあることをご紹介してみた次第でした･･･！！ 🙏