Storybook and AngularCLI

Transcript

1. StorybookͱAngularCLI #ng_sake11

2. About me • ૔ݟ ༸ี • Quramy(GitHub/Twitter/Qiita) • Angular +

   TypeScriptͰSPA࡞ͬͯ·͢

3. About me • ૔ݟ ༸ี • Quramy(GitHub/Twitter/Qiita) • Angular +

   TypeScriptͰSPA࡞ͬͯ·͢ • ӕ͖ͭ·ͨ͠ 
 React + Redux + FlowͰSSRͯ͠·͢

4. ͱ͍͏͜ͱͰ།Ұ࢓ࣄͰ ࢖ͬͯΔπʔϧ

5. https://storybook.js.org/

6. Storybook is Կ • ίϯϙʔωϯτΨΠυΤϯδϯ • ݩʑ͸Reactઐ༻ͩͬͨ
 ࠓ͸Vue.js, Angular, React

   Native, Polymer ΋ • AngularରԠ͸v3.3.0͔Β

7. ಋೖ͸ΊͬͪΌ؆୯ $ ng new ng-storybook-demo $ cd ng-storybook-demo $ npm

   i @storybook/cli@3.4.0-rc.0 $ npx getstorybook

8. @storybook/angular • v3.3.x ͸ʮͱΓ͋͑ͣಈ͘ʯఔ౓ • v3.4.0(RC)Ͱࢼ͢ͷ͕Φεεϝ • Angular TemplateରԠ •

   StoryshotsରԠ • Angular CLIରԠ

9. ͪΐ͍ͱdemo

10. Angular CLIରԠͷ࿩ • ൃ୺ https://github.com/storybooks/ storybook/issues/2688

11. ՝୊ͷ಺༰ • getstorybook͸Storybook༻ͷwebpackઃఆΛ͍࣋ͬͯΔ • getstorybook͸AngularCLIʹґଘ͠ͳ͍ • Style RulesͳͲɺStorybook༻ͷwebpack configΛ֦ு͢Δඞ ཁ͕͋ͬͨ

    • Component css: tostring-loader / raw-loader • Global css: style-loader • Angular CLIϢʔβʔʹͦΕΛ΍ΒͤΔͷ͸ແཧήʔײ
12. None

13. ΍ͬͨ͜ͱ ͜͜ʹBOHVMBSDMJ͕͋Δ͡ΌΖʁ
    
    ʈТʈ
    
    㱭BOHVMBSDMJKTPO㱬
    
    ͜ΕΛ
    
    ʈТʈ
    
    㱭 TUPSZCPPL

    㱬
    
    
    ʈТʈ
    
    㲇㱭㱬㲇
    
    ͜͏͡Όͬʂ
    
    ʈТʈ
    
    㱭BOHVMBSDMJ@DPOpHKT㱬

14. ΍ͬͨ͜ͱ • .anguar-cli.jsonΛಡΈऔΓɺϓϩδΣΫτͷ ઃఆʹैͬͯwebpackͷϧʔϧΛ࡞Δ • .angular-cli.jsonͷ಺༰௨ΓʹɺΞηοτ΍ Global Style͕ద༻͞ΕΔΑ͏ʹͨ͠

15. 1. CLIઃఆͷ෮ݩ

16. 2. Call webpack-configs

17. Webpack config as a API • ׂͱΘ͔Γ΍͘͢഑ஔ͞Ε͍ͯΔ

18. ·ͱΊ • @storybook/angular ࢖ͬͯͶ • ஁͑ͯΑ͔ͬͨbuildے • @angular/cli + webpackΛࣗ෼Ͱ֦ு͢Δํ

    ๏͸͓֮͑ͯ͘ͱͲ͔͜Ͱ໾ʹཱ͔ͭ΋ʁ • υΩϡϝϯτແ͍ͷͰɺࣗݾ੹೚Ͱ

19. Thank you! by @Quramy