---
title: storybook
tags: vue3,vuetify,Jest
description: View the slide with "Slide Mode".
---
---

## storybookの紹介（できる事）

Storybook は、UIコンポーネントの構築、テスト、表示を行う開発環境です。Vue 3 プロジェクトに対して、Storybook は次のような機能を提供します：

- コンポーネントの展示とドキュメンテーション：Storybook を使用すると、各 Vue コンポーネントを独立して開発・表示できます。ユーザーフレンドリーなインタラクティブなインターフェースを提供し、他のチームメンバーや開発者がコンポーネントの使用方法やドキュメントを閲覧できるようにします。

- インタラクティブな開発とテスト：コンポーネントをインタラクティブにテストできます。異なる状態でコンポーネントの効果を確認し、問題をより簡単に発見・解決できます。

- チーム間の共有：Vuetify コンポーネントの封装に対して、Storybook はその使い方と特徴を簡単に表示できるため、他のチームメンバーがそれらのコンポーネントをより理解しやすくなります。

## 本プロジェクトで使う予定の機能
1. ドキュメント作成 Docs
2. コンポーネント Showcase：Vuetify コンポーネントを Storybook に表示し、異なる状態でのインタラクティブなテストを可能にします。
3. 各プラグイン（拡張機能）(addons):

Actions
Controls
Accessibility
Viewport
Storyshots

* (説明)-
* Actions：Actions プラグインを使用すると、コンポーネントのイベントをキャプチャし、Storybook 内でそれらのトリガー状況を表示できます。
* Controls：Controls プラグインを使用すると、Storybook UI からコンポーネントの Props 値を簡単に調整し、異なるコンポーネント状態を素早くテストできます。
* Accessibility：Accessibility プラグインを使用してコンポーネントのアクセシビリティをチェックできます。
* Viewport：Viewport プラグインを使用すると、異なるビューポートサイズをシミュレートし、コンポーネントのレスポンシブ効果をテストできます。
<!-- * Storyshots：コンポーネントのスナップショットテストを実施したい場合、Storyshots プラグインを使用できます。 -->

* 補足: Accessibility:
* Accessibilityプラグインは、コンポーネントがWCAG2.1のアクセシビリティ要件を満たしているかどうかを確認するのに役立ちます。プラグインは、コンポーネントの構造、セマンティクス、および属性をチェックし、コンポーネントのアクセシビリティを改善するためのアドバイスを提供してくれます。
* Accessibility tests for accessibility-
[https://youtu.be/rNLL0SICr9w](https://https://youtu.be/rNLL0SICr9w)

###### プラグインについて詳しくはこちらまでご参考ください。[https://storybook.js.org/docs/7.0/vue/essentials/controls](https://storybook.js.org/docs/7.0/vue/essentials/controls)
###### 最新のインストール方法（npx storybook init）により、上記の Essential（エッセンシャル）プラグイン（@storybook/addon-essentials）は既にデフォルトでインストールおよび設定されていますので、これらのプラグインを手動で再度インストールする必要はありません。
---

## vue3導入手順
###### vue3ファイルに移動
###### storybook導入：

storybook存在しない場合-> npx storybook init
storybookすでに存在する場合-> npm run storybook

.storybookファイルの中にあるpreview.tsをこのようなコードに書き換えてください

import type { Preview } from "@storybook/vue3";
// .storybook/preview.js
import { setup } from "@storybook/vue3";
import { registerPlugins } from "../src/plugins";

setup((app) => {
  // Registers your app's plugins into Storybook
  registerPlugins(app);
});
const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};

export default preview;

この後storybookサーバーを再起動します。

npm run storybook

以上の手順を実行すると、サンプルを見る事ができます。


---
##### 以下はコンポーネントを操作するストーリの手順です。
プロジェクト内からコンポーネントを選んで、それに対応する .stories.js または .stories.ts ファイルを作成してみてください(src/stories/?????.stories.ts)。以下のような形になるかもしれません：

// あなたのコンポーネント.stories.ts
// EX: YourComponent.stories.ts

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

import YourComponent from '@/components/YourComponent.vue';

const meta: Meta<typeof YourComponent> = {
  component: YourComponent,
};

//👇 このデフォルトエクスポートは、ストーリーリスト内であなたのストーリーが表示される位置を決定します。
export default meta;
type Story = StoryObj<typeof YourComponent>;

/*
 *👇 レンダー関数は、コンポーネントのレンダリング方法を制御するためのフレームワーク固有の機能です。

https://storybook.js.org/docs/vue/api/csf
を参照して、レンダー関数の使い方を学ぶことができます。
 */
export const Primary: Story = {
  render: (args) => ({
    components: { YourComponent },
    setup() {
      return { args };
    },
    template: '<YourComponent v-bind="args" />',
  }),
  args: {
    //👇 The args you need here will depend on your component
  },
};

コンポネントのvueファイルにこのような設定すればコンポネントのストーリが動けます

<template>
  <button type="button" :class="classes" @click="onClick" :style="style">{{ label }} </button>
</template>

<script lang="ts" setup>
import './button.css';
import { computed } from 'vue';

const props = withDefaults(defineProps<{
  /**
   * The label of the button
   */
  label: string,
  /**
   * primary or secondary button
   */
  primary?: boolean,
  /**
   * size of the button
   */
  size?: 'small' | 'medium' | 'large',
  /**
   * background color of the button
   */
  backgroundColor?: string,

}>(), { primary: false });

const emit = defineEmits<{
  (e: 'click', id: number): void;
}>();

const classes = computed(() => ({
  'storybook-button': true,
  'storybook-button--primary': props.primary,
  'storybook-button--secondary': !props.primary,
  [`storybook-button--${props.size || 'medium'}`]: true,
}));

const style = computed(() => ({
  backgroundColor: props.backgroundColor
}));

const onClick = () => {
  emit("click", 1)
};

</script>

###### セットアップ詳しくはこちらまでご参照ください
[https://storybook.js.org/docs/7.0/vue/get-started/whats-a-story](https://storybook.js.org/docs/7.0/vue/get-started/whats-a-story)

---

## vuetify導入手順

内容多くなるため、こちらまでご参照ください
[https://storybook.js.org/recipes/vuetify](https://storybook.js.org/recipes/vuetify)

---

### テスト

jest?

---

### 課題　質問

---

### 比較-storybookあるかなしかの比較について
###### Storybook文書化を使用することで、コンポーネントの特性をより包括的に表示し、他の人がコンポーネントの使い方と動作をより深く理解できるようになります。 最終的なStorybookの利用の選択は、プロジェクトの要件、チームの技術的な能力、および利点と欠点のバランスによって決まります。より強力なコンポーネントの展示と文書化機能、およびインタラクティブな開発とテストサポートが必要な場合は、Storybookは良い選択肢です。プロジェクトの規模が小さく、文書化の要件が低い場合、またはチームメンバーがStorybookに慣れていない場合は、Markdown文書化も選択肢として考えられます。

##### 共有方法:
A:ローカルでプロジェクトを起動し、localhostで閲覧する
B:チームメンバーがStorybookページを閲覧できるようにするためには、Storybookの設定ファイルと関連するコードを一緒にAzure DevOpsのコードリポジトリにコミットし、継続的インテグレーションと継続的デプロイ（CI/CD）ツールを使用してStorybookページを自動的にデプロイすることができます。

###### 以下は、Azure DevOpsにStorybookページをデプロイする手順のいくつかです：

###### Storybookの関連するコードと設定ファイルをAzure DevOpsのコードリポジトリにコミットすることを確認します。

###### Azure Pipelinesを作成します：Azure DevOps上で新しいパイプラインを作成し、コードがメインブランチまたは指定されたブランチにコミットされた際に自動ビルドがトリガーされるようにパイプラインを設定します。

###### パイプライン内でビルドタスクを設定します：パイプラインにビルドタスクを追加して依存関係をインストールし、Storybookアプリをビルドし、静的リソースを生成します。これらのタスクを実行するためにnpmやyarnコマンドを使用できます。

###### デプロイタスクを設定します：パイプラインにデプロイタスクを追加し、ビルドされた静的リソースをAzure DevOpsの静的ウェブサイトサービスまたはAzure Blob Storageなどの静的ファイルをホストするサービスにデプロイします。

###### 自動デプロイをトリガーします：コードをコードリポジトリに指定されたブランチにコミットすると、Azure Pipelinesは自動的にビルドとデプロイのタスクをトリガーし、Storybookページを指定された場所にデプロイします。

###### Storybookのリンクを共有します：Storybookページがデプロイされたら、Storybookページのリンクを取得し、他のチームメンバーと共有します。彼らはそのリンクにアクセスするだけで、ブラウザでStorybookページを閲覧して使用することができます。

###### これらの手順を実行することで、StorybookページをAzure DevOpsにデプロイし、他のチームメンバーとStorybookページのリンクを共有して、プロジェクトのコンポーネントをよりよく理解し、開発することができます。
######

---

#### おおよその学習時間の参考です：
学習コスト、保守コストーStorybookに慣れていない場合、追加の時間と労力が必要になるかもしれません。

基本機能の理解（2-4時間）：Storybookの基本的なコンセプト、ストーリー（stories）の作成方法、および基本的な設定についての初歩的な理解。

- Vue 3の統合（2-4時間）：Vue 3プロジェクトをStorybookと統合し、Storybookの環境を設定して実行する方法についての理解。

- ストーリーの作成（4-8時間）：異なるVue 3コンポーネントのストーリーを作成し、それらのコンポーネントが異なる状態でどのように表示されるかを示す方法についての学習。

- ドキュメントの作成（2-4時間）：Storybookにコンポーネントのドキュメントを追加する方法について学び、他のチームメンバーがコンポーネントの使用方法を理解するのに役立つようにする方法についての理解。

- その他の機能（2-4時間）：Viewportツール、スナップショットテストなど、Storybookのその他の機能についての理解。

全体的に、約8-16時間の学習を通じて、ほとんどのStorybookの機能に慣れ、Vue 3プロジェクトで実際に使用することができるようになるはずです

---

### 以上です! :tada::sheep:

<!-- 参考文献

- youtube:【StoryBook入門】
[https://www.youtube.com/watch?v=D52gjW9T3YM](https://www.youtube.com/watch?v=D52gjW9T3YM)
{%youtube D52gjW9T3YM %} -->

---
- article: