Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
React+Storybook ことはじめ
Toshihisa Tomatsu
May 27, 2019
Technology
8
2.1k
React+Storybook ことはじめ
React.js meetup #7 (LT会)の資料です。
https://reactjs-meetup.connpass.com/event/130682/
Toshihisa Tomatsu
May 27, 2019
Tweet
Share
More Decks by Toshihisa Tomatsu
See All by Toshihisa Tomatsu
Service Workerとは、それを使ってできること / what-is-service-worker
10shi10ma
3
1.5k
フロントエンドのエコシステム / Frontend Ecosystem
10shi10ma
8
2.5k
Service Workerとブラウザでの通知について
10shi10ma
3
200
意外に知らないnpmと便利なCLI
10shi10ma
8
1.9k
歴史から学ぶ現代のフロントエンド
10shi10ma
17
9.3k
サイボウズ フロントエンドエキスパートチームとOSSの管理について
10shi10ma
0
790
大規模フロントエンドの技術的負債と向き合う。
10shi10ma
5
4.8k
Google I/O ’19から見る新しいJavaScript
10shi10ma
5
2.5k
TypeScript入門 〜型のあるモダンなJavaScript〜
10shi10ma
2
440
Other Decks in Technology
See All in Technology
MRTK3 - DataBinding and Theming 入門
futo23
0
180
Building smarter apps with machine learning, from magic to reality
picardparis
4
3.2k
LINEのB2Bプラットフォームにおけるトラブルシューティング2選
line_developers
PRO
3
290
miisan's career talk
mii3king
0
220
Istio入門
nutslove
15
4.9k
要約 "Add Live Text interaction to your app"
ushisantoasobu
0
140
ラブグラフ紹介資料 〜プロダクト解体新書〜 / Lovegraph Product Deck
lovegraph
0
220
雑な攻撃からELBを守る一工夫 +おまけ / Know-how to protect servers from miscellaneous attacks
hiroga
0
490
現状のFedCMの動作解説と OIDCとの親和性について- OpenID TechNight vol.19
ritou
2
450
アーキテクチャを明文化して開発に臨んだ話
akihiyo76
0
270
DOM Invader - prototype pollution対応の衝撃 - / DOM Invader - prototype pollution
okuken
0
110
SI企業が「アジャイル推し」になったら 幸せになれますか?/Can SI company be happy if it becomes “Agile stan” ?
chinmo
1
1.1k
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
Atom: Resistance is Futile
akmur
255
20k
Design by the Numbers
sachag
271
17k
Fontdeck: Realign not Redesign
paulrobertlloyd
73
4.1k
Writing Fast Ruby
sferik
612
57k
A Modern Web Designer's Workflow
chriscoyier
689
180k
Stop Working from a Prison Cell
hatefulcrawdad
261
17k
Product Roadmaps are Hard
iamctodd
34
6.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
19
1.2k
Three Pipe Problems
jasonvnalue
89
8.7k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
100
5.9k
Transcript
1 React+Storybook ͜ͱ͡Ί React.js meetup #7 2019/05/27 @toshi-toma
2 About Me Toshihisa Tomatsu @toshi-toma @toshi__toma
3 ൃදͷഎܠ • ࠷ۙɺ"UPNJD DesignͷຊΛಡΈ͡Ίͯ ͦΕΛࢼͨ͢Ίʹίϯϙʔωϯτ(React+styled- componets+TypeScript)։ൃʹStorybookΛͬͯΈ·ͨ͠ • ReactͷϓϩδΣΫτͰStorybookΛ͏࣌ͷΛ͠·͢ •
खݩͰ༡ΜͩఔͳͷͰɺӡ༻͍ͯ͘͠ݟͳ͍Ͱ͢
4 • UIίϯϙʔωϯτΛΞϓϦέʔγϣϯͱಠཱͨ͠ڥͰ։ൃͰ͖ Δπʔϧ • `build-storybook`ίϚϯυͰίϯϙʔωϯτϦετͷ੩తαΠ τΛੜͰ͖ΔͷͰUIίϯϙʔωϯτΧλϩάͱͯ͠ • ελΠϧΨΠυίϯϙʔωϯτͷ༷ •
։ൃͨ͠ίϯϙʔωϯτͷڍಈΛ֬ೝ • ίϯϙʔωϯτͷςετ https://github.com/storybooks/storybook
5 Storybook React Official https://storybooks-official.netlify.com
6 React + Storybook • ಋೖܗੜίϚϯυΛ࣮ߦ͢Δ͚ͩ QBDLBHFKTPOඞཁ • npx -p
@storybook/cli sb init --type react stories/ |- index.stories.js .storybook/ |- addons.js |- config.js package.json node_modules package-lock.json package.json "scripts": { + "storybook": "start-storybook -p 6006", + "build-storybook": "build-storybook" }, "dependencies": { + "@storybook/addon-actions": "^5.0.11", + "@storybook/addon-links": "^5.0.11", + "@storybook/addons": "^5.0.11", + "@storybook/react": "^5.0.11",
7 $ npm run storybook
8 xx.story.js • ͋ͱAYYTUPSZKTAͰ4UPSZCPPLʹදࣔ͢ΔίϯϙʔωϯτΛॻ͍ ͍͚ͯͩ͘
9 With TypeScript • `$ npm i -D typescript ts-loader`
• StorybookͷϏϧυϓϩηεͰTSXΛॲཧͰ͖ΔΑ͏ʹ `.storybook/webpack.config.js`Λ࡞
10 With TypeScript • ࠓޙAYYTUPSJFTUTYAʹॻ͍͍ͯ͘ • `.storybook/config`ϑΝΠϧΛฤू • `$ npm
i -D @types/storyboook__react`
11 react-docgen-typescript-loader • TypeScript Reactίϯϙʔωϯτ͔ΒdocgenใΛੜ͢Δͨ Ίͷloader • @storybook/addon-info”ͰίϯϙʔωϯτͷPropsใΛςʔ ϒϧܗࣜͰࣗಈੜ͢Δ࣌ʹ͏ •
`npm install -D react-docgen-typescript-loader` • webpack.config.js `use: [require.resolve('ts-loader'), require.resolve(‘react-docgen-typescript-loader')],` https://github.com/strothj/react-docgen-typescript-loader
12 ಋೖָ͍͢͝ • ϝϯςେมͦ͏͚ͩͲɺಠཱͨ͠ڥͰ6*ίϯϙʔωϯτΛ։ ൃͰ͖ΔͷϝϦοτେ͖ͦ͏ ΤϯδχΞઢ • StoryΛ࡞Δͷ͕େมͳίϯϙʔωϯτͦͦઃܭ͕͓͔͠ ͍ʁ •
࠶ར༻ੑɺదͳίϯϙʔωϯτׂΛߟ͑Δ͍͍͖͔͚ͬʹͳ Δ͔
13 Thanks
14 ࢀߟϦϯΫ • https://github.com/storybooks/storybook • https://www.learnstorybook.com/ • https://storybook.js.org/docs/guides/guide-react/ • https://storybook.js.org/docs/configurations/typescript-
config/