はてなブログのブログ表示に必要なJSを1/6にした話

by NanimonoDemonai

Slide 1

Slide 1 text

͸ͯͳϒϩάͷϒϩάදࣔʹ ඞཁͳJSΛ1/6ʹͨ͠࿩ id: nanimono_demonai 2023/11/16 Hatena Engineer Seminar #27ʮύϑΥʔϚϯενϡʔχϯάฤʯ

Slide 2

Slide 2 text

1. ࣗݾ঺հ 2. ύϑΥʔϚϯεͷࢦඪͱܭଌ 3. ͸ͯͳϒϩάͷJS 4.͸ͯͳϒϩάͷJSͷ࡟ݮํ๏ 5. ύϑΥʔϚϯεվળ 6. ϑΟʔνϟʔϑϥά࣮ݱ

Slide 3

Slide 3 text

ࣗݾ঺հ • id: nanimono_demonai • @NanimonoDaemon • େֶͰ͸ػցֶशͷݚڀ • ʮגࣜձࣾ͸ͯͳʯʹ2020೥ʹब৬ • ීஈ͸TypeScript/React/CSSͷ৘ใΛ௥͍ͬͯΔ 3

Slide 4

Slide 4 text

͸ͯͳϒϩάͷ঺հίʔφʔ • ͸ͯͳϒϩά͸ϦϦʔε͔Β12೥໨ʂ • ʮAIλΠτϧΞγετʯػೳΛΫϩʔζυβެ։ • AIΛ༻͍ͯɺຊจͷ಺༰͔Β͸ͯͳϒϩάͰઃఆͰ͖Δ3ͭͷλΠτϧ ʮݟग़͠ɾλΠτϧཁૉɾSNS޲͚λΠτϧʯͦΕͧΕͷλΠτϧΛఏҊ 4 ೥قͷ͋ΔϓϩμΫτͷ࠷ۙͷ࿩ ࢥ͍͸ݴ༿ʹɻ ͸ͯͳϒϩά͸ɺ͋ͳͨͷࢥ͍΍ߟ͑Λ࢒ͨ͠Γɺ  ͞·͟·ͳਓ͕௲ͬͨଟ༷ͳՁ஋؍ʹ৮ΕͨΓͰ͖Δ৔ॴͰ͢ɻ

Slide 5

Slide 5 text

࠷ۙͷ͸ͯͳϒϩά • ͸ͯͳϒϩάͷύϑΥʔϚϯεΛվળ 5 https://staff.hatenablog.com/entry/2023/07/07/122734 ͸ͯͳϒϩάͷӾཡମݧվળͷऔΓ૊Έʹ͍ͭͯ ࠷͍͔ۙͭ͘ͷվળࢪࡦΛϦϦʔε͍ͨ͠·ͨ͠ɻ • ৽ணهࣄɺ஫໨هࣄϞδϡʔϧͳͲͷը૾ͷ஗ԆಡΈࠐΈ • ϒϩάͷදࣔʹඞཁͳJavaScriptΛݟ௚ͯ͠ϑΝΠϧαΠζΛ࡟ݮ • ͦͷଞࡉ͔͍վળ JSΛݮΒͨ͠ํ๏Λ঺հ

Slide 6

Slide 6 text

ύϑΥʔϚϯεվળ • දࣔΛշదʹ͢Δ • දࣔޙͷཁૉͷͣΕΛܰݮ͢Δ • Accessibility • ϖʔδͷදࣔ଎౓Λ্͛Δ • Ԡ౴଎౓Λ্͛Δ • ίϯςϯπͷදࣔ଎౓Λ্͛Δ • Ϣʔβʔ͕ૢ࡞Ͱ͖Δ·Ͱͷ࣌ؒΛ୹͘͢Δ • etc… 6 ͸ͯͳϑΥτϥΠϑͷը૾Λදࣔ͢Δࡍʹɺը໘ʹζϨ͕ੜ͡ͳ͍Α͏มߋ͠·͠ ͨ - ͸ͯͳϒϩά։ൃϒϩά ը૾ͷදࣔͰը໘͕ζϨͳ͍Α͏มߋͨ͜͠ͱͰɺ͸ͯͳϒϩάͷԿ ͕վળ͞Εͨͷ͔

Slide 7

Slide 7 text

2. ύϑΥʔϚϯεͷࢦඪͱܭଌ

Slide 8

Slide 8 text

ϖʔδύϑΥʔϚϯεͷࢦඪ: Ұ෦ • ఻౷తͳࢦඪ • TTFB (s) - Time To First Byte: ϖʔδͷμ΢ϯϩʔυ։࢝࣌ؒ • Page Weight (byte) -ϖʔδͷαΠζ • ϖʔδಡΈࠐΈ׬ྃͷࢦඪ • FCP (s) -First Contentful Paint : ࠷ॳͷ”ίϯςϯπ”͕දࣔ͞Εͨ࣌ؒ • LCP (s) - Largest Contentful Paint: ࠷େͷ”ίϯςϯπ”ͷදࣔ࣌ؒ • Speed Index (s) - ϖʔδͷදࣔ׬ྃ཰ΛՃຯͨ͠දࣔ࣌ؒ • ϖʔδͷԠ౴ੑͷࢦඪ • FID (s) - First Input Delay: ࠷ॳͷૢ࡞ՄೳʹͳΔ·Ͱͷ࣌ؒ • TTI (s) - Time to Interactive: ૢ࡞ՄೳʹͳΔ·Ͱͷ࣌ؒ • TBT (s) - Total Blocking Time: FCPͱTTIͷ߹ܭ • INP (s) -Interaction to Next Paint: ϖʔδ্ͷ͢΂ͯͷΠϯλϥΫγϣϯޙͷ࣍ͷඳը·Ͱͷ࣌ؒͰ࠷΋஗͍࣌ؒ • ࢹ֮త҆ఆੑͷࢦඪ • CLS (ແ୯Ґ) - ϖʔδͷදࣔதʹى͖ͨίϯςϯπͷζϨͷࢦඪ 8 ίϯςϯπ ςΩετɺը૾ എܠը૾ΛؚΉ ɺTWH ཁૉɺനҎ֎ͷDBOWBTཁૉͷ͜ͱ https://web.dev/metrics/

Slide 9

Slide 9 text

CWV - CoreWebVitals • Googleͷൃදͨ͠ॏཁࢦඪ3બ • ͍ͣΕ΋ϖʔδͷϢʔβʔମݧʹؔΘΔ΋ͷ • ϖʔδಡΈࠐΈ׬ྃͷࢦඪ • LCP (s) - Largest Contentful Paint: ࠷େͷ”ίϯςϯπ”ͷදࣔ࣌ؒ • ϖʔδͷԠ౴ੑͷࢦඪ • FID (s) - First Input Delay: ࠷ॳͷૢ࡞ՄೳʹͳΔ·Ͱͷ࣌ؒ • ࢹ֮త҆ఆੑͷࢦඪ • CLS (ແ୯Ґ) - ϖʔδͷදࣔதʹى͖ͨίϯςϯπͷζϨͷࢦඪ 9 ίϯςϯπ ςΩετɺը૾ എܠը૾ΛؚΉ ɺTWH ཁૉɺനҎ֎ͷDBOWBTཁૉͷ͜ͱ

Slide 10

Slide 10 text

CWVͷۙگ - CWVͷࢦඪͷมߋ • ͜Ε·Ͱ • FID (sec) - First Input Delay: ࠷ॳͷૢ࡞ՄೳʹͳΔ·Ͱͷ࣌ؒ • 2024೥3݄͔Β • INP (sec) -Interaction to Next Paint ϖʔδ্ͷ͢΂ͯͷΠϯλϥΫγϣϯޙͷ࣍ͷඳը·Ͱͷ࣌ؒͰ࠷ ΋஗͍࣌ؒ 10 ͢΂ͯͷΠϯλϥΫγϣϯʹجͮ͘ͷͰɺԠ౴ੑΛแׅతʹධՁ INP͸FIDΑΓ΋શମతͳԠ౴ੑͷΑΓ৴པੑͷߴ͍ࢦඪ https://developers.google.com/search/blog/2023/05/introducing-inp

Slide 11

Slide 11 text

