StorybookはUIコンポーネントを便利に開発するためのオープンソースツールです。
2020年にバージョン6がリリースされ、使い方が多少変わりました。
改めて使い方をおさらいして行きたいと思います。
今回はAngularアプリに導入してみます。
前提
今回は以下の環境とライブラリを使用しています。
OS: macOS Mojava
Node: v12.18.3
yarn: 1.22.10
Angular: 11.2.1
Storybook v6をインストールする
事前に用意したAngularアプリにStorybook v6をインストールします。
公式のインストール手順を参考にします。
アプリルートで以下のコマンドを実行します。
npx sb init
こちらのコマンドでは、入れようとしているアプリの依存関係を確認して最適な設定を自動で入れてくれます。
インストールが完了し、package.jsonを確認すると、今回は以下のパッケージがインストールされました。
"@compodoc/compodoc": "^1.1.11",
"@storybook/addon-actions": "^6.1.18",
"@storybook/addon-essentials": "^6.1.18",
"@storybook/addon-links": "^6.1.18",
"@storybook/angular": "^6.1.18",
"storybook": "^6.1.18",アプリがAngularであることを認識して最適なパッケージを入れてくれました。他にもbabelなどがインストールされていました。
また、scriptsには3つのコマンドが追加されていました。
"scripts": {
...
"docs:json": "compodoc -p ./tsconfig.json -e json -d .",
"storybook": "yarn docs:json && start-storybook -p 6006",
"build-storybook": "yarn docs:json && build-storybook"
},Storybook v6ではSotrybookのドキュメントを書くことができる機能が標準搭載されています。
docs:jsonコマンドでドキュメントの生成を行うようです。
storybookコマンドでStorybookの起動、build-storybookコマンドでStorybookの静的ファイルがビルドできますね。
Storybook v6を起動する
Storybookのインストールコマンドにより、自動でインストール、スクリプトの追加までしてくれました。
では試しに起動してみます。
yarn storybook問題なく、Storybook v6が起動されました。
まとめ
インストールコマンドにより、Angularアプリに必要なパッケージからスクリプトまで自動で設定することができました。
次はstoryの書き方についてまとめてみたいと思います。
コメント