JSモジュールの歴史とSnowpack / History of JS module and Snowpack

三好康介（LINE 株式会社 Front-End Dev 10 チーム）
UIT Meetup vol. 13 『知っておきたいFront-end Toolingの今』
での登壇資料です
https://uit.connpass.com/event/216043/

1. JSϞδϡʔϧͷྺ࢙ͱ Snowpack Kosuke Miyoshi 2021.07.07
2. ొஃऀ঺հ 2 ࠃ಺ͷՈిϝʔΧʔͳͲͰϒϥ΢βػೳͷಈ࡞ݕূ༻ αΠτͳͲΛͭͬͨ͘Γɺಈ࡞ݕূΛͨ͠Γ͍ͯͨ͠ ͷ͕͜ͷۀքʹೖΔΩοΧέͰɺͦͷޙϥΠϒυΞ ʹೖࣾɺlivedoor ϙʔλϧ΍ livedoor ϒϩάɺ BLOGOSͳͲͷϑϩϯτΤϯυʹؔΘͬͨޙʹձࣾ ͕߹ซɺLINEࣾͱͳͬͨޙ͸ओʹLINE NEWSʹؔΘ Δɻ myLifeAsaDog ͱ͍͏໊લͰɺSvelte ͷυΩϡϝϯτ ͷ೔ຊޠԽʹڠྗ͓ͯ͠Γɺઌ೔ਖ਼ࣜʹެ։͞Ε·͠ ͨɻ https://svelte.jp/ Kosuke Miyoshi LINEגࣜձࣾ Front-end ։ൃηϯλʔ
3. ES Modules ·Ͱͷͬ͘͟Γͱͨ͠ྺ࢙ History of the JS modules format
 ਓྨͱϞδϡʔϧܗࣜͱͷઓ͍ͷي੻ 1. NodeJS ͕஀ੜɺCommonJS Λجʹͨ͠ϞδϡʔϧػೳΛ࣮૷ 2. RequireJS ͕஀ੜɺAMD Λϒϥ΢β༻ʹม׵͢Δ 3. Browserify ͕஀ੜɺCommonJS Λϒϥ΢β༻ʹม׵͢Δ 4. CommonJS Ͱ΋ AMD Ͱ΋࢖͑Δ UMD ͕஀ੜ 5. Webpack ͕஀ੜɺ΍ͨΒͱଟػೳͰ࣮࣭తʹσϑΝΫτ؀ڥͱͳΔ 6. ES Modules ͷࡦఆ ͭ·Γݱঢ়Ͱ͸ CommonJSʢCJSʣɺAMDɺUMDɺES ModulesʢESMʣ ͷ̐छྨͷϞδϡʔϧܗ͕ࣜଘࡏ ͢Δ͜ͱʹͳΓ·͢ɻ 3 ※ ຊਓͷओ؍తهԱͰهࡌ͍ͯ͠ΔͷͰɺৄࡉ͕ؒҧ͍ͬͯΔՄೳੑ͕͋Γ·͢ɻ
4. ESM࢓༷ͷࡦఆ ES Modules was born
 ES Modules ͷ஀ੜ ϑϩϯτΤϯυͷෳࡶԽɾංେԽʹͱ΋ͳͬͯ ES ModulesʢESMʣ ͱ͍͏࢓༷͕ࡦఆ͞Εͨɺ͜Ε͸ 2021 ೥ݱࡏͰ͸طʹ Microsoft Edge ΛؚΉ IE Ҏ֎ͷϒϥ΢βͰ͸ରԠ͞Ε͓ͯΓɺNodejs Ͱ΋ v12 Ҏ߱͸ඪ ४ରԠ͍ͯ͠·͢ɻ 4
5. ES Modules ීٴͷน Dissemination of ES Modules
 ES Modules ͷීٴ ͡Ό͋ Production ؀ڥͰ΋ґଘϑΝΠϧΛ ESM ͰΨϯΨϯ import ͢Ε͹ྑ͍ΑͶʂͱ͍ͨ͠ͱ͜Ζͩͬͨ ͕ɺ͍͔ͭ͘ͷ໰୊͕ଘࡏ͍ͯ͠·͢ɻ • webpack ౳ͷόϯυϥ͕։ൃ؀ڥͱͯ͠ීٴͯ͠͠·͍ͬͯΔ • npm Ͱఏڙ͞Ε͍ͯΔϥΠϒϥϦͷଟ͕͘ ESM ʹରԠ͍ͯ͠ͳ͍ • import ʹରԠ͍ͯ͠ͳ͍ϒϥ΢βʹର͢Δޓ׵ੑ͕·ΔͰͳ͍ 5
6. ES Modules Snowpack is here!
 ͦͯ͠Snowpackͷొ৔ ͜͜Ͱલड़ͷ໰୊Λղܾ͢ΔͨΊͷ৽ͨͳखஈͱͯ͠஫໨͞Ε͍ͯΔͷ͕ Snowpack ͱ͍͏Ϗϧυπʔϧ Ͱɺ͜Ε͸୯७ʹ͍͏ͱ npm ϥΠϒϥϦΛ ESM ܗࣜʹม׵ͯ͠ग़ྗ͢Δͱ͍͏ʮϏϧυπʔϧʯͰ͋Δɻ ͜ΕΛར༻͢Δ͜ͱʹΑΓɺલड़ͨ͠Α͏ͳैདྷͷ໰୊఺ΛΫϦΞͯ͠ϒϥ΢βඪ४ͷϞδϡʔϧػೳΛར ༻͢Δ͜ͱ͕Ͱ͖ΔΑ͏ʹͳΓ·͢ɻ ͳ͓ʮҰ੾ϑϨʔϜϫʔΫͳͲΛར༻͍ͯ͠ͳ͍ʯͱ͍͏ͷͰ͋Ε͹ͦΕ͚ͩͰେৎ෉Ͱ͕͢ɺݱঢ়Ͱ͸ϑ ΝΠϧͷόϯυϧ͚ͩͰ͸ͳ͘ɺJSX ΍ Vue ςϯϓϨʔτϑΝΠϧͷม׵ͳͲ΋όϯυϥͰߦ͍ͬͯΔͱࢥ ͏ͷͰɺͦΕΒͷରԠʹ͍ͭͯ΋ղઆ͓͖ͯ͠·͢ɻ 6
7. Snowpack ͷϘΠϥʔϓϨʔτ Support for frameworks
 ϑϨʔϜϫʔΫͷରԠ Snowpack ʹ͸ create-snowpack-app ͱ͍͏ϘΠϥʔϓϨʔτ͕ଘࡏ͓ͯ͠Γɺ؆୯ʹ͍͏ͱ React ΍ VueJS ͳͲͷϑϨʔϜϫʔΫΛ Snowpack Ͱม׵͢Δࡍͷ։ൃ؀ڥ͕͋Β͔͡Ί༻ҙ͞Ε͍ͯ·͢ɻ ͜ΕʹΑΓ JSX ΍ VueϑΝΠϧɺSvelteϑΝΠϧͷม׵ͳͲ͕ߦ͑·͢ɻ 7
8. React Specific examples when using frameworks
 ϑϨʔϜϫʔΫར༻࣌ͷ۩ମྫ npx create-snowpack-app <yourappname> --template @snowpack/app-template-react 8 React + TypeScript npx create-snowpack-app <yourappname> --template @snowpack/app-template-react-typescript Vue npx create-snowpack-app <yourappname> --template @snowpack/app-template-vue Vue + TypeScript npx create-snowpack-app <yourappname> --template @snowpack/app-template-vue-typescript
9. Skypackͱ͸Կͳͷ͔ʁ What is Skypack
 Skypackʹ͍ͭͯ Snowpack ͸खݩͰ npm Λesm ʹม׵͢ΔΘ͚Ͱ͕͢ɺखݩͰͰ͖Δͱ͍͏͜ͱ͸αʔόʔͰ΋Ͱ͖ΔΘ͚ Ͱ͢ɺैͬͯ npm ΛαʔόʔଆͰ esm ʹม׵ͯ͠CDNͰ഑৴͢Δɺͱ͍͏͜ͱ΋ग़དྷ·͢ɻ ΋ͪΖΜݸਓͰαʔόʔΛཱͯͯESMʹϏϧυͨ͠΋ͷΛ༻ҙͯ͠࢖͏ɺͱ͍͏͜ͱ΋Ͱ͖·͕͢ɺطʹα ʔϏεͱͯ͠༻ҙ͞Ε͍ͯΔCDN͕͋Γ·͢ɻ ͦΕ͕ Skypack ͰɺSnowpack ಉ༷ʹ͜Ε͸ Pika ͷϓϩδΣΫτͷҰ؀ͰɺSnowpack Ͱ΋ΦϓγϣϯͰࢦ ఆ͢Ε͹ Skypack Λѻ͑·͢ɻ ※ Ωϟογϡ͕ͳ͚Ε͹Ϗϧυ͢ΔํࣜͳͷͰɺॳճΞΫηε࣌ʹԠ౴͕஗͍৔߹͕͋Γ·͢ɻ 9
10. Snowpack ͷϝϦοτ Merits and demerits of Snowpack
 SnowpackͷϝϦοτͱσϝϦοτʹ͍ͭͯ • ઃఆ͕γϯϓϧ • Ωϟογϡ͕ޮ͖΍͍͢ • ESM͕ීٴͨ͠৔߹ͷҠߦָ͕ • มߋͷͳ͍ϑΝΠϧ͸Ϗϧυ͠ͳͯ͘΋ࡁΉ 10 Snowpack ͷσϝϦοτ • ࠾༻࣮੷͕গͳ͍ʢΞϦόόͳͲதࠃͷαʔϏεͰ͸ଟগͷ࠾༻ྫ͕͋Δʣ • ࠷ۙͷ΋ͷͳͷͰΤίγεςϜ͕ෆे෼ • طଘͷόϯυϥ͔ΒͷҠߦ͕೉͍͠ • IE༻ʹ͸݁ہόϯυϧϑΝΠϧΛग़ྗ͢Δ͜ͱʹͳΔ
11. ·ͱΊ Current Status of Snowpack
 Snowpackͷݱঢ় ڊେͳϑΝΠϧΛѻ͏ͱෆ҆ఆʹͳͬͨΓɺWindows؀ڥ΁ͷରԠ͕ෆे෼Ͱ͋ͬͨΓ͢ΔͨΊɺ Snowpack ͚ͩͰ։ൃ؀ڥΛΧόʔ͠Α͏ͱ͢Δ৔߹͸ɺݱঢ়Ͱ͸αʔϏεͷن໛΍Өڹൣғɺ ϝϯςφϯεͷίετΛߟྀͯ͠࠾༻͢Δඞཁ͕͋Γ·͢ɻ ͔͠͠ͳ͕ΒɺͦΕΒ͸·ͩ৽͍͠πʔϧ͔ͩΒͱ͍͏ଆ໘͕େ͖͘ɺ଎͍ϐονͰվྑ͕ ଓ͚ΒΕ͓ͯΓػೳ΋ॆ࣮͖͍ͯͯ͠ΔͷͰɺݱঢ়͚ͩΛݟͯ൑அ͢Δ΂͖Ͱ͸͋Γ·ͤΜ͠ɺ ݱঢ়Ͱ΋ϓϩδΣΫτͷ্ཱͪ͛࣌ͳͲͰ͸རศੑ͕ߴ͍ͷ΋ࣄ࣮Ͱ͢ɻ 11
12. ։ൃ؀ڥʹ͓͚ΔSnowpack Current Status of Snowpack
 ݱঢ়ͰͷSnowpack ࣮ࡍʹݱঢ়Ͱ͸։ൃ؀ڥͰ͸ Snowpack Ͱ ESM ʹͯ͠࢖ͬͯϏϧυ࣌ؒΛ୹ॖͭͭ͠ɺ ϓϩμΫτ؀ڥͰ͸ͻͱͭʹόϯυϧͨ͠ϑΝΠϧͱͯ͠ग़ྗͯ͠഑৴͢Δɻ ͱ͍͏Α͏ͳ࢖͍ํ͕ଟ͍Α͏ʹݟฉ͖͍ͯ͠·͢ɺ͜ͷ࢖͍ํʹ͸ϓϩμΫτͷ্ཱͪ͛࣌ʹ ؀ڥߏங͕ૣ͘ɺίʔυͷ࣮૷ʹ͙͢ҠΕΔ্ʹ։ൃதʹϑΝΠϧ͕όϯυϧ͞Εͨঢ়ଶͰ͸ͳ͍ͷͰɺ Τϥʔ͕ग़ͨ৔߹ͳͲʹσόοά͕͠΍͍͢ɺͱ͍͏ϝϦοτ͕͋Γ·͢ɻ ·ͨϓϩμΫγϣϯ؀ڥͰ͸όϯυϧ͞ΕͨϑΝΠϧΛ഑৴͢ΔͷͰɺIEʹ΋ରԠͰ͖Δͱ͍͏Θ͚Ͱ͢ɻ 12
13. ·ͱΊ Current Status of Snowpack
 ݱঢ়ͰͷSnowpack Snowpack ͕কདྷͲΕ΄Ͳ༗ྗͳπʔϧʹͳΔ͔͸ະ஌਺Ͱ͕͢ɺલड़ͷ௨Γ2021೥ݱࡏͰ͸ɺ ओཁͳϒϥ΢βͷΈͳΒͣ NodeJSɾDeno ΋ ESM ʹରԠ͍ͯ͠Δঢ়ଶͰ͋Γɺطʹະདྷͷٕज़Ͱ͸ͳ͘ ࠓ͙͢࢖͑Δٕज़ʹͳ͍ͬͯ·͢ɻ ͦͷͨΊόϯυϧΛ࠷খݶʹͯ͠ Native ESM Λར༻͢Δͱ͍͏࣮૷ํ਑͸ɺকདྷͷϑϩϯτΤϯυ։ൃʹ ͓͍ͯ৽ͨͳτϨϯυͱͳΔՄೳੑ͕ߴ͘ɺͦͷ࣌ʹඋ͓͖͍͑ͯͨ͠ɺબ୒ࢶͷҰͭͱͯ͠ Snowpack Λ ͓࣋ͬͯ͘ͷ͸ѱ͍͜ͱͰ͸ͳ͍ͱࢥ͍·͢ɻ 13
14. THANK YOU