Tweet
Tweet

Slide 1

Slide 1 text

window.window ͱ͸Կ͔ Edward Fox 2018/06/19 @We Are JavaScripters! #21

Slide 2

Slide 2 text

@edwardkenfox Edward Fox ɾWEBΤϯδχΞ @ Reproגࣜձࣾ ɾWEBʗϒϥ΢βٕज़શൠɺPWA ɾΫϥϑτϏʔϧɺԻָɺόεέ

Slide 3

Slide 3 text

ϑϩϯτΤϯυͷJSΛ ॻ͍ͨ͜ͱ͋Ε͹ window͸Α͘৮Γ·͢ΑͶ

Slide 4

Slide 4 text

window.window Λ஌͍ͬͯ·͔͢ʁ

Slide 5

Slide 5 text

i window === window.window // => true

Slide 6

Slide 6 text

͜Ε͸Ұମ…ʁ

Slide 7

Slide 7 text

࣮͸HTMLن֨ʹΑͬͯ ͪΌΜͱඪ४Խ͞Εͨ WindowͷϓϩύςΟ

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

MDNΑΓҾ༻ > The window property of a window object points to the window object itself. https://developer.mozilla.org/en-US/docs/Web/API/Window/window

Slide 10

Slide 10 text

window.window ͸Կ͕خ͍͠ͷ͔ʁ

Slide 11

Slide 11 text

ಉ͡MDNͷهࣄʹ ΑΔͱ࣍ͷΑ͏ͳཧ༝

Slide 12

Slide 12 text

window.window͕͋Δͱ… ɾάϩʔόϧΦϒδΣΫτ΁ͷࢀরΛ͠΍͘͢͢Δ ɾopen(URL)͡Όͳͯ͘window.open(URL)ͱॻ͚Δ ɾϥΠϒϥϦΛॻ͘ࡍʹOOPϥΠΫʹॻ͚Δ

Slide 13

Slide 13 text

ͱ͋Δ΋ͷͷɺ > was likely to … > Yet another reason to use this property… ͱ͍͏จମͰઆ໌͕ϑΝδʔ

Slide 14

Slide 14 text

͋·Γೲಘײͳ͍ͷͰ ΋ͬͱௐ΂࣮ͭͭ૷ݟͯΈͨΒ ৭ʑͱֶͼ͕͋ͬͨ

Slide 15

Slide 15 text

window΋window.window΋ ࣮͸ Window ΦϒδΣΫτͰ͸ͳ͘ɺ WindowProxy ΦϒδΣΫτͩͬͨ

Slide 16

Slide 16 text

WindowProxy ݱࡏͷʢΞΫςΟϒͳʣWindow΁ͷ ϓϩΩγͱͯ͠ಈ࡞͢Δɻϒϥ΢β͕ ಺෦తʹ࣋ͭWindowͦͷ΋ͷͰ͸ͳ͘ɺ Windowͷϥούʔɻ

Slide 17

Slide 17 text

https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Inner_and_outer_windows

Slide 18

Slide 18 text

͋ΒͨΊͯ WindowProxy͕͋Δͱ Կ͕خ͍͠ͷ͔ʁ

Slide 19

Slide 19 text

WindowProxy͕͋Δͱخ͍͠ਓͨͪ ɾඇදࣔͱͳͬͨφϏήʔγϣϯલͷWindowʹ ΞΫηε͠ଓ͚Δ͜ͱ͕ͳ͘ͳΔʢ΢Σϒ։ൃऀʣ ɾφϏήʔγϣϯલͷϖʔδ΍ϦιʔεΛഁغͰ͖Δ Α͏ʹͳΔʢϢʔβʔʣ ɾφϏήʔγϣϯલͷ΢Οϯυ΢ʹΞΫηεͨ͠৔߹ ͷ࢓༷Λߟ͑ͳͯ͘ࡁΉΑ͏ʹͳΔʢϒϥ΢β։ൃऀʣ https://qiita.com/yuki3/items/4ee2d6fff0865f806ded

Slide 20

Slide 20 text

https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Inner_and_outer_windows

Slide 21

Slide 21 text

͜ΕҎ֎ʹ΋ɺ ΫϩεΦϦδϯͳDOMΞΫηε ͳͲɺηΩϡϦςΟʹؔ࿈͢Δ ϒϥ΢βͷػೳͳͲΛ࣮ݱͷͨΊʹ WindowProxy͕׆༂ͯͨ͠Γ͢Δ

Slide 22

Slide 22 text

͞Βʹݟ͍ͯ͘ͱ Out-of-Process iframes ʢOOPIFsʣͱ͍͏ɺ ChromiumͷϓϩηεϞσϧ΍ΞʔΩς Ϋνϟʹ΋ਂؔ͘࿈͍ͯ͠Δ͜ͱ͕ Θ͔ͬͨ

Slide 23

Slide 23 text

i https://www.chromium.org/developers/design-documents/oop-iframes

Slide 24

Slide 24 text

Chromiumͷιʔεతʹ͸͜ͷ΁Μʁ ɾhttps://cs.chromium.org/chromium/src/third_party/blink/ renderer/bindings/core/v8/window_proxy.cc? dr=C&pv=1&g=0&l=108-151 ɾhttps://cs.chromium.org/chromium/src/third_party/blink/ renderer/core/frame/dom_window.h?gsn=%22third_party/ blink/renderer/core/frame/dom_window.h%22&g=0&l=120

Slide 25

Slide 25 text

·ͱΊ ɾwindow΋window.window΋ WindowͰ͸ͳ͘WindowProxyͩͬͨ ɾWindowProxy͸ϞμϯͳWEBΛࢧ͑Δ ϒϥ΢βΞʔΩςΫνϟͷҰ୴Λ୲ͬͯ ͍ͨ

Slide 26

Slide 26 text

We are hiring!

Slide 27

Slide 27 text

i

Slide 28

Slide 28 text

ग़లʗҾ༻ʗࢀߟ ɾhttps://developer.mozilla.org/en-US/docs/Web/API/Window/window ɾhttps://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/ Inner_and_outer_windows ɾhttps://blog.whatwg.org/windowproxy-window-and-location ɾhttps://qiita.com/yuki3/items/4ee2d6fff0865f806ded ɾhttps://www.chromium.org/developers/design-documents/oop- iframes

Slide 29

Slide 29 text

Fin