webpackによる人類共通コンポーネント計画

gotanda.js#3のLT資料です

Transcript

1. WebpackʹΑΔ
   ਓྨڞ௨

   ίϯϙʔωϯτܭը
   @joe_re
   

   View Slide

2. twitter: @joe_re

   github: @joe-re
   - ໊લ: ͡ΐ͏
   - freeeͱ͍͏ձࣾͰಇ͍͍ͯ·͢
   - ࠓ͸Ϋϥ΢υڅ༩ܭࢉ΍ͬͯ·͢
   

   View Slide

3. React͕୆಄͠ɺੈք͸·͞
   ʹେίϯϙʔωϯτ࣌୅ʂʂʂ
   

   View Slide

4. ͱ͜ΖͰͦ΋ͦ΋
   ίϯϙʔωϯτͬͯԿʁʁʁ
   

   View Slide

5. DOM͓Αͼ
   ৼΔ෣͍͕ఆٛ͞Εͨ΋ͷ
   

   View Slide

6. ίϯϙʔωϯτࢦ޲ʹ͓͚Δ
   ίϯϙʔωϯτ͸࠶ར༻Մೳ
   Ͱͳ͚Ε͹ͳΒͳ͍
   

   View Slide

7. ࠶ར༻Մೳͳίϯϙʔωϯτ
   Λ࡞Δʹ͸ʁ
   

   View Slide

8. ίϯϙʔωϯτ͸༩͑ΒΕͨ
   ஋ΛϢʔβͷཧղͰ͖Δ
   View(DOM)ʹม׵͢Δɺ
   DOMม׵ػʹప͢Δ
   

   View Slide

9. ༩͑ΒΕͨ஋͕ಉ͡ͳͷʹɺ
   ҧ͏ϨϯμϦϯά݁Ռʹͳͬ
   ͯ͸͍͚ͳ͍
   

   View Slide

10. ඳըͷݩʹͳΔ஋ͷੜ੒ϩδο
    Ϋ͸ܾͯ͠ίϯϙʔωϯτʹ
    ؚΜͰ͸͍͚ͳ͍
    (ͦͷͨΊͷFlux)
    

    View Slide

11. ਓྨڞ௨ίϯϙʔωϯτͱ͸
    

    View Slide

12. ͜͏͍͏ͷ
    

    View Slide

13. ͜͏ݟ͑ͯ໿150ߦͷ

    ϩδοΫ͕٧·͍ͬͯΔ
    • ݺͼग़࣌͠ʹmax-minͷൣғܾΊΒΔ
    • ݄ͷબ୒ΛҰϲ݄લʹม͑ͨ࣌ʹɺଘࡏ͠ͳ
    ͍೔෇Λબ୒͠ͳ͍

    (2016/3/31 ➡ 2016/2/29ʹͳΔ)
    • ͳͲͳͲ
    

    View Slide

14. ڞ௨Խͯ͠ͲͷϓϩμΫτ͔
    ΒͰ΋ݺ΂ΔΑ͏ʹ͍ͨ͠ʂ
    

    View Slide

15. ڞ௨ίϯϙʔωϯτͱ͢Δ͜ͱ
    Ͱ
    • ڞ௨Ͱ࢖͏Α͏ͳinputɺselectͳͲʹ͓͍ͯɺݟ
    ͨ໨΍ૢ࡞ੑʹϓϩμΫτ͝ͱʹൃੜ͢Δ͹Βͭ
    ͖Λͳͤ͘Δ

    (freeeϒϥϯυͷΞϓϦέʔγϣϯʹ͓͚Δڞ௨ͷ
    ݟͨ໨ɺৼΔ෣͍Λ࣋ͨͤΔ)
    • ࠶ར༻ੑͷߴ͍ίϯϙʔωϯτʹΑΔ։ൃͷޮ཰
    Խ
    

    View Slide

16. ஫ҙ
    • ਓྨڞ௨ͱ͍͍ͭͭɺ͜͜Ͱ͍͏ਓྨʹ͸

    1ͭͷձࣾͷఏڙ͢ΔWebΞϓϦέʔγϣϯͱ
    ͦΕΛར༻͢ΔϢʔβ͔͠ଘࡏ͠·ͤΜ
    • Reactͷ࢖༻Λલఏʹ͓࿩͠·͢
    

    View Slide

17. Α͠ɺWebpackͩʂ
    

    View Slide

18. Webpackͱ͸
    • WebΞϓϦέʔγϣϯͷ੩తΞηοτͷϏϧυ
    πʔϧͰ͢
    • JSͷτϥϯεύΠϧ΍ґଘղܾ͸΋ͪΖΜͰ͖
    ·͢
    • JS͚ͩͰͳ͘Style΍ImageͳͲͷϏϧυ͓Αͼ
    όϯυϧ΋αϙʔτ͠·͢
    

    View Slide

