Slide 1

Slide 1 text

Copyright© M&AΫϥ΢υ PlaywrightʹΑΔ Svelteίϯϙʔωϯτςετ Nextbeat Tech BarɿSvelteKitಋೖاۀ2ࣾʹΑΔຊԻLTձ / Kenjiro Kubota

Slide 2

Slide 2 text

Copyright© M&AΫϥ΢υ index ● SvelteKitͰͷίϯϙʔωϯτͷ࡞Γํ ● PlaywrightʹΑΔίϯϙʔωϯτͷςετ ࠓ೔࿩͢͜ͱ ● SvelteɺSvelteKitͷৄࡉ࢓༷ ● SvelteKitΛ࠾༻ͨ͠࿩ ࠓ೔࿩͞ͳ͍͜ͱ

Slide 3

Slide 3 text

Copyright© M&AΫϥ΢υ SvelteKitಋೖʹؔͯ͠ͷ࿩͸ϑϩϯτΤϯυΧϯϑΝϨϯεԭೄ2022 Ͱ͓࿩͠·͢ɻ

Slide 4

Slide 4 text

Copyright© M&AΫϥ΢υ Profile ٱอా ݡೋ࿕ kubotak-is kubotak_public kenjiro.kubota גࣜձࣾM&AΫϥ΢υॴଐ TypeScript PHP https://kubotak.page ϓϩϑΣογϣφϧWebϓϩάϥϛϯά Laravel (ڞஶ) Ѫݘɿ౾ࣲ

Slide 5

Slide 5 text

Copyright© M&AΫϥ΢υ ٻਓ޿ࠂαΠτͷΑ͏ͳM&AμΠϨΫτϚονϯά 5 ങ͍ख ɾҊ݅ใु͸M&A੒ޭใुͷΈ ɾ࠷௿ख਺ྉͳ͠ ɾചΓखιʔγϯάͷνϟωϧ͕૿͑Δ ɾM&AχʔζΛൃ৴͢Δ͚ͩͰചΓखΛू٬ ɾ஥հۀऀΛհͣ͞ʹμΠϨΫτʹ΍ΓऔΓՄೳ ɾજࡏ૚ʹ΋Ϧʔν͕Մೳ ख਺ྉແ ྉ ※ϓϥοτϑΥʔϜҊ݅ͷ৔߹ ※ ചΓख 1.ܝࡌ͢Δ ɾങ͍खͷM&AχʔζΛࣗΒௐ΂Δ͜ͱ͕Մೳ
 ɾ஥հۀऀΛհͣ͞ʹμΠϨΫτʹ΍ΓऔΓՄೳ
 ɾങ͍खͷM&A୲౰ऀʹ௚઀ίϯλΫτΛͱΕΔ
 ɾ஥հۀऀΛ࢖Θͳ͍ͷͰख਺ྉ͕ແྉ 2.ΦϑΝʔ͢Δ M&Aɾग़ࢿχʔζΛܝࡌ ങ͍खͷϝϦοτ ചΓखͷϝϦοτ ɾ஥հۀऀΛ࢖Θͳ͍ͷͰख਺ྉ͕ແྉ ʓʓྖҬͷձࣾΛ ืू͠·͢ ͜ͷձࣾͱҰॹʹ ΍͍͖͍ͬͯͨʂ 5 PR

Slide 6

Slide 6 text

Copyright© M&AΫϥ΢υ Svelteͱ͸ʁ Svelte ● Write less code ○ গͳ͍هड़ ● No virtual DOM ○ Ϗϧυ࣌ʹVanilla JSʹίϯύΠϧ ● Truly reactive ○ એݴతͳ state ۦಈܕͷίʔυΛॻ͘ඞཁ͕ͳ͍ React΍Vue.jsʹྨ͢ΔUIߏஙͷͨΊͷίϯϙʔωϯτϑϨʔϜϫʔΫ feature

Slide 7

Slide 7 text

Copyright© M&AΫϥ΢υ SvelteKitͱ͸ʁ SvelteKit SvelteΛϕʔεͱͨ͠WebΞϓϦέʔγϣϯΛߏங͢ΔͨΊͷϑϨʔϜϫʔΫ ● Next.js (React) ● Nuxt (Vue.js) Similar ※SvelteKit͸Svelteͱಉ͡ίϛϡχςΟ͕؅ཧ͍ͯ͠Δ఺Ͱ্هͱҟͳΔ

Slide 8

Slide 8 text

Copyright© M&AΫϥ΢υ ࠃ಺ࣄྫ ͡Ό͕Γ͜ͷಛઃαΠτ͕SvelteKitͰ࡞ΒΕͯΔΈ͍ͨͰ͢ʂ https://www.calbee.co.jp/agerico/jagaricocomic/

Slide 9

Slide 9 text

Copyright© M&AΫϥ΢υ SvelteKitͷجຊతͳσΟϨΫτϦߏ੒

Slide 10

Slide 10 text

Copyright© M&AΫϥ΢υ SvelteKitͷجຊతͳσΟϨΫτϦߏ੒ ΞϓϦέʔγϣϯͷίʔυ͸جຊతʹ͸ src഑Լʹ࡞੒͢Δ ※ެࣜखॱͰεέϧτϯΛ࡞੒ͨ͠௚ޙͷσΟϨΫτϦ

Slide 11

Slide 11 text

Copyright© M&AΫϥ΢υ SvelteKitͷجຊతͳσΟϨΫτϦߏ੒ ϧʔςΟϯά͸ϑΝΠϧγεςϜϕʔε ※ϧʔϧ͸ಛघͳͨΊৄ͘͠͸υΩϡϝϯτΛࢀর͍ͩ͘͞ ※ެࣜखॱͰεέϧτϯΛ࡞੒ͨ͠௚ޙͷσΟϨΫτϦ

Slide 12

Slide 12 text

Copyright© M&AΫϥ΢υ SvelteKitͷجຊతͳσΟϨΫτϦߏ੒ ࡞੒࣌ʹҎԼΛબ୒͢ΔͱPlaywrightʹ ΑΔςετ͕ॳظಋೖ͞ΕΔ ✔ Add Playwright for browser testing? … No / Yes ※Playwrightʹ͍ͭͯ͸ޙ൒Ͱ͓࿩͠·͢ ※ެࣜखॱͰεέϧτϯΛ࡞੒ͨ͠௚ޙͷσΟϨΫτϦ

Slide 13

Slide 13 text

Copyright© M&AΫϥ΢υ 🤔ίϯϙʔωϯτ͸Ͳ͜ʁ

Slide 14

Slide 14 text

Copyright© M&AΫϥ΢υ src/libʹ$libΤΠϦΞε͕ுΒΕ͍ͯͯɺίϯϙʔωϯτ͸͜ͷதʹஔ͘ ͷ͕SvelteKitྲྀͬΆ͍ ※ެࣜυΩϡϝϯτΑΓ

Slide 15

Slide 15 text

Copyright© M&AΫϥ΢υ ΍ͬͯΈΑ͏🚀

Slide 16

Slide 16 text

Copyright© M&AΫϥ΢υ srcσΟϨΫτϦ഑Լʹlib/componentsΛ࡞੒

Slide 17

Slide 17 text

Copyright© M&AΫϥ΢υ routes/+page.svelte͔ΒίϯϙʔωϯτΛݺͼग़͠

Slide 18

Slide 18 text

Copyright© M&AΫϥ΢υ routes/+page.svelte͔ΒίϯϙʔωϯτΛݺͼग़͠ $libΤΠϦΞε Ͱݺͼग़͠

Slide 19

Slide 19 text

Copyright© M&AΫϥ΢υ ϒϥ΢βͰݟΔͱ͜Μͳײ͡👍

Slide 20

Slide 20 text

Copyright© M&AΫϥ΢υ ίϯϙʔωϯτͷςετ

Slide 21

Slide 21 text

Copyright© M&AΫϥ΢υ ίϯϙʔωϯτͷςετ M&AΫϥ΢υͰ͸ҎԼͷ2ͭͷςετΛ࣮ࢪ ● Playwright ○ ίϯϙʔωϯτͷϦάϨογϣϯςετ ● Vitest ○ APIͷmock͕ඞཁͳςετ

Slide 22

Slide 22 text

Copyright© M&AΫϥ΢υ ίϯϙʔωϯτͷςετ M&AΫϥ΢υͰ͸ҎԼͷ2ͭͷςετΛ࣮ࢪ ● Playwright ○ ίϯϙʔωϯτͷϦάϨογϣϯςετ ● Vitest ○ APIͷmock͕ඞཁͳςετ ࠓ೔͸ͪ͜Βʹ͍ͭͯ঺հ

Slide 23

Slide 23 text

Copyright© M&AΫϥ΢υ Playwright Cypress΍PuppeteerͷΑ͏ʹNode.jsͰE2Eςετ͕࣮ߦͰ͖ΔϥΠϒϥϦ ● MicrosoftͷOSSʢݩPuppeteerνʔϜʣ ● Chromium,firefox,webkitʹΑΔΫϩεϒϥ΢βͷςε τ͕Մೳ ● ࢼݧత͕ͩɺίϯϙʔωϯτͷςετٴͼɺϏδϡΞϧ ϦάϨογϣϯςετ΋Մೳ feature

Slide 24

Slide 24 text

Copyright© M&AΫϥ΢υ Playwright Cypress΍PuppeteerͷΑ͏ʹNode.jsͰE2Eςετ͕࣮ߦͰ͖ΔϥΠϒϥϦ ● MicrosoftͷOSSʢݩPuppeteerνʔϜʣ ● Chromium,firefox,webkitʹΑΔΫϩεϒϥ΢βͷςε τ͕Մೳ ● ࢼݧత͕ͩɺίϯϙʔωϯτͷςετٴͼɺϏδϡΞϧ ϦάϨογϣϯςετ΋Մೳ feature ࠓ೔͸ͪ͜Βʹ͍ͭͯ঺հ

Slide 25

Slide 25 text

Copyright© M&AΫϥ΢υ ΍ͬͯΈΑ͏🚀

Slide 26

Slide 26 text

Copyright© M&AΫϥ΢υ ίϯϙʔωϯτςετ༻ͷґଘͱઃఆΛಋೖ ϑϨʔϜϫʔΫબ୒ʹSvelte͕͋Δʂ

Slide 27

Slide 27 text

Copyright© M&AΫϥ΢υ ίϚϯυΛ࣮ߦ͢ΔͱҎԼ͕มߋ͞ΕΔ ● @playwright/experimental-ct-svelte͕Πϯετʔϧ͞ΕΔ ● npm scriptsʹtest-ctίϚϯυ͕௥Ճ͞ΕΔ ● ϓϩδΣΫτϧʔτʹplaywright/index.html͕࡞੒͞ΕΔ ● ϓϩδΣΫτϧʔτʹplaywright-ct.config.ts͕࡞੒͞ΕΔ

Slide 28

Slide 28 text

Copyright© M&AΫϥ΢υ ઌఔ࡞੒ͨ͠ίϯϙʔωϯτΛςετ tests/Test.spec.ts

Slide 29

Slide 29 text

Copyright© M&AΫϥ΢υ $libͷΤΠϦΞεύε͕ղܾͰ͖ͳ͍ͷͰplaywright-ct.config.tsʹҎ ԼΛ௥Ճ

Slide 30

Slide 30 text

Copyright© M&AΫϥ΢υ npm run test-ctΛ࣮ߦ͢Δ ※ॳճ࣮ߦ࣌͸֤ϒϥ΢βͷμ΢ϯϩʔυ͕࣮ߦ͞ΕΔ

Slide 31

Slide 31 text

Copyright© M&AΫϥ΢υ npm run test-ctΛ࣮ߦ͢Δ ※ॳճ࣮ߦ࣌͸֤ϒϥ΢βͷμ΢ϯϩʔυ͕࣮ߦ͞ΕΔ 3ϒϥ΢βͰςετ͍ͯ͠ΔͷͰ 3passedʹͳΔ

