Upgrade to Pro — share decks privately, control downloads, hide ads and more …

window.windowとは何か / What is window window

window.windowとは何か / What is window window

Edward Fox

June 19, 2018
Tweet

More Decks by Edward Fox

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. ͜Ε͸Ұମ…ʁ

    View full-size slide

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

    View full-size slide

  8. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. 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

    View full-size slide

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

    View full-size slide

  25. We are hiring!

    View full-size slide

  26. ग़లʗҾ༻ʗࢀߟ
    ɾ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

    View full-size slide