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
690
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
400
上手に付き合うコンポーネントテスト
quramy
3
1.3k
Patched fetch did not work
quramy
6
530
GraphQL あるいは React における自律的なデータ取得について
quramy
16
3.9k
Next.js App Router
quramy
15
2.9k
Fragment Composition of GraphQL
quramy
16
2.8k
reg-viz VRT tools
quramy
4
1.2k
NoInfer
quramy
0
200
Precondition with schema directives
quramy
0
1.4k
Other Decks in Programming
See All in Programming
Server Driven Compose With Firebase
skydoves
0
370
Sidekiqで実現する 長時間非同期処理の中断と再開 / Pausing and Resuming Long-Running Asynchronous Jobs with Sidekiq
hypermkt
6
2.5k
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
180
Dev ContainersとGitHub Codespacesの素敵な関係
ymd65536
1
120
PLoP 2024: The evolution of the microservice architecture pattern language
cer
PRO
0
1.3k
Go言語でターミナルフレンドリーなAIコマンド、afaを作った/fukuokago20_afa
monochromegane
2
140
詳細解説! ArrayListの仕組みと実装
yujisoftware
0
460
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
3k
デプロイを任されたので、教わった通りにデプロイしたら障害になった件 ~俺のやらかしを越えてゆけ~
techouse
51
31k
現場で役立つモデリング 超入門
masuda220
PRO
12
2.8k
VR HMDとしてのVision Pro+ゲーム開発について
yasei_no_otoko
0
100
リリース8年目のサービスの1800個のERBファイルをViewComponentに移行した方法とその結果
katty0324
5
3.3k
Featured
See All Featured
Speed Design
sergeychernyshev
24
570
GraphQLの誤解/rethinking-graphql
sonatard
66
9.9k
A better future with KSS
kneath
238
17k
The Cost Of JavaScript in 2023
addyosmani
45
6.6k
Become a Pro
speakerdeck
PRO
24
5k
How to Ace a Technical Interview
jacobian
275
23k
Designing Experiences People Love
moore
138
23k
The Cult of Friendly URLs
andyhume
78
6k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Ruby is Unlike a Banana
tanoku
96
11k
Building an army of robots
kneath
302
42k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
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