Web Components で 社内 UI ライブラリを作っている話

WebComponents.kyoto Meetup #2 での発表資料です。
https://wc-kyoto.connpass.com/event/78690/

Transcript

1. Web Components Ͱࣾ಺ UI ϥΠϒϥϦΛ࡞͍ͬͯΔ࿩
   WebComponents.kyoto Meetup #2 | Mar 04, 2018
   

   View Slide

2. じんぼ よしひで
   ਆอ Յल
   @jmblog
   Front-end Engineer,
   

   View Slide

3. ͓࿩͢Δ͜ͱ
   ᶃ ࣾ಺ UI ϥΠϒϥϦʮKaizen Custom Elementsʯͷ঺հ
   ᶄ Web Components Λ࠾༻ͨ͠എܠ
   ᶅ ࣮૷Ͱۤ࿑ͨ͠఺
   

   View Slide

4. ᶃ ࣾ಺ UI ϥΠϒϥϦʮKaizen Custom Elementsʯͷ঺հ
   

   View Slide

5. Kaizen Custom Elements
   app-elements icon-elements
   
   
   
   
   
   
   ""...
   
   
   
   
   
   
   ""...
   

   View Slide

6. Kaizen Custom Elements ͷಛ௃
   • Web Components (Custom Elements + Shadow DOM) Ͱ࣮૷
   • ϓϦϛςΟϒͳίϯϙʔωϯτ͕த৺
   • Atomic Design ͷ Atomsʢݪࢠʣ ͔Β Moleculesʢ෼ࢠʣ

   ͘Β͍ͷཻ౓
   • Storybook Λ࢖ͬͯΧλϩάԽ
   • ઈࢍ։ൃதʢਐḿ10%͘Β͍ʣ
   

   View Slide

7. Example
   

   View Slide

8. https://speakerdeck.com/mizchi/real-world-es201x-and-future?slide=39
   ͜ͷੈք؍ΛΠϝʔδ
   

   View Slide

9. https://kaizen-custom-elements-preview.netlify.com/
   

   View Slide

10. ᶄ Web Components Λ࠾༻ͨ͠എܠ
    

    View Slide

11. ͜ͷ൒೥ؒͰ 6 ͭͷ Single Page Application Λ։ൃ
    Angular apps React apps
    2 4
    • ٕ͋͑ͯज़ελοΫ͸ݻఆԽͤͣଟ༷ੑΛ΋ͨͤΔ
    • খ͘͞࡞ࣺͬͯͯ΍͘͢͢Δ
    • ֤ϝϯόʔ͕࠷଎Ͱ੒ՌΛग़͢͜ͱʹͩ͜ΘΔ
    

    View Slide

12. ҰํͰ
    Ϙλϯ΍πʔϧόʔͱ͍ͬͨϓϦϛςΟϒͳίϯϙʔωϯτΛ
    ຖճ࣮૷͢Δͷ͸໘౗͍͘͞…
    ΞϓϦέʔγϣϯ͝ͱʹඍົʹσβΠϯ͕ҧͬͯ͠·͏…
    

    View Slide

13. Angular Ͱ΋ React Ͱ΋ʢԿͳΒ Vue Ͱ΋ Preact Ͱ΋ʣ࢖͑Δ
    ڞ௨ͷ UI ϥΠϒϥϦ͕ཉ͍͠ɻ
    Web Components ͷग़൪Ͱ͸ʁʂ
    

    View Slide

14. https://custom-elements-everywhere.com/
    

    View Slide

15. View Slide

16. Angular ͱ Custom Elements ͷซ༻͸໰୊ͳͦ͞͏ɻ
    React ΋ Basic Tests ͸͢΂ͯ௨͍ͬͯΔͷͰɺϓϦϛςΟϒͳ
    ίϯϙʔωϯτʹ༻్Λݶఆ͢Ε͹ɺ໰୊ʹͳΔ͜ͱ͸ͳͦ͞͏ɻ
    

    View Slide

17. View Slide

18. View Slide

19. Chrome / Safari ͸͔ͳΓαϙʔτ͕ਐΜͰΔɻ
    Edge ͱ Firefox ͸ະରԠ͕ͩɺ౰໘͸ Polyfill Ͱ྇͛ͦ͏ɻ
    

    View Slide

20. ʢएׯͷෆ҆͸͋Δ͚Ͳʣ

    Web Components ΋ͦΖͦΖʮ࢖͑ΔϨϕϧʯʹͳ͖ͬͯͨҹ৅ɻ
    ·ͣ͸ࢼͯ͠ΈΑ͏ʂ
    

    View Slide

21. ᶅ ࣮૷Ͱۤ࿑ͨ͠఺
    

    View Slide

22. Shadow DOM ͷελΠϧ໰୊
    

    View Slide

23. Shadow DOM ͷελΠϧ໰୊
    Firefox ͱ Edge ͸ Shadow DOM ʹ·ͩରԠ͍ͯ͠ͳ͍ͷ
    ͰɺελΠϧ͕είʔϓԽ͞Εͳ͍ɻ
    ShadyCSS Λ࢖͑͹ɺٖࣅతʹείʔϓԽ͕࣮ݱͰ͖Δɻ
    

    View Slide

24. lit-html v0.7
    

    View Slide

25. lit-html v0.7
    lit-html で軽量に作っちゃうぜー
    

    View Slide

26. lit-html v0.7
    Firefox で Shadow DOM に
    スタイルが効かないぞ
    lit-html Λ ShadyCSS ͷ

    ૬ੑ͕Α͘ͳ͍ʁ
    

    View Slide

27. lit-html v0.7 Polymer v3.0
    

    View Slide

28. lit-html v0.7 Polymer v3.0
    うまくいった
    

    View Slide

29. lit-html v0.7 Polymer v3.0
    React + CSS in JS でも
    Shadow DOM のスタイル問題を

    解決できる気がする！

    

    であれば、Polymer ではなく

    すでに知⾒がたまっている React を

    使ったほうがよくない？
    React + CSS in JS
    

    View Slide

30. lit-html v0.7 Polymer v3.0
    ちょっと待てよ
    

    配布する Custom Elements の
    ライブラリに React を同梱するの？
    React + CSS in JS
    

    View Slide

31. lit-html v0.7 Polymer v3.0
    React + CSS in JS
    lit-html + CSS in JS
    lit-html + CSS in JS で
    Shadow DOM のスタイル問題を

    解決できる気がする！

    

    であれば、軽量にできる！
    

    View Slide

32. lit-html v0.7 Polymer v3.0
    React + CSS in JS
    lit-html + CSS in JS
    厳しかった... 

    :host にスタイルを定義する場合、

    同じスタイル定義を CSS in JS でも⾏う
    必要があり⼆重管理になってしまう。
    

    View Slide

33. lit-html v0.7 Polymer v3.0
    React + CSS in JS
    lit-html + CSS in JS
    やはりお前じゃなきゃだめなのか
    Polymer v3.0
    

    View Slide

34. lit-html v0.7 Polymer v3.0
    React + CSS in JS
    lit-html + CSS in JS
    Polymer v3.0 lit-html v0.9
    

    View Slide

35. lit-html v0.7 Polymer v3.0
    React + CSS in JS
    lit-html + CSS in JS
    Polymer v3.0 lit-html v0.9
    lit-html で ShadyCSS が
    サポートされた
    ͜ΕͰղܾͰ͖ͦ͏ʢࠓ͜͜ʣ
    

    View Slide

36. https://jmblog.jp/posts/2018-02-15/lit-html-with-shadycss/
    

    View Slide

37. create-react-app Ͱ minify Ͱ͖ͳ͍໰୊
    

    View Slide

38. create-react-app Ͱ minify Ͱ͖ͳ͍໰୊
    Failed to compile.
    Failed to minify the code from this file:
    ./node_modules/@kaizenplatform/kaizen-app-elements/kaizen-app-elements.js:1:57
    Read more here: http://bit.ly/2tRViJ9
    create-react-app Λ࢖ͬͯੜ੒ͨ͠ React ΞϓϦͩͱɺ
    npm run build ͰΤϥʔʹͳΔ͜ͱ͕ൃ֮ɻ
    

    View Slide

39. http://bit.ly/2tRViJ9
    "͍͔ͭ͘ͷαʔυύʔςΟͷύοέʔδ͸ɺES5 ʹม׵ͤͣʹ ES6 ͷ
    ·· npm ʹެ։ͯ͠·͕͢ɺES6 Λαϙʔτ͍ͯ͠ͳ͍ϒϥ΢β΍
    πʔϧͰ໰୊ʹͳΔͷͰɺগͳ͘ͱ΋͋ͱ਺೥͸ES5 Ͱ npm ΁ެ։͢
    Δ͜ͱΛ͓͢͢Ί͍ͯ͠·͢ɻ"
    ͭ·Γ ES6 ʹͳ͍ͬͯΔͷ͕ѱ͍ͱɻ
    

    View Slide

40. ͔͠͠ɺCustom Elements ͸ ES6 ͷΫϥεߏจΛ࢖͏ඞཁ͕͋Δɻ
    ES5 ʹม׵ͯ͠͠·͏ͱɺϒϥ΢β࣮ߦ࣌ʹΤϥʔʹͳΔɻ
    ʢcustom-elements-es5-adapter.js Λ࢖͑͹Α͍͔΋͠Εͳ͍͕ɺ
    ͦ΋ͦ΋ ES6 Λαϙʔτ͍ͯ͠Δϒϥ΢βΛର৅ͱ͍ͯ͠Δͷʹ
    Θ͟Θ͟ ES5 ʹม׵͢Δͷʁʣ
    

    View Slide

41. (›°□°ʣ›ớ ᵲᴸᵲ
    

    View Slide

42. ࢓ํ͕ͳ͍ͷͰɺUMD ൛΋༻ҙ
    Format File
    ES Module kaizen-app-elememts.esm.js
    UMD kaizen-app-elememts.umd.js
    

    View Slide

43. rollup Ͱ2όʔδϣϯΛੜ੒
    

    View Slide

44. index.html ͰಡΈࠐΜͰར༻
    

    View Slide

45. ·ͱΊ
    

    View Slide

46. ·ͱΊ
    • Web Components Λຊ൪౤ೖ͠Α͏ͱ͢Δͱɺ͍Ζ
    ͍ΖͱϋϚΔϙΠϯτ͸·ͩଟ͍ɻ
    • Ͱ΋ࠓ͔Β஌ݟΛཷΊ͓ͯ͘Ձ஋͸͋Δͱࢥ͏ɻ
    • ·ͣ͸ࣾ಺΍ݸਓͷখ͞ͳϓϩδΣΫτͰࢼͯ͠Έͯ
    ͸ʁ
    • lit-html ΍ Polymer ͷಈ͖΋׆ൃͳͷͰɺؾ͕ख़͢Δ
    ͷΛ৺଴ͪʹ͠·͠ΐ͏ʂ
    

    View Slide

47. We are hiring!
    Kaizen Platform Ͱ͸ΤϯδχΞΛืू͍ͯ͠·͢ɻ
    ڵຯͷ͋Δํ͸ https://jobs.lever.co/kaizenplatform?team=Engineer ·Ͱʂ
    

    View Slide