Storybook7がSvelteKitに対応するみたいなので我慢できずにBeta版を導入してみた

2022/12/22にStorybook7がBetaになったことが発表されました。Storybookはアプリケーションを介さずにコンポーネントを単独で開発できる便利なツールですが、Storybook6をSvelteKitで使用するには色々と設定の手間がかかりました。

今回のStorybook7ではSvelteKitへ正式対応するようなので、どのくらい簡単に導入できるようになったのか試していこうと思います。（Beta版なので正式リリース後は本記事の情報とは異なる場合があります）

SvelteKitの環境を用意

公式の導入方法に従って新しいプロジェクトを作ります。（※要Node.js v18以降）

$ npm create svelte@latest my-app
$ cd my-app
$ npm install
$ npm run dev -- --open

とりあえずTypeScriptでテストやLintなど盛々構成で作りました。

インストールが完了するとブラウザにWelcomeページが表示されます。

Storybook7(Beta)のインストール

Storybook 7 migration guideに従ってStorybook7(Beta)をインストールします。

$ npx sb@next init

インストール中に Do you want to run the 'eslintPlugin' migration on your project? と聞かれるので、デフォルトの Yes を選択しました。

インストールが完了したら起動してみます。

$ npm run storybook

Storybook6のときは初期状態ではエラーが出て起動ができなかったのですが、7(Beta)では問題なく起動できました！

Exampleのコンポーネントもちゃんと動いています。

コンポーネントを追加してみる

Svelteコンポーネント

背景色をpropsで設定できるボタンを作ります。

/src/components/Sample.svelte

<script lang="ts">
	import './sample.css';
	
	export let bgColor: string;
	export let label: string = '';
</script>

<button class="button" style="background-color: {bgColor};">
	{label}
</button>

/src/components/sample.css

.button {
    font-size: 1.5rem;
    font-weight: bolder;
    color: white;
    border-radius: 0.5rem;
    border: 0;
}

Storybookコンポーネント定義

/src/stories/Sample.stories.ts

import type { Meta, StoryObj } from '@storybook/svelte';

import Sample from '../components/Sample.svelte';

const meta = {
	title: 'My Components/Sample',
	component: Sample,
	parameters: {
		layout: 'fullscreen'
	},
	tags: ['autodocs'],
	argTypes: {
		bgColor: { control: 'color' }
	}
} satisfies Meta<Sample>;

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

export const Default: Story = {};

Storybookで動作確認

作成したコンポーネントがカタログに表示されました！
Storybookなので当然のことですが、背景色の指定やラベルの編集ができるようになりました。

まとめ

SvelteKitへのStorybook7(Beta)導入は全く手間がかからず、非常に簡単なことがわかりました。これは正式リリースが待ち遠しいですね。

注意

Storybook公式曰く、破壊的改変のフェーズは終わり安定化に向けて作業中とのことですが、とはいえBetaなので正式なプロジェクトで使用するのは避けたほうが良いと思います。

参考

SvelteKit
https://kit.svelte.dev/

Storybook
https://storybook.js.org/

Storybook7 Beta (Blog)
https://storybook.js.org/blog/7-0-beta/