Storybook公式アドオンをまとめてみた

# 記事のターゲット

基本的に私です

- Storybookを触ってみたは良いけど公式アドオンの選定に迷っている人
- 公式アドオン各々の利点がわかっていない人
- フロントエンド初心者だけどStorybook知ってそうな雰囲気出してドヤりたい人

# [Storybook](https://storybook.js.org/) とは

UIコンポーネントを分離して開発するためのオープンソースツールで、Web上のサンドボックス環境を提供してくれます。
ローカルホストで立ち上げ、ブラウザ上で細かな動作確認を行えるので細かいコンポーネント単位で開発がしやすくなります。
また、サンドボックスではUIコンポーネントのカタログを検索・閲覧する機能を提供することでUIの再利用性を高めることができます。
ビジネスロジックに寄らないコンポーネント実装やMockingもお手軽なのでAtomicDesignベースの開発では必需品かもしれません。

ただし、サンドボックス環境も開発者の手でコンポーネントの配置することが前提なので**メンテナンスが滞りなく行われる**必要があり、この煩わしさから煙たがられている側面もあります。（いつの時代も問題は人から…）

このメンテナンスの煩わしさを少しシステムで解消できるようなアドオンも含めて公式アドオンを見ていきます。

# [Storybook Official addons](https://storybook.js.org/addons/)

Storybookでは公式のアドオンを指定しており、今回はこれらを簡単に見ていきます
（2020/11/27時点の情報）

