Svelteで利用できるUIカタログライブラリについて
こんにちは！ネクストビートエンジニアの石川です。
今回は、Svelte上で利用できるUIカタログのライブラリについて記述します。 現状私が把握しているライブラリは2つで、Storybook と Histoire になります。それぞれについて私が考えているメリット・デメリットを記述します。
Storybook
メリット
Storybookは最近のフロントエンド開発では半ばデファクトスタンダードとなっているUIカタログライブラリで、それがそのままメリットとなります。
周辺プラグイン等が非常に豊富で、単純なUIカタログとしての用途からテスト方面でもしっかりサポートされており、また各現場での利用実績があるため、拡張性で困ることはあまりないと考えられます。
UIカタログとしての用途に限定しても、個人的にやはり便利だと感じるのが各種automationツールが豊富なところです。Autodocs はコンポーネントのprops等のドキュメントを良い感じに作成してくれますし、また controls もpropsを解析して特にstoryファイルで個別の定義をせずとも作成してくれるため、カタログ作成に対するコスト削減につながります。
参考: https://storybook.js.org/docs/svelte/writing-docs/autodocs
コミュニティが非常に大きく常にアップデートされていっているため、今のところはメンテナンスが行われないといった状況に陥りそうにないのも、安心できる点の一つですね。
デメリット
一方で、Svelteとの親和性は現状あまり高くないかな？と考えています。元々StorybookはReactベースで作られているライブラリであり、storyファイルもjsx/tsxベースの記法となっているため、Svelteエンジニアからすると若干の学習コストが発生します。
例えば、Svelteの基本的な記法であるslotについてはStorybook側から直接指定できるようなAPIが提供されていないようでして、利用したい場合は下記のissueのように一工夫必要そうです。https://github.com/storybookjs/storybook/discussions/20142
一度componentをラップして、slotに渡す要素をpropsで受け取れるようにしています。
またメリットのところでコミュニティが非常に大きいと記載しましたが、やはり比率としてはReactとVueが多く、Svelteに限定した場合はそこまで大きくないように感じました。公式のドキュメントもSvelteのものに関しては更新が追いついていないものが少々見受けられますね。
Histoire
メリット
HistoireはVite-nativeなUIカタログツールであり、Svelteでの利用を前提として開発されています。そのため親和性が高く、storyについても通常Svelte Componentを記述するのと全く同じ感覚で定義できます。Svelteエンジニアにとっては余計な学習コストがなくて済むことは明確なメリットの一つと言うことができそうです。
上記はHistoire公式で紹介されているコードですが、Svelteライクな記法で直感的に見やすいです。
デメリット
デメリットはやはりコミュニティが発展途上な点です。コミットも現状はそこまで活発ではないのと、各種プラグイン等もあまり豊富ではありません。
実際にプロダクトで利用していく場合、単純なUIカタログとしての用途ではそこまで困ることはないかと思いますが、Storybookに標準でついているautomationのようにコスト削減を行いたい場合等、独自の実装を行わないといけない場面が出てくるかと思います。
終わりに
今回はSvelteで利用できるUIカタログのStorybookおよびHistoireについてまとめました。双方メリット・デメリットがあり、一概にどちらが良いとは言えないとは思いますので、それぞれの開発現場・プロダクトの状況に応じた選択を行う必要があるかと思います。今回の記事が選択の一助になれば幸いです。
ちなみに私が担当しているプロダクトの保育士バンク！では、試験的にHistoireを採用しています。理由としては、現状は単純なUIカタログが実現できればよかったため、より親和性の高い方を選びたかったという点が挙げられます。
ただ拡張性のことを考えると、Storybookの方がやはり安心できる部分はあるかと考えており、今後Svelte-Storybookのコミュニティが盛り上がってくれば、そちらに乗り換える選択肢は全然アリだと感じています。
We are hiring!
本記事をご覧いただき、ネクストビートの技術や組織についてもっと話を聞いてみたいと思われた方、カジュアルにお話しませんか？
・今後のキャリアについて悩んでいる
・記事だけでなく、より詳しい内容について知りたい
・実際に働いている人の声を聴いてみたい
など、まだ転職を決められていない方でも、ネクストビートに少しでもご興味をお持ちいただけましたら、ぜひカジュアルにお話しましょう！
🔽申し込みはこちら
https://hrmos.co/pages/nextbeat/jobs/1000008
また、ネクストビートについてはこちらもご覧ください。
