Open2

【vue3】composition api の「関心事の分離」について

373.3373.3

composition api の「関心事の分離」の感覚がまだイマイチ分かってない。

https://github.com/ryuhei4k9/eRAseRmOToRpHAntOMizER/blob/main/composables/useEraserMotorPhantomize.ts
今作っているアプリケーションだと「何かしらのフォームと双方向バインドされるであろうインプット」 を ref として、「input に変化がある度にその文字列にある処理をしたアウトプット」を computed として公開してる(eraserMotorPhantomized がそれ)って感じの分け方をしてる(上記リンク参照)。

自分のイメージとしては「入力とか知らんけどとにかく文字列」を引数として持つメソッドを分離して、コンポーネントが持つ input と computed プロパティプロパティそのものはコンポーネント側が用意、そのロジックは分離したメソッドから拝借するってものなので、そこにズレがある( page とか SFC から分離したロジックが ref とかを持ってるって感覚がもう僕にはよくわからない)。

とはいえ、このモジュールが公開しているインプットとアウトプットをコンポーネントから紐づけてしまえばモジュールが持つ機能をそのまままるっと利用できるというのにはすごく合点がいく。
が、そうなると何処までこいつが持つべきか(上記の場合だと twitterShareUrl も持つべきなのか?みたいな)の肌感が全くわからなくてめちゃめちゃ不安になる。

vue3 自体は出てから結構時間が経ってるのでその辺の感覚を持ってる人の意見聞いてみたりとか記事読んでみたりしてみたい。

ちなみに今作っているアプリケーションは入力した文字列を beatmania IIDX という音楽ゲームに出てくる eRAseRmOToRpHAntOM という曲名っぽくして表示するだけというツールです。nuxt 3 beta の勉強がてら作ってみた。
https://erasermotorphantomizer.netlify.app/

373.3373.3

https://zenn.dev/meijin/articles/34b9482dbc856d2523ed

これ読んでて

Hook のメリットは, 【ステートを持ったロジックをコンポーネントから抽出して, 単独でテストしたり, また再利用したりできる】ことである

ってところで結構合点がいったかもしれない。