BETA

Storybookがバージョン5.2になってわかりやすくなった話

投稿日:2019-09-27
最終更新:2019-09-27

最近、Storybookを環境に新規導入する機会がありました。Storybookは導入時の初期化でサンプルを生成してくれるので、初めてでも何となくストーリーの書き方がわかります。
そこでサンプルに軽く目を通したのですが、私の知ってるStorybookはそこにはいませんでした。そう、新しく生まれ変わったのです。

というわけで、以前の書き方と新しい書き方をざっくり比較します。
と言っても、Storybookの開発ブログに書かれている内容と大差はありませんので、そちらを見たほうが早いかもしれません。

以前の書き方

import React from 'react'  
import { storiesOf } from '@storybook/react'  

import Contents from './Contents'  

storiesOf('Organisms/コンテンツ', module)  
  .add('サンプル', () => <Contents>サンプル</Contents>)  

storiesOf('Organisms/コンテンツ', module)  
  .add('ハローワールド', () => {  
    const children = 'ハローワールド'  
    return <Contents>{children}</Contents>  
  })  

以前の書き方の場合、storiesOfメソッドの第一引数にストーリーの所属を、続くaddメソッドの第一引数にストーリー名を表記していました。
この場合、当然ですが同じ所属のストーリーを複数書くときは、何度も同じ所属名(もしくは所属名を格納した変数)を書く必要がありました。
以下のように書き直すこともできますが、改行を含むストーリーがある場合は見通しが悪くなります。少なくとも私は好きじゃない。

import React from 'react'  
import { storiesOf } from '@storybook/react'  

import Contents from './Contents'  

storiesOf('Organisms/コンテンツ', module)  
  .add('サンプル', () => <Contents>サンプル</Contents>)  
  .add('ハローワールド', () => {  
    const children = 'ハローワールド'  
    return <Contents>{children}</Contents>  
  })  

新しい書き方

import React from 'react'  

import Contents from './Contents'  

export default {  
  title: 'Organisms/コンテンツ'  
}  

export const Sample = () => <Contents>サンプル</Contents>  

export const HelloWorld = () => {  
  const children = 'ハローワールド'  
  return <Contents>{children}</Contents>  
}  

記法がシンプルになりました。同一ファイル内のストーリー情報をまとめてデフォルトエクスポートし、各ストーリーは名前を付けてエクスポートするだけ。
この場合、1コンポーネントに対し1ファイル必要になります。ですが、この方法だとストーリーを用意できているか一目でわかって便利という意見があるので、個人的にはオススメしたいです。
唯一ネックなのが、ストーリー名を日本語にできないところでしょうか。その問題さえ解消できれば最高ですね。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

だらだら更新していきたい技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう