͸ͯͳϒϩάͷESMԽ id: nanimono_demonai 2023/9/27 Kyoto Tech Talk #2 

1. ࣗݾ঺հ 2. ͸ͯͳϒϩάͷJS 3. ESMԽͷಈػͱ΍Γํ 4. ύϑΥʔϚϯεվળ 5. ϑΟʔνϟʔϑϥά࣮ݱ 

ࣗݾ঺հ • id: nanimono_demonai • @NanimonoDaemon • େֶͰ͸ػցֶशͷݚڀ • ʮגࣜձࣾ͸ͯͳʯʹ2020೥ʹब৬ • ීஈ͸TypeScript/React/CSSͷ৘ใΛ௥͍ͬͯΔ • ੲSCP-JPͷ؅ཧऀ΍͍ͬͯ·ͨ͠ • ࠓ͸ࣗಈंͷ໔ڐऔΖ͏ͱ͍ͯ͠·͢ 3 

͸ͯͳϒϩάͷ঺հίʔφʔ • ͸ͯͳϒϩά͸ϦϦʔε͔Β12೥໨ʂ • ࠓ೥ͷ6݄ʹ͸هࣄͷ༗ྉൢചػೳ௥Ճʂ • codocגࣜձ͕ࣾఏڙ͢ΔίϯςϯπൢചαʔϏεʮcodocʢίʔυΫʣʯͱͷ ࿈ܞʹΑΓ͸ͯͳϒϩάͰɺϒϩάهࣄͷ༗ྉൢച͕Ͱ͖ΔΑ͏ʹͳΓ·ͨ͠ 4 ೥قͷ͋ΔϓϩμΫτͷ࠷ۙͷ࿩ ࢥ͍͸ݴ༿ʹɻ ͸ͯͳϒϩά͸ɺ͋ͳͨͷࢥ͍΍ߟ͑Λ࢒ͨ͠Γɺ
 ͞·͟·ͳਓ͕௲ͬͨଟ༷ͳՁ஋؍ʹ৮ΕͨΓͰ͖Δ৔ॴͰ͢ɻ 

࠷ۙͷ͸ͯͳϒϩά • ͸ͯͳϒϩάͷύϑΥʔϚϯεΛվળ • ͸ͯͳϒϩάʹϑΟʔνϟʔϑϥάΛ͚ͭͯ։ൃମݧΛ޲্ 5 ͦͷഎޙʹ͸ɺ͸ͯͳϒϩάͷ&4.Խ͋Γ https://staff.hatenablog.com/entry/2023/07/07/122734 ͸ͯͳϒϩάͷӾཡମݧվળͷऔΓ૊Έʹ͍ͭͯ 

͸ͯͳϒϩάͷJS 

͸ͯͳϒϩάͷJS - ྺ࢙ͱແடং • ͸ͯͳϒϩά͸೔ʑ։ൃ͞Ε͍ͯΔ • ϑϩϯτΤϯυͷίʔυ͸ଟ͍ • աڈݱࡏͷϑϩϯτΤϯυͷΪϟοϓ͕ແடংΛੜΉ • ݴޠ, ελΠϧ, ςετ, etc… • Ϟδϡʔϧܗࣜͷࠞࡏ 7 From Kyoto.js 12 https://speakerdeck.com/nanimonodemonai/ hatenaburogufalsehurontoendonizhi-xu- hamotarasaretafalseka ࠓճ͸ϞδϡʔϧΛ੔͑ͨ࿩ +BWB4DSJQU ߦ 5ZQF4DSJQU ߦ 

͸ͯͳϒϩάͷJS - ”چ”ϏϧυπʔϧνΣʔϯ 8 

͸ͯͳϒϩάͷJS - ”چ”ΞʔΩςΫνϟ 9 ϖʔδʹڞ௨ͳJSΛಡΈࠐΜͰ͍Δ 

ESMԽͷಈػͱ΍Γํ 

