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

2917a3c430817eb71086f8973c06ebba?s=47 sakito
August 30, 2019

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

builderscon tokyo 2019の登壇資料
https://builderscon.io/tokyo/2019

Twitter
https://twitter.com/__sakito__

2917a3c430817eb71086f8973c06ebba?s=128

sakito

August 30, 2019
Tweet

Transcript

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

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

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

  4. #BCFMͷલʹݱࡏͷ+BWB4DSJQUʹ͍ͭͯ

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

    wͰ͸ͲͷΑ͏ʹػೳΛܾΊ͍ͯΔͷ͔ʁ
  6. &$."4DSJQUʹ͓͚Δஈ֊ͷ4UBHF w 4UBHF4USBXQFSTPO
 ΞΠσΟΞஈ֊ w 4UBHF1SPQPTBM
 ࢓༷ͷχʔζɺ࢖༻ྫɺݒ೦఺ɺ໨తΛղઆ͢Δஈ֊ w 4UBHF%SBGU
 ߏจɺηϚϯςΟοΫɺ"1*͕༻ҙͰ͖͕ͨɺ


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


    มߋͷՄೳੑ͕͋Δஈ֊ w 4UBHF$BOEJEBUF
 &$."4DSJQUFEJUPST͔Βͷঝೝ͕ԼΓɺ
 ֎෦͔ΒͷϑΟʔυόοΫΛ΋Β͏ஈ֊ w 4UBHF'JOJTIFE
 UFTUͷςετ͕׬ྃ͠ɺͭҎ্ͷϒϥ΢βͰ
 ࣮૷͞Εɺ&$."4DSJQUFEJUPST͔Β࢓༷ςΩετͷঝೝ͕ԼΓͨஈ֊ w 5$ͷঝೝΛ௨Γɺਖ਼ࣜʹ&$."4DSJQUͷ࢓༷ʹ௥Ճ
  8. +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 ϒϥ΢βόʔδϣϯʹΑͬͯ࢖༻Ͱ͖Δػೳʹ͕ࠩ
 ى͖Δ
  9. None
  10. #BCFMͱ͸ʁ

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

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

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

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

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

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

  17. ֤ϒϥ΢βͰ࢖༻Ͱ͖Δߏจʹม׵

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

  19. ίʔυΛͲͷΑ͏ʹม׵͢Δͷ͔ʁ

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

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

  22. ࣮ࡍʹ#BCFMΛಈ͔͢

  23. #BCFMΛ࣮ߦ͢ΔͨΊʹ༻ҙ͢Δ΋ͷ w!CBCFMDMJ
 ࣮ߦίϚϯυΛ༻ҙɺϑΝΠϧ΍σΟϨΫτϦͷ൑ఆΛ
 ߦͳ͓ͬͯΓɺ಺෦తʹ͸!CBCFMDPSFʹґଘ͍ͯ͠Δ w!CBCFMDPSF
 !CBCFMQBSTFS !CBCFMUSBWFSTF !CBCFMHFOFSBUPS
 ͳͲΛ࢖༻ͯ͠ɺઃఆͷಡΈࠐΈ΍ίʔυͷม׵ɺੜ੒Λߦ͏

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

  25. #BCFMΛ࣮ߦ

  26. ੜ੒͞Εͨ+BWB4DSJQU

  27. ͳʹ΋มΘ͍ͬͯͳ͍

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

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

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

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

  32. ࠶౓#BCFMΛಈ͔͢

  33. #BCFMΛ࣮ߦ͢ΔͨΊʹ༻ҙ͢Δ΋ͷ w!CBCFMDMJ
 ࣮ߦίϚϯυΛ༻ҙɺϑΝΠϧ΍σΟϨΫτϦͷ൑ఆΛ
 ߦͳ͓ͬͯΓɺ಺෦తʹ͸!CBCFMDPSFʹґଘ͍ͯ͠Δ w!CBCFMDPSF
 !CBCFMQBSTFS !CBCFMUSBWFSTF !CBCFMHFOFSBUPS
 ͳͲΛ࢖༻ͯ͠ɺઃఆͷಡΈࠐΈ΍ίʔυͷม׵ɺੜ੒Λߦ͏ w#BCFM1MVHJOT


    ίʔυʹม׵ΛՃ͑Δɺࠓճ͸
 !CBCFMQMVHJOUSBOTGPSNBSSPXGVODUJPOTΛ࢖༻͢Δ w#BCFM1SFTFUT
 #BCFM1MVHJOͷηοτɺ!CBCFMQSFTFUFOW΍!CBCFMQSFTFUSFBDU
 ͳͲΛࢦ͢ɻࠓճ͸࢖༻͠ͳ͍
  34. #BCFMΛ࣮ߦͰ͖Δ؀ڥͷ४උ

  35. #BCFMΛ࣮ߦ

  36. ੜ੒͞Εͨ+BWB4DSJQU

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

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

    !CBCFMQBSTFS !CBCFMHFOFSBUPS 1BSTJOH !CBCFMQMVHJOUSBOTGPSNBSSPXGVODUJPOT
  40. None
  41. XFCQBDLͱ͸ʁ

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

  43. ༷ʑͳλʔήοτ

  44. XFCQBDLͱ͸ʁ

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

  46. XFCQBDLͷ஀ੜ

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

  48. XFCQBDLͷ஀ੜ

  49. XFCQBDLͷίϯηϓτ

  50. $PODFQUT w &OUSZ
 ى఺ͱͳΔϑΝΠϧΛࢦఆ w 0VUQVU
 ॲཧ͕׬ྃͨ͠ϑΝΠϧΛग़ྗ͢Δ w -PBEFST
 ࢦఆϑΝΠϧʹ೚ҙͷॲཧΛՃ͑ΔɺͭͷλεΫ

    w 1MVHJOT
 XFCQBDLͷ༷ʑͳΠϕϯτΛIPPL͠ɺσʔλΛૢ࡞ͨ͠Γ
 ॲཧΛ࣮ߦͰ͖Δ w .PEF
 OPOF EFWFMPQNFOU QSPEVDUJPOΛࢦఆ͠ɺ
 NPEFʹԠͯ͡ɺύϑΥʔϚϯε࠷దԽ΍ѹॖͳͲΛߦ͏ w #SPXTFS$PNQBUJCJMJUZ
 ϒϥ΢βͷޙํޓ׵ੑ

  51. None
  52. ࣮ࡍʹॲཧΛ௥͍͔͚ͯ಺෦࣮૷ΛΈ͍ͯ͘

  53. ࣮ߦ؀ڥͷ४උ

  54. ࣮ߦ؀ڥͷ४උ

  55. ࣮ߦ؀ڥͷ४උ

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

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

  58. XFCQBDLDMJMJCVUJMTDPNQJMFSKT XFCQBDLͷύοέʔδΛఆٛ

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

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

  61. XFCQBDLMJC$PNQJMFSKT

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

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

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

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

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

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

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

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

  70. $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ΛϏϧυ͢Δ
  71. ॲཧͷྲྀΕΛͬ͘͟ΓՄࢹԽ

  72. ·ͱΊ

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

  74. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