Posts tagged with storybook


Storybookとは、一言で表すならばコンポーネント見本市。コンポーネント志向が絶賛推し進められているフロントエンド界隈にて注目度が上がり続けている(のではないかと予想)される期待の開発ツールなのである。 どんな機能を持っているのかというと、作ったコンポーネントを単体で整列表示することができる。まさに見本市。 大雑把に言ってしまえばそれだけである。しかしフロントエンド開発を一度でも経験したことがある壮年層ならもうすでにピンと来ているに違いない。 そう、画面全体を表示することなく、目的の箇所まで画面操作をすることなく、作ったコンポーネントを、好きなプロパティを代入して、単体で表示することができるのである。 公式サイトに利用イメージがあるのでそちらも参考に。 ただいくつか問題があり、一番大きなものはReactを想定して作られていること。Reactを使っているなら何も問題はないが、俺はVueを使いたいんだという青少年にとっては乗り越えるべき壁はまだまだ多い。 だが安心して欲しい、Storybookは(先々月くらいから)正式にVueに対応している。資料の少なさという壁さえ乗り越えられたらStorybookはVueで使える。 前書きが長くなりすぎので本題に入ると、今回はvue-cliで作ったプロジェクトにStorybookを導入するまでの手順を紹介。 vue-cliセットアップ Storybookに興味を持つくらいならvue-cliでサクッとプロジェクトを作れるに違いないということで省略。あとyarnも。 Storybookインストール 導入ガイドを参考に手動でも良いが、getstorybookコマンドを使うと起動スクリプトや設定ファイルも作ってくれるので簡単。 まずはグローバルにツールをインストール。…