こんにちは。
先月Dysonの掃除機を買い、掃除するのが楽しくなったたけろいどです。
SvelteでLogicとViewを分離したい
SvelteのTemplate構文は単一ファイルコンポーネントでとても見やすいですが、ロジックとビューが混じりやすくメンテナンス性が落ちやすいという問題があります。
それらを分離するためにいくつかの手法があります。今回はHOCとコンポジッション関数を用いて分離してみました。REPLもありますのでご参考になれば幸いです。
手段
HOC（Higher-Order-Component）
日本語で高階コンポーネントと呼ばれ、Hooks登場以前のReactで用いられていた手法です。
コンポーネントをロジックコンポーネントとビューコンポーネントで分けビューコンポーネントをロジックコンポーネントでラップすることで実現します。
詳しいコードはREPLにあります。
コンポジション関数
VueのComposition APIのように関数をuse〇〇〇として切り出す手法です。Svelteではstoreを用いることで擬似的に実現できます。
HOC
SvelteでHOCを実現するには大きく分けて二つあります。
- slotを用いる方法
- svelte:componentを用いる方法
それぞれREPLでカウントアプリを作ってみました。
Slotを用いる
slotによりコンポーネントをラップします。
incrementなどのカウント機能とそれを表示する箇所が分けられています。一方でprops周りがごちゃついているのがわかるかと思います。
svelte:componentを用いる
svelteにはsvelte:componentというディレクティブがあります。それを利用することでprops周りを比較的スッキリさせることができています。
ただ、さらに親子関係を作りコンポーネントのネストが深くなっていくと、なにをpassThroughPropsに受け渡しているのかエンジニアが把握しにくくなっていきます。
まとめ
SvelteでもHOCを使いロジックとビューの分離ができることがわかりました。
また、slotは手軽にできますがsvelte:componentを使用した方がprops周りがシンプルになりそうです。
コンポジション関数
普通に切り出すとリアクティブな値として定義されないため、storeを使って実現します。
storeを用いる
svelteには状態管理ライブラリのようなものが標準搭載されています。それがstoreです。
これを使うことでコンポジション関数LikeにLogicを切り出すことができます。また使用する時もimportするだけなのでHOCと比較すると簡単なのがわかります。
まとめ
こちらもロジックとビューの分離ができることがわかりました。
加えて比較的綺麗に書くことができました。
またVue出身の人には馴染みのある文法で好みの人が多いのではないでしょうか？
所感・結び
基本的にはコンポジション関数を使っていくのがいいかと思いました。
HOCはコンポーネント数が増えるためpropsなど気にする点が増加するのがネックですね。
適材適所で使っていき、より理解を深めていきたいです。
参考
https://dev.to/isaachagoel/untangling-composition-and-higher-order-components-in-svelte-2j89