INP • ϖʔδ্ͷ͢΂ͯͷΠϯλϥΫγϣϯޙͷ࣍ͷඳը·Ͱͷ࣌ؒͰ࠷΋஗͍ ࣌ؒ • ͙͢ʹදࣔͰ͖ͳͯ͘΋ϩʔσΟϯάཁૉͳͲग़ͤ͹ྑ͍ • ϖʔδ͕INPΛฦͤͳ͍Մೳੑ͕͋Δ 11 • ϖʔδ্શͯ • ϝΠϯυΩϡϝϯτɺ͓ΑͼɺυΩϡϝϯτʹຒΊࠐ·Εͨiframe • ΠϯλϥΫγϣϯ • Ϛ΢εΫϦοΫ • λονεΫϦʔϯͷλοϓ • ෺ཧΩʔϘʔυ·ͨ͸ΦϯεΫϦʔϯΩʔϘʔυͷΩʔΛԡ͢ɻ • ϗόϦϯάͱεΫϩʔϧ͸ߟྀͤͣ • ࠷΋஗͍࣌ؒ • ΠϯλϥΫγϣϯ͕ଟ͍ͱ99%ileΛใࠂ

Slide 12

Slide 12 text

ύϑΥʔϚϯεվળͷͨΊʹ • ϢʔβʔϥϯυͷύϑΥʔϚϯεΛܧଓతʹ؂ࢹ͍ͨ͠ • վળͷޮՌ͕ݕূͰ͖Δ • ύϑΥʔϚϯεͷԼམʹΞϥʔτΛ࢓ࠐΉ͜ͱΛ͢Δ͜ͱͰ ࢪࡦʹΑΔύϑΥʔϚϯεྼԽͳͲʹؾ͕͚ͭΔ • ͦͷͨΊʹɺ͜Μͳπʔϧ͕ཉ͍͠ • CWVΛܭଌͰ͖Δπʔϧ • ܭଌͨ݁͠ՌΛ·ͱΊͯ͘ΕΔπʔϧ 12 ܭଌ͕͍ͨ͠

Slide 13

Slide 13 text

CWVͷܭଌ • Chromeͷ։ൃऀπʔϧʹ͍͍ͭͯΔLighthouseͰܭଌͰ͖Δ • INP͸ʮφϏήʔγϣϯʯͰ͸ଌఆͰ͖ͳ͍ͷͷͰʮଌఆظؒʯͰଌఆ • Google Search Console͔Β΋֬ೝͰ͖Δ • WebPageTestͰܭଌͰ͖Δ • https://www.webpagetest.org/ • SentryΛ࢖͏ • https://sentry.io 13

Slide 14

Slide 14 text

Sentryͱ͸Կ͔ • ΤϥʔͷՄࢹԽ • ؂ࢹ • Sentry/Performance Monitoring • SentryͷμογϡϘʔυ্ͰύϑΥʔϚϯεଌఆ͕Ͱ͖Δ • Core Web Vitalsͷܭଌ͕Մೳ • INP͸·ͩଌఆͰ͖ͳ͍ • SentryΛಋೖ͍ͯ͠ΔͳΒ͹؆୯ʹಋೖͰ͖Δ • ͦΕࣗମ΋JSͳΒϥΠϒϥϦΛಡΈࠐΉ͚ͩͰγϯϓϧʹಋೖՄೳ 14

Slide 15

Slide 15 text

SentryΛબΜͩཧ༝ • ͢ͰʹSentryΛΤϥʔऩूͰಋೖ͍ͯ͠Δ • ύϑΥʔϚϯεͷྼԽʹ͸Τϥʔ͕൐͏͜ͱ͕͋ΔͷͰɺಉ͡ը໘Ͱ؍ ΕΔͱ͓ಘ • طଘͷSDKʹύϑΥʔϚϯεଌఆػೳΛࡌ͚ͬΔ࢓૊ΈͰಋೖՄೳ • ͞·͟·ϒϥ΢βͷCWV͕ܭଌͰ͖Δ • ※ Ұ෦ͷࢦඪ͸Chromeͷ΋ͷ͔͠ݟΕͳ͍ 15

Slide 16

Slide 16 text

SentryͰܭଌͨ͠ޙͷμογϡϘʔυͷ༷ࢠ 16 ܭଌ͸͸ͯͳͰ؅ཧ͍ͯ͠Δϒϩάͷ Ұ෦͚͕ͩର৅

Slide 17

Slide 17 text