Slide 32

Slide 32 text

Copyright© M&AΫϥ΢υ npx playwright show-reportΛ࣮ߦ͢ΔͱϨϙʔτ͕ݟΕΔ

Slide 33

Slide 33 text

Copyright© M&AΫϥ΢υ ϏδϡΞϧϦάϨογϣϯςετ΋΍ͬͯΈΑ͏🎭

Slide 34

Slide 34 text

Copyright© M&AΫϥ΢υ ίϯϙʔωϯτ͕εΫϦʔϯγϣοτͱҰக͢Δ͜ͱΛςετ͢Δ

Slide 35

Slide 35 text

Copyright© M&AΫϥ΢υ npm scriptsʹεΫϦʔϯγϣοτऔಘίϚϯυΛ௥Ճ ࣮ߦ͢ΔͱεΫϦʔϯγϣοτ͕ग़ྗ͞ΕΔ

Slide 36

Slide 36 text

Copyright© M&AΫϥ΢υ σϑΥϧτͰ͸ϧʔτσΟϨΫτϦ͔Β__snapshots__σΟϨΫτϦ ʹεΫϦʔϯγϣοτ͕อଘ͞ΕΔ ͜ͷεΫϦʔϯγϣοτͱςετ࣌ʹҰக͢Δ͔ΛνΣοΫ͢Δɻ ίϯϙʔωϯτʹࠩ෼͕͋ΔͱςετࣦഊʹͳΔ

Slide 37

Slide 37 text

Copyright© M&AΫϥ΢υ εΫϦʔϯγϣοτʹΑΔϦάϨογϣϯςετ͕ࣦഊͨ͠৔߹

Slide 38

Slide 38 text

Copyright© M&AΫϥ΢υ εΫϦʔϯγϣοτʹΑΔϦάϨογϣϯςετ͕ࣦഊͨ͠৔߹ ςετର৅͕ڱ͍ͷͰςΩετϨϕϧ ͷςετͰ͸௨աͯ͠͠·͏

Slide 39

Slide 39 text

Copyright© M&AΫϥ΢υ ActualͰࣦഊΛ֬ೝ͢Δ͜ͱ͕Ͱ͖Δ

Slide 40

Slide 40 text

Copyright© M&AΫϥ΢υ ࠩ෼͕খ͍͞৔߹͸DiffͰࡉ͔֬͘ೝͰ͖Δ

Slide 41

Slide 41 text

Copyright© M&AΫϥ΢υ 🚀 Pros ● ࢼݧతͰ͸͋Δ͕े෼ར༻Ͱ͖Δ ● PR࣌ʹίϯϙʔωϯτͷεΫϦʔϯγϣοτ͕͋ΔͱϨϏϡʔ͠ ΍͍͢ ● Ϋϩεϒϥ΢βͰεΫϦʔϯγϣοτ͕ࡱΒΕΔͷͰಛఆͷϒϥ ΢β่Εʹࣄલʹؾͮ͘͜ͱ͕Ͱ͖Δ ● ςΩετϨϕϧͷςετʹൺ΂ͯεΫγϣςετ͸ίϯϙʔωϯ τશମΛ୲อͰ͖Δ

Slide 42

Slide 42 text

Copyright© M&AΫϥ΢υ 🫠 Cons ● jsdomʹΑΔςετʹൺ΂Δͱ࣮ߦ͕͔͔࣌ؒΔ ● ϦϙδτϦʹը૾Λͦͷ··ஔ͍͍ͯΔͷͰকདྷతͳ༰ྔ͕ؾʹ ͳΔ ● CIͰ࣮ߦ͢Δ৔߹ɺࣄલʹϒϥ΢β͕Πϯετʔϧ͞ΕͨDocker ΠϝʔδΛϗεςΟϯά͓ͯ͘͠ͳͲޮ཰Α͘࢖͏ͨΊʹҰखؒ ඞཁ

Slide 43

Slide 43 text

Copyright© M&AΫϥ΢υ Thanks for watching this :)