TypeScriptでStorybook Addon Material-UI を試してみた

なぜ試すのか

最近色々な会社のフロントエンド記事や勉強会において、デザイナー側とフロントエンドエンジニア側の連携を良くするために Storybook 使うの良いかもね、ということをよく耳にする。

ただ本格的に運用するためには色々手間がかかるし、元々他のツール(FigmaとかPowerPointとか)で運用しているなら、わざわざ新しく導入して運用するメリットもないよね、あとどっちかで良くない?、という感覚がある

ただし StoryBook を使うことのメリットもいくつかあるのは確かである(具体的にあれこれ言うつもりはない)。
またデメリットである「運用に手間がかかる」部分を何とかすれば、将来的には運用を検討してもいいのでは、とも考える。

長々と話したが、要するに「StoryBook の導入・運用の手間を省くいい方法があればいいな。あればそれを試してみたいな」というのが、本筋である。もし簡単に導入できれば、これからの選択肢としてStorybookの運用も考えたいと思っているからである。

で、色々調べてみると、「Storybook Addon Material-UI」というものがあることを知ったので、せっかくだから使ってみよう、ということで使ってみた。

Storybook Addon Material-UI の導入

1. お試し環境をcloneする

お試し環境は「https://github.com/react-theming/create-material-ui-app」にある。
このリポジトリには、

create-react-app
Storybook
Material-UI
storybook-addon-material-ui
が含まれているため、「Storybook Addon Material-UI」を試すために必要なものが一式そろっている。
手順として、

が含まれているため、「Storybook Addon Material-UI」を試すために必要なものが一式そろっている。

手順は以下の通り。

$ git clone https://github.com/react-theming/create-material-ui-app.git
$ cd create-material-ui-app
$ yarn install
$ yarn storybook

上記を実行すると、ローカル環境で storybook が立ち上がる。
最初は以下画像のように Button コンポーネントしか表示されていない状態である。
あと画面を触ってもらうと分かる思うが、正直使い方が分かりづらい。。
画面下に色が変更できそうなタブが表示されているが、色々ボタンをポチポチしても???である

2. addonをインストールする

以下コマンドで「Storybook Addon Material-UI」をインストールする

$ npm i storybook-addon-material-ui --save-dev

3. 必要なコードを追加する

ドキュメントにもある通り、addon を動かすために以下コードを追加する
1つ目は、.storybook/main.jsを作成し、モジュールの適用範囲を記載する

//.storybook/main.js
module.exports = {
  stories: ["../stories/**/*.stories.(js|mdx)"],
  addons: ["storybook-addon-material-ui"],
};

2つ目はstorybook-addon-material-uiを用いて、storybook のプレビューにデコレータを追加する
ファイルは.storybook/preview.jsを作成し、ここに記載する

//.storybook/preview.js
import { muiTheme } from "storybook-addon-material-ui";
export const decorators = [muiTheme()];

やってみた結果

ここまでドキュメント通りにやってみたが、結論から言うと上手くいかなかった(ごめんなさい..)
原因として、

Storybook Addon Material-UIとReactの最新versionの相性が悪い
Storybook Addon Material-UIとmaterial-ui(v5)は対応していない
material-ui(v4)は対応していた
なぜかは分からないが、デコレータが効いていない??
ファイル配置(main.jsとpreview.js)が適切でなく、ちゃんと読み込めていない?

という点が考えられる。
ちなみにStorybook Addon Material-UIに対応しているReactとmaterial-uiのversionを調整してみたが、結局うまくいかなかった..
厳密に言うと、うまく動いてそうだが、Storybook Addon Material-UI導入前と画面上の表示が何も変わらないのである。

あとそもそもの話であるが、「Storybook Addon Material-UI」はあくまでStorybookの見た目を整えるためのaddonであって、簡単にStorybook作るためのものではない、ということが途中で分かった。(ちゃんとドキュメント読んでからやろうね、って話ですね…)

というところで自分は挫折したので一旦ここで終えることにした。
もしやる気が復活して「よしやるか」となったらもう一度ブログに書こうと思う。