Tweet
Tweet

Slide 1

Slide 1 text

E2EπʔϧʮNightmareʯΛ ࢖ͬͯΈΑ͏ WordBench Kyoto 2016.09 TAKUMA Hanatani(Potato4d)

Slide 2

Slide 2 text

ࣗݾ঺հ • Ֆ୩ɹ୓ຏ(@potato4d) • #wbkyoto ͷϞσϨʔλʔ΍ͬͯ·͢ • #frontkansai ΋΍ͬͯ·͢ɻ • ࠷ۙ͸JavaScriptʹͲͬ΀Γ • ඞཁ͕ग़͖ͯͯॳΊͯe2e΍ͬͨͷͰ࿩ ͯ͠Έ·͢

Slide 3

Slide 3 text

Agenda • Nightmareͱ͸ʁ • NightmareΛ࢖͏ͱԿ͕Ͱ͖Δʁ • WordPressϓϥάΠϯ։ൃ࣌ʹ໾ཱͭͱ͜Ζ

Slide 4

Slide 4 text

Nightmareͱ͸ʁ

Slide 5

Slide 5 text

Nightmareͱ͸ʁ

Slide 6

Slide 6 text

Nightmareͱ͸ʁ • Node.jsϕʔεͷϔουϨεϒϥ΢β • ୯ମͰ΋े෼ʹe2eςετπʔϧͱͯ͠ར༻Մೳ • ݩʑ͸PhantomJSͱ͍͏JSϥΠϒϥϦͷϥούʔ • ࠓ͸ElectronΛར༻͓ͯ͠Γɺ࠷৽΁ͷରԠ͸όονϦ

Slide 7

Slide 7 text

Nightmareͱ͸ʁ • Node.jsϕʔεͷϔουϨεϒϥ΢β • ୯ମͰ΋े෼ʹe2eςετπʔϧͱͯ͠ར༻Մೳ • ݩʑ͸PhantomJSͱ͍͏JSϥΠϒϥϦͷϥούʔ • ࠓ͸ElectronΛར༻͓ͯ͠Γɺ࠷৽΁ͷରԠ͸όονϦ

Slide 8

Slide 8 text

Nightmareͱ͸ʁ • Node.jsϕʔεͷϔουϨεϒϥ΢β • ୯ମͰ΋े෼ʹe2eςετπʔϧͱͯ͠ར༻Մೳ • ݩʑ͸PhantomJSͱ͍͏JSϥΠϒϥϦͷϥούʔ • ࠓ͸ElectronΛར༻͓ͯ͠Γɺ࠷৽΁ͷରԠ͸όονϦ

Slide 9

Slide 9 text

Nightmareͱ͸ʁ • Node.jsϕʔεͷϔουϨεϒϥ΢β • ୯ମͰ΋े෼ʹe2eςετπʔϧͱͯ͠ར༻Մೳ • ݩʑ͸PhantomJSͱ͍͏JSϥΠϒϥϦͷϥούʔ • ࠓ͸ElectronΛར༻͓ͯ͠Γɺ࠷৽΁ͷରԠ͸όονϦ

Slide 10

Slide 10 text

e2eςετͱ͸ʁ

Slide 11

Slide 11 text

e2eςετͱ͸ʁ • γεςϜͷ୺͔Β୺·ͰΛ໢ཏతʹ֬ೝ͢Δςετͷ͜ ͱ • ઐ༻ͷe2eπʔϧ΍ϔουϨεϒϥ΢βΛར༻͠ɺ୯Ұ ͷϓϩάϥϜͷI/O͚ͩͰͳ͘ɺ࣮ࡍͷΞϓϦέʔγϣ ϯΛಈ͔ͯ͠ਐΊ͍ͯ͘ • ॳΊͯͷόΠτઌͰ͸ΤΫηϧγʔτͰ΍ͬͯͨ

Slide 12

Slide 12 text

