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
710
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
App Router 悲喜交々
quramy
7
530
上手に付き合うコンポーネントテスト
quramy
4
1.9k
Patched fetch did not work
quramy
6
600
GraphQL あるいは React における自律的なデータ取得について
quramy
18
4.9k
Next.js App Router
quramy
15
3.4k
Fragment Composition of GraphQL
quramy
16
3.6k
reg-viz VRT tools
quramy
4
1.3k
NoInfer
quramy
0
240
Precondition with schema directives
quramy
0
1.5k
Other Decks in Programming
See All in Programming
Open source software: how to live long and go far
gaelvaroquaux
0
620
Domain-Driven Transformation
hschwentner
2
1.9k
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
Immutable ActiveRecord
megane42
0
130
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
720
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
270
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
360
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
240
Featured
See All Featured
Done Done
chrislema
182
16k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Become a Pro
speakerdeck
PRO
26
5.1k
The Invisible Side of Design
smashingmag
299
50k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Music & Morning Musume
bryan
46
6.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
BBQ
matthewcrist
86
9.5k
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