このスクラップではStorybookを導入する

Storybook

https://storybook.js.org/

UIコンポーネントを単独で動かすことができ
VueやReactなどのコンポーネント指向のフレームワーク(ライブラリ？)を用いた
開発を助けるためのツールという認識。

できること - 解決できること (私見)

コンポーネントを単独で動かすことができる
- 利用元のコンポーネントを必要としない
- 早い段階で確認ができ修正を行うことができる
現状存在しているコンポーネントの一覧を確認することができる
- 同じようなコンポーネントの作成を防げる

考慮しなければいけない(?)こと

(言い方が悪いですが)「Story」を作らなければいけない

最初のうちは作成や修正を行っていたが
いつのまにか現状の実装とStoryの間に剥離がうまれ
全然機能しなくなってしまった。

メリット云々を重ねたところでやることが増えることには変わりないので
開発のフローに負担なく組み込むことができるようにするのが理想である。

とはいえ、導入してみないことにはその後の課題のことは語れないので導入を行っていく。

Zero-config setupと書かれていたので、以下コマンドをとりあえず実行

npx sb init

1分くらいで完了。

コンソールの内容を抜粋

Vite + Vue3と勝手に認識してくれているみたい
後述するが、TSではなくJSでできていた...
これは初期設定時のコマンドで指定できたりするのだろうか...？

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

eslintPluginについて。
設定ファイルがjs or cjsじゃないので手動で設定してくれとのこと。
自分はYAMLのため失敗したので設定します。

❌ error when running eslintPlugin migration:
⚠️ The plugin was successfuly installed but failed to configure.

Found an .eslintrc config file with an unsupported automigration format: yml.
Supported formats for automigration are: js, cjs.

Please refer to https://github.com/storybookjs/eslint-plugin-storybook#usage to finish setting up the plugin manually.

npm7からpeerDependenciesに対しての挙動が変更することになった影響で
npm7以前のnpmでは利用ができないpackage-lock.jsonができてしまっているので
それを回避するかどうかを聞かれている、という認識(違っていたらごめんなさい...)

We've detected you are running npm 8.19.1 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

該当のissueは以下
閉じられている + コメントされているが回避策であって解決はしていないように思える...

自分としてはnpm8系を利用していくのでこの対応はしないようにした。
実運用時もnodeとnpmのverの指定と--engine-strictを利用すれば守ることができるはず。。

satjopg

生成物の確認

追加・変更された箇所を見ていく。
VScodeの表示としては以下のようになっている。
(緑が新規追加されたファイルやディレクトリ, オレンジが修正されたファイル)

`.storybook`について

これはstorybookの設定に関係するファイルが生成されている。
これからも触ることになるのはmain.cjsと思われる。

main.cjsの自動生成後の中身

.storybook/main.cjs

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions"
  ],
  "framework": "@storybook/vue3",
  "core": {
    "builder": "@storybook/builder-vite"
  },
  "features": {
    "storyStoreV7": true
  }
}

addonがすでに追加されている。
essentialsはその名のとおりですがStorybookを利用する際に必須と言われているaddonをまとめて導入できるもの。
linksはコンポーネント間の遷移を再現できるもの。
interactionsはtesting-libraryを用いて書かれたテストをコンポーネントを表示しながら動かしデバッグできるもの。
いずれも公式ドキュメントがあるのでいかに載せておく。
※ 現段階でまだ利用できていないので違ったらごめんなさい + 試したタイミングで直します

storyStoreV7ってなにと思ったら起動時にすべてのストーリーを読み込むのではなく
必要なタイミングでロードをして表示してくれるようになるらしい。
内容については公式ドキュメントに書かれていました。

satjopg

essentialsについては以下の記事のまとめが見やすかったです、ありがとうございます！

satjopg

`package.json`について

以下追加されていた
npm run storybookでローカル環境でStorybookの確認ができる
npm run build-storybookでStorybookを静的サイトにデプロイできるようにビルドすることができる
公式にはChromaticを利用して変更されたときにチームでレビューができるようにするやり方が紹介されています。

日本語での紹介記事、とても参考になりました。ありがとうございます！

package.json

{
  "scripts": {
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
  },
  "devDependencies": {
+    "@babel/core": "^7.19.0",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-interactions": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
+    "@storybook/builder-vite": "^0.2.2",
+    "@storybook/testing-library": "^0.0.13",
+    "@storybook/vue3": "^6.5.10",
+    "babel-loader": "^8.2.5",
+    "eslint-plugin-storybook": "^0.6.4",
+    "vue-loader": "^16.8.3",
  }
}

`src/stories/**`について

Storybookのデモ用のページとコンポーネントが追加されている。
JSの例ではなくTSにできたりするのかな...
なにはともあれ初心者にとって参考になるのでとてもありがたい。

satjopg

運用については別記事にてまとめる。
Storybook自体は動くようになったのでclose

Storybook

できること - 解決できること (私見)

考慮しなければいけない(?)こと

生成物の確認

.storybookについて

package.jsonについて

src/stories/**について

`.storybook`について

`package.json`について

`src/stories/**`について