e2eςετͱ͸ʁ • γεςϜͷ୺͔Β୺·ͰΛ໢ཏతʹ֬ೝ͢Δςετͷ͜ ͱ • ઐ༻ͷe2eπʔϧ΍ϔουϨεϒϥ΢βΛར༻͠ɺ୯Ұ ͷϓϩάϥϜͷI/O͚ͩͰͳ͘ɺ࣮ࡍͷΞϓϦέʔγϣ ϯΛಈ͔ͯ͠ਐΊ͍ͯ͘ • ॳΊͯͷόΠτઌͰ͸ΤΫηϧγʔτͰ΍ͬͯͨ

Slide 13

Slide 13 text

e2eςετͱ͸ʁ • γεςϜͷ୺͔Β୺·ͰΛ໢ཏతʹ֬ೝ͢Δςετͷ͜ ͱ • ઐ༻ͷe2eπʔϧ΍ϔουϨεϒϥ΢βΛར༻͠ɺ୯Ұ ͷϓϩάϥϜͷI/O͚ͩͰͳ͘ɺ࣮ࡍͷΞϓϦέʔγϣ ϯΛಈ͔ͯ͠ਐΊ͍ͯ͘ • ॳΊͯͷόΠτઌͰ͸ΤΫηϧγʔτͰ΍ͬͯͨ

Slide 14

Slide 14 text

NightmareΛ࢖͏ͱԿ͕Ͱ͖Δʁ

Slide 15

Slide 15 text

NightmareΛ࢖͏ͱԿ͕Ͱ͖Δʁ

Slide 16

Slide 16 text

NightmareΛ࢖͏ͱԿ͕Ͱ͖Δʁ • ϒϥ΢βͰͰ͖Δૢ࡞શ͕ͯࣗಈԽͰ͖Δ • DOM͕ີ઀ʹؔΘΔ෦෼ͷςετ • ࣮ࡍͷૢ࡞ϑϩʔʹԠͨ͡ಈ࡞ςετ • ୯७ͳWebαΠτͰͷૢ࡞ͷࣗಈԽ

Slide 17

Slide 17 text

NightmareΛ࢖͏ͱԿ͕Ͱ͖Δʁ • ϒϥ΢βͰͰ͖Δૢ࡞શ͕ͯࣗಈԽͰ͖Δ • DOM͕ີ઀ʹؔΘΔ෦෼ͷςετ • ࣮ࡍͷૢ࡞ϑϩʔʹԠͨ͡ಈ࡞ςετ • ୯७ͳWebαΠτͰͷૢ࡞ͷࣗಈԽ

Slide 18

Slide 18 text

NightmareΛ࢖͏ͱԿ͕Ͱ͖Δʁ • ϒϥ΢βͰͰ͖Δૢ࡞શ͕ͯࣗಈԽͰ͖Δ • DOM͕ີ઀ʹؔΘΔ෦෼ͷςετ • ࣮ࡍͷૢ࡞ϑϩʔʹԠͨ͡ಈ࡞ςετ • ୯७ͳWebαΠτͰͷૢ࡞ͷࣗಈԽ

Slide 19

Slide 19 text

NightmareΛ࢖͏ͱԿ͕Ͱ͖Δʁ • ϒϥ΢βͰͰ͖Δૢ࡞શ͕ͯࣗಈԽͰ͖Δ • DOM͕ີ઀ʹؔΘΔ෦෼ͷςετ • ࣮ࡍͷૢ࡞ϑϩʔʹԠͨ͡ಈ࡞ςετ • WebαΠτͰͷ୯७ͳૢ࡞ͷࣗಈԽ

Slide 20

Slide 20 text

NightmareΛ࢖͏ͱԿ͕Ͱ͖Δʁ DOM͕ີ઀ʹؔΘΔ෦෼ͷςετ DOM JavaScript DOM Event Event

Slide 21

Slide 21 text

NightmareΛ࢖͏ͱԿ͕Ͱ͖Δʁ ࣮ࡍͷૢ࡞ϑϩʔʹԠͨ͡ಈ࡞ςετ Login Dashboard Post Event Event

Slide 22

Slide 22 text

࣮ࡍ΍ͬͯΈΔ

Slide 23

Slide 23 text

WordPressϓϥάΠϯ։ൃ࣌ʹ ໾ཱͭͱ͜Ζ

Slide 24

Slide 24 text