ಋೖͯ͠ؾ͕͍ͭͨ͜ͱ • SDKΛonʹ͚ͨͩ͠Ͱ͸ɺσʔλ͕όϥόϥͰղੳ͕ͮ͠Β͍ • σϑΥϧτͰ͸URL͕ه࿥୯ҐͰ͋Δ͕… • ϒϩά͸ϚϧνςφϯτͰ • URLͷ਺͕͔ͳΓଟ͍ • ͔͠͠ɺURL͕ҧͬͯ΋ಉ͡छྨͷϖʔδΛه࿥୯Ґͱ͍ͨ͠ • ಉ͡छྨͷϖʔδͰ΋ϒϩάʹΑͬͯ܏޲͕ҧ͏ 17 ܭଌ୯Ґͷ੔ཧΛ͢Δඞཁ͕͋ͬͨ

Slide 18

Slide 18 text

੔ཧͨ͠಺༰ • ه࿥୯Ґ: transaction-name • ϖʔδͷछྨͰCWVΛܭଌ͢Δ • छྨ: • ϒϩάͷهࣄϖʔδ • Ұཡϖʔδ • ؅ཧը໘ͷϖʔδ͝ͱ • ϒϩά͝ͱʹҧ͏ه࿥୯Ґʹ͢Δ • ͜ΕҎ֎ʹৄ͍͠಺༰Λݟ͚ͨΕ͹ɺSentryͷλάΛ࢖ͬͯ֬ೝ͢Δ 18

Slide 19

Slide 19 text

Sentry ͷσϑΥϧτͷμογϡϘʔυͰ͸ͳ͘ɺ࢖͍΍͍͢ܗʹ͢Δ 19

Slide 20

Slide 20 text

ܭଌج൫Λ੔͑ͨͷͰվળ • LCP͕஗͍ϖʔδΛμογϡϘʔυ͔Βݟ͚ͭͯ͜ΒΕΔ • ۩ମతʹ͸هࣄҰཡϖʔδ • SentryͷμογϡϘʔυ͔ΒݸผϖʔδͷϨίʔυΛݟΔͱ • ը૾ಡΈࠐΈ͕ଟ͍ϖʔδͰ͋Δ͜ͱ͕Θ͔Δ • LCPʹӨڹ͢Δઌ಄ͷํͷը૾͔ΒಡΈࠐ·Ε͍ͯͳ͍ • → ʮը૾ͷಡΈࠐΈॱΛ౷੍ͯ͠΍Ε͹LCP͕վળ͢Δʯ ͱ͍͏Ծઆཱ͕ͭ • ը૾ͷಡΈࠐΈॱΛίϯτϩʔϧ͢ΔվળΛಋೖ 20

Slide 21

Slide 21 text

Sentry͚ͩͰվળํ๏͕ؾ͕͚ͭΔ͔ʁ • ஗͍ϖʔδΛݟ͚ͭͨΒखݩͷLighthouseΛ૸ΒͤΔ • ʮվળͰ͖Δ߲໨ʯ͕ώϯτ • ࠓճͷྫͰ͸ʮΦϑεΫϦʔϯը૾ͷ஗ԆಡΈࠐΈʯ • खݩͷLighthouse͸͋͘·Ͱ̍αϯϓϧ • SentryʹஷΊΔ͜ͱͰશମ؍͕͔ͭΊΔ 21 ͜͜·ͰͰJS͕σΧ͗͢Δͷ͕໰୊ͩͱΘ͔͖ͬͯͨ

Slide 22

Slide 22 text

3. ͸ͯͳϒϩάͷJS

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

ͳΜͰΤσΟλʹඞཁͳJSΛϒϩάͰ΋औΓࠐΜͰ͍Δͷʂʁ • ΤσΟλͱڞ௨ͳϞδϡʔϧ͕ଘࡏ͍ͯ͠Δ • աڈʹ͸ϒϩάͰʮͦͷ৔هࣄฤूʯ͕Ͱ͖ͨ • ݱࡏ΋άϩʔόϧϔομ͸ڞ௨ͷϞδϡʔϧ • ։ൃॳظͷπʔϧνΣʔϯͰ͸JSͷ෼ׂ͸৬ਓٕ͕ඞཁͩͬͨ • ϒϩά͸ྺ࢙ͷ͋ΔϓϩμΫτͰ͢… • hatenablog.jsҰݸ͚ͩͱ͍͏ੈք؍͸ͦΕ͸ͦΕͰγϯϓϧ • ΋ͪΖΜσϝϦοτ͸JSαΠζ͕ංେԽ͢Δ͜ͱ 26

