現代フロントエンドに欠かせないwebpackとBabelを理解しよう

by sakito

Slide 1

Slide 1 text

ݱ୅ϑϩϯτΤϯυʹ͔ܽͤͳ͍  XFCQBDLͱ#BCFMΛཧղ͠Α͏ʂ CVJMEFSTDPOUPLZP

Slide 2

Slide 2 text

/BNF 4BLJUP.VLBJ 5XJUUFS  !@@TBLJUP@@ $PNQBOZ $ZCP[VJOD  'SPOUFOE&YQFSU5FBN "CPVUNF

Slide 3

Slide 3 text

w#BCFMͷલʹݱࡏͷ+BWB4DSJQUʹ͍ͭͯ w#BCFMʹ͍ͭͯ wXFCQBDLʹ͍ͭͯ wXFCQBDL#BCFMͰ಺෦࣮૷Λ௥͍ͬͯ͘ "HFOEB

Slide 4

Slide 4 text

#BCFMͷલʹݱࡏͷ+BWB4DSJQUʹ͍ͭͯ

Slide 5

Slide 5 text

&$."4DSJQUͱ5$ w+BWB4DSJQUʹ͸&$."4DSJQUͱ͍͏ݴޠ࢓༷͕͋Δ w͜ͷݴޠ࢓༷ΛܾΊ͍ͯΔҕһձ͕5$  5FDIOJDBM$PNNJUUFF w&4 &4 Ҏ߱͸೥࣍ͰϦϦʔεΛߦͳ͍ͬͯ·͢  &4&4ʜ wͰ͸ͲͷΑ͏ʹػೳΛܾΊ͍ͯΔͷ͔ʁ

Slide 6

Slide 6 text

&$."4DSJQUʹ͓͚Δஈ֊ͷ4UBHF w 4UBHF4USBXQFSTPO  ΞΠσΟΞஈ֊ w 4UBHF1SPQPTBM  ࢓༷ͷχʔζɺ࢖༻ྫɺݒ೦఺ɺ໨తΛղઆ͢Δஈ֊ w 4UBHF%SBGU  ߏจɺηϚϯςΟοΫɺ"1*͕༻ҙͰ͖͕ͨɺ  มߋͷՄೳੑ͕͋Δஈ֊ w 4UBHF$BOEJEBUF  &$."4DSJQUFEJUPST͔Βͷঝೝ͕ԼΓɺ  ֎෦͔ΒͷϑΟʔυόοΫΛ΋Β͏ஈ֊ w 4UBHF'JOJTIFE  UFTUͷςετ͕׬ྃ͠ɺͭҎ্ͷϒϥ΢βͰ  ࣮૷͞Εɺ&$."4DSJQUFEJUPST͔Β࢓༷ςΩετͷঝೝ͕ԼΓͨஈ֊ w 5$ͷঝೝΛ௨Γɺਖ਼ࣜʹ&$."4DSJQUͷ࢓༷ʹ௥Ճ

Slide 7

Slide 7 text

Slide 8

Slide 8 text

+BWB4DSJQU&OHJOF w ৽͍͠+BWB4DSJQUͷػೳΛϒϥ΢βͰ࢖༻Ͱ͖Δ͔͸  +BWB4DSJQU&OHJOF࣍ୈ w ϒϥ΢βʹΑͬͯ+BWB4DSJQU&OHJOF͸ҧ͏ w $ISPNF7 w 'JSFGPY4QJEFS.POLFZ w 4BGBSJ+BWB4DSJQU$PSF w &HFɺ*&$IBLSB w &EHF͸ݱࡏ7ʹมߋ͞ΕΔ༧ఆ w ϒϥ΢βόʔδϣϯʹΑͬͯ࢖༻Ͱ͖Δػೳʹ͕ࠩ  ى͖Δ

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

#BCFMͱ͸ʁ

Slide 11

Slide 11 text

#BCFMͱ͸ʁ w+BWB4DSJQUͷDPNQJMFS w༷ʑͳ+BWB4DSJQUͷίʔυΛม׵Ͱ͖Δ w +49ߏจ΍5ZQF4DSJQU΋+BWB4DSJQUʹม׵Ͱ͖Δ

Slide 12

Slide 12 text

#BCFMͷ஀ੜ wݩʑ͸UPͱ͍͏໊લͩͬͨ w&4͔Β&4΁ίʔυΛม׵͢Δػೳ͔͍࣋ͬͯ͠ͳ͔ͬͨ w͔ͦ͜Β༷ʑͳཁ๬͕͋Γɺ#BCFMʹมߋ͞Εͨ

Slide 13

Slide 13 text

ͳͥ#BCFM͕ඞཁͳͷ͔ w࢖༻Ͱ͖Δ+BWB4DSJQU͸ϒϥ΢βʹΑͬͯҟͳΔ wศརͳػೳ͸࢖͍͍ͨ wͦ͜Ͱɺ৽͍͠+BWB4DSJQUΛ  ֤ϒϥ΢βͰ࢖༻Ͱ͖ΔΑ͏ʹ͢ΔͨΊ#BCFMΛ࢖༻͢Δ

Slide 14

Slide 14 text

#BCFMͷػೳ wߏจม׵ wλʔήοτϒϥ΢βʹͳ͍؀ڥͷ1PMZpMMͷఏڙ wιʔείʔυม׵ DPEFNPET

Slide 15

Slide 15 text

#BCFM͸+BWB4DSJQUΛม׵͢Δ +BWB4DSJQU 5ZQF4DSJQU +49 +BWB4DSJQU

Slide 16

Slide 16 text

ରԠ͍ͯ͠ͳ͍ϒϥ΢β͕ଘࡏ

Slide 17

Slide 17 text

֤ϒϥ΢βͰ࢖༻Ͱ͖Δߏจʹม׵

Slide 18

Slide 18 text

֤ϒϥ΢βͰ࢖༻Ͱ͖Δߏจʹม׵ +BWB4DSJQU

Slide 19

Slide 19 text

ίʔυΛͲͷΑ͏ʹม׵͢Δͷ͔ʁ

Slide 20

Slide 20 text

#BCFMͷม׵ʹ͸ͭͷஈ֊͕͋Δ w1BSTJOH!CBCFMQBSTFS  ιʔείʔυΛ"CTUSBDU4ZOUBY5SFF "45 ʹม׵ w5SBOTGPSNBUJPO  "45Λม׵͢Δɺ#BCFMͷϓϥάΠϯ͕  ͜ͷ໾ׂΛ୲͍ͬͯΔ w$PEF(FOFSBU!CBCFMHFOFSBUPS  "45Λιʔείʔυʹม׵͢Δ

Slide 21

Slide 21 text

#BCFMͷม׵ʹ͸ͭͷஈ֊͕͋Δ 1BSTJOH ιʔε "45 5SBOTGPSNBUJPO "45 $PEF(FOFSBU ιʔε

Slide 22

Slide 22 text

࣮ࡍʹ#BCFMΛಈ͔͢

Slide 23

Slide 23 text

Slide 24

Slide 24 text

#BCFMΛ࣮ߦͰ͖Δ؀ڥͷ४උ

Slide 25

Slide 25 text

#BCFMΛ࣮ߦ

Slide 26

Slide 26 text

ੜ੒͞Εͨ+BWB4DSJQU

Slide 27

Slide 27 text

ͳʹ΋มΘ͍ͬͯͳ͍

Slide 28

Slide 28 text

1BSTJOH ιʔε "45 5SBOTGPSNBUJPO "45 $PEF(FOFSBU ιʔε ߦΘΕͨॲཧ

Slide 29

Slide 29 text

1BSTJOH ߦΘΕͨॲཧ JOEFYKT "45 5SBOTGPSNBUJPO "45 $PEF(FOFSBU MJCJOEFYKT !CBCFMDMJ !CBCFMDPSF !CBCFMQBSTFS !CBCFMHFOFSBUPS 1BSTJOH

Slide 30

Slide 30 text

1BSTJOH ߦΘΕͨॲཧ JOEFYKT "45 5SBOTGPSNBUJPO "45 $PEF(FOFSBU MJCJOEFYKT !CBCFMDMJ !CBCFMDPSF !CBCFMQBSTFS !CBCFMHFOFSBUPS 1BSTJOH

Slide 31

Slide 31 text

ߦΘΕͨॲཧ w!CBCFMDPSFʹ͸ιʔείʔυΛมߋ͢Δػೳ͕ͳ͍ wίʔυΛ"45ʹม׵͠ɺͳʹ΋มߋΛՃ͑ͣʹ  ࠶౓"45Λίʔυม׵ͯ͠ݩʹ໭ͬͨ wม׵͞Εͨ"45ʹରͯ͠มߋΛߦ͏ͷ͸ɺ  #BCFM1MVHJOͷ໾ׂ

Slide 32

Slide 32 text

࠶౓#BCFMΛಈ͔͢

Slide 33

Slide 33 text

#BCFMΛ࣮ߦ͢ΔͨΊʹ༻ҙ͢Δ΋ͷ w!CBCFMDMJ  ࣮ߦίϚϯυΛ༻ҙɺϑΝΠϧ΍σΟϨΫτϦͷ൑ఆΛ  ߦͳ͓ͬͯΓɺ಺෦తʹ͸!CBCFMDPSFʹґଘ͍ͯ͠Δ w!CBCFMDPSF  !CBCFMQBSTFS !CBCFMUSBWFSTF !CBCFMHFOFSBUPS  ͳͲΛ࢖༻ͯ͠ɺઃఆͷಡΈࠐΈ΍ίʔυͷม׵ɺੜ੒Λߦ͏ w#BCFM1MVHJOT  ίʔυʹม׵ΛՃ͑Δɺࠓճ͸  !CBCFMQMVHJOUSBOTGPSNBSSPXGVODUJPOTΛ࢖༻͢Δ w#BCFM1SFTFUT  #BCFM1MVHJOͷηοτɺ!CBCFMQSFTFUFOW΍!CBCFMQSFTFUSFBDU  ͳͲΛࢦ͢ɻࠓճ͸࢖༻͠ͳ͍

Slide 34

Slide 34 text

#BCFMΛ࣮ߦͰ͖Δ؀ڥͷ४උ

Slide 35

Slide 35 text

#BCFMΛ࣮ߦ

Slide 36

Slide 36 text

ੜ੒͞Εͨ+BWB4DSJQU

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

ߦΘΕͨॲཧ w !CBCFMQBSTFSͰ"45ม׵ w ม׵͞Εͨ"45ʹ!CBCFMQMVHJOUSBOTGPSNBSSPXGVODUJPOT͕  มߋΛՃ͑Δ w !CBCFMHFOFSBUPSͰ"45Λίʔυʹͨ͠΋ͷΛੜ੒

Slide 39

Slide 39 text

1BSTJOH ߦΘΕͨॲཧ JOEFYKT "45 5SBOTGPSNBUJPO "45 $PEF(FOFSBU MJCJOEFYKT !CBCFMDMJ !CBCFMDPSF !CBCFMQBSTFS !CBCFMHFOFSBUPS 1BSTJOH !CBCFMQMVHJOUSBOTGPSNBSSPXGVODUJPOT

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

XFCQBDLͱ͸ʁ

Slide 42

Slide 42 text

XFCQBDLͱ͸ʁ wXFCQBDL͸Ϟδϡʔϧόϯυϥʔ w+BWB4DSJQU͚ͩͰ͸ͳ͘ɺJNHɺDTTͳͲ΋Ϟδϡʔϧ wͦΕΒͷґଘؔ܎Λղܾ͢Δ w༷ʑͳλʔήοτͰར༻Ͱ͖Δܗʹग़ྗ͢Δ w΄΅1MVHJOTγεςϜͰߏ੒͞Ε͍ͯΔ

Slide 43

Slide 43 text

༷ʑͳλʔήοτ

Slide 44

Slide 44 text

XFCQBDLͱ͸ʁ

Slide 45

Slide 45 text

XFCQBDLͷ஀ੜ w$PNNPO+4Λϒϥ΢βʔ༻ʹม׵͢Δ  ʮNPEVMFTXFCNBLFʯ͕͋ͬͨ w͜Εʹ$PEF4QMJUUJOHػೳΛ௥Ճ͢ΔఏҊΛ͕ͨ͠ɺ  ड͚ೖΕΒΕͳ͔ͬͨ wͦͷͨΊNPEVMFTXFCNBLFΛ'PSLͯ͠ɺ  ಠࣗػೳͷ௥ՃΛͨ͠΋ͷΛ  XFCQBDLͱͯ͠ϦωʔϜ͠ɺϓϩδΣΫτʹ

Slide 46

Slide 46 text

XFCQBDLͷ஀ੜ

Slide 47

Slide 47 text

XFCQBDLͷ஀ੜ w̍ͭͷόϯυϥʔͱͯ͠։ൃΛଓ͚͍ͯͨͱ͜Ζ  *OTUBHSBNͷϓϩδΣΫτͰ࢖༻͞Εɺ஫໨ΛཋͼΔ wͦͷޙ3FBDUʹؔ࿈͢Δ044Ͱ࢖༻͞Εɺ  രൃతʹ࢖༻͞ΕΔΑ͏ʹ wࠓ͸3FBDU͚ͩͰ͸ͳ͘ɺ"OHVMBSɺ7VFͳͲΛ  ѻ͏ࡍʹ΋࢖༻͞Ε͍ͯΔ

Slide 48

Slide 48 text

XFCQBDLͷ஀ੜ

Slide 49

Slide 49 text

XFCQBDLͷίϯηϓτ

Slide 50

Slide 50 text

$PODFQUT w &OUSZ  ى఺ͱͳΔϑΝΠϧΛࢦఆ w 0VUQVU  ॲཧ͕׬ྃͨ͠ϑΝΠϧΛग़ྗ͢Δ w -PBEFST  ࢦఆϑΝΠϧʹ೚ҙͷॲཧΛՃ͑ΔɺͭͷλεΫ w 1MVHJOT  XFCQBDLͷ༷ʑͳΠϕϯτΛIPPL͠ɺσʔλΛૢ࡞ͨ͠Γ  ॲཧΛ࣮ߦͰ͖Δ w .PEF  OPOF EFWFMPQNFOU QSPEVDUJPOΛࢦఆ͠ɺ  NPEFʹԠͯ͡ɺύϑΥʔϚϯε࠷దԽ΍ѹॖͳͲΛߦ͏ w #SPXTFS$PNQBUJCJMJUZ  ϒϥ΢βͷޙํޓ׵ੑ 

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

࣮ࡍʹॲཧΛ௥͍͔͚ͯ಺෦࣮૷ΛΈ͍ͯ͘

Slide 53

Slide 53 text

࣮ߦ؀ڥͷ४උ

Slide 54

Slide 54 text

࣮ߦ؀ڥͷ४උ

Slide 55

Slide 55 text

࣮ߦ؀ڥͷ४උ

Slide 56

Slide 56 text

࣮ߦ wCJOXFCQBDLKTΛ࣮ߦ wͦͷதͰCJOXFCQBDLDMJΛ࣮ߦ͍ͯ͠Δ wͦͷͨΊɺXFCQBDLDMJͷΠϯετʔϧ΋ඞਢ wXFCQBDLDPOpHKTΛಡΈࠐΉ

Slide 57

Slide 57 text

XFCQBDLͷ಺෦Ͱ࢖༻͞Ε͍ͯΔॏཁͳϝιου

Slide 58

Slide 58 text

XFCQBDLDMJMJCVUJMTDPNQJMFSKT XFCQBDLͷύοέʔδΛఆٛ

Slide 59

Slide 59 text

XFCQBDLMJCXFCQBDLKT wXFCQBDL0QUJPOT"QQMZ QSPDFTT PQUJPOT DPNQJMFS Λ࣮ߦ w$PNQJMFS XFCQBDLMJC$PNQJMFSKT ΠϯελϯεΛੜ੒࣮ͯ͠ߦ

Slide 60

Slide 60 text

XFCQBDLMJC8FCQBDL0QUJPOT"QQMZKT wϓϥάΠϯΛద༻͍ͯ͘͠

Slide 61

Slide 61 text

XFCQBDLMJC$PNQJMFSKT

Slide 62

Slide 62 text

XFCQBDLMJC$PNQJMFSKT wఆٛݩ͸XFCQBDL5BQBCMF wXFCQBDLͷ  ϓϥάΠϯΠϕϯτΛऔಘ͢Δ

Slide 63

Slide 63 text

XFCQBDLMJC$PNQJMFSKT wDPNQJMBUJPOΠϯελϯεΛ  ੜ੒ wIPPLTNBLFͰ  ผͷϓϥάΠϯ΋ฒྻͰ  ಈ͘Α͏ʹ

Slide 64

Slide 64 text

XFCQBDLMJC8FCQBDL0QUJPOT"QQMZKT wXFCQBDL0QUJPOT"QQMZ QSPDFTT PQUJPOT DPNQJMFS ʹ  ໭ͬͯ͘Δ w&OUSZ0QUJPO1MVHJO͕࣮ߦ͞ΕΔ

Slide 65

Slide 65 text

XFCQBDLMJC&OUSZ0QUJPO1MVHJOKT ୯ҰͷFOUSZΛఆ͍ٛͯ͠ΔͷͰ  4JOHMF&OUSZ1MVHJO͕ݺ͹ΕΔ

Slide 66

Slide 66 text

XFCQBDLMJC4JOHMF&OUSZ1MVHJOKT w BEE&OUSZϝιουͰ&OUSZ͔Β  ґଘؔ܎Λදͨ͠ΠϯελϯεΛ ੜ੒ w $PNQJMBUJPOBEE.PEVMF$IBJO Λ࣮ߦ

Slide 67

Slide 67 text

XFCQBDLMJC/PSNBM.PEVMF'BDUPSZKT wXFCQBDLFOIBODFESFTPMWFΛ࢖༻ͯ͠ɺSFRVFTUΛղܾ wXFCQBDLMJC3VMF4FUKTʹఆΊΒΕͨSVMFTΛॲཧ͢Δ wMPBEFSͷϦΫΤετΛղܾ͢Δ w/PSNBM.PEVMFͷΠϯελϯεΛੜ੒

Slide 68

Slide 68 text

XFCQBDLMJC/PSNBM.PEVMFKT wXFCQBDLMPBEFSSVOOFSΛ࢖༻ͯ͠ɺ  MPBEFSͷॲཧΛద༻ w͜͜ͰCBCFMMPBEFSͷॲཧ͕௥Ճ͞ΕΔ wXFCQBDL1BSTFSͰ1BSTF w1BSTFͷதͰɺґଘؔ܎ʹ௥Ճ

Slide 69

Slide 69 text

XFCQBDLMJC4JOHMF&OUSZ1MVHJOKT w BEE&OUSZϝιουͰ&OUSZ͔Β  ґଘؔ܎Λදͨ͠ΠϯελϯεΛੜ੒ w $PNQJMBUJPOBEE.PEVMF$IBJOΛ࣮ߦ

Slide 70

Slide 70 text

$PNQJMBUJPOBEE.PEVMF$IBJO wઌ΄ͲΠϯελϯεԽͨ͠ґଘؔ܎Λ%FQͱͯ͠ड͚औΔ wUIJTNPEVMF'BDUPSZͰґଘؔ܎Λऔಘ͢Δ  OFX.BQ %FQ HFU w.PEVMF'BDUPSZDSFBUFͰNPEVMFΛฦ٫͢Δ w $PNQJMBUJPOBEE.PEVMF w ͢ͰʹίϯύΠϧ಺ʹNPEVMF͕͋Δ৔߹΍ɺ  DBDIF͕͋Δ৔߹ʹ w $PNQJMBUJPOCVJME.PEVMF w NPEVMFΛϏϧυ͢Δ

Slide 71

Slide 71 text

ॲཧͷྲྀΕΛͬ͘͟ΓՄࢹԽ

Slide 72

Slide 72 text

·ͱΊ

Slide 73

Slide 73 text

·ͱΊ w#BCFM w༷ʑͳ+BWB4DSJQUͷίʔυΛม׵Ͱ͖Δ wXFCQBDL wϞδϡʔϧόϯυϥʔ wϑϩϯτΤϯυͱͯ͠਎ʹ͚͓͍ͭͯͯଛ͸ͳ͍஌ࣝ wத਎΋ֶΜͰͲΜͲΜ࢖͍౗͍͖ͯ͠·͠ΐ͏ʂ

Slide 74

Slide 74 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