コンポーネントStoryの作成
CSF3形式、default export（title、component）、Storyとしての名前付きexport、args
「コンポーネントStoryの作成」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
ストーリーでコンポーネントの状態を表す
ストーリーは、コンポーネントの1つの状態、つまり特定のpropsとコンテンツの組み合わせを表します。たとえば、ボタンにはPrimary、Secondary、Disabledのストーリーを用意できます。Storybookでは、それぞれを個別に閲覧できるサンプルとしてレンダリングします。
CSF3：最新のフォーマット
StorybookではComponent Story Format 3（CSF3）を使用します。1つのファイルに、コンポーネントを説明するデフォルトエクスポートと、各ストーリー用の名前付きエクスポートを記述します。通常のJavaScript/TypeScriptオブジェクトで構成され、定型コードは最小限です。
デフォルトエクスポート（Meta）
デフォルトエクスポートはmetaオブジェクトです。最低限、サイドバーのパスを表すtitleと、ドキュメント化するcomponentを指定します。
import Button from "./Button.vue"
export default {
title: "Components/Button",
component: Button,
}titleでサイドバーを整理する
titleではスラッシュを使って、Storybookのサイドバーにフォルダー階層を作成します。"Forms/Inputs/TextField"とすると、3階層の深さにネストされます。
export default {
title: "Forms/Inputs/TextField",
component: TextField,
}名前付きエクスポートがストーリーになる
名前付きエクスポートはそれぞれストーリーのバリエーションです。エクスポート名がサイドバーでのストーリーラベルになります。
export const Primary = {}
export const Secondary = {}
export const Disabled = {}argsオブジェクト
ストーリーのargsオブジェクトでpropsの値を指定します。Storybookがそれらをコンポーネントに渡し、Controlsパネルで実行中に値を調整できます。
export const Primary = {
args: {
label: "Click me",
variant: "primary",
},
}argsによる複数のバリエーション
argsだけを変更して、同じコンポーネントを複数のストーリーで再利用できます。各エクスポートでは、異なるpropsを指定してコンポーネントをレンダリングします。
export const Primary = { args: { variant: "primary", label: "Save" } }
export const Danger = { args: { variant: "danger", label: "Delete" } }Metaでデフォルトのargsを指定する
共通のargsをmetaオブジェクトに指定し、個々のストーリーでは異なる部分だけを上書きします。これにより、ストーリーをDRYに保てます。
export default {
component: Button,
args: { label: "Button" }, // default for all stories
}
export const Disabled = { args: { disabled: true } }renderを使ったスロット付きストーリー
スロットのコンテンツを扱う場合は、コンポーネントを使ったテンプレートを返すrender関数を指定します。これにより、argsだけでは表現できないケースにも対応できます。
export const WithIcon = {
render: (args) => ({
components: { Button },
setup() { return { args } },
template: '<Button v-bind="args">⭐ Star</Button>',
}),
}tagsによるドキュメントの自動生成
metaにtags: ["autodocs"]を追加すると、propsとストーリーから、コンポーネントのドキュメントページをStorybookに自動生成させることができます。
export default {
title: "Components/Button",
component: Button,
tags: ["autodocs"],
}autodocsで生成されるもの
autodocsページには、コンポーネントのprops（名前、型、デフォルト値）が一覧表示され、各ストーリーが実際に操作できるサンプルとして表示されます。説明コメントもレンダリングされるため、追加ファイルなしで常に更新される仕様書になります。
確認テスト
ストーリーの記述についての理解度を確認しましょう。
まとめ
コンポーネントストーリーの記述方法を学びました。
- ストーリーはコンポーネントの1つの状態を表し、CSF3ではオブジェクトをエクスポートします。
- デフォルトエクスポートは、
title（サイドバーのパス）とcomponentを持つmetaです。 - 名前付きエクスポートはそれぞれストーリーのバリエーションで、
argsでpropsの値を指定します。 - 共通のargsはmetaに指定し、ストーリーで残りの値を上書きします。スロットには
renderを使用します。 tags: ["autodocs"]でドキュメントページを自動生成できます。
よくある質問
「コンポーネントStoryの作成」レッスンは無料ですか？
はい。「コンポーネントStoryの作成」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「コンポーネントStoryの作成」で何を学びますか？
CSF3形式、default export（title、component）、Storyとしての名前付きexport、args ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「コンポーネントStoryの作成」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。