Histoireを使ってSvelteコンポーネントを管理しよう

2022/12/15に開催された「Nextbeat Tech Bar：広がるSvelteの輪！忘年LT会」で発表した資料です。

https://nextbeat.connpass.com/event/267096/

発表者：oekazuma
Twitter: oekazuma
GitHub: oekazuma
Qiita: oekazuma

Transcript

1. © 2022 Ateam Inc. Histoireを使ってSvelteコンポーネントを管理 しよう 2022/12/15 株式会社エイチームライフデザイン　大江 和摩
2. © 2022 Ateam Inc. 株式会社エイチームライフデザイン Webエンジニア 大江 和摩（おおえ かずま） 2 自己紹介 @oekazuma
3. © 2022 Ateam Inc. 3 企業紹介
4. © 2022 Ateam Inc. 4 企業紹介
5. © 2022 Ateam Inc. 5 企業紹介_サービス内容
6. © 2022 Ateam Inc. 6
7. © 2022 Ateam Inc. 7 • Histoire(イストワール)はフランス語で「物語」を意味する言葉で、StoryBookのようにUIコンポーネントのカタログを 作成するためのツールです。 • 特徴 ◦ Viteにネイティブ対応 ◦ .svelteや.vueでStoryが書ける ◦ Tailwind CSSのデザイントークンを自動生成 ◦ ビジュアルリグレッションテスト ◦ テーマをカスタマイズ可能 etc… Histoireとは
8. © 2022 Ateam Inc. 8 • vite.config.jsにhistoireプロパティとして記述できます。 • histoire.config.jsという名前で別のファイルに切り出すこともできます。 Viteにネイティブ対応 import { defineConfig } from 'histoire'; import { HstSvelte } from '@histoire/plugin-svelte'; export default defineConfig({ plugins: [HstSvelte()] }); histoire.config.js
9. © 2022 Ateam Inc. 9 • .story.tsではなく、.story.svelteでStoryが書けます。 .svelteや.vueでstoryが書ける <script> import Button from './Button.svelte'; export let Hst; </script> <Hst.Story> <Button /> </Hst.Story> Button.story.svelte
10. © 2022 Ateam Inc. 10 • .story.tsではなく、.story.svelteでStoryが書けます。 .svelteや.vueでstoryが書ける
11. © 2022 Ateam Inc. 11 • Variantを使うことで1つのコンポーネントに対して複数の表示を作成できます。 Storyを複数表示する <Hst.Story> <Hst.Variant title="default"> <Button> Click me! </Button> </Hst.Variant> <Hst.Variant title="small"> <Button size="small"> Click me! </Button> </Hst.Variant> …省略 </Hst.Story> Button.story.svelte
12. © 2022 Ateam Inc. 12 • Variantを使うことで1つのコンポーネントに対して複数の表示を作成できます。 Storyを複数表示する
13. © 2022 Ateam Inc. 13 • Variantはデフォルトではそれぞれのページに分けて表示されますが、 1ページにグリッドレイアウトで表示することもできます。 レイアウトを変更する <Hst.Story layout={{ type: 'grid'}}> <Hst.Variant title="default"> <Button> Click me! </Button> </Hst.Variant> …省略 </Hst.Story> Button.story.svelte
14. © 2022 Ateam Inc. 14 • Variantはデフォルトではそれぞれのページに分けて表示されますが、 1ページにグリッドレイアウトで表示することもできます。 レイアウトを変更する
15. © 2022 Ateam Inc. 15 • <svelte:fragment slot=”controls”>で囲み、<Hst.Checkbox /> <Hst.Select /> <Hst.Text />などを使って状態をコ ントロールするUIを用意することができます。 状態をコントロールする <script> …省略 let disabled = false; let content = 'Click me!'; let size = 'medium'; </script> <Hst.Story> <Button {disabled} {size}> {content} </Button> <svelte:fragment slot="controls"> <Hst.Checkbox bind:value={disabled} title="Disabled" /> <Hst.Select bind:value={size} options={['small', 'medium', 'large']} title="Size" /> <Hst.Text bind:value={content} title="Content" /> </svelte:fragment> </Hst.Story> Button.story.svelte
16. © 2022 Ateam Inc. 16 • <svelte:fragment slot=”controls”>で囲み、<Hst.Checkbox /> <Hst.Select /> <Hst.Text />などを使って状態をコ ントロールするUIを用意することができます。 状態をコントロールする
17. © 2022 Ateam Inc. 17 • logEvent関数を使用することでコンポーネントから発火するイベントを取得することができます。 • 第 1 引数はイベント名、第 2 引数はイベントにより発生したデータを指定します。 イベント <script> import { logEvent } from 'histoire/client' import Button from './Button.svelte'; export let Hst; </script> <Hst.Story> <Button on:click={event => logEvent('click', event)}> Click me! </Button> </Hst.Story> Button.story.svelte
18. © 2022 Ateam Inc. 18 • logEvent関数を使用することでコンポーネントから発火するイベントを取得することができます。 • 第 1 引数はイベント名、第 2 引数はイベントにより発生したデータを指定します。 イベント
19. © 2022 Ateam Inc. 19 • ドキュメントをStoryに追加するには.story.mdファイルを作成します。 ドキュメント # Button ## Example ```svelte <Button size="small" disabled on:click={onClick}> Click me! </Button> ``` ## Props | Name | Type | Default | Description | | -------- | ---------------------------- | --------- | ------------------------------ | | size | 'small' 'medium' 'large' | 'medium' | The size of the button | | disabled | boolean | false | Whether the button is disabled | Button.story.md
20. © 2022 Ateam Inc. 20 • ドキュメントをStoryに追加するには.story.mdファイルを作成します。 ドキュメント
21. © 2022 Ateam Inc. 21 • Tailwind CSSを使う場合はデザイントークンを自動生成してくれる機能があります。 • tailwind.config.jsから設定を読み取って生成してくれるのでHistoireの設定は不要です。 Tailwind CSSのデザイントークンを自動生成
22. © 2022 Ateam Inc. 22 • PNPMを使う場合のTIPS • .npmrcにshamefully-hoist=trueを設定しないとうまく動作しません。 Tailwind CSSのデザイントークンを自動生成 shamefully-hoist=true .npmrc
23. © 2022 Ateam Inc. 23 • Tailwind CSSをStory上で使えるようにするには少し設定が必要です。 Tailwind CSSをStoryに適用させる @tailwind base; @tailwind components; @tailwind utilities; tailwind.css import './tailwind.css' /src/histoire.setup.ts import { defineConfig } from 'histoire'; import { HstSvelte } from '@histoire/plugin-svelte'; export default defineConfig({ plugins: [HstSvelte()], setupFile: '/src/histoire.setup.ts' }); histoire.config.js
24. © 2022 Ateam Inc. 24 • 公式プラグインの@histoire/plugin-screenshotを使ってスクリーンショットを撮影してビジュアルリグレッションテス トを実施することができます。 • ビルドコマンドで実行でき、スクリーンショットは.histoire/screenshots に保存されます。 ビジュアルリグレッションテスト $ npm i -D @histoire/plugin-screenshot import { defineConfig } from 'histoire'; import { HstSvelte } from '@histoire/plugin-svelte'; import { HstScreenshot } from '@histoire/plugin-screenshot'; export default defineConfig({ plugins: [HstSvelte(), HstScreenshot()], setupFile: '/src/histoire.setup.ts' }); histoire.config.js
25. © 2022 Ateam Inc. 25 • Histoireはブランドのガイドライン等に合わせてカスタマイズすることが可能です。 テーマをカスタマイズ可能 export default defineConfig({ theme: { title: 'Ateam Inc.', logo: { square: './image/logo_square.png', light: './image/logo_light.png', dark: './image/logo_dark.png' }, logoHref: 'https://www.a-tm.co.jp/', favicon: './image/favicon.png', colors: { gray: defaultColors.zinc, primary: defaultColors.rose } } }); histoire.config.js
26. © 2022 Ateam Inc. 26 • Histoireはブランドのガイドライン等に合わせてカスタマイズすることが可能です。 テーマをカスタマイズ可能
27. © 2022 Ateam Inc. 27 最後に
28. © 2022 Ateam Inc. 28 • Histoireを一通り使ってみましたが、UIコンポーネント管理ツールとしては最低限機能も揃ってます し、.svelteでStoryが書けるというのはすごく魅力的に感じました。 ただ、発展途上なツールなので不具合もありますし、SvelteKitのアップデートにより、動かなくなること もありました。 Svelteコアチームの方がHisoireのリポジトリのほうでフォローしていたりして都度、修正もしているので 後々安定してくると思います。 StoryBookと比べてしまうと、足りない機能はたくさんありますが、StoryBookほど機能はいらないし、コ ンポーネントカタログとして使えればいいという需要であればHistoireは選択肢としていいのではない かなと思います。 StoryBook7でSvelteKitの完全サポートも予定されているようなので StoryBookも注目していきたいです！ 最後に