JSͷϞδϡʔϧܗࣜʹ͍ͭͯ • JSͷϞδϡʔϧܗࣜ • CJS: Node.jsͰ࠾༻͞Ε͍ͯΔܗࣜ • requireؔ਺ͰϞδϡʔϧղܾ • ESM: ES2015͔ΒJSͷ࢓༷ʹೖͬͨϞδϡʔϧܗࣜ • import/exportจͰϞδϡʔϧղܾ • ͸ͯͳϒϩάͰ͸͜ΕΒ͕ࠞࡏ • Ϗϧυ࣌ʹESMΛCJSʹม׵͍ͯͨ͠ (Babel preset-envͱtscon fi gͰmodule = “common”ͱ͍ͯͨ͠) 11 

CJS/ESMࠞࡏͷۤ͠͞ • CJSܗࣜͰಡΈࠐΜͩϞδϡʔϧ͸੩తղੳ͕ޮ͖ͮΒ͍ • CIΛ͢Γൈ͚ͯϏϧυ͸௨Δͷʹɺ࣮ߦ࣌ʹΤϥʔʹͳ͍ͬͯΔ • ESMͳΒ͹Webpack͕Ϗϧυ࣌ʹϞδϡʔϧղܾΛνΣοΫ͢Δ • Ϟδϡʔϧʹؔ͢ΔTreeShaking΍σουίʔυ࡟আ͕ޮ͔ͳ͍ • requireؔ਺Λ࢖ͬͯ΋ޮ͔ͤΒΕΔํ๏͸͋Δ͸͕ͣͩ… 12 &4.$+4͕͍ࠞͬͯ͟Δ͜ͱ͸͠ΜͲ͍ʂʁ 

CJS→ESMԽͷ΍Γํ: આಘฤ • ίʔυͷશ໘తͳมߋʹͳΔͷͰɺ޻਺͕ඞཁ • ಈ࡞νΣοΫΛೖ೦ʹ͍ͨ͠ͳͲ • ޻਺ΛͱͬͯͰ΋΍Δ΂͖λεΫͰ͋Δ͜ͱΛೲಘͯ͠΋Β͍͍ͨ → վળΛߟ͑ٞ࿦Ͱ͖Δ৔ͰઆಘࡐྉΛἧ͑Δ • վળΛߟ͑ٞ࿦Ͱ͖Δ৔ • ͓༡ٔձʢޙड़ʣ • ϑϩϯτΤϯυձ • આಘࡐྉ • ։ൃମݧ޲্, ύϑΥʔϚϯε޲্, ৽ػೳ։ൃ͕ศརʹ, ෳࡶੑ͕গͳ͍ 13 CJS->ESM͸ޮՌ͕͋Γͦ͏ɺͰ΋આ໌͍ͨ͠ΑͶ 

͓༡ٔձ • ;ͩΜͷλεΫҎ֎ͷ͜ͱΛ΍Δ࣌ؒ • ִि ൒೔ • ΤϯδχΞ͕ؾʹͳ͍ͬͯΔ͜ͱ, ࣮͸ෛ୲ʹͳ͍ͬͯΔ͜ͱΛղফ͢Δ खஈͱͯ͠ΤϯδχΞͷࡋྔͰλεΫʹऔΓ૊ΊΔ • ΤϯδχΞ͕Ұ੪ʹ͓༡ٔձλΠϜͰ͖ΔͷͰϫΠϫΠ͠ͳ͕ΒͰ͖Δ • ESMԽͰ͸ٞ࿦લͷঢ়گ֬ೝ΍POCͷ༻ҙʹ໾ཱͯͨ 14 

ϑϩϯτΤϯυձ • νʔϜ಺ͷϑϩϯτΤϯυʹڵຯͷ͋Δ༗ࢤͰఆྫձΛ։͍ͯվળҊΛ ·ͱΊͯɺεϓϦϯτʹ৐࣮ͤͯࢪ͍ͯ͠Δ • ͜͜ͰESMԽͷ࡞ઓΛಥ͖٧Ίͨ 15 νʔϜͰԿΛ΍Δͷ͔ͷೝࣝΛἧ͑ͨ 

CJS→ESMԽͷ΍Γํ: આಘฤ • ։ൃମݧͷ޲্ʹܨ͕Δ • લड़ͷ௨Γ੩తղੳ͕ޮ͖΍͘͢ͳΔ • CJSͱESMࠞࡏΛ࣮ݱ͢ΔͨΊͷઃఆϑΝΠϧͷهड़͕ͳ͘ͳΔ 16 

