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
E2Eツール「Nightmare」を使ってみよう
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
potato4d(Takuma HANATANI)
September 19, 2016
Programming
1
530
E2Eツール「Nightmare」を使ってみよう
WordBench京都(#wbkyoto #wordbench) 9月のスライドです。
potato4d(Takuma HANATANI)
September 19, 2016
Tweet
Share
More Decks by potato4d(Takuma HANATANI)
See All by potato4d(Takuma HANATANI)
どうせキレイに書けない処理は逆にAIに書いてもらうほうが良い説 / #kyotojs 22
potato4d
3
430
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
2.4k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
5k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
7k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
1.4k
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.8k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
4.3k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
28k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.6k
Other Decks in Programming
See All in Programming
Basic Architectures
denyspoltorak
0
680
例外処理とどう使い分ける?Result型を使ったエラー設計 #burikaigi
kajitack
16
6.1k
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる!
tosuri13
1
180
AI巻き込み型コードレビューのススメ
nealle
2
450
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
600
Best-Practices-for-Cortex-Analyst-and-AI-Agent
ryotaroikeda
1
110
Smart Handoff/Pickup ガイド - Claude Code セッション管理
yukiigarashi
0
140
組織で育むオブザーバビリティ
ryota_hnk
0
180
Package Management Learnings from Homebrew
mikemcquaid
0
230
高速開発のためのコード整理術
sutetotanuki
1
410
責任感のあるCloudWatchアラームを設計しよう
akihisaikeda
3
180
余白を設計しフロントエンド開発を 加速させる
tsukuha
7
2.1k
Featured
See All Featured
Paper Plane
katiecoart
PRO
0
46k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
akademiya2063
PRO
1
55
4 Signs Your Business is Dying
shpigford
187
22k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
190
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
117
110k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
2.1k
How to Think Like a Performance Engineer
csswizardry
28
2.4k
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
61
52k
Product Roadmaps are Hard
iamctodd
PRO
55
12k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
1
1.1k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
0
380
Transcript
E2EπʔϧʮNightmareʯΛ ͬͯΈΑ͏ WordBench Kyoto 2016.09 TAKUMA Hanatani(Potato4d)
ࣗݾհ • Ֆ୩ɹຏ(@potato4d) • #wbkyoto ͷϞσϨʔλʔͬͯ·͢ • #frontkansai ͬͯ·͢ɻ •
࠷ۙJavaScriptʹͲͬΓ • ඞཁ͕ग़͖ͯͯॳΊͯe2eͬͨͷͰ ͯ͠Έ·͢
Agenda • Nightmareͱʁ • NightmareΛ͏ͱԿ͕Ͱ͖Δʁ • WordPressϓϥάΠϯ։ൃ࣌ʹཱͭͱ͜Ζ
Nightmareͱʁ
Nightmareͱʁ
Nightmareͱʁ • Node.jsϕʔεͷϔουϨεϒϥβ • ୯ମͰेʹe2eςετπʔϧͱͯ͠ར༻Մೳ • ݩʑPhantomJSͱ͍͏JSϥΠϒϥϦͷϥούʔ • ࠓElectronΛར༻͓ͯ͠Γɺ࠷৽ͷରԠόονϦ
Nightmareͱʁ • Node.jsϕʔεͷϔουϨεϒϥβ • ୯ମͰेʹe2eςετπʔϧͱͯ͠ར༻Մೳ • ݩʑPhantomJSͱ͍͏JSϥΠϒϥϦͷϥούʔ • ࠓElectronΛར༻͓ͯ͠Γɺ࠷৽ͷରԠόονϦ
Nightmareͱʁ • Node.jsϕʔεͷϔουϨεϒϥβ • ୯ମͰेʹe2eςετπʔϧͱͯ͠ར༻Մೳ • ݩʑPhantomJSͱ͍͏JSϥΠϒϥϦͷϥούʔ • ࠓElectronΛར༻͓ͯ͠Γɺ࠷৽ͷରԠόονϦ
Nightmareͱʁ • Node.jsϕʔεͷϔουϨεϒϥβ • ୯ମͰेʹe2eςετπʔϧͱͯ͠ར༻Մೳ • ݩʑPhantomJSͱ͍͏JSϥΠϒϥϦͷϥούʔ • ࠓElectronΛར༻͓ͯ͠Γɺ࠷৽ͷରԠόονϦ
e2eςετͱʁ
e2eςετͱʁ • γεςϜͷ͔Β·ͰΛཏతʹ֬ೝ͢Δςετͷ͜ ͱ • ઐ༻ͷe2eπʔϧϔουϨεϒϥβΛར༻͠ɺ୯Ұ ͷϓϩάϥϜͷI/O͚ͩͰͳ͘ɺ࣮ࡍͷΞϓϦέʔγϣ ϯΛಈ͔ͯ͠ਐΊ͍ͯ͘ • ॳΊͯͷόΠτઌͰΤΫηϧγʔτͰͬͯͨ
e2eςετͱʁ • γεςϜͷ͔Β·ͰΛཏతʹ֬ೝ͢Δςετͷ͜ ͱ • ઐ༻ͷe2eπʔϧϔουϨεϒϥβΛར༻͠ɺ୯Ұ ͷϓϩάϥϜͷI/O͚ͩͰͳ͘ɺ࣮ࡍͷΞϓϦέʔγϣ ϯΛಈ͔ͯ͠ਐΊ͍ͯ͘ • ॳΊͯͷόΠτઌͰΤΫηϧγʔτͰͬͯͨ
e2eςετͱʁ • γεςϜͷ͔Β·ͰΛཏతʹ֬ೝ͢Δςετͷ͜ ͱ • ઐ༻ͷe2eπʔϧϔουϨεϒϥβΛར༻͠ɺ୯Ұ ͷϓϩάϥϜͷI/O͚ͩͰͳ͘ɺ࣮ࡍͷΞϓϦέʔγϣ ϯΛಈ͔ͯ͠ਐΊ͍ͯ͘ • ॳΊͯͷόΠτઌͰΤΫηϧγʔτͰͬͯͨ
NightmareΛ͏ͱԿ͕Ͱ͖Δʁ
NightmareΛ͏ͱԿ͕Ͱ͖Δʁ
NightmareΛ͏ͱԿ͕Ͱ͖Δʁ • ϒϥβͰͰ͖Δૢ࡞શ͕ͯࣗಈԽͰ͖Δ • DOM͕ີʹؔΘΔ෦ͷςετ • ࣮ࡍͷૢ࡞ϑϩʔʹԠͨ͡ಈ࡞ςετ • ୯७ͳWebαΠτͰͷૢ࡞ͷࣗಈԽ
NightmareΛ͏ͱԿ͕Ͱ͖Δʁ • ϒϥβͰͰ͖Δૢ࡞શ͕ͯࣗಈԽͰ͖Δ • DOM͕ີʹؔΘΔ෦ͷςετ • ࣮ࡍͷૢ࡞ϑϩʔʹԠͨ͡ಈ࡞ςετ • ୯७ͳWebαΠτͰͷૢ࡞ͷࣗಈԽ
NightmareΛ͏ͱԿ͕Ͱ͖Δʁ • ϒϥβͰͰ͖Δૢ࡞શ͕ͯࣗಈԽͰ͖Δ • DOM͕ີʹؔΘΔ෦ͷςετ • ࣮ࡍͷૢ࡞ϑϩʔʹԠͨ͡ಈ࡞ςετ • ୯७ͳWebαΠτͰͷૢ࡞ͷࣗಈԽ
NightmareΛ͏ͱԿ͕Ͱ͖Δʁ • ϒϥβͰͰ͖Δૢ࡞શ͕ͯࣗಈԽͰ͖Δ • DOM͕ີʹؔΘΔ෦ͷςετ • ࣮ࡍͷૢ࡞ϑϩʔʹԠͨ͡ಈ࡞ςετ • WebαΠτͰͷ୯७ͳૢ࡞ͷࣗಈԽ
NightmareΛ͏ͱԿ͕Ͱ͖Δʁ DOM͕ີʹؔΘΔ෦ͷςετ DOM JavaScript DOM Event Event
NightmareΛ͏ͱԿ͕Ͱ͖Δʁ ࣮ࡍͷૢ࡞ϑϩʔʹԠͨ͡ಈ࡞ςετ Login Dashboard Post Event Event
࣮ࡍͬͯΈΔ
WordPressϓϥάΠϯ։ൃ࣌ʹ ཱͭͱ͜Ζ
WordPressϓϥάΠϯ։ൃ࣌ʹཱͭͱ͜Ζ • Θ͔Γ͍͢ಈ࡞͕ଟ͍ͷͰɺػցతʹνΣοΫ͠ ͯ࣌͘͢ʹͳ͔ͳ͔ྑ͍ • ͨͩɺPHP͕ϝΠϯͳ͚ͩ͋ͬͯɺJavaScriptΛத৺ͱ ͨ͠ͷΑΓԸܙ͕ബ͍ • εΫϦʔϯγϣοτͳΜ͔औΕΔͷͰɺެࣜʹ্͛Δ ͱ͖ʹͦͷ͋ͨΓศརʹར༻Ͱ͖Δ͔
WordPressϓϥάΠϯ։ൃ࣌ʹཱͭͱ͜Ζ • Θ͔Γ͍͢ಈ࡞͕ଟ͍ͷͰɺػցతʹνΣοΫ͠ ͯ࣌͘͢ʹͳ͔ͳ͔ྑ͍ • ͨͩɺPHP͕ϝΠϯͳ͚ͩ͋ͬͯɺJavaScriptΛத৺ͱ ͨ͠ͷΑΓԸܙ͕ബ͍ • εΫϦʔϯγϣοτͳΜ͔औΕΔͷͰɺެࣜʹ্͛Δ ͱ͖ʹͦͷ͋ͨΓศརʹར༻Ͱ͖Δ͔
WordPressϓϥάΠϯ։ൃ࣌ʹཱͭͱ͜Ζ • Θ͔Γ͍͢ಈ࡞͕ଟ͍ͷͰɺػցతʹνΣοΫ͠ ͯ࣌͘͢ʹͳ͔ͳ͔ྑ͍ • ͨͩɺPHP͕ϝΠϯͳ͚ͩ͋ͬͯɺJavaScriptΛத৺ͱ ͨ͠ͷΑΓԸܙ͕ബ͍ • εΫϦʔϯγϣοτͳΜ͔औΕΔͷͰɺެࣜʹ্͛Δ ͱ͖ʹͦͷ͋ͨΓศརʹར༻Ͱ͖Δ͔
NightmareΛͬͯΈͨॴײ(JSͷਓ͚)
NightmareΛͬͯΈͨॴײ • Node͔ͭಈ࡞ϒϥβ͕ChromiumϕʔεͳͷͰɺ ϞμϯJavaScriptΛଘʹͬͯॻ͘͜ͱ͕ग़དྷΔͷ ҹ • ͨͩɺੜͰಈ͔͢ʹmochaͳͲͷςεςΟϯάϑ ϨʔϜϫʔΫΛ͏߹ͰɺgeneratorͳͲͷ͕ࣝ ඞཁʹͳΔͷͰ୭Ͱѻ͍͍͔͢ͱ͍͑ඍົ
NightmareΛͬͯΈͨॴײ • Node͔ͭಈ࡞ϒϥβ͕ChromiumϕʔεͳͷͰɺ ϞμϯJavaScriptΛଘʹͬͯॻ͘͜ͱ͕ग़དྷΔͷ ҹ • ͨͩɺੜͰಈ͔͢ʹmochaͳͲͷςεςΟϯάϑ ϨʔϜϫʔΫΛ͏߹ͰɺgeneratorͳͲͷ͕ࣝ ඞཁʹͳΔͷͰ୭Ͱѻ͍͍͔͢ͱ͍͑ඍົ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