Nextbeat Tech Bar:SvelteKit導入企業2社による本音LT会
Copyright© M&AΫϥυPlaywrightʹΑΔSvelteίϯϙʔωϯτςετNextbeat Tech BarɿSvelteKitಋೖاۀ2ࣾʹΑΔຊԻLTձ /Kenjiro Kubota
View Slide
Copyright© M&AΫϥυindex● SvelteKitͰͷίϯϙʔωϯτͷ࡞Γํ● PlaywrightʹΑΔίϯϙʔωϯτͷςετࠓ͢͜ͱ● SvelteɺSvelteKitͷৄࡉ༷● SvelteKitΛ࠾༻ͨ͠ࠓ͞ͳ͍͜ͱ
Copyright© M&AΫϥυSvelteKitಋೖʹؔͯ͠ͷϑϩϯτΤϯυΧϯϑΝϨϯεԭೄ2022Ͱ͓͠·͢ɻ
Copyright© M&AΫϥυProfileٱอా ݡೋ࿕kubotak-iskubotak_publickenjiro.kubotaגࣜձࣾM&AΫϥυॴଐTypeScriptPHPhttps://kubotak.pageϓϩϑΣογϣφϧWebϓϩάϥϛϯά Laravel (ڞஶ)Ѫݘɿ౾ࣲ
Copyright© M&AΫϥυٻਓࠂαΠτͷΑ͏ͳM&AμΠϨΫτϚονϯά5ങ͍खɾҊ݅ใुM&AޭใुͷΈɾ࠷खྉͳ͠ɾചΓखιʔγϯάͷνϟωϧ͕૿͑ΔɾM&AχʔζΛൃ৴͢Δ͚ͩͰചΓखΛू٬ɾհۀऀΛհͣ͞ʹμΠϨΫτʹΓऔΓՄೳɾજࡏʹϦʔν͕Մೳखྉແྉ※ϓϥοτϑΥʔϜҊ݅ͷ߹※ചΓख1.ܝࡌ͢Δɾങ͍खͷM&AχʔζΛࣗΒௐΔ͜ͱ͕Մೳ ɾհۀऀΛհͣ͞ʹμΠϨΫτʹΓऔΓՄೳ ɾങ͍खͷM&A୲ऀʹίϯλΫτΛͱΕΔ ɾհۀऀΛΘͳ͍ͷͰखྉ͕ແྉ2.ΦϑΝʔ͢ΔM&Aɾग़ࢿχʔζΛܝࡌങ͍खͷϝϦοτ ചΓखͷϝϦοτɾհۀऀΛΘͳ͍ͷͰखྉ͕ແྉʓʓྖҬͷձࣾΛืू͠·͢͜ͷձࣾͱҰॹʹ͍͖͍ͬͯͨʂ5PR
Copyright© M&AΫϥυSvelteͱʁSvelte● Write less code○ গͳ͍هड़● No virtual DOM○ Ϗϧυ࣌ʹVanilla JSʹίϯύΠϧ● Truly reactive○ એݴతͳ state ۦಈܕͷίʔυΛॻ͘ඞཁ͕ͳ͍ReactVue.jsʹྨ͢ΔUIߏஙͷͨΊͷίϯϙʔωϯτϑϨʔϜϫʔΫfeature
Copyright© M&AΫϥυSvelteKitͱʁSvelteKitSvelteΛϕʔεͱͨ͠WebΞϓϦέʔγϣϯΛߏங͢ΔͨΊͷϑϨʔϜϫʔΫ● Next.js (React)● Nuxt (Vue.js)Similar※SvelteKitSvelteͱಉ͡ίϛϡχςΟ͕ཧ͍ͯ͠ΔͰ্هͱҟͳΔ
Copyright© M&AΫϥυࠃࣄྫ͡Ό͕Γ͜ͷಛઃαΠτ͕SvelteKitͰ࡞ΒΕͯΔΈ͍ͨͰ͢ʂhttps://www.calbee.co.jp/agerico/jagaricocomic/
Copyright© M&AΫϥυSvelteKitͷجຊతͳσΟϨΫτϦߏ
Copyright© M&AΫϥυSvelteKitͷجຊతͳσΟϨΫτϦߏΞϓϦέʔγϣϯͷίʔυجຊతʹsrcԼʹ࡞͢Δ※ެࣜखॱͰεέϧτϯΛ࡞ͨ͠ޙͷσΟϨΫτϦ
Copyright© M&AΫϥυSvelteKitͷجຊతͳσΟϨΫτϦߏϧʔςΟϯάϑΝΠϧγεςϜϕʔε※ϧʔϧಛघͳͨΊৄ͘͠υΩϡϝϯτΛࢀর͍ͩ͘͞※ެࣜखॱͰεέϧτϯΛ࡞ͨ͠ޙͷσΟϨΫτϦ
Copyright© M&AΫϥυSvelteKitͷجຊతͳσΟϨΫτϦߏ࡞࣌ʹҎԼΛબ͢ΔͱPlaywrightʹΑΔςετ͕ॳظಋೖ͞ΕΔ✔ Add Playwright for browser testing? … No / Yes※Playwrightʹ͍ͭͯޙͰ͓͠·͢※ެࣜखॱͰεέϧτϯΛ࡞ͨ͠ޙͷσΟϨΫτϦ
Copyright© M&AΫϥυ🤔ίϯϙʔωϯτͲ͜ʁ
Copyright© M&AΫϥυsrc/libʹ$libΤΠϦΞε͕ுΒΕ͍ͯͯɺίϯϙʔωϯτ͜ͷதʹஔ͘ͷ͕SvelteKitྲྀͬΆ͍※ެࣜυΩϡϝϯτΑΓ
Copyright© M&AΫϥυͬͯΈΑ͏🚀
Copyright© M&AΫϥυsrcσΟϨΫτϦԼʹlib/componentsΛ࡞
Copyright© M&AΫϥυroutes/+page.svelte͔ΒίϯϙʔωϯτΛݺͼग़͠
Copyright© M&AΫϥυroutes/+page.svelte͔ΒίϯϙʔωϯτΛݺͼग़͠$libΤΠϦΞεͰݺͼग़͠
Copyright© M&AΫϥυϒϥβͰݟΔͱ͜Μͳײ͡👍
Copyright© M&AΫϥυίϯϙʔωϯτͷςετ
Copyright© M&AΫϥυίϯϙʔωϯτͷςετM&AΫϥυͰҎԼͷ2ͭͷςετΛ࣮ࢪ● Playwright○ ίϯϙʔωϯτͷϦάϨογϣϯςετ● Vitest○ APIͷmock͕ඞཁͳςετ
Copyright© M&AΫϥυίϯϙʔωϯτͷςετM&AΫϥυͰҎԼͷ2ͭͷςετΛ࣮ࢪ● Playwright○ ίϯϙʔωϯτͷϦάϨογϣϯςετ● Vitest○ APIͷmock͕ඞཁͳςετࠓͪ͜Βʹ͍ͭͯհ
Copyright© M&AΫϥυPlaywrightCypressPuppeteerͷΑ͏ʹNode.jsͰE2Eςετ͕࣮ߦͰ͖ΔϥΠϒϥϦ● MicrosoftͷOSSʢݩPuppeteerνʔϜʣ● Chromium,firefox,webkitʹΑΔΫϩεϒϥβͷςετ͕Մೳ● ࢼݧత͕ͩɺίϯϙʔωϯτͷςετٴͼɺϏδϡΞϧϦάϨογϣϯςετՄೳfeature
Copyright© M&AΫϥυPlaywrightCypressPuppeteerͷΑ͏ʹNode.jsͰE2Eςετ͕࣮ߦͰ͖ΔϥΠϒϥϦ● MicrosoftͷOSSʢݩPuppeteerνʔϜʣ● Chromium,firefox,webkitʹΑΔΫϩεϒϥβͷςετ͕Մೳ● ࢼݧత͕ͩɺίϯϙʔωϯτͷςετٴͼɺϏδϡΞϧϦάϨογϣϯςετՄೳfeatureࠓͪ͜Βʹ͍ͭͯհ
Copyright© M&AΫϥυίϯϙʔωϯτςετ༻ͷґଘͱઃఆΛಋೖϑϨʔϜϫʔΫબʹSvelte͕͋Δʂ
Copyright© M&AΫϥυίϚϯυΛ࣮ߦ͢ΔͱҎԼ͕มߋ͞ΕΔ● @playwright/experimental-ct-svelte͕Πϯετʔϧ͞ΕΔ● npm scriptsʹtest-ctίϚϯυ͕Ճ͞ΕΔ● ϓϩδΣΫτϧʔτʹplaywright/index.html͕࡞͞ΕΔ● ϓϩδΣΫτϧʔτʹplaywright-ct.config.ts͕࡞͞ΕΔ
Copyright© M&AΫϥυઌఔ࡞ͨ͠ίϯϙʔωϯτΛςετtests/Test.spec.ts
Copyright© M&AΫϥυ$libͷΤΠϦΞεύε͕ղܾͰ͖ͳ͍ͷͰplaywright-ct.config.tsʹҎԼΛՃ
Copyright© M&AΫϥυnpm run test-ctΛ࣮ߦ͢Δ※ॳճ࣮ߦ֤࣌ϒϥβͷμϯϩʔυ͕࣮ߦ͞ΕΔ
Copyright© M&AΫϥυnpm run test-ctΛ࣮ߦ͢Δ※ॳճ࣮ߦ֤࣌ϒϥβͷμϯϩʔυ͕࣮ߦ͞ΕΔ3ϒϥβͰςετ͍ͯ͠ΔͷͰ3passedʹͳΔ
Copyright© M&AΫϥυnpx playwright show-reportΛ࣮ߦ͢ΔͱϨϙʔτ͕ݟΕΔ
Copyright© M&AΫϥυϏδϡΞϧϦάϨογϣϯςετͬͯΈΑ͏🎭
Copyright© M&AΫϥυίϯϙʔωϯτ͕εΫϦʔϯγϣοτͱҰக͢Δ͜ͱΛςετ͢Δ
Copyright© M&AΫϥυnpm scriptsʹεΫϦʔϯγϣοτऔಘίϚϯυΛՃ࣮ߦ͢ΔͱεΫϦʔϯγϣοτ͕ग़ྗ͞ΕΔ
Copyright© M&AΫϥυσϑΥϧτͰϧʔτσΟϨΫτϦ͔Β__snapshots__σΟϨΫτϦʹεΫϦʔϯγϣοτ͕อଘ͞ΕΔ͜ͷεΫϦʔϯγϣοτͱςετ࣌ʹҰக͢Δ͔ΛνΣοΫ͢Δɻίϯϙʔωϯτʹ͕ࠩ͋ΔͱςετࣦഊʹͳΔ
Copyright© M&AΫϥυεΫϦʔϯγϣοτʹΑΔϦάϨογϣϯςετ͕ࣦഊͨ͠߹
Copyright© M&AΫϥυεΫϦʔϯγϣοτʹΑΔϦάϨογϣϯςετ͕ࣦഊͨ͠߹ςετର͕ڱ͍ͷͰςΩετϨϕϧͷςετͰ௨աͯ͠͠·͏
Copyright© M&AΫϥυActualͰࣦഊΛ֬ೝ͢Δ͜ͱ͕Ͱ͖Δ
Copyright© M&AΫϥυ͕ࠩখ͍͞߹DiffͰࡉ͔֬͘ೝͰ͖Δ
Copyright© M&AΫϥυ🚀 Pros● ࢼݧతͰ͋Δ͕ेར༻Ͱ͖Δ● PR࣌ʹίϯϙʔωϯτͷεΫϦʔϯγϣοτ͕͋ΔͱϨϏϡʔ͍͢͠● ΫϩεϒϥβͰεΫϦʔϯγϣοτ͕ࡱΒΕΔͷͰಛఆͷϒϥβ่Εʹࣄલʹؾͮ͘͜ͱ͕Ͱ͖Δ● ςΩετϨϕϧͷςετʹൺͯεΫγϣςετίϯϙʔωϯτશମΛ୲อͰ͖Δ
Copyright© M&AΫϥυ🫠 Cons● jsdomʹΑΔςετʹൺΔͱ࣮ߦ͕͔͔࣌ؒΔ● ϦϙδτϦʹը૾Λͦͷ··ஔ͍͍ͯΔͷͰকདྷతͳ༰ྔ͕ؾʹͳΔ● CIͰ࣮ߦ͢Δ߹ɺࣄલʹϒϥβ͕Πϯετʔϧ͞ΕͨDockerΠϝʔδΛϗεςΟϯά͓ͯ͘͠ͳͲޮΑ͘͏ͨΊʹҰखؒඞཁ
Copyright© M&AΫϥυThanks for watching this :)