Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
はてなブログのESM化
Search
NanimonoDemonai
September 27, 2023
Programming
0
320
はてなブログのESM化
開発初期から継ぎ足されてきたはてなブログのフロントエンドのコードをES Moduleに統一したことを通じて、ブログのパフォーマンスを改善し新機能開発もしやすくした話
NanimonoDemonai
September 27, 2023
Tweet
Share
More Decks by NanimonoDemonai
See All by NanimonoDemonai
はてなCMSのアーキテクチャ; 巨大な既存システムと共存して最新技術を取り入れる
nanimonodemonai
0
590
ViteでCSSのバージョン違いを作る
nanimonodemonai
0
46
はてなブログのブログ表示に必要なJSを1/6にした話
nanimonodemonai
0
820
登壇資料.pdf
nanimonodemonai
0
330
はてなブログのフロントエンドに秩序はもたらされたのか
nanimonodemonai
3
5.7k
Other Decks in Programming
See All in Programming
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
470
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
160
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
860
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
140
What's new in Adaptive Android development
fornewid
0
120
新しいモバイルアプリ勉強会(仮)について
uetyo
1
190
CDK引数設計道場100本ノック
badmintoncryer
2
590
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
290
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
200
React 使いじゃなくても知っておきたい教養としての React
oukayuka
13
2k
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.2k
QA x AIエコシステム段階構築作戦
osu
0
210
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Embracing the Ebb and Flow
colly
86
4.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
A Tale of Four Properties
chriscoyier
160
23k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Transcript
ͯͳϒϩάͷ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<HTMLElement>('.js - fugafuga'); if (elem) renderHogehoge(elem); }
·ͱΊ
·ͱΊ • ϒϩάͷιʔείʔυΛESMʹ౷Ұͨ͠ • ͜Εͷ࣮ݱͷͨΊʹઆಘࡐྉΛूΊͨ • όϯυϧͷ࡞ΓํΛݟͯ͠ύϑΥʔϚϯεվળ • TreeShakingͰϑΟʔνϟʔϑϥάΛ࣮ݱ 33
͜Ε͔ΒϒϩάͷϑϩϯτΤϯυΛΑͯ͘͠ɺ ύϑΥʔϚϯε։ൃମݧ্͍͛ͯͧ͘