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

gotanda.js#3のLT資料です

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. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