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
potato4d(Takuma HANATANI)
September 19, 2016
Programming
1
490
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
350
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
2.2k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.8k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
6.9k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
1.2k
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.6k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
4k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
26k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.4k
Other Decks in Programming
See All in Programming
もう少しテストを書きたいんじゃ〜 #phpstudy
o0h
PRO
17
3.9k
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
220
sappoRo.R #12 初心者セッション
kosugitti
0
270
技術を改善し続ける
gumioji
0
120
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
240
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
260
CI改善もDatadogとともに
taumu
0
200
Jasprが凄い話
hyshu
0
150
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.2k
Ruby on cygwin 2025-02
fd0
0
180
Unity Android XR入門
sakutama_11
0
180
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.3k
Featured
See All Featured
Building Your Own Lightsaber
phodgson
104
6.2k
We Have a Design System, Now What?
morganepeng
51
7.4k
Fireside Chat
paigeccino
34
3.2k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Music & Morning Musume
bryan
46
6.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
250
Unsuck your backbone
ammeep
669
57k
The Pragmatic Product Professional
lauravandoore
32
6.4k
What's in a price? How to price your products and services
michaelherold
244
12k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
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ͳͲͷ͕ࣝ ඞཁʹͳΔͷͰ୭Ͱѻ͍͍͔͢ͱ͍͑ඍົ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