Chapter 06

[アドオン編] Essential addons について

shingo.sasaki
shingo.sasaki
2020.11.04に更新

Essential addons とは

前章までの準備編 / 基本編 で、 Storybook を運用していく基盤が整いました。

ここからは、アドオン(addon) を使うことで、 Storybook の標準機能を拡張し、より高度で便利なUIコンポーネントのカタログの作成を実現していきます。

アドオンには、 Storybook 公式が提供するものから、サードパーティ製まで様々あり、必要に応じて追加パッケージをインストールすることができます。

Storybook 6 からは、 その中でも文字通り必須と言える、6つのアドオンが、 Essential addons という名前でまとめてパッケージ化されるようになりましたので、本書ではそれらについて扱っていきます。

Essential addons は、本書の手順の通りに npx sb init 経由でセットアップをしていれば既にインストールされていますが、そうでない場合は手動でパッケージの追加してください。

yarn add -D @storybook/addon-essentials

Essential addons には以下のアドオンが内包されています。

アドオン名 機能
Docs ストーリー定義を元に、ドキュメントを自動生成する
Controls コンポーネントに対するパラメータ(≒props)をGUI上で動的に切り替える
Actions コンポーネントから発火されたイベント(≒emit)をロギングする
Viewport 様々な画面サイズでストーリーを描画できるようにする
Backgrounds 背景色を変更する
Toolbars & globals グローバルパラメータの埋め込みと、それを設定するツールバーを作成する

Toolbars & globals のみ、デコレータという概念を前提とするので、アドオン編より後の章で扱います

Essential addons を使用する

前項の通り、 Essential addons は、6種類のアドオンを内包しています。その中でどれを(または全て)使用するかの宣言を、 .storybook/main.js の、 addons フィールドに記述します。

.storybook/main.js
 module.exports = {
   stories: ['../src/components/**/*.stories.js'],
+  addons: ['@storybook/addon-essentials'],
   webpackFinal: config => {
     config.module.rules.push({
       test: /\.scss$/,

Storybookを立ち上げ直すと、以下のように、タブやツールバー、アドオンパネルが追加されていることが確認できます。

なお、以下のように options フィールドを指定することで、個別にアドオンを無効化することができます。以下の場合は Controls addon のみを有効とし、他は無効になります。

.storybook/main.js
addons: [
  {
    name: '@storybook/addon-essentials',
    options: {
      actions: false,
      backgrounds: false,
      controls: true,
      docs: false,
      viewport: false,
      toolbars: false
    }
  }
],