WordPressϓϥάΠϯ։ൃ࣌ʹ໾ཱͭͱ͜Ζ • Θ͔Γ΍͍͢ಈ࡞͕ଟ͍ͷͰɺػցతʹνΣοΫ͠΍ ͯ࣌͘͢୹ʹ͸ͳ͔ͳ͔ྑ͍ • ͨͩɺPHP͕ϝΠϯͳ͚ͩ͋ͬͯɺJavaScriptΛத৺ͱ ͨ͠΋ͷΑΓ͸Ըܙ͕ബ͍ • εΫϦʔϯγϣοτͳΜ͔΋औΕΔͷͰɺެࣜʹ্͛Δ ͱ͖ʹ͸ͦͷ͋ͨΓ΋ศརʹར༻Ͱ͖Δ͔΋

Slide 25

Slide 25 text

WordPressϓϥάΠϯ։ൃ࣌ʹ໾ཱͭͱ͜Ζ • Θ͔Γ΍͍͢ಈ࡞͕ଟ͍ͷͰɺػցతʹνΣοΫ͠΍ ͯ࣌͘͢୹ʹ͸ͳ͔ͳ͔ྑ͍ • ͨͩɺPHP͕ϝΠϯͳ͚ͩ͋ͬͯɺJavaScriptΛத৺ͱ ͨ͠΋ͷΑΓ͸Ըܙ͕ബ͍ • εΫϦʔϯγϣοτͳΜ͔΋औΕΔͷͰɺެࣜʹ্͛Δ ͱ͖ʹ͸ͦͷ͋ͨΓ΋ศརʹར༻Ͱ͖Δ͔΋

Slide 26

Slide 26 text

WordPressϓϥάΠϯ։ൃ࣌ʹ໾ཱͭͱ͜Ζ • Θ͔Γ΍͍͢ಈ࡞͕ଟ͍ͷͰɺػցతʹνΣοΫ͠΍ ͯ࣌͘͢୹ʹ͸ͳ͔ͳ͔ྑ͍ • ͨͩɺPHP͕ϝΠϯͳ͚ͩ͋ͬͯɺJavaScriptΛத৺ͱ ͨ͠΋ͷΑΓ͸Ըܙ͕ബ͍ • εΫϦʔϯγϣοτͳΜ͔΋औΕΔͷͰɺެࣜʹ্͛Δ ͱ͖ʹ͸ͦͷ͋ͨΓ΋ศརʹར༻Ͱ͖Δ͔΋

Slide 27

Slide 27 text

NightmareΛ࢖ͬͯΈͨॴײ(JSͷਓ޲͚)

Slide 28

Slide 28 text

NightmareΛ࢖ͬͯΈͨॴײ • Node੡͔ͭಈ࡞ϒϥ΢β͕ChromiumϕʔεͳͷͰɺ ϞμϯJavaScriptΛଘ෼ʹ࢖ͬͯॻ͘͜ͱ͕ग़དྷΔͷ͸ ޷ҹ৅ • ͨͩɺੜͰಈ͔͢ʹ΋mochaͳͲͷςεςΟϯάϑ ϨʔϜϫʔΫΛ࢖͏৔߹Ͱ΋ɺgeneratorͳͲͷ஌͕ࣝ ඞཁʹͳΔͷͰ୭Ͱ΋ѻ͍΍͍͔͢ͱ͍͑͹ඍົ

Slide 29

Slide 29 text

NightmareΛ࢖ͬͯΈͨॴײ • Node੡͔ͭಈ࡞ϒϥ΢β͕ChromiumϕʔεͳͷͰɺ ϞμϯJavaScriptΛଘ෼ʹ࢖ͬͯॻ͘͜ͱ͕ग़དྷΔͷ͸ ޷ҹ৅ • ͨͩɺੜͰಈ͔͢ʹ΋mochaͳͲͷςεςΟϯάϑ ϨʔϜϫʔΫΛ࢖͏৔߹Ͱ΋ɺgeneratorͳͲͷ஌͕ࣝ ඞཁʹͳΔͷͰ୭Ͱ΋ѻ͍΍͍͔͢ͱ͍͑͹ඍົ

Slide 30

Slide 30 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