**Writing Docs**
- [Docs](https://storybook.js.org/docs/react/writing-docs/introduction): Document component usage and properties in Markdown

**Essential addons**
- [Controls](https://storybook.js.org/docs/react/essentials/controls): Interact with component inputs dynamically in the Storybook UI
- [Actions](https://storybook.js.org/docs/react/essentials/actions): Get UI feedback when an action is performed on an interactive element.
- [Viewport](https://storybook.js.org/docs/react/essentials/viewport): Build responsive components by adjusting Storybook’s viewport size and orientation
- [Backgrounds](https://storybook.js.org/docs/react/essentials/backgrounds): Switch backgrounds to view components in different settings
- [Toolbars](https://storybook.js.org/docs/react/essentials/toolbars-and-globals): Create your own toolbar items that control story rendering.

**Other**
- [Source](https://github.com/storybookjs/storybook/tree/master/addons/storysource): View a story’s source code to see how it works and paste into your app.
- [Storyshots](https://github.com/storybookjs/storybook/tree/master/addons/storyshots): Take a code snapshot of every story automatically with Jest
- [Accessibility](https://github.com/storybookjs/storybook/tree/master/addons/a11y): Test component compliance with web accessibility standards
- [Console](https://github.com/storybookjs/storybook-addon-console): Show console output like logs, errors, and warnings in the Storybook
- [Links](https://github.com/storybookjs/storybook/tree/master/addons/links): Link stories together to build demos and prototypes with your UI components

※ 独断と偏見で必須だろうものをレーティングで表現しています

# Writing Docs

## [必須度： ★★★☆☆] [Docs](https://storybook.js.org/docs/react/writing-docs/introduction)

[Github](https://github.com/storybookjs/storybook/tree/master/addons/docs)

> Document component usage and properties in Markdown

「Markdownでコンポーネントの使用法とプロパティを文書化する」

UIコンポーネントのカタログに対してマークダウンの説明を付加するアドオンです。
マークダウン界のJSXである[MDX](https://github.com/mdx-js/mdx)形式で記述できるのが大きな特徴です。
これによりマークダウン上にコンポーネントを配置し、ドキュメントの組み立てができて気持ちよくなれます。

実際の動作イメージは公式のイントロダクションを見るとわかりやすい
doc: https://storybook.js.org/docs/react/writing-docs/introduction

# **Essential addons**

## [必須度： ★★★★★] [Controls](https://storybook.js.org/docs/react/essentials/controls)

[Github](https://github.com/storybookjs/storybook/tree/next/addons/controls)

> Interact with component inputs dynamically in the Storybook UI

「UIでコンポーネント入力を動的に操作する」

文字通りUIの属性（主にprops）を操作してUIの状態変化をサンドボックスで見ることができます。
![control.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66063/ac929e3c-50ab-8eab-b6e6-d3c187b6cd42.gif)
指定の引数を指定し、UIで操作できるようにします。
指定できる引数型も豊富で配列/Bool/数値はもちろんenumやJSONオブジェクトの指定もできます。
数値はMIN/MAXの指定他、ステップ指定もできるのでUI仕様にあった属性を表現できるので便利です。
参考：https://storybook.js.org/docs/react/essentials/controls#annotation

適当に作ったコンポーネントの属性を視覚的にチェックできるのでコンポーネント開発がしやすくなります。
また、コンポーネントの抱える属性を列挙する機能もありプロパティドキュメントとしての役割も担ってくれます。

## [必須度： ★★★★★] [Actions](https://storybook.js.org/docs/react/essentials/actions)

[Github](https://github.com/storybookjs/storybook/tree/next/addons/actions)

> Get UI feedback when an action is performed on an interactive element.

「インタラクティブ要素でアクションが実行されたときにUIフィードバックを取得します」

イベントハンドラー（コールバック）引数によって受信されたデータを表示してくれます。
![action.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66063/14cd7dbb-3719-0716-6b9d-1358e0727fab.gif)
デザイン面というより、ボタンなどの挙動確認で使うのに便利なアドオンです。

## [必須度： ★★★★☆] [Viewport](https://storybook.js.org/docs/react/essentials/viewport)

[Github](https://github.com/storybookjs/storybook/tree/next/addons/viewport)

> Build responsive components by adjusting Storybook’s viewport size and orientation

「ビューポートのサイズと向きを調整して、レスポンシブコンポーネントを構築します」

サンドボックス上のUIに対してビューポートのサイズと向きを変更して確認ができます。
（実際にはサンドボックス上のiframeサイズを変更することでビューポート変更をしているようです）
![viewport.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66063/fca857bc-e735-b55b-ae00-432ae28f8ca1.gif)
アドオンには一連のビューポートサイズが一通り入っており、開発者側でデバイス情報を追加して使用することもできます。
レスポンシブデザインやスマホ対応が基本になっているご時世なので有用なアドオンです。

## [必須度： ★★☆☆☆] [Backgrounds](https://storybook.js.org/docs/react/essentials/backgrounds)

[Github](https://github.com/storybookjs/storybook/tree/next/addons/backgrounds)

> Switch backgrounds to view components in different settings

「背景を切り替えて、さまざまな設定でコンポーネントを表示します」

サンドボックスのUIでレンダリングされる背景を調整できます。
![background.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66063/bfefdae3-5ebe-0b2d-390b-fa1aa512af44.gif)

もちろん背景色の設定を開発者で変更することもできます。
さらに、グリッド表示も行えるのでコンポーネントを組み合わせたページで整列状態を確認することもできます。

※ 公式には「必須のアドオン！」と謳っていますが、使用は限定的かなと感じています</small>

## [必須度： ★☆☆☆☆] [Toolbars](https://storybook.js.org/docs/react/essentials/toolbars-and-globals)

[Github](https://github.com/storybookjs/storybook/tree/next/addons/toolbars)

> Create your own toolbar items that control story rendering

「レンダリングを制御する独自のツールバーアイテムを作成する」

文字通り、サンドボックスのツールバーをカスタマイズすることができます。
![toolbar.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66063/9abae5d6-790f-aa20-4d2f-4a21bb992e3e.gif)
多言語対応や明確なユースケースを表現したい場合に使えるかもしれません。
かなりカスタマイズ性が高く、何でもできそうですが初期段階で必須にすることはなさそうです。

# Other

## [必須度： ★★☆☆☆] [Source](https://github.com/storybookjs/storybook/tree/master/addons/storysource)

[Github](https://github.com/storybookjs/storybook/tree/next/addons/storysource)

> View a story’s source code to see how it works and paste into your app.

「ソースコードを表示して、ストーリーがどのように機能するかを確認し、アプリに貼り付けます」

なんの捻りもなく、そのコンポーネントカタログがどのようなソースコードで記述しているかを表示できます。
![source.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66063/dfc158e2-e519-8e8e-711e-5d78e3f279a2.gif)
用途感がつかめていませんが、「あれ？このカタログなんかおかしいな」と思った際にいちいちソースコードを見に行かなくても良いという点が強みかと思います。
主に実装しているときよりレビューアーが見るコストを下げるために導入するというのが良さそうです。

## [必須度： ★★★★★] [Storyshots](https://storybook.js.org/docs/react/workflows/snapshot-testing)

[Github](https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots)

> Take a code snapshot of every story automatically with Jest

「Jestを使用して、すべてのストーリーのコードスナップショットを自動的に作成します」

JavascriptのテストツールであるJestを使ってスナップショットを取得します。
UIコンポーネント毎にスナップショットを記録し、コード変更の際にUI変更を検知できるようにするためのアドオンです。

Storybookを元にしたテストを走らせるのでカジュアルにスナップショットテストを導入できるのが魅力の一つです。
このアドオンの副次効果としてスナップショットテストのために**Storybookの更新がMustになる**点が挙げられます。
（Storybookが更新されずに枯れてしまうという事象を間接的に回避できます）

## [必須度： ★★☆☆☆] [Accessibility](https://github.com/storybookjs/storybook/tree/master/addons/a11y)

[Github](https://github.com/storybookjs/storybook/tree/master/addons/a11y)

> Test component compliance with web accessibility standards

「コンポーネントがWebアクセシビリティ標準に準拠しているかどうかをテストします」

コンピュータアクセシビリティのaccessibilityをもじった`a{11文字}(ccessibilit)y`=>`a11y`で表現されるWebアクセシビリティ標準のチェックができます。
準拠しているのが望ましいですが、それなりにコストが高く根本のデザインなどにも関わるので導入しているケースは多くなさそうです。
しかし、知っていて損のないアドオンかなと思います。

## [必須度： ★★★★☆] [Console](https://github.com/storybookjs/storybook-addon-console)

[Github](https://github.com/storybookjs/storybook-addon-console)

> Show console output like logs, errors, and warnings in the Storybook

「ログ、エラー、警告などのコンソール出力を表示する」

コンソールに出力される情報をサンドボックス上で確認することができます。
（[デモ](https://storybookjs.github.io/storybook-addon-console/?path=/story/welcome--to-storybook-addon-console)があるので確認するとわかりやすいです）

Actionsのアドオンを入れるのであればセットで入れてデバックしやすいようにするのが良いです。

## [必須度： ★★★★☆] [Links](https://github.com/storybookjs/storybook/tree/master/addons/links)

[Github](https://github.com/storybookjs/storybook/tree/master/addons/links)

> Link stories together to build demos and prototypes with your UI components

「ストーリーをリンクして、UIコンポーネントを使用してデモとプロトタイプを作成します」

Storybookのサンドボックスで相互に移動できるリンクを設置することができます。
Linksは実際のWebページを作る前に画面のプロトタイプ作成が容易になるので便利です。
デザイナー不在のプロジェクトでデモやプロトタイプをもとに開発をするのであれば必須になりそうなアドオンです。

# まとめ

基本的に公式アドオンと呼ばれているものは入れておいて損がないものなのかなと感じます。
他にも様々なコミュニティアドオンもあり、入れることで更に便利さが増していくと思います。
適切なアドオン選択で良いStorybookライフを！