CJS→ESMԽͷ΍Γํ: આಘฤ • ύϑΥʔϚϯε্͕͕Δ • ֤छܭଌ͔ΒJSͷαΠζ͕ύϑΥʔϚϯεΛԼ͛ΔཁҼͱΘ͔͍ͬͯͨ • ESM౷Ұ͸഑৴͢ΔJSͷαΠζ͕ݮΔࢪࡦͰ࣮ࢪ͢Δҙ͕ٛ͋Δ • TreeShakingͰෆཁͳJSΛݮΒͤΔ 17 https://speakerdeck.com/nanimonodemonai/deng-tan-zi-liao 

CJS→ESMԽͷ΍Γํ: આಘฤ • ৽ػೳ։ൃ͕ศརʹͳΔ • ϑΟʔνϟʔϑϥά͕͋Ε͹… • ։ൃମݧ͕޲্ • ৽ػೳ։ൃ͍ͯ͠Δ͜ͱΛϢʔβʔʹӅ͢͜ͱ͕༰қʹ • σϞ΋͠΍͘͢ • ৽ػೳΛඇΤϯδχΞʹࢼͯ͠΋Β͏ͷ͕༰қʹͳΔ • σϞΛ௨ͯ͡ϦϦʔε·Ͱʹ׬੒౓Λ্͛ΒΕΔ • ͦͷଞʹ΋ • ABςετͱ͔ 18 ͋ͱͰ΋͏Ұճ࿩͠·͢ 

CJS→ESMԽͷ΍Γํ: ࡞ۀฤ • େྔʹ͋ΔͷͰࣗಈม׵ • jscodeshiftͷcommonjs-to-es-module-codemodΛ࢖༻ • ESMʹ౷Ұͨ͠ΒɺWebpack͕ϞδϡʔϧղܾͷΤϥʔΛग़͢Α͏ʹ • ػցతͳஔ׵ʹΑΔΤϥʔ΋ؾ͕͚ͭɺࣗ৴Λ࣋ͬͯҠߦ͕Ͱ͖ͨ 19 ෺ྔ͸ׂ͕͋ͬͨͱ؆୯ʹͰ͖ͨ https://www.npmjs.com/package/commonjs-to-es-module-codemod https://www.npmjs.com/package/jscodeshift ࣗಈతʹஔ׵Ͱ͖ͳ͔ͬͨ΋ͷͷྫ • named export͍ͯ͠ͳ͍ͷʹnamed import͍ͯ͠ΔϞδϡʔϧ • ΦϒδΣΫτΛ࡞͔ͬͯΒdefault export͍ͯ͠ΔϞδϡʔϧ 

݁ՌͲ͏ͳ͔ͬͨ……ʁ 

ύϑΥʔϚϯεվળ 

ϒϩάͷJSαΠζ࡟ݮͰύϑΥʔϚϯεվળ • ESMԽʹΑͬͯTreeShaking͕ޮ͖ɺJSͷαΠζ͕࡟ݮ • ಉ࣌ʹTreeShaking͕ޮ͘ϥΠϒϥϦʹม͑ͨ (lodash -> lodash-es) • ߹Θͤͯόϯυϧͷ࠷దԽ΋࣮ࢪ • ϒϩάͷμογϡϘʔυͷJSΛϒϩάදࣔ໘͔Βୀආ • ߹Θͤͯάϩʔόϧϔομ΋όϯυϧ෼ׂ 22 ϒϩάΛӾཡ͢ΔͨΊʹඞཁͳ+4͕લ݄ൺ 

͸ͯͳϒϩάͷJS - ΞʔΩςΫνϟ 23 ϖʔδ͝ͱʹద੾JSΛಡΈࠐΜͰ͍Δ 

ϒϩάΛӾཡ͢ΔͨΊʹඞཁͳJS͕લ݄ൺ1/5 24 ݱࡏ΋ͳ͓ݮΒ͠ଓ͚͍ͯΔ վળલ ݄ όϯυϧ෼ׂޙ  &4.౷Ұޙ  ݱࡏ IBUFOBCMPHKT 
.# ,# 
,# 
,# 
,# 
,# 
,# 
,# CVOEMF HMPCBMIFBEFSKT 
,# 
,# 
,# 
,# 
,# 
,# ϖʔδڞ௨෦෼
WFOEPSKT 
.# 
,# 
,# 
,# ϖʔδڞ௨෦෼
DPNNPOTKT 
,# 
,# ߹ܭ 
.# ,# ,# ,# 
,# ,# 
,# ,# 

ύϑΥʔϚϯεվળ - ·ͱΊ • ESMԽʹΑͬͯJSͷαΠζΛ࡟ݮ • TreeShakingͳͲ͕͖͍ͨ • શϖʔδ͝ͱʹڞ௨ͷJSͰ͸ͳ͘ɺը໘͝ͱʹผͷJSʹ͢Δ • ͬͪ͜ͷํ͕ΠϯύΫτ͕େ͖͔ͬͨ • ࠓޙ͸ɺΞʔΩςΫνϟΛݟ௚ͯ͠JSͷαΠζΛݮΒ͢ 25 

ϑΟʔνϟʔϑϥά࣮ݱ 

ϑΟʔνϟʔϑϥά • ࠓ·Ͱ։ൃதͷػೳΛӅͯ͠։ൃ͢Δʹ͸… • ϏοάόϯϦϦʔε • ख࡞ΓͷJSͰύονΛ౰ͯΔ • ৽ػೳ։ൃ͕େมͩͬͨ 27 

CJS→ESMԽͷ΍Γํ: આಘฤ (࠶ܝ) • ৽ػೳ։ൃ͕ศརʹͳΔ • ϑΟʔνϟʔϑϥά͕͋Ε͹… • ։ൃମݧ͕޲্ • ৽ػೳ։ൃ͍ͯ͠Δ͜ͱΛϢʔβʔʹӅ͢͜ͱ͕༰қʹ • σϞ΋͠΍͘͢ • ৽ػೳΛඇΤϯδχΞʹࢼͯ͠΋Β͏ͷ͕༰қʹͳΔ • σϞΛ௨ͯ͡ϦϦʔε·Ͱʹ׬੒౓Λ্͛ΒΕΔ • ͦͷଞʹ΋ • ABςετͱ͔ 28 ESMԽͰϑΟʔνϟʔϑϥάΛ࣮ݱͨ͠ 

ϑΟʔνϟʔϑϥάΛ࣮ݱ͢ΔͨΊʹ͸ • ESMͰಈ͘Α͏ͳͬͨTreeShakingΛ׆༻ͯ͠ɺ ಉ͡ιʔε͔Βϑϥά͝ͱʹҧ͏JSΛు͖ग़ͤΔΑ͏ʹ͢Δ • WebpackͷDe fi nePluginͰιʔεதͷϑΟʔνϟʔϑϥάม਺Λ Ϗϧυ࣌ʹఆ਺ʹஔ͖׵͑ɺDeadCode࡟আ͢Δ 29 

͸ͯͳϒϩάͷJS - ΞʔΩςΫνϟ࠶ߏ2 30 

ϑΟʔνϟʔϑϥά • Ϗϧυ࣌ʹDead Code࡟আͰϑΟʔνϟʔϑϥάΛ࣮ݱ • WebpackͰ Ϗϧυ࣌ʹ FEATURES.featureA Λ false͔trueʹม׵͢Δ • Webpack De fi ne Plugin • WebpackͰ if(false){ } ͱͳΔՕॴΛফͯ͠΋Β͏ • Webpack.optimizeͷػೳ • TreeShakingͰimport͍ͯ͠Δ͕࢖ΘΕͯͳ͍Ϟδϡʔϧ͸ফ͑Δ 31 if (FEATURES.hogehoge){ / / fugafuga const elem = document.querySelector('.js - fugafuga'); if (elem) renderHogehoge(elem); } 

·ͱΊ 

·ͱΊ • ϒϩάͷιʔείʔυΛESMʹ౷Ұͨ͠ • ͜Εͷ࣮ݱͷͨΊʹઆಘࡐྉΛूΊͨ • όϯυϧͷ࡞ΓํΛݟ௚ͯ͠ύϑΥʔϚϯεվળ • TreeShakingͰϑΟʔνϟʔϑϥάΛ࣮ݱ 33 ͜Ε͔Β΋ϒϩάͷϑϩϯτΤϯυΛΑͯ͘͠ɺ ύϑΥʔϚϯε΋։ൃମݧ΋্͍͛ͯͧ͘