WordBench京都(#wbkyoto #wordbench) 9月のスライドです。
E2EπʔϧʮNightmareʯΛͬͯΈΑ͏WordBench Kyoto 2016.09TAKUMA Hanatani(Potato4d)
View Slide
ࣗݾհ• Ֆ୩ɹຏ(@potato4d)• #wbkyoto ͷϞσϨʔλʔͬͯ·͢• #frontkansai ͬͯ·͢ɻ• ࠷ۙJavaScriptʹͲͬΓ• ඞཁ͕ग़͖ͯͯॳΊͯe2eͬͨͷͰͯ͠Έ·͢
Agenda• Nightmareͱʁ• NightmareΛ͏ͱԿ͕Ͱ͖Δʁ• WordPressϓϥάΠϯ։ൃ࣌ʹཱͭͱ͜Ζ
Nightmareͱʁ
Nightmareͱʁ• Node.jsϕʔεͷϔουϨεϒϥβ• ୯ମͰेʹe2eςετπʔϧͱͯ͠ར༻Մೳ• ݩʑPhantomJSͱ͍͏JSϥΠϒϥϦͷϥούʔ• ࠓElectronΛར༻͓ͯ͠Γɺ࠷৽ͷରԠόονϦ
e2eςετͱʁ
e2eςετͱʁ• γεςϜͷ͔Β·ͰΛཏతʹ֬ೝ͢Δςετͷ͜ͱ• ઐ༻ͷe2eπʔϧϔουϨεϒϥβΛར༻͠ɺ୯ҰͷϓϩάϥϜͷI/O͚ͩͰͳ͘ɺ࣮ࡍͷΞϓϦέʔγϣϯΛಈ͔ͯ͠ਐΊ͍ͯ͘• ॳΊͯͷόΠτઌͰΤΫηϧγʔτͰͬͯͨ
NightmareΛ͏ͱԿ͕Ͱ͖Δʁ
NightmareΛ͏ͱԿ͕Ͱ͖Δʁ• ϒϥβͰͰ͖Δૢ࡞શ͕ͯࣗಈԽͰ͖Δ• DOM͕ີʹؔΘΔ෦ͷςετ• ࣮ࡍͷૢ࡞ϑϩʔʹԠͨ͡ಈ࡞ςετ• ୯७ͳWebαΠτͰͷૢ࡞ͷࣗಈԽ
NightmareΛ͏ͱԿ͕Ͱ͖Δʁ• ϒϥβͰͰ͖Δૢ࡞શ͕ͯࣗಈԽͰ͖Δ• DOM͕ີʹؔΘΔ෦ͷςετ• ࣮ࡍͷૢ࡞ϑϩʔʹԠͨ͡ಈ࡞ςετ• WebαΠτͰͷ୯७ͳૢ࡞ͷࣗಈԽ
NightmareΛ͏ͱԿ͕Ͱ͖ΔʁDOM͕ີʹؔΘΔ෦ͷςετDOM JavaScript DOMEvent Event
NightmareΛ͏ͱԿ͕Ͱ͖Δʁ࣮ࡍͷૢ࡞ϑϩʔʹԠͨ͡ಈ࡞ςετLogin Dashboard PostEvent Event
࣮ࡍͬͯΈΔ
WordPressϓϥάΠϯ։ൃ࣌ʹཱͭͱ͜Ζ
WordPressϓϥάΠϯ։ൃ࣌ʹཱͭͱ͜Ζ• Θ͔Γ͍͢ಈ࡞͕ଟ͍ͷͰɺػցతʹνΣοΫͯ࣌͘͢͠ʹͳ͔ͳ͔ྑ͍• ͨͩɺPHP͕ϝΠϯͳ͚ͩ͋ͬͯɺJavaScriptΛத৺ͱͨ͠ͷΑΓԸܙ͕ബ͍• εΫϦʔϯγϣοτͳΜ͔औΕΔͷͰɺެࣜʹ্͛Δͱ͖ʹͦͷ͋ͨΓศརʹར༻Ͱ͖Δ͔
NightmareΛͬͯΈͨॴײ(JSͷਓ͚)
NightmareΛͬͯΈͨॴײ• Node͔ͭಈ࡞ϒϥβ͕ChromiumϕʔεͳͷͰɺϞμϯJavaScriptΛଘʹͬͯॻ͘͜ͱ͕ग़དྷΔͷҹ• ͨͩɺੜͰಈ͔͢ʹmochaͳͲͷςεςΟϯάϑϨʔϜϫʔΫΛ͏߹ͰɺgeneratorͳͲͷ͕ࣝඞཁʹͳΔͷͰ୭Ͱѻ͍͍͔͢ͱ͍͑ඍົ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