Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

͜͏͍͏ͷ

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Α͠ɺWebpackͩʂ

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Webpackͷexternalsͷࢦఆ

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

css loaderͷར༻ IPHFSFBDUKT IPHFTDTT

Slide 27

Slide 27 text

css loaderͷར༻

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

ΤϯδχΞઈࢍืूதʂ

Slide 33

Slide 33 text

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