KINTO Tech Blog
Development

SvelteでStorybookを使ってみる - Svelte不定期連載-03

Cover Image for SvelteでStorybookを使ってみる - Svelte不定期連載-03

こんにちは(こんばんは)、Svelte不定期連載その3です。
過去の記事はこちら

  1. SvelteKit + Svelte を1年間くらい使ってみた知見など※SvelteKit メジャーリリース対応済み
  2. Svelteと他JSフレームワークとの比較 - Svelte不定期連載-01
  3. Svelteでユニットテスト - Svelte不定期連載-02

今回はSvelteとStorybookを使ってみようの回です。

Storybookとは

UIであるコンポーネントを管理・運用しやすくするためのツール、だと認識していますが、様々な機能を内包していたりします。

https://storybook.js.org/

今回やること

今回は以下の3つを行ってみます。

  • 実際のプロジェクトに導入
  • Storybookにコンポーネントを登録
  • Storybook上のテストを実行

ではやっていきましょう。

実際のプロジェクトに導入

今回は0からではなく実際のプロジェクトにStorybookを入れてみようと思います。

導入するプロジェクト

のるウェイ!

URL
https://noruwaaaaaaaay.kinto-jp.com/

SvelteKit + microCMS + [S3 + Cloudfront]の構成で作られているプロジェクトです。
面白いコンテンツが揃っているので是非みてみてください!

おすすめ記事
https://noruwaaaaaaaay.kinto-jp.com/post/93m02vm8chf3/

https://noruwaaaaaaaay.kinto-jp.com/post/fe35u405761/

導入手順

npx storybook@latest init

こちらのコマンドをプロジェクトがあるディレクトリで実行します。
これだけで、プロジェクト内にStorybookの初期構築が完成します。

.storybookというディレクトリとsrc配下にstoriesというディレクトリが作られました。
vscode

これで初期構築は終わりです。

Storybookにコンポーネントを登録

Storybookを動かしてみる

Storybookを立ち上げてみます。
yarn storybookを実行します。

このような画面が立ち上がりますね。
storybook init

src/stories/配下にあるコンポーネントや**.stories.tsなどはプロジェクト内では使ってないファイルのため、
一度stories配下にあるファイルを全て消して、Button.stroies.tsを改めて配置し、実際にのるウェイで使っているコンポーネントをStorybookに登録してみます。

Storybookにコンポーネントを登録してみる

実際にプロジェクト内でコンポーネント化されているボタンのビジュアルとコードがこちらです。

ボタンコンポーネントのデザイン

button.svelte
<script lang="ts">
  export let button: { to: string; text: string };
</script>

<div class="button-item">
  <a
    href={button.to}
    class="link-block"
  >
    <span class="link-block-text">{button.text}</span>
  </a>
</div>

実際にStorybookへ上記のボタンコンポーネントを登録してみましょう。

button.stories.ts
import type { Meta, StoryObj } from '@storybook/svelte';

// ボタンコンポーネントを登録
import Button from '$lib/components/Button.svelte'

const meta: Meta<Button> = {
  title: 'Example/Button',
  component: Button,
  tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<Button>;

export const Primary: Story = {
  // ボタンコンポーネントのexport letになっているオブジェクトを登録
  args: {
    button: {
      to: '',
      text: ''
    }
  },
};

このような画面に更新されました。

ボタンコンポーネントのデザイン

では実際にstorybookの画面上でテキストの差し替えなどしてみます。

ボタンコンポーネントのデザイン

実際に変わることが確認出来ました。
本当に最小限ではありますが、これだけでボタンコンポーネントの配置が終わりました。

Storybookでテストをしてみる

storiesを追加したコンポーネントに対して実際のstoriesファイルが破損していないかのテストを簡単にしてみます。

導入手順

まずテストに必要なモジュールをインストールします。

yarn add --dev @storybook/test-runner

storybook上のテストを実行

実際にテストをしてみます。

yarn test-storybook

を実行すると、

テストがパスされるとこのような出力に。
ボタンコンポーネントのデザイン

どの部分で失敗したかにもよりますがテストに失敗すると以下のように
ボタンコンポーネントのデザイン

こちらでストーリーブックが破損していないかのテストが行えました。
たくさんのオプションも用意されているのでもっと詳しく知りたい方は下記をご覧ください。

https://storybook.js.org/docs/svelte/writing-tests/test-runner

おわり

インストールから、コンポーネントに対してのストーリーの追加、そしてStorybookが破損していないかのテストまでが、簡単に行うことが出来ました。

余談ではありますが、HTMLオンリーのプロジェクトにStorybookを追加しようとしてとても大変だったことがあるので、今回やってみて非常に簡単にできたので良い時代になったな、と感じました。

以上、SvelteでStorybookを使ってみようの会でした。

次回は少し毛色を変えて、Astro上でSvelteを動かしてみようです。
次回もお楽しみに!

Facebook

関連記事 | Related Posts

Yusuke Ikeda
Yusuke Ikeda
Cover Image for SvelteTips - Svelte不定期連載-05

SvelteTips - Svelte不定期連載-05

Yusuke Ikeda
Yusuke Ikeda
Cover Image for AstroでSvelte使ってみた - Svelte不定期連載-04

AstroでSvelte使ってみた - Svelte不定期連載-04

Chris.L
Chris.L
Cover Image for 世界共通のデザインシステム開発にStorybookを導入した

世界共通のデザインシステム開発にStorybookを導入した

Yusuke Ikeda
Yusuke Ikeda
Cover Image for Using Storybook with Svelte - Irregular Svelte Series 03

Using Storybook with Svelte - Irregular Svelte Series 03

Yusuke Ikeda
Yusuke Ikeda
Cover Image for SvelteKit + Svelte を1年間くらい使ってみた知見など

SvelteKit + Svelte を1年間くらい使ってみた知見など

Yusuke Ikeda
Yusuke Ikeda
Cover Image for Svelteと他JSフレームワークの比較 - Svelte不定期連載-01

Svelteと他JSフレームワークの比較 - Svelte不定期連載-01

We are hiring!

【フロントエンドエンジニア】新車サブスク開発G/東京

新車サブスク開発グループについてTOYOTAのクルマのサブスクリプションサービスである『 KINTO ONE 』のWebサイトの開発、運用をしています。​業務内容トヨタグループの金融、モビリティサービスの内製開発組織である同社にて、自社サービスである、TOYOTAのクルマのサブスクリプションサービス『KINTO ONE』のWebサイトの開発、運用を行っていただきます。

【フロントエンドエンジニア(コンテンツ開発)】新車サブスク開発G/東京

新車サブスク開発グループについてTOYOTAのクルマのサブスクリプションサービスである『 KINTO ONE 』のWebサイトの開発、運用をしています。​業務内容トヨタグループの金融、モビリティサービスの内製開発組織である同社にて、自社サービスである、TOYOTAのクルマのサブスクリプションサービス『KINTO ONE』のWebサイトの開発、運用を行っていただきます。