Slide 27

Slide 27 text

4.͸ͯͳϒϩάͷJSͷ࡟ݮํ๏

Slide 28

Slide 28 text

…ͷલʹɺ JSͷϞδϡʔϧܗࣜΛ෮श͠·͠ΐ͏

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

CJS→ESMԽͷ΍Γํ: આಘฤ • ίʔυͷશ໘తͳมߋʹͳΔͷͰɺ޻਺͕ඞཁ • ಈ࡞νΣοΫΛೖ೦ʹ͍ͨ͠ͳͲ • ޻਺ΛͱͬͯͰ΋΍Δ΂͖λεΫͰ͋Δ͜ͱΛೲಘͯ͠΋Β͍͍ͨ 31 CJS->ESM͸ޮՌ͕͋Γͦ͏ɺͰ΋આ໌͍ͨ͠ΑͶ ͜͜Ͱܭଌ͍ͯ͠Δͷ͕ޮ͍ͯ͘Δʂʂʂ

Slide 32

Slide 32 text

CJS→ESMԽͷ΍Γํ: ͏·ຯ • ύϑΥʔϚϯεվળͷͨΊʹඞཁͳίʔυ࠷దԽͰ͋Δ • ϒϩάը໘͔ΒΤσΟλʹඞཁͳػೳΛ҆શʹ෼཭Ͱ͖Δʂ • TreeShaking͕Ͱ͖Δ • ͞Βʹ։ൃମݧͷ޲্ʹ΋ܨ͕Δʂ • ੩తղੳ͕ޮ͖΍͍͔͢Β • CJSͱESMࠞࡏΛ࣮ݱ͢ΔͨΊͷઃఆϑΝΠϧͷهड़͕ͳ͘ͳΔ 32

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

݁ՌͲ͏ͳ͔ͬͨ……ʁ

Slide 36

Slide 36 text

5. ύϑΥʔϚϯεվળ

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

ϒϩάΛӾཡ͢ΔͨΊʹඞཁͳJS͕લ݄ൺ1/6 39 ݱࡏ͸൒೥લͷ10෼ͷ1αΠζ վળલ ݄ όϯυϧ෼ׂޙ &4.౷Ұޙ ݱࡏ IBUFOBCMPHKT .# ,# ,# ,# ,# ,# ,# ,# CVOEMF HMPCBMIFBEFSKT ,# ,# ,# ,# ,# ,# ϖʔδڞ௨෦෼ WFOEPSKT .# ,# ,# ,# ϖʔδڞ௨෦෼ DPNNPOTKT ,# ,# ߹ܭ .# ,# ,# ,# ,# ,# ,# ,#

Slide 40

Slide 40 text

ύϑΥʔϚϯεվળ - ·ͱΊ • શϖʔδ͝ͱʹڞ௨ͷJSͰ͸ͳ͘ɺը໘͝ͱʹผͷJSʹ͢Δ • ܭଌʹΑͬͯΠϯύΫτΛࣔͤͨʂ • ESMԽʹΑͬͯJSͷαΠζΛ࡟ݮ • ίʔυ࠷దԽʹΑΔTreeShakingͳͲ͕͖͍ͨ • ࠓޙ͸ɺΞʔΩςΫνϟΛݟ௚ͯ͠JSͷαΠζΛݮΒ͢ 40

Slide 41

Slide 41 text

6. ϑΟʔνϟʔϑϥά࣮ݱ

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

·ͱΊ

Slide 48

Slide 48 text

·ͱΊ • Sentry Λ࢖͏͜ͱͰύϑΥʔϚϯεͷܭଌج൫Λ࡞੒Ͱ͖ͨ • ϒϩάͷJSΛ࡟ݮ • ͦͷͨΊʹESMԽΛ࣮ࢪ • όϯυϧͷ࡞ΓํΛݟ௚ͯ͠ύϑΥʔϚϯεվળ • TreeShakingͰϑΟʔνϟʔϑϥάΛ࣮ݱ 48 ͜Ε͔Β΋ϒϩάͷϑϩϯτΤϯυΛΑͯ͘͠ɺ ύϑΥʔϚϯε΋։ൃମݧ΋্͍͛ͯͧ͘