Chapter 14

その他のTips

本章について

本書の最後に、特筆するほどではないですが、ピンポイントで有用になるような Storybook の設定周りのTipsをいくつか紹介します。

ストーリーの名前を変更する

CSF(Component Story Format) においては、名前付きエクスポートした際の名前がそのままストーリー名になることをこれまでの章で取り上げましたが、別途日本語の名前をつけたいケースがあると思います。

変数名にマルチバイト文字を使うという手段も無くはないのですが、コーディングルールや生理的に受け付けないということもあるでしょう。

以下のように、ストーリーの storyName を書き換えることで、ストーリー名を変更することができます。

src/components/Button.stories.js
export const Primary = Template.bind({})
Primary.storyName = 'プライマリーボタン'
Primary.args = {
  label: 'プライマリーボタン',
  primary: true,
  secondary: false
}

ストーリーのレイアウトを設定する

ストーリーを描画する iframe は、デフォルトでは左上に padding を割り当てた状態で描画されますが、この iframe の配置位置を変更することができます。

.storybook/preview.js にて、 layouts をグローバルパラメータを宣言します。

.storybook/preview.js
export const parameters = {
  layout: 'centered'
}

layout に設定できる値は以下の3種類になります。

  • centered: 上下左右中央揃え
  • fullscreen: iframe を画面いっぱいに広げる
  • padded: padding をちょっとつける (デフォルト)

例えばボタン押下時に、ドロップダウンメニューが要素の左側に表示されるようなコンポーネントの場合は、 layout を centered にすることで、ドロップダウンメニューが画面からはみ出ることを抑止できます。

また、 Header コンポーネントのように、画面の特定位置に描画する想定のコンポーネントの場合、余計な余白が付かないように fullscreen を設定するのが良いでしょう。

このように、コンポーネントごとにレイアウトを調整したい場合も、個別にパラメータを設定することができます。

.src/components/Header.stories.js
export default {
  title: 'Header',
  component: Header,
  parameters: {
    layout: 'fullscreen'
  }
}

layout パラメータで設定可能なのはこれだけなので、より細かいレイアウト調整をしたい場合は、デコレータを使うのをオススメします。

iframe のヘッダーを拡張する

.storybook/preview-head.html を作成することで、ストーリーを描画する iframe 内の Head タグを拡張することができます。

例えば以下のように、CSSフレームワークをCDNから読み込むようなときに活用できます。

.storybook/preview-head.html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

iframe のボディを拡張する

ヘッダーと同様に、 .storybook/preview-body.html を作成することで、ストーリーを描画する iframe 内の Body タグを拡張することができます。

.storybook/preview-body.html
<style>
  body {
    background-color: gray;
  }
</style>

多くの場合はこちらもデコレータで代用可能ですが、より複雑なHTMLを記述する場合は、JSから分離できるので良いかもしれません。