Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Storybook and AngularCLI
Search
Yosuke Kurami
March 12, 2018
Programming
3
660
Storybook and AngularCLI
Storybookの3.4.0とAngularCLI対応のお話
Yosuke Kurami
March 12, 2018
Tweet
Share
More Decks by Yosuke Kurami
See All by Yosuke Kurami
Next.js App Router
quramy
14
2.5k
Fragment Composition of GraphQL
quramy
14
1.9k
reg-viz VRT tools
quramy
4
960
NoInfer
quramy
0
120
Precondition with schema directives
quramy
0
1.1k
T3 Stack and TypeScript ecosystem
quramy
4
1.8k
apollo client / react / esm
quramy
1
220
Apollo Client useFragment
quramy
1
780
About Type Syntax Proposal
quramy
1
1.9k
Other Decks in Programming
See All in Programming
Dive into gomock / Go Conference 2024
utgwkk
12
2.9k
DELISH KITCHENにおけるマスタデータキャッシュ戦略とその歴史的変遷
uchihara
2
960
DroidKnights 2024 : Compose Material3 커스텀 디자인 시스템 구축기
kwondae
0
190
ruby.wasm 最前線 2024 - wasmでMockServerをつくる #rubykaigi
lnit
2
420
Google Analytics でサイト速度を計測する / Measure site speed with Google Analytics
forrep
2
120
Goでリフレクションする、その前に / Kansai.go #1
utgwkk
5
680
DevTools と デバッグ と 私
kozy4324
1
560
DroidKnights 2024 - Compose UI 컴포넌트 설계와 테스트
wisemuji
0
470
End-to-End Encryption for Streaming Data Pipelines @ Berlin Buzzwords 2024
hpgrahsl
0
100
OpenAPI 3.1 and Spring-Boot 3 What's New?
bnasslahsen
0
170
freee 技術の日 2024 Day1 進化していくシステムアーキテクチャ
usami
1
390
"統合ERP"とアプリケーションアーキテクチャ
keitatomozawa
0
330
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
15
8.5k
Visualization
eitanlees
137
14k
10 Git Anti Patterns You Should be Aware of
lemiorhan
650
58k
The Brand Is Dead. Long Live the Brand.
mthomps
51
33k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
19
7k
A Tale of Four Properties
chriscoyier
153
22k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
StorybookのUI Testing Handbookを読んだ
zakiyama
14
4.8k
jQuery: Nuts, Bolts and Bling
dougneiner
60
7.2k
Building Your Own Lightsaber
phodgson
101
5.8k
Why Our Code Smells
bkeepers
PRO
331
56k
Become a Pro
speakerdeck
PRO
13
4.7k
Transcript
StorybookͱAngularCLI #ng_sake11
About me • ݟ ༸ี • Quramy(GitHub/Twitter/Qiita) • Angular +
TypeScriptͰSPA࡞ͬͯ·͢
About me • ݟ ༸ี • Quramy(GitHub/Twitter/Qiita) • Angular +
TypeScriptͰSPA࡞ͬͯ·͢ • ӕ͖ͭ·ͨ͠ React + Redux + FlowͰSSRͯ͠·͢
ͱ͍͏͜ͱͰ།ҰࣄͰ ͬͯΔπʔϧ
https://storybook.js.org/
Storybook is Կ • ίϯϙʔωϯτΨΠυΤϯδϯ • ݩʑReactઐ༻ͩͬͨ ࠓVue.js, Angular, React
Native, Polymer • AngularରԠv3.3.0͔Β
ಋೖΊͬͪΌ؆୯ $ ng new ng-storybook-demo $ cd ng-storybook-demo $ npm
i @storybook/
[email protected]
$ npx getstorybook
@storybook/angular • v3.3.x ʮͱΓ͋͑ͣಈ͘ʯఔ • v3.4.0(RC)Ͱࢼ͢ͷ͕Φεεϝ • Angular TemplateରԠ •
StoryshotsରԠ • Angular CLIରԠ
ͪΐ͍ͱdemo
Angular CLIରԠͷ • ൃ https://github.com/storybooks/ storybook/issues/2688
՝ͷ༰ • getstorybookStorybook༻ͷwebpackઃఆΛ͍࣋ͬͯΔ • getstorybookAngularCLIʹґଘ͠ͳ͍ • Style RulesͳͲɺStorybook༻ͷwebpack configΛ֦ு͢Δඞ ཁ͕͋ͬͨ
• Component css: tostring-loader / raw-loader • Global css: style-loader • Angular CLIϢʔβʔʹͦΕΛΒͤΔͷແཧήʔײ
None
ͬͨ͜ͱ ͜͜ʹBOHVMBSDMJ͕͋Δ͡ΌΖʁ ʈТʈ 㱭BOHVMBSDMJKTPO㱬 ͜ΕΛ ʈТʈ 㱭 TUPSZCPPL
㱬 ʈТʈ 㲇㱭㱬㲇 ͜͏͡Όͬʂ ʈТʈ 㱭BOHVMBSDMJ@DPOpHKT㱬
ͬͨ͜ͱ • .anguar-cli.jsonΛಡΈऔΓɺϓϩδΣΫτͷ ઃఆʹैͬͯwebpackͷϧʔϧΛ࡞Δ • .angular-cli.jsonͷ༰௨ΓʹɺΞηοτ Global Style͕ద༻͞ΕΔΑ͏ʹͨ͠
1. CLIઃఆͷ෮ݩ
2. Call webpack-configs
Webpack config as a API • ׂͱΘ͔Γ͘͢ஔ͞Ε͍ͯΔ
·ͱΊ • @storybook/angular ͬͯͶ • ͑ͯΑ͔ͬͨbuildے • @angular/cli + webpackΛࣗͰ֦ு͢Δํ
๏͓֮͑ͯ͘ͱͲ͔͜Ͱʹཱ͔ͭʁ • υΩϡϝϯτແ͍ͷͰɺࣗݾͰ
Thank you! by @Quramy