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

Transcript

1. WebpackʹΑΔ ਓྨڞ௨
 ίϯϙʔωϯτܭը @joe_re

2. twitter: @joe_re
 github: @joe-re - ໊લ: ͡ΐ͏ - freeeͱ͍͏ձࣾͰಇ͍͍ͯ·͢ -

   ࠓ͸Ϋϥ΢υڅ༩ܭࢉ΍ͬͯ·͢

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

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

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

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

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

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

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

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

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

12. ͜͏͍͏ͷ

13. ͜͏ݟ͑ͯ໿150ߦͷ
 ϩδοΫ͕٧·͍ͬͯΔ • ݺͼग़࣌͠ʹmax-minͷൣғܾΊΒΔ • ݄ͷબ୒ΛҰϲ݄લʹม͑ͨ࣌ʹɺଘࡏ͠ͳ ͍೔෇Λબ୒͠ͳ͍
 (2016/3/31 ➡ 2016/2/29ʹͳΔ)

    • ͳͲͳͲ

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

15. ڞ௨ίϯϙʔωϯτͱ͢Δ͜ͱ Ͱ • ڞ௨Ͱ࢖͏Α͏ͳinputɺselectͳͲʹ͓͍ͯɺݟ ͨ໨΍ૢ࡞ੑʹϓϩμΫτ͝ͱʹൃੜ͢Δ͹Βͭ ͖Λͳͤ͘Δ
 (freeeϒϥϯυͷΞϓϦέʔγϣϯʹ͓͚Δڞ௨ͷ ݟͨ໨ɺৼΔ෣͍Λ࣋ͨͤΔ) • ࠶ར༻ੑͷߴ͍ίϯϙʔωϯτʹΑΔ։ൃͷޮ཰

    Խ

16. ஫ҙ • ਓྨڞ௨ͱ͍͍ͭͭɺ͜͜Ͱ͍͏ਓྨʹ͸
 1ͭͷձࣾͷఏڙ͢ΔWebΞϓϦέʔγϣϯͱ ͦΕΛར༻͢ΔϢʔβ͔͠ଘࡏ͠·ͤΜ • Reactͷ࢖༻Λલఏʹ͓࿩͠·͢

17. Α͠ɺWebpackͩʂ

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

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

    • ͱ͸͍͑ར༻ଆͰstyleͷඍௐ੔͸͍ͨ͠(styleͷଧͪফ͠΍ ্ॻ͖͕༰қͰ͋Δඞཁ͕͋Δ)

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

21. Webpackͷexternalsͷࢦఆ

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

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

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

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

26. css loaderͷར༻ IPHFSFBDUKT IPHFTDTT

27. css loaderͷར༻

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

    • ίϯϙʔωϯτ։ൃ࣌ʹηϨΫλͷিಥΛؾʹ͠ͳͯ͘ྑ͘ͳ Δ

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

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

31. ن໿ʹ͍ͭͯ͸
 ઈࢍࢼߦࡨޡதͰ͢ɻɻ 
 ྑ͍ϓϥΫςΟε͝ଘ஌Ͱ͠ ͨΒੋඇڭ͍͑ͯͩ͘͞ʂ

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

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