Vue Academy · レッスン

Vue 3向けStorybookの設定

npx storybook@latest init、.storybook/config、main.js、storiesディレクトリ、起動方法

「Vue 3向けStorybookの設定」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

Storybookとは

Storybookは、UIコンポーネントを分離して構築するためのワークショップです。アプリの外部で各コンポーネントをあらゆる状態でレンダリングし、ドキュメント化して、専用のブラウザーサンドボックスですべて視覚的にテストできます。

Vueと一緒に使う理由

深い階層のページ内でボタンやモーダルを開発するのは時間がかかります。Storybookを使うと、コンポーネントだけを表示して、実行中にpropsを切り替え、視覚的なリグレッションをアプリに取り込む前に検出できます。

1つのコマンドでインストール

既存のVue 3プロジェクトでinitコマンドを実行します。Viteを検出し、依存関係をインストールして、設定とサンプルストーリーの雛形を作成します。

// terminal
// npx storybook@latest init

initで作成されるもの

初期化処理によって、.storybook/設定フォルダー、サンプルの*.stories.*ファイル、npmスクリプトが追加されます。Vue 3 + Viteの構成も自動的に検出されます。

// .storybook/main.ts
// .storybook/preview.ts
// src/stories/*.stories.ts (examples)

main.tsの設定

.storybook/main.tsは、ストーリーの場所、読み込むアドオン、使用するフレームワークを指定する中心的な設定ファイルです。Vue 3 + Viteでは、フレームワークに@storybook/vue3-viteを指定します。

// .storybook/main.ts
import type { StorybookConfig } from "@storybook/vue3-vite"

const config: StorybookConfig = {
  stories: ["../src/**/*.stories.@(js|ts)"],
  addons: ["@storybook/addon-essentials"],
  framework: { name: "@storybook/vue3-vite", options: {} },
}
export default config

storiesのGlob

stories配列では、globパターンを使ってStorybookがストーリーファイルを探す場所を指定します。プロジェクトのフォルダー構成に合うように調整してください。

stories: [
  "../src/**/*.stories.@(js|jsx|ts|tsx)",
]

vue3-viteフレームワーク

フレームワークパッケージは、既存のVite設定にStorybookを接続します。そのため、エイリアス、プラグイン、CSSの処理が実際のアプリのビルドと一致します。

framework: {
  name: "@storybook/vue3-vite",
  options: {},
}

preview.tsファイル

.storybook/preview.tsでは、すべてのストーリーに適用されるグローバル設定を行います。グローバルデコレーター、パラメーター、グローバルCSSのインポートなどを設定できます。

// .storybook/preview.ts
import type { Preview } from "@storybook/vue3"
import "../src/assets/main.css"

const preview: Preview = {
  parameters: {
    controls: { matchers: { color: /color/i } },
  },
}
export default preview

グローバルデコレーターとプラグイン

コンポーネントでルーターやPiniaが必要な場合は、preview.tsのsetupで一度登録します。これにより、すべてのストーリーから利用でき、ストーリーごとの定型コードが不要になります。

// .storybook/preview.ts
import { setup } from "@storybook/vue3"
import { createPinia } from "pinia"

setup((app) => {
  app.use(createPinia())
})

開発サーバーの起動

devコマンドでローカルにStorybookを起動します。ポートは6006が一般的です。

// terminal
// npm run storybook
// or directly:
// storybook dev -p 6006

静的Storybookのビルド

デプロイする場合は、どこでもホストできる静的サイトをビルドします。CIでこのサイトを公開し、デザインレビューに使うのが一般的です。

// terminal
// storybook build
// outputs to storybook-static/

確認テスト

Vue 3向けのStorybook設定についての理解度を確認しましょう。

まとめ

Vue 3向けにStorybookを設定しました。

Storybookはコンポーネントを分離して構築し、ドキュメント化します。
npx storybook@latest initで設定とサンプルの雛形を作成します。
.storybook/main.tsでstoriesのglob、アドオン、@storybook/vue3-viteフレームワークを設定します。
.storybook/preview.tsでグローバル設定（CSS、デコレーター、Piniaなどのプラグイン）を行います。
storybook dev -p 6006で起動し、storybook buildで静的サイトをビルドします。

よくある質問

「Vue 3向けStorybookの設定」レッスンは無料ですか？

はい。「Vue 3向けStorybookの設定」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「Vue 3向けStorybookの設定」で何を学びますか？

npx storybook@latest init、.storybook/config、main.js、storiesディレクトリ、起動方法ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「Vue 3向けStorybookの設定」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る