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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Yosuke Kurami
March 12, 2018
Programming
3
760
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
TypeScript LSP の今までとこれから
quramy
1
1.6k
フロントエンドテストの育て方
quramy
12
3.7k
App Router 悲喜交々
quramy
8
690
上手に付き合うコンポーネントテスト
quramy
6
2.3k
Patched fetch did not work
quramy
6
750
GraphQL あるいは React における自律的なデータ取得について
quramy
18
5.7k
Next.js App Router
quramy
15
3.8k
Fragment Composition of GraphQL
quramy
17
4.5k
reg-viz VRT tools
quramy
4
1.6k
Other Decks in Programming
See All in Programming
AI & Enginnering
codelynx
0
110
Oxlintはいいぞ
yug1224
5
1.3k
副作用をどこに置くか問題:オブジェクト指向で整理する設計判断ツリー
koxya
1
610
なぜSQLはAIぽく見えるのか/why does SQL look AI like
florets1
0
460
HTTPプロトコル正しく理解していますか? 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ニャ〜
hekuchan
2
690
AI時代のキャリアプラン「技術の引力」からの脱出と「問い」へのいざない / tech-gravity
minodriven
21
7.2k
AWS re:Invent 2025参加 直前 Seattle-Tacoma Airport(SEA)におけるハードウェア紛失インシデントLT
tetutetu214
2
110
CSC307 Lecture 02
javiergs
PRO
1
780
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
hisatake
0
280
Oxlint JS plugins
kazupon
1
960
余白を設計しフロントエンド開発を 加速させる
tsukuha
7
2.1k
Vibe Coding - AI 驅動的軟體開發
mickyp100
0
180
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.7k
AI Search: Where Are We & What Can We Do About It?
aleyda
0
6.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
200
30 Presentation Tips
portentint
PRO
1
220
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.8k
Building Flexible Design Systems
yeseniaperezcruz
330
40k
A Guide to Academic Writing Using Generative AI - A Workshop
ks91
PRO
0
210
GitHub's CSS Performance
jonrohan
1032
470k
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
130
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
66
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.4k
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