19. ࠶ར༻Մೳͳίϯϙʔωϯτ΁
    ͷཉ๬
    • τϥϯεύΠϧʹඞཁͳπʔϧͷόʔδϣϯ͸ཁٻͨ͘͠ͳ
    ͍(babelͷόʔδϣϯͱ͔)
    • ͱ͸͍͑࢖༻͢ΔϥΠϒϥϦͷࡉ͔ͳόʔδϣϯ͸֤Ξϓ
    ϦέʔγϣϯͰ؅ཧ͍ͨ͠
    • ݟͨ໨΋ἧ͍͑ͨ(styleఆٛ΋ؚΈ͍ͨ)
    • ͱ͸͍͑ར༻ଆͰstyleͷඍௐ੔͸͍ͨ͠(styleͷଧͪফ͠΍
    ্ॻ͖͕༰қͰ͋Δඞཁ͕͋Δ)
    

    View Slide

20. ͬ͘͟Γํ਑
    • τϥϯεύΠϧޙͷjsΛఏڙ͢Δ
    • ࢖༻͢ΔϥΠϒϥϦ͸externalsʹࢦఆ͢Δ
    • css loaderΛ࢖͍ɺstyleఆٛΛϩʔΧϧείʔ
    ϓͰ࣋ͨͤΔ
    

    View Slide

21. Webpackͷexternalsͷࢦఆ
    

    View Slide

22. Webpackͷexternalsͷࢦఆ
    ᶃFYUFSOBMTର৅ͷจࣈྻ ᶄτϥϯεύΠϧޙͷจࣈྻ
    ᶅґଘղܾํ๏
    

    View Slide

23. ɾϏϧυલ
    ɾϏϧυޙ
    XFCQBDL
    Webpackͷexternalsͷࢦఆ
    

    View Slide

24. ɾϏϧυલ
    ɾϏϧυޙ
    XFCQBDLͰϏϧυ
    Webpackͷexternalsͷࢦఆ
    ᶃFYUFSOBMTର৅ͷจࣈྻ
    ᶅґଘղܾํ๏
    ᶄτϥϯεύΠϧޙͷจࣈྻ
    

    View Slide

25. externalsࢦఆͰಘΔ΋ͷ
    • ϥΠϒϥϦͷόʔδϣϯࢦఆ͸ར༻ଆʹدͤ
    ΒΕΔ
    • ϏϧυޙͷjsΛఏڙͯ͠΋αΠζ͕཈͑ΒΕΔ
    

    View Slide

26. css loaderͷར༻
    IPHFSFBDUKT
    IPHFTDTT
    

    View Slide

27. css loaderͷར༻
    

    View Slide

28. css loaderʹΑͬͯಘΔ΋ͷ
    • style΋ίϯϙʔωϯτԽ͢Δ͜ͱͰʹؚΉ͜ͱͰɺݟͨ໨ͷ͹
    Β͖ͭΛ཈͑ΒΕΔ
    • ϩʔΧϧείʔϓ͸ηϨΫλ໊Λbase64ͰΤϯίʔυ͢Δ͜ͱ
    ʹΑ࣮ͬͯݱ͍ͯ͠ΔɻΫϥε໊͕มΘΔ͚ͩͰৄࡉ౓͕ߴ͘ͳ
    Δ͜ͱ͸ͳ͍

    (Αͬͯ֎෦͔ΒͷελΠϧͷଧͪফ͠ɾ্ॻ͖͕༰қʹͰ͖Δ)
    • ίϯϙʔωϯτ։ൃ࣌ʹηϨΫλͷিಥΛؾʹ͠ͳͯ͘ྑ͘ͳ
    Δ
    

    View Slide

29. ίϯϙʔωϯτͷߏ଄ͷن໿
    ൪֎ଆʹ͸֎෦͔Β౉͞ΕͨDMBTT/BNFͱɺϩʔΧϧείʔϓΛDMBTT/BNFʹ͢Δ
    ൪໨͸ίϯϙʔωϯτͷ໊ΛDMBTT/BNFʹ͢Δ
    ͦΕΑΓ಺ଆʹίϯϙʔωϯτͷ಺༰Λهड़͢Δ
    

    View Slide

30. ن໿Λ࣋ͨͤΔ͜ͱͰɺ
    ֎෦͔ΒͷελΠϧͷ
    ଧͪফ͠΍্ॻ͖͕
    ͠΍͘͢ͳΔ
    

    View Slide

31. ن໿ʹ͍ͭͯ͸

    ઈࢍࢼߦࡨޡதͰ͢ɻɻ
    

    ྑ͍ϓϥΫςΟε͝ଘ஌Ͱ͠
    ͨΒੋඇڭ͍͑ͯͩ͘͞ʂ
    

    View Slide

32. ΤϯδχΞઈࢍืूதʂ
    

    View Slide

33. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
    

    View Slide