Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Kazuma Oe
December 15, 2022

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

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

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

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

Kazuma Oe

December 15, 2022
Tweet

More Decks by Kazuma Oe

Other Decks in Technology

Transcript

  1. © 2022 Ateam Inc. 7 • Histoire(イストワール)はフランス語で「物語」を意味する言葉で、StoryBookのようにUIコンポーネントのカタログを 作成するためのツールです。 • 特徴

    ◦ Viteにネイティブ対応 ◦ .svelteや.vueでStoryが書ける ◦ Tailwind CSSのデザイントークンを自動生成 ◦ ビジュアルリグレッションテスト ◦ テーマをカスタマイズ可能 etc… Histoireとは
  2. © 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
  3. © 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
  4. © 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
  5. © 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
  6. © 2022 Ateam Inc. 16 • <svelte:fragment slot=”controls”>で囲み、<Hst.Checkbox /> <Hst.Select

    /> <Hst.Text />などを使って状態をコ ントロールするUIを用意することができます。 状態をコントロールする
  7. © 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
  8. © 2022 Ateam Inc. 18 • logEvent関数を使用することでコンポーネントから発火するイベントを取得することができます。 • 第 1

    引数はイベント名、第 2 引数はイベントにより発生したデータを指定します。 イベント
  9. © 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
  10. © 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
  11. © 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
  12. © 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
  13. © 2022 Ateam Inc. 28 • Histoireを一通り使ってみましたが、UIコンポーネント管理ツールとしては最低限機能も揃ってます し、.svelteでStoryが書けるというのはすごく魅力的に感じました。 ただ、発展途上なツールなので不具合もありますし、SvelteKitのアップデートにより、動かなくなること もありました。

    Svelteコアチームの方がHisoireのリポジトリのほうでフォローしていたりして都度、修正もしているので 後々安定してくると思います。 StoryBookと比べてしまうと、足りない機能はたくさんありますが、StoryBookほど機能はいらないし、コ ンポーネントカタログとして使えればいいという需要であればHistoireは選択肢としていいのではない かなと思います。 StoryBook7でSvelteKitの完全サポートも予定されているようなので StoryBookも注目していきたいです! 最後に