Svelte入門：リファレンス CLI -storybook-

用語解説

2025.05.27

この記事は約4分で読めます。

よっしー

こんにちは。よっしーです(^^)

今日は、SvelteKitのリファレンスについて解説しています。

背景
CLIツール（sv）
Storybookとは
おわりに

背景

SvelteKitのリファレンスについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

CLIツール（sv）

コマンドラインインターフェース（CLI）であるsvは、Svelteアプリケーションの作成と保守のためのツールキットです。

Storybookとは

Storybookはフロントエンドコンポーネントのワークショップです。

使用方法

npx sv add storybook

導入されるもの

他のアドオンと同じ便利なsv CLIからnpx storybook initが自動的に実行されます
SvelteKitまたはSvelteとVite用のStorybookが、デフォルト設定とともに提供され、多くのSvelteKitモジュールの簡単なモック、自動リンク処理などが含まれます

解説

Storybookは、UIコンポーネントを独立して開発・テスト・ドキュメント化するためのツールです。コンポーネントライブラリを構築する際や、大規模なアプリケーションでコンポーネントを管理する際に非常に役立ちます。

基本的な使用例

インストール後の起動

# Storybookを起動
npm run storybook

コンポーネントのストーリー作成例

例えば、Button.svelteというコンポーネントがある場合：

<!-- Button.svelte -->
<script>
  export let primary = false;
  export let label = 'Button';
</script>

<button class:primary>
  {label}
</button>

<style>
  button {
    border: 1px solid #ccc;
    padding: 0.5rem 1rem;
    border-radius: 4px;
  }
  .primary {
    background-color: #4c88e8;
    color: white;
  }
</style>

このコンポーネントのストーリーを以下のように作成します：

// Button.stories.js
import Button from './Button.svelte';

export default {
  title: 'Components/Button',
  component: Button,
  argTypes: {
    primary: { control: 'boolean' },
    label: { control: 'text' }
  }
};

const Template = (args) => ({
  Component: Button,
  props: args
});

export const Default = Template.bind({});
Default.args = {
  primary: false,
  label: '通常ボタン'
};

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'プライマリボタン'
};

SvelteKitのページコンポーネントのストーリー

SvelteKitのページをStorybookでテストする例：

// Page.stories.js
import Page from '../routes/about/+page.svelte';

export default {
  title: 'Pages/About',
  component: Page
};

export const Default = {};