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
740
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
600
フロントエンドテストの育て方
quramy
12
3.4k
App Router 悲喜交々
quramy
8
620
上手に付き合うコンポーネントテスト
quramy
6
2.1k
Patched fetch did not work
quramy
6
690
GraphQL あるいは React における自律的なデータ取得について
quramy
18
5.3k
Next.js App Router
quramy
15
3.6k
Fragment Composition of GraphQL
quramy
16
4k
reg-viz VRT tools
quramy
4
1.4k
Other Decks in Programming
See All in Programming
Deep Dive into ~/.claude/projects
hiragram
14
11k
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
200
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
20k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
270
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
6.7k
生成AI時代のコンポーネントライブラリの作り方
touyou
1
260
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
3
470
Porting a visionOS App to Android XR
akkeylab
0
660
効率的な開発手段として VRTを活用する
ishkawa
0
150
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
500
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
ふつうの技術スタックでアート作品を作ってみる
akira888
1
1.1k
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
4 Signs Your Business is Dying
shpigford
184
22k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Designing for Performance
lara
610
69k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Six Lessons from altMBA
skipperchong
28
3.9k
Side Projects
sachag
455
42k
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