【学習メモ】storybook + vue

## Vueプロジェクト作成
TypeScriptじゃなくて、JavaScriptを選択。
まあTypeScriptがいいんでしょうが。

```
$ npm create vite@latest
Need to install the following packages:
  create-vite@4.0.0
Ok to proceed? (y) y
✔ Project name: … vue-storybook-material
✔ Select a framework: › Vue
✔ Select a variant: › JavaScript

Scaffolding project in /Users/myname/vue-storybook-material...

Done. Now run:

  cd vue-storybook-material
  npm install
  npm run dev
```

最後の3行を実行してプロジェクトを起動する。
```
  cd vue-storybook-material
  npm install
  npm run dev
```

```bash
  VITE v4.0.1  ready in 504 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
```

> Local:   http://127.0.0.1:5173/
とあるので、`http://127.0.0.1:5173/`にアクセスして、下のような画面が表示されたらOK。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668402/ddffacfe-2cd7-ecb9-263f-492952e67c8f.png)

## storybookをインストールする

```console
$ npx storybook init
Need to install the following packages:
  storybook@6.5.14
Ok to proceed? (y) y
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.

 storybook init - the simplest way to add a Storybook to your project. 

 • Detecting project type. ✓
    Detected vite project, setting builder to @storybook/builder-vite
 • Adding Storybook support to your "Vue 3" app

attention => Storybook now collects completely anonymous telemetry regarding usage.
This information is used to shape Storybook's roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://storybook.js.org/telemetry

npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated sane@4.1.0: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added

added 1629 packages, and audited 1663 packages in 42s

250 packages are looking for funding
  run `npm fund` for details

22 high severity vulnerabilities

To address issues that do not require attention, run:
  npm audit fix

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.
. ✓
 • Preparing to install dependencies. ✓



up to date, audited 1663 packages in 3s

250 packages are looking for funding
  run `npm fund` for details

22 high severity vulnerabilities

To address issues that do not require attention, run:
  npm audit fix

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.
. ✓
🔎 checking possible migrations..
🔎 found a 'npm7' migration:

╭───────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                   │
│   We've detected you are running npm 8.15.0                                                       │
│    which has peer dependency semantics which Storybook is incompatible with.                      │
│                                                                                                   │
│   In order to work with Storybook's package structure, you'll need to run `npm` with the          │
│   `--legacy-peer-deps=true` flag. We can generate an `.npmrc` which will do that automatically.   │
│                                                                                                   │
│   More info: https://github.com/storybookjs/storybook/issues/18298                                │
│                                                                                                   │
╰───────────────────────────────────────────────────────────────────────────────────────────────────╯
✔ Do you want to run the 'npm7' migration on your project? … yes
✅ ran npm7 migration

✅ migration check successfully ran


To run your Storybook, type:

   npm run storybook 

For more information visit: https://storybook.js.org
```

## storybookの実行

```console:storybookの実行
$ npm run storybook

> vue-storybook-material@0.0.0 storybook
> start-storybook -p 6006

info @storybook/vue3 v6.5.14
info 
info => Loading presets

info => Ignoring cached manager due to change in manager config
ℹ ｢wdm｣: wait until bundle finished: 
ℹ ｢wdm｣: Hash: 0d8803a91d059fb38736
Version: webpack 4.46.0
Time: 7499ms
Built at: 2022/12/16 15:19:20
                         Asset      Size        Chunks                    Chunk Names
           0.manager.bundle.js   287 KiB             0  [emitted]  [big]  
           1.manager.bundle.js   128 KiB             1  [emitted]         
           2.manager.bundle.js   892 KiB             2  [emitted]  [big]  
           3.manager.bundle.js  83.9 KiB             3  [emitted]         
           4.manager.bundle.js  15.8 KiB             4  [emitted]         
           5.manager.bundle.js   295 KiB             5  [emitted]  [big]  
           6.manager.bundle.js  1.36 KiB             6  [emitted]         
                    index.html  4.62 KiB                [emitted]         
        main.manager.bundle.js  4.69 KiB          main  [emitted]         main
runtime~main.manager.bundle.js  8.95 KiB  runtime~main  [emitted]         runtime~main
vendors~main.manager.bundle.js  4.57 MiB  vendors~main  [emitted]  [big]  vendors~main
Entrypoint main [big] = runtime~main.manager.bundle.js vendors~main.manager.bundle.js main.manager.bundle.js
[0] multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/manager/index.js ./node_modules/@storybook/addon-links/manager.js ./node_modules/@storybook/addon-docs/manager.js ./node_modules/@storybook/addon-controls/manager.js ./node_modules/@storybook/addon-actions/manager.js ./node_modules/@storybook/addon-backgrounds/manager.js ./node_modules/@storybook/addon-viewport/manager.js ./node_modules/@storybook/addon-toolbars/manager.js ./node_modules/@storybook/addon-measure/manager.js ./node_modules/@storybook/addon-outline/manager.js ./node_modules/@storybook/addon-interactions/manager.js 160 bytes {main} [built]
[./node_modules/@storybook/addon-actions/manager.js] ./node_modules/@storybook/addon-actions/manager.js + 5 modules 96.4 KiB {vendors~main} [built]
    | ./node_modules/@storybook/addon-actions/manager.js 29 bytes [built]
    | ./node_modules/@storybook/addon-actions/dist/esm/manager.js 3.42 KiB [built]
    | ./node_modules/@storybook/addon-actions/dist/esm/containers/ActionLogger/index.js 7.4 KiB [built]
    | ./node_modules/@storybook/addon-actions/dist/esm/components/ActionLogger/index.js 2.97 KiB [built]
    | ./node_modules/react-inspector/dist/es/react-inspector.js 81.7 KiB [built]
    | ./node_modules/@storybook/addon-actions/dist/esm/components/ActionLogger/style.js 793 bytes [built]
[./node_modules/@storybook/addon-backgrounds/manager.js] ./node_modules/@storybook/addon-backgrounds/manager.js + 6 modules 15.2 KiB {vendors~main} [built]
    | ./node_modules/@storybook/addon-backgrounds/manager.js 29 bytes [built]
    | ./node_modules/@storybook/addon-backgrounds/dist/esm/manager.js 826 bytes [built]
    | ./node_modules/@storybook/addon-backgrounds/dist/esm/constants.js 185 bytes [built]
    | ./node_modules/@storybook/addon-backgrounds/dist/esm/containers/BackgroundSelector.js 6.55 KiB [built]
    | ./node_modules/@storybook/addon-backgrounds/dist/esm/containers/GridSelector.js 3.51 KiB [built]
    | ./node_modules/@storybook/addon-backgrounds/dist/esm/components/ColorIcon.js 399 bytes [built]
    | ./node_modules/@storybook/addon-backgrounds/dist/esm/helpers/index.js 3.57 KiB [built]
[./node_modules/@storybook/addon-controls/manager.js] ./node_modules/@storybook/addon-controls/manager.js + 3 modules 6 KiB {vendors~main} [built]
    | ./node_modules/@storybook/addon-controls/manager.js 29 bytes [built]
    | ./node_modules/@storybook/addon-controls/dist/esm/manager.js 1.23 KiB [built]
    | ./node_modules/@storybook/addon-controls/dist/esm/constants.js 74 bytes [built]
    | ./node_modules/@storybook/addon-controls/dist/esm/ControlsPanel.js 4.57 KiB [built]
[./node_modules/@storybook/addon-docs/manager.js] ./node_modules/@storybook/addon-docs/manager.js + 2 modules 1.02 KiB {vendors~main} [built]
    | ./node_modules/@storybook/addon-docs/manager.js 29 bytes [built]
    | ./node_modules/@storybook/addon-docs/dist/esm/manager.js 625 bytes [built]
    | ./node_modules/@storybook/addon-docs/dist/esm/shared.js 380 bytes [built]
[./node_modules/@storybook/addon-interactions/manager.js] ./node_modules/@storybook/addon-interactions/manager.js + 22 modules 110 KiB {vendors~main} [built]
    | ./node_modules/@storybook/addon-interactions/manager.js 29 bytes [built]
    | ./node_modules/@storybook/addon-interactions/dist/esm/manager.js 388 bytes [built]
    | ./node_modules/@storybook/addon-interactions/dist/esm/constants.js 100 bytes [built]
    | ./node_modules/@storybook/addon-interactions/dist/esm/Panel.js 11.3 KiB [built]
    | ./node_modules/@storybook/addon-interactions/dist/esm/components/StatusIcon/StatusIcon.js 1.85 KiB [built]
    | ./node_modules/@storybook/addon-interactions/dist/esm/components/Subnav/Subnav.js 5.2 KiB [built]
    | ./node_modules/@storybook/addon-interactions/dist/esm/components/Interaction/Interaction.js 5.7 KiB [built]
    | ./node_modules/@storybook/instrumenter/dist/esm/types.js 221 bytes [built]
    | ./node_modules/@storybook/instrumenter/dist/esm/instrumenter.js 33.8 KiB [built]
    | ./node_modules/@storybook/addon-interactions/dist/esm/theme.js 215 bytes [built]
    | ./node_modules/@storybook/addon-interactions/dist/esm/components/StatusBadge/StatusBadge.js 1.79 KiB [built]
    | ./node_modules/@storybook/addon-interactions/dist/esm/components/MethodCall.js 19.2 KiB [built]
    | ./node_modules/@storybook/addon-interactions/dist/esm/components/MatcherResult.js 7.49 KiB [built]
    | ./node_modules/@devtools-ds/object-inspector/dist/esm/index.js 103 bytes [built]
    | ./node_modules/@devtools-ds/object-inspector/dist/esm/ObjectInspector.js 1.37 KiB [built]
    |     + 8 hidden modules
[./node_modules/@storybook/addon-links/manager.js] ./node_modules/@storybook/addon-links/manager.js + 2 modules 662 bytes {vendors~main} [built]
    | ./node_modules/@storybook/addon-links/manager.js 29 bytes [built]
    | ./node_modules/@storybook/addon-links/dist/esm/manager.js 398 bytes [built]
    | ./node_modules/@storybook/addon-links/dist/esm/constants.js 225 bytes [built]
[./node_modules/@storybook/addon-measure/manager.js] ./node_modules/@storybook/addon-measure/manager.js + 3 modules 3.99 KiB {vendors~main} [built]
    | ./node_modules/@storybook/addon-measure/manager.js 29 bytes [built]
    | ./node_modules/@storybook/addon-measure/dist/esm/manager.js 484 bytes [built]
    | ./node_modules/@storybook/addon-measure/dist/esm/constants.js 290 bytes [built]
    | ./node_modules/@storybook/addon-measure/dist/esm/Tool.js 3.12 KiB [built]
[./node_modules/@storybook/addon-outline/manager.js] ./node_modules/@storybook/addon-outline/manager.js + 3 modules 4.15 KiB {vendors~main} [built]
    | ./node_modules/@storybook/addon-outline/manager.js 29 bytes [built]
    | ./node_modules/@storybook/addon-outline/dist/esm/manager.js 626 bytes [built]
    | ./node_modules/@storybook/addon-outline/dist/esm/constants.js 76 bytes [built]
    | ./node_modules/@storybook/addon-outline/dist/esm/OutlineSelector.js 3.35 KiB [built]
[./node_modules/@storybook/addon-toolbars/manager.js] ./node_modules/@storybook/addon-toolbars/manager.js + 11 modules 19.5 KiB {vendors~main} [built]
    | ./node_modules/@storybook/addon-toolbars/manager.js 29 bytes [built]
    | ./node_modules/@storybook/addon-toolbars/dist/esm/manager.js 467 bytes [built]
    | ./node_modules/@storybook/addon-toolbars/dist/esm/constants.js 76 bytes [built]
    | ./node_modules/@storybook/addon-toolbars/dist/esm/components/ToolbarManager.js 1.44 KiB [built]
    | ./node_modules/@storybook/addon-toolbars/dist/esm/components/ToolbarMenuList.js 5.42 KiB [built]
    | ./node_modules/@storybook/addon-toolbars/dist/esm/utils/normalize-toolbar-arg-type.js 1.05 KiB [built]
    | ./node_modules/@storybook/addon-toolbars/dist/esm/components/ToolbarMenuButton.js 625 bytes [built]
    | ./node_modules/@storybook/addon-toolbars/dist/esm/hoc/withKeyboardCycle.js 5.09 KiB [built]
    | ./node_modules/@storybook/addon-toolbars/dist/esm/utils/get-selected.js 1000 bytes [built]
    | ./node_modules/@storybook/addon-toolbars/dist/esm/components/ToolbarMenuListItem.js 979 bytes [built]
    | ./node_modules/@storybook/addon-toolbars/dist/esm/utils/create-cycle-value-array.js 573 bytes [built]
    | ./node_modules/@storybook/addon-toolbars/dist/esm/utils/register-shortcuts.js 2.69 KiB [built]
[./node_modules/@storybook/addon-viewport/manager.js] ./node_modules/@storybook/addon-viewport/manager.js + 5 modules 18.8 KiB {vendors~main} [built]
    | ./node_modules/@storybook/addon-viewport/manager.js 29 bytes [built]
    | ./node_modules/@storybook/addon-viewport/dist/esm/manager.js 514 bytes [built]
    | ./node_modules/@storybook/addon-viewport/dist/esm/constants.js 316 bytes [built]
    | ./node_modules/@storybook/addon-viewport/dist/esm/Tool.js 11 KiB [built]
    | ./node_modules/@storybook/addon-viewport/dist/esm/shortcuts.js 3.81 KiB [built]
    | ./node_modules/@storybook/addon-viewport/dist/esm/defaults.js 2.98 KiB [built]
[./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js] 97 bytes {vendors~main} [built]
[./node_modules/@storybook/core-client/dist/esm/manager/index.js] ./node_modules/@storybook/core-client/dist/esm/manager/index.js + 4 modules 22.9 KiB {vendors~main} [built]
    | ./node_modules/@storybook/core-client/dist/esm/manager/index.js 335 bytes [built]
    | ./node_modules/@storybook/core-client/dist/esm/manager/provider.js 5.17 KiB [built]
    | ./node_modules/@storybook/core-client/dist/esm/manager/conditional-polyfills.js 762 bytes [built]
    | ./node_modules/@storybook/channel-postmessage/dist/esm/index.js 13.2 KiB [built]
    | ./node_modules/@storybook/channel-websocket/dist/esm/index.js 3.26 KiB [built]
[./node_modules/@storybook/ui/dist/esm/index.js] 498 KiB {vendors~main} [built]
[./node_modules/airbnb-js-shims/index.js] 40 bytes {vendors~main} [built]
    + 885 hidden modules
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.31 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core-common/templates/index.ejs] 2.03 KiB {HtmlWebpackPlugin_0} [built]
ℹ ｢wdm｣: Compiled successfully.
╭──────────────────────────────────────────────────╮
│                                                  │
│   Storybook 6.5.14 for Vue3 started              │
│   8.73 s for manager and 1.47 s for preview      │
│                                                  │
│    Local:            http://localhost:6006/      │
│    On your network:  http://192.168.0.6:6006/    │
│                                                  │
╰──────────────────────────────────────────────────╯
15:19:38 [vite] ✨ new dependencies optimized: vue/dist/vue.esm-bundler.js
15:19:38 [vite] ✨ optimized dependencies changed. reloading
```

正常に終了すればブラウザが勝手に立ち上がります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668402/c93d0c9c-2e7b-aff0-48fe-3c78f81060a9.png)

## コンポーネントを作成する

`src/components/Card.vue`を作成して以下のように記述。
```vue:src/components/Card.vue
<template>
  <div class="card">
    <h4 class="title">{{ title }}</h4>
    <p class="secondary-text">{{ subText }}</p>
  </div>
</template>

<script>
export default {
  name: "Card",
  props: {
    title: String,
    subText: String,
  },
};
</script>
<style>
.card {
  background-color: #fff;
  border-radius: 0.2rem;
  box-shadow: rgb(150, 150, 150) 0px 1px 5px;
  width: 350px;
  padding: 0.8rem;
}
</style>
```

`src/components/Card.stories.js`を作成して以下のように記述。
フォーマットはstorybookの公式ドキュメントから。
https://storybook.js.org/docs/vue/get-started/setup

```javascript:src/components/Card.stories.js
// Card.stories.js

import Card from "./Card.vue";

//👇 This default export determines where your story goes in the story list
export default {
  /* 👇 The title prop is optional.
   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
  title: "Card",
  component: Card,
};

//👇 We create a “template” of how args map to rendering
const Template = (args) => ({
  components: { Card },
  setup() {
    //👇 The args will now be passed down to the template
    return { args };
  },
  template: '<Card v-bind="args"/>',
});

export const FirstStory = Template.bind({});

// 作成したコンポーネントのPropsのサンプル値を渡す。
FirstStory.args = {
  /* 👇 The args you need here will depend on your component */
  title: "Primary",
  subText: "Secondary",
};
```

すると、、、

## ブラウザで確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668402/643e1329-f452-2823-a6ae-1aab51a5537f.png)

Propsの値はブラウザで変更できるよう。
下の方に入力欄があるので好きな値を渡すこともできる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668402/95be9cbb-4a23-21cb-74a0-3797cadd6e97.png)

これは確かに便利！！

アトミックデザインとかの場合、organismsとかでいろんなコンポーネントを読み込むと思うけど、そういう時はどうなる？？って既に気になってますが、まあいい感じにできるんでしょうね！！