SvelteKit 1.x に Storybook 7.0(RC) を導入してみた

# はじめに

[Storybook] はフロントエンド開発には欠かせない、コンポーネント単位で動作確認ができるツールです。

例えば、ボタンコンポーネントを作成したらそのコンポーネントだけをブラウザに表示してどのように描画されるかを確認することができます。また、コンポーネントのパラメータを変更したらどの様に描画されるかも確認できます。これによって、ページ全体を作成することなく部品(コンポーネント)の開発を進めることができます。

今回は [SvelteKit] のスケルトンプロジェクトに [Storybook] を導入してみます。

# 対象バージョンの選択

パッケージ管理ツールは npm ではなく [pnpm] を使いたいなぁと思いました。しかし、[Storybook 6.x]では [pnpm] に対応していませんでした。代わりに [Storybook 7.0(RC)] であれば [pnpm] に対応しているのでこちらを導入します。

# SvelteKit への対応状況

以下の投稿より、[SvelteKit] に対応していることが分かります。

https://twitter.com/storybookjs/status/1631348833916702721

詳しくは以下のブログを参照してください。

https://storybook.js.org/blog/storybook-for-sveltekit/

2月28日の時点での対応状況は以下の通りです。
![](https://storybookblog.ghost.io/content/images/size/w1000/2023/02/Screen-Shot-2023-02-28-at-2.51.26-PM.png)
今後、`$app/stores` のモックも実装されるみたいですね。楽しみです。

# SvelteKit に Storybook を導入する

まずは [SvelteKit] をセットアップします。

```:ターミナル
npm create svelte@latest my-app
```

いくつか質問されますが、こんな感じにしました。

```:ターミナル
create-svelte version 3.2.0

┌  Welcome to SvelteKit!
│
◇  Which Svelte app template?
│  Skeleton project
│
◇  Add type checking with TypeScript?
│  Yes, using JavaScript with JSDoc comments
│
◇  Select additional options (use arrow keys/space bar)
│  Add ESLint for code linting, Add Prettier for code formatting, Add Playwright for browser testing, Add Vitest for unit testing
│
└  Your project is ready!
```

`install` を実行してライブラリを node_modules にダウンロードします。

```:ターミナル
cd my-app
pnpm install
```

[Storybook 7.0(RC)] をインストールします。

```:ターミナル
pnpm dlx storybook@next init
```

[Storybook 7.0(RC)] を起動します。
```:ターミナル
pnpm run storybook
```

できましたー。簡単ですね！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773745/0d1bc8eb-b7b2-8b55-dd0e-8582b660e4c6.png)

ちなみに、`primary` を `False` に変更すると、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773745/a541acbe-3756-4127-0958-65009ddb6bfa.png)
ボタンの見た目が変わりましたね！

# JSDoc が Description として認識される

.stories.js ファイルで export されている項目に [JSDoc] を記載すると [Storybook] 上では Description として認識されます。

例えば、こうすると、
```diff_javascript:src/stories/Button.stories.js
import Button from './Button.svelte';

+/**
+ * これはボタンです
+ */
// More on how to set up stories at: https://storybook.js.org/docs/7.0/svelte/writing-stories/introduction
export default {
  title: 'Example/Button',
  component: Button,
  tags: ['autodocs'],
  argTypes: {
    backgroundColor: { control: 'color' },
    size: {
      control: { type: 'select' },
      options: ['small', 'medium', 'large'],
    },
  },
};
...
```

こう表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773745/0a0a8cdd-0b55-f678-a678-a098a469f781.png)
シンプルで無駄がないし、分かり易いです！


# まとめ

[SvelteKit] に [Storybook 7.0(RC)] を簡単に導入することができました。

まだ RC 版ではありますが、[Storybook] チームと [SvelteKit] チームで緊密な協力が継続されているらしいので、近々正式版がリリースされるかもしれませんね。

[Storybook] は複数人で開発する際に役に立つので、大きめなプロジェクトでも [SvelteKit] を使って構築しやすくなるのでは、と期待しています。:smiley:

[SvelteKit]:https://kit.svelte.dev/
[pnpm]:https://pnpm.io/
[Storybook]:https://storybook.js.org/
[Storybook 6.x]:https://storybook.js.org/docs/6.5/svelte/get-started/install
[Storybook 7.0(RC)]:https://storybook.js.org/docs/7.0/svelte/get-started/install
[JSDoc]:https://www.typescriptlang.org/ja/docs/handbook/jsdoc-supported-types.html