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
310
はてなブログのESM化
開発初期から継ぎ足されてきたはてなブログのフロントエンドのコードをES Moduleに統一したことを通じて、ブログのパフォーマンスを改善し新機能開発もしやすくした話
NanimonoDemonai
September 27, 2023
Tweet
Share
More Decks by NanimonoDemonai
See All by NanimonoDemonai
はてなCMSのアーキテクチャ; 巨大な既存システムと共存して最新技術を取り入れる
nanimonodemonai
0
560
ViteでCSSのバージョン違いを作る
nanimonodemonai
0
44
はてなブログのブログ表示に必要なJSを1/6にした話
nanimonodemonai
0
800
登壇資料.pdf
nanimonodemonai
0
320
はてなブログのフロントエンドに秩序はもたらされたのか
nanimonodemonai
3
5.7k
Other Decks in Programming
See All in Programming
Effect の双対、Coeffect
yukikurage
5
1.4k
Benchmark
sysong
0
250
GraphRAGの仕組みまるわかり
tosuri13
7
480
Select API from Kotlin Coroutine
jmatsu
1
190
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
knih
11
2k
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.3k
XSLTで作るBrainfuck処理系
makki_d
0
210
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
470
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1k
ニーリーにおけるプロダクトエンジニア
nealle
0
130
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
210
XP, Testing and ninja testing
m_seki
3
180
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
It's Worth the Effort
3n
185
28k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
How to Ace a Technical Interview
jacobian
277
23k
Building Adaptive Systems
keathley
43
2.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Facilitating Awesome Meetings
lara
54
6.4k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
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
͜Ε͔ΒϒϩάͷϑϩϯτΤϯυΛΑͯ͘͠ɺ ύϑΥʔϚϯε։ൃମݧ্͍͛ͯͧ͘