What is Storybook? Why should we use? How to install? What is Addon? Conclusion References

1. ストーリーブック
StoryBook
日付：2019年10月25日
Date: 25-Oct-2019
ラマン
Raman

2.
StoryBookとは何ですか？
What is StoryBook?
ストーリーブックは、ストーリーのコレクションです
A storybook is a collection of stories.
各ストーリーは、コンポーネントの単一の視覚的状態を表します
Each story represents a single visual state of a component.
技術的には、ストーリーは画面にレンダリングできるものを返す
関数です。
Technically, a story is a function that returns something that can be
rendered to screen.

3. In a company, why should we use?
会社では、なぜ使用する必要があります
か？
主に、これはUIデザイナーに役立ちます。
Mainly, this is helpful for UI designers.
UIデザイナーは、開発者が正しい方法でコー
ディングしているかどうかを確認できます。
UI designer can see if developer is coding in
correct manner.

4. In a company, why should we use?
会社では、なぜ使用する必要があります
か？
UI設計者は、自分の設計が設計ルールに違反している
かどうかを確認できます。
UI designer can see, if any of his/her design is violating
any designing rule.
UIデザイナーは、今後の参考のために以前のデザイン
を確認できます。
UI designer can see previous designs for future
reference.

5. 例
Example
Storybookには、会社で設計に使用され
るカラーコード形式（名前付きの16進
数）を表すコンポーネントがあります。
Storybook has a component which
represents the color code form (in
hexadecimal with name) used in a
company for designing.

6. 例
Example
また、開発者が開発中にカラーコード
を確認し、CSSで使用できます。
Also while developing developer can see
color code and can use in css.

7. 会社のWebサイトで使用される明るい色合いを表示しま
す。
Displays light shades which are used in a company website.

8. 会社のWebサイトで使用されている暗い色合い
を表示します。
Displays dark shades which are used in a
company website.

9. Vueをインストールする
Install Vue
`npm install -g @vue/cli`
`vue - -version`

10. StoryBookをインストールする
Install StoryBook
`mkdir storybookproject`
`cd storybookproject`
`npm init`
`npm install vue —save`
`npm install vue-loader vue-template-compiler @babel/
core babel-loader babel-preset-vue —save-dev`
`npx -p @storybook/cli sb init --type vue`
`npm run storybook`

11. フォルダー構造
Folder structure

12. 基本ストーリー
Basic Story

13. アドオン
Addons
Addon is built in functionality which will
enhance the features of storybook.

14. アドオン
Addons

15. 行動
Actions

16. ソース
Source

17. ノート
Notes

18. ビューポート
Viewport

19. バックグラウンド
Background

20. アクセシビリティ
Accessibility

21. 結論
Conclusion
ストーリーブックは以下を支援します：-
Storybook helps in following :-
UIスキルを強化するため。
To enhance UI skills.
UIデザイナーおよび開発者との議論の時間を節約するため。
To save time effort for discussion with UI designer and
developer.

22. 結論
Conclusion
社内の誰でも、他のプロジェクトや同じプ
ロジェクト内のタスクに利用できるさまざ
まなコンポーネントを見ることができま
す。
Anyone in company can see different
components which can be utilize for any
other project or some task within same
project.

23. 参照資料
References
https://storybook.js.org/docs/basics/
introduction/
https://storybook.js.org/docs/guides/guide-
vue/
https://storybook.js.org/addons/

24. ありがとうございました
Thank You