なぜ試すのか
最近色々な会社のフロントエンド記事や勉強会において、デザイナー側とフロントエンドエンジニア側の連携を良くするために 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作るためのものではない、ということが途中で分かった。(ちゃんとドキュメント読んでからやろうね、って話ですね…)
というところで自分は挫折したので一旦ここで終えることにした。
もしやる気が復活して「よしやるか」となったらもう一度ブログに書こうと思う。
参考

コメント