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

ブラウザ / Browser

Recruit
PRO
September 09, 2022

ブラウザ / Browser

2022年度リクルート エンジニアコース新人研修の講義資料です

Recruit
PRO

September 09, 2022
Tweet

More Decks by Recruit

Other Decks in Technology

Transcript

  1. Browser
    2022/04/06 @ Recruit

    View Slide

  2. Twitter: @yosuke_furukawa
    Github: yosuke-furukawa

    View Slide

  3. Browser
    • ஌ͬͯΔΑ͏Ͱ஌Βͳ͍
    • ΢ΣϒΞϓϦέʔγϣϯΛ࡞Δ࣌ʹඞͣ࢖͏
    ΋ͷͷɺத਎͕Ͳ͏ͳͬͯΔ͔Λઆ໌ͯ͘͠
    ͍ͩ͞ͱݴΘΕΔͱͲ͏ͨ͠Β͍͍͔Θ͔Β
    ͳ͍΋ͷ
    • ࠓճ͸ͦΜͳϒϥ΢βʹ৮ΕΑ͏ͱࢥ͍·͢

    View Slide

  4. Browse + er
    ோΊΔ΋ͷ

    View Slide

  5. ຊߨٛͷͶΒ͍
    • օ͞Μʹϒϥ΢βͷத਎Λೝࣝͯ͠΋Β͍ɺ಄ͷதʹ
    ϚοϓΛ࡞ͬͯ΋Β͏ɻ
    • ϒϥ΢βͷ஍ਤΛ࡞্ͬͨͰ͜ͷ͋ͱͷߨٛʢύ
    ϑΥʔϚϯεɺηΩϡϦςΟɺJavaScript/
    TypeScriptʣΛड͚ͯ΋Β͏͜ͱͰཧղ౓ΛਂΊΔɻ
    • HTTP/HTMLͳͲͷجૅతͳ෦෼͸ޙ൒ϋϯζΦϯͰ
    ;ΕΔɻ

    View Slide

  6. લ൒ Agenda
    • ϒϥ΢βͷػೳ
    • ϒϥ΢βͷ࢓૊Έ
    • ϨϯμϦϯάΤϯδϯ
    • JavaScript Τϯδϯ
    • ωοτϫʔΫ
    • σʔλετϨʔδ

    View Slide

  7. ϒϥ΢βͷػೳ

    View Slide

  8. ϒϥ΢βͷػೳ
    🔒IUUQTFYBNQMFDPN

    View Slide

  9. ϒϥ΢βͷػೳ
    🔒IUUQTFYBNQMFDPN
    ໭Δ ਐΉ
    Ϧϩʔυɾதࢭ
    ΞυϨεόʔ

    View Slide

  10. ϒϥ΢βͷػೳ
    • ΞυϨεόʔʹ͍Εͨ URL Λجʹϖʔδ͕ϨϯμϦϯά͞ΕΔ
    • ϦϯΫΛΫϦοΫ͢ΔͳͲͷΞΫγϣϯ͕͋Δͱ URL ͕มԽ
    ͠ɺཤྺʹͨ·Δ
    • ໭ΔϘλϯΛԡ͢ͱཤྺΛ໭ΕΔ
    • ਐΉϘλϯΛԡ͢ͱཤྺΛਐΊΒΕΔ
    • ϦϩʔυϘλϯΛԡ͢ͱ࠶౓ URL Λߋ৽͢Δ
    *NBHF

    View Slide

  11. ϒϥ΢βͷػೳ
    • ϒϥ΢βͷجຊػೳΛյ͢Α͏ͳΞϓϦέʔγϣϯ͸ମݧ͕ѱ
    ͍ɻ
    • ໭ͬͨ࣌ʹ΋ͱ΋ͱ͍ͨεΫϩʔϧҐஔ͡Όͳ͍৔ॴʹ໭͞Ε
    ͨΒɾɾɾɾʁ
    • εΫϩʔϧ͢ΔࡍʹΨλΨλͯ͠εϜʔεͳૢ࡞͕ग़དྷͳ͔ͬ
    ͨΒɾɾʁ
    • Enter ΩʔͰૹ৴Ͱ͖ͳ͍ϑΥʔϜΛ࡞ͬͯ͠·ͬͨ
    Βɾɾɾʁ

    View Slide

  12. ϒϥ΢βͷػೳ
    • ϒϥ΢βͷجຊػೳΛյ͢Α͏ͳΞϓϦέʔγϣϯ͸ମݧ͕ѱ
    ͍ɻ
    • ໭ͬͨ࣌ʹ΋ͱ΋ͱ͍ͨεΫϩʔϧҐஔ͡Όͳ͍৔ॴʹ໭͞Ε
    ͨΒɾɾɾɾʁ
    • εΫϩʔϧ͢ΔࡍʹΨλΨλͯ͠εϜʔεͳૢ࡞͕ग़དྷͳ͔ͬ
    ͨΒɾɾʁ
    • Enter ΩʔͰૹ৴Ͱ͖ͳ͍ϑΥʔϜΛ࡞ͬͯ͠·ͬͨ
    Βɾɾɾʁ
    શ෦ѱ͍ϢʔβʔΤΫεϖϦΤϯε

    View Slide

  13. ϒϥ΢βͷػೳ
    • େݪଇ: ΢ΣϒΞϓϦέʔγϣϯ͸ϒϥ΢βͷػೳΛ
    յͯ͠͸͍͚ͳ͍ɻ
    • յ͢ͱମݧ͕ѱ͍͚ͩ͡Όͳ͍ɻ
    • ΞΫηγϏϦςΟ΋ѱ͘ͳΔɻ
    • ηΩϡϦςΟͱ͔ͷอޢػߏ΋ಇ͔ͳ͘ͳΔ͔΋ɻ

    View Slide

  14. ϒϥ΢βͷػೳ
    • େݪଇ: ΢ΣϒΞϓϦέʔγϣϯ͸ϒϥ΢βͷػೳΛ
    յͯ͠͸͍͚ͳ͍ɻ
    • յ͢ͱମݧ͕ѱ͍͚ͩ͡Όͳ͍ɻ
    • ΞΫηγϏϦςΟ΋ѱ͘ͳΔɻ
    • ηΩϡϦςΟͱ͔ͷอޢػߏ΋ಇ͔ͳ͘ͳΔ͔΋ɻ
    ͲΜͳʹྑ͍ΞϓϦͰ͋ͬͯ΋
    ϒϥ΢βͷػೳΛյ͢Α͏ͳΞϓϦ͸࢖ΘΕͳ͘ͳΔ

    View Slide

  15. ϒϥ΢βͷ࢓૊Έ

    View Slide

  16. ϒϥ΢βͷߏ଄
    6TFS*OUFSGBDF
    #SPXTFS&OHJOF
    3FOEFSJOH
    &OHJOF
    /FUXPSL
    +BWB4DSJQU
    &OHJOF
    %BUB
    4UPSBHF

    View Slide

  17. ϒϥ΢βͷߏ଄
    6TFS*OUFSGBDF
    #SPXTFS&OHJOF
    3FOEFSJOH
    &OHJOF
    /FUXPSL
    +BWB4DSJQU
    &OHJOF
    %BUB
    4UPSBHF
    ϒϥ΢βͷΠϯλϑΣʔε
    ΞυϨεόʔͱ͔໭ΔϘλϯͱ͔

    View Slide

  18. ϒϥ΢βͷߏ଄
    6TFS*OUFSGBDF
    #SPXTFS&OHJOF
    3FOEFSJOH
    &OHJOF
    /FUXPSL
    +BWB4DSJQU
    &OHJOF
    %BUB
    4UPSBHF
    ϒϥ΢βͷ֩
    ޙͰ঺հ͢Δ༷ʑͳߏ੒ཁૉͱௐఀ͢Δ

    View Slide

  19. ϒϥ΢βͷߏ଄
    6TFS*OUFSGBDF
    #SPXTFS&OHJOF
    3FOEFSJOH
    &OHJOF
    /FUXPSL
    +BWB4DSJQU
    &OHJOF
    %BUB
    4UPSBHF
    ίϯςϯπͷඳըΛߦ͏ɻίϯςϯπ͕
    )5.-ͳΒϖʔδΛύʔεͯ͠ϩʔυ͢Δ

    View Slide

  20. ϒϥ΢βͷߏ଄
    • ϨϯμϦϯάΤϯδϯ
    • HTML΍CSS͸ͦͷ··Ͱ͸ਓ͕ؒಡΊΔ΋ͷ
    ʹͳΒͳ͍ɻ
    • σʔλΛܭࢉ͠ɺਓ͕ؒݟ͑Δܗʹදݱ͢Δ
    ͜ͱΛϨϯμϦϯάͱݺͿ

    View Slide

  21. ϒϥ΢βͷߏ଄
    6TFS*OUFSGBDF
    #SPXTFS&OHJOF
    3FOEFSJOH
    &OHJOF
    /FUXPSL
    +BWB4DSJQU
    &OHJOF
    %BUB
    4UPSBHF
    ωοτϫʔΫ૚ɺ)551ϦΫΤετͨ͠
    Γɺ)5514ͰϦΫΤετͨ͠Γ

    View Slide

  22. ϒϥ΢βͷߏ଄
    • ωοτϫʔΫ
    • HTML ΍ CSS ΍ JavaScript ͱ͍ͬͨίϯςϯπΛμ΢ϯϩʔυͨ͠ΓɺΞο
    ϓϩʔυ͢Δ࢓૊Έ
    • ϒϥ΢βͷσʔλަ׵ͷ࢓૊Έ͸ʮσʔλͷཁٻʢϦΫΤετʣʯͱʮཁٻ
    ʹରͯ͠ͷԠ౴ʢϨεϙϯεʣʯͱ͍͏̎ͭͷγϯϓϧͳ΍ΓऔΓʹΑͬͯ
    ߦΘΕ͍ͯΔ

    View Slide

  23. ϒϥ΢βͷߏ଄
    6TFS*OUFSGBDF
    #SPXTFS&OHJOF
    3FOEFSJOH
    &OHJOF
    /FUXPSL
    +BWB4DSJQU
    &OHJOF
    %BUB
    4UPSBHF
    +BWB4DSJQU࣮ߦΤϯδϯWͱ͔
    4QJEFS.POLFZͱ͔+4$ͱ͔

    View Slide

  24. ϒϥ΢βͷߏ଄
    • JavaScript Τϯδϯ
    • JavaScript ͸ίϯςϯπΛಈతʹมߋ͢Δͱ͍ͬͨඇৗʹॏཁͳॲཧΛߦ
    ͏෦෼
    • ʮJust In Time ίϯύΠϥʯͱݺ͹ΕΔಈతʹίʔυΛղੳ͢ΔࣄͰੑೳ
    Λิ͍ͬͯΔ

    View Slide

  25. ϒϥ΢βͷߏ଄
    6TFS*OUFSGBDF
    #SPXTFS&OHJOF
    3FOEFSJOH
    &OHJOF
    /FUXPSL
    +BWB4DSJQU
    &OHJOF
    %BUB
    4UPSBHF
    σΟεΫʹอଘ͢ΔϨΠϠ
    $PPLJFͱ͔MPDBMTUPSBHFͱ͔͕֘౰

    View Slide

  26. ϒϥ΢βͷߏ଄
    • σʔλετϨʔδ
    • σʔλΛӬଓతʹอଘ͢Δ෦෼
    • ࣮͸ history ΋ cookie ΋ localstorage ΋શ෦
    σʔλετϨʔδ෦෼ʹอଘ͞Ε͍ͯΔ

    View Slide

  27. ϒϥ΢βͷߏ଄
    • ͜ͷϚοϓΛུ֓ͱͯ͠಄ʹೖΕ͓͍ͯͯ΄͍͠ɻ
    • HTML/CSSΛ࣮ߦͯ͠Δ৔ॴ͕Ͳ͔͜
    • JavaScript ͸Engine͕෼͔ΕͯΔͱ͔
    • ωοτϫʔΫ෦෼ͰσʔλΛ͖͍࣋ͬͯͯΔͱ͔
    • Cookie ͷσʔλΛอଘͯ͠Δͷ͸σʔλετϨʔδͱ͔

    View Slide

  28. ϒϥ΢βͷྺ࢙

    View Slide

  29. ϒϥ΢βͷྺ࢙
    • ͍͖ͳΓ͜͏͍͏ߏ੒ཁૉʹͳͬͨΘ͚Ͱ͸
    ͳ͍ɻ
    • ͜ͷߏ੒ཁૉʹͳΔ·Ͱʹḷͬͨྺ࢙ΛৼΓ
    ฦΔ͜ͱͰҰ୴ཧղΛਂΊΔ
    • ͱ͸͍͑ͨͩͷྺ࢙ͳͷͰɺ໾ʹཱͭ஌ࣝͱ
    ͍͏ΑΓ͸ʮ΁ʔʯͬͯฉ͍ͯͯ͘Εͯྑ͍

    View Slide

  30. ࠷ॳظͷϒϥ΢β
    • WorldWideWebϒϥ΢β
    • Ұ൪࠷ॳͷϒϨΠΫεϧʔ͸ϋΠύʔςΩετͱΠϯ
    λʔωοτΛ૊Έ߹Θͤͨ͜ͱʹΑͬͯੜ·ΕΔɻ
    • ૊Έ߹Θͤͨਓ͸༗໊ͳςΟϜɾόʔφʔζɾϦʔ

    View Slide

  31. ࠷ॳظͷϒϥ΢β
    • WorldWideWeb
    • URLදࣔ΋ͳ͍ɺ໭ΔɾਐΉͱ͔ͷϘλϯ΋
    ͳ͍

    View Slide

  32. ࠷ॳظͷϒϥ΢β
    • WorldWideWeb
    6TFS*OUFSGBDF
    #SPXTFS&OHJOF
    3FOEFSJOH
    &OHJOF
    /FUXPSL
    %BUB
    4UPSBHF
    )5.- )551
    )JTUPSZ

    View Slide

  33. 1990೥୅: ϒϥ΢βઓ૪
    • ͦͷதͰҰ൪ਓؾʹͳͬͨͷ͕ʮMosaicʯͱ͍͏ϒϥ΢β
    • ςΩετͱҰॹʹΠϯϥΠϯͰը૾Λදࣔ͢Δͱ͍͏ϒϨ
    ΠΫεϧʔΛىͨ͜͠ɻ

    View Slide

  34. 1990೥୅: ϒϥ΢βઓ૪
    • จॻͷ಺༰ͱ૷০Λ෼͚ͯఆٛͰ͖ΔΑ͏ʹ͠Α͏ͱ͍͏
    ํ਑ʹͳ͍ͬͯ͘ɻ
    • ࠷ॳظͷϒϥ΢β͸಺༰ͱ૷০͸ผΕͯͳ͔ͬͨɻ
    • CSS ͕஀ੜ͠ɺ࢓༷͕ਐΜͰ͍͘Α͏ʹͳΔɻ
    • ͜ͷࠒ͔Β HTML / CSS ͷଘࡏ͕Ͱ͖Δɻ

    View Slide

  35. 1990೥୅: ϒϥ΢βઓ૪
    • ϏοάΧϯύχʔ΋໧͍ͬͯͳ͍ɻ
    • IBM͕ WebExplorer Λ։ൃ͠ɺͦͷޙ Microsoft ͕
    Internet Explorer Λ։ൃ͢Δɻ
    • Mosaic ͸ NetScape ձࣾΛ্ཱͪ͛ɺ Navigator ͱ͍͏໊
    લͰ։ൃ͢Δɻ
    • ୈҰ࣍ϒϥ΢βઓ૪͕ຄൃ͢Δɻ

    View Slide

  36. 1990೥୅: ϒϥ΢βઓ૪
    • JavaScript ΋͜ͷࠒ͔Β։ൃ͞Εͩ͢ʢ1995೥ʣ
    • HTTP Cookie ͳͲͷ࢓૊Έ΋։ൃ͞ΕΔ
    • HTTPS ͳͲͷ҉߸Խͷ࢓૊Έ΋͜ͷࠒ͔Β

    View Slide

  37. 1990೥୅: ϒϥ΢βઓ૪
    • 1990೥୅ޙ൒ʹ͸େମͷύʔπ͕ἧͬͯ͘Δ

    View Slide

  38. 1990೥୅: ϒϥ΢βઓ૪
    • ػೳͷ֦ॆ͕ਐΜͰ͍͘ҰํͰϒϥ΢βઓ૪͸൵ܶ΋΋ͨΒͨ͠ɻ
    • աܹͳࠩผԽͱػೳ֦ॆ͕ਐΉதͰಠ֦ࣗுʹ͸͠Δ͜ͱ΋૿͑ͯ
    ͍͘
    • JScript ͱݺ͹ΕΔ΄ͱΜͲ JavaScript ͱಉ͡Α͏ͳػೳΛ࣋ͬͨ
    εΫϦϓτݴޠ͕ Internet Explorer ʹ࣮૷͞ΕΔ
    • JavaScript Ͱ Style ΛܾΊΒΕΔ JavaScript Style Sheet ΋ఏҊ͞
    ΕΔ͕ɺ࢓༷ܾΊ͖Εͳ͍͏ͪʹऴΘΔͳͲɻ

    View Slide

  39. 1990೥୅: ϒϥ΢βઓ૪
    • ࠷ऴతʹୈҰ࣍ϒϥ΢βઓ૪͸ϚΠΫϩιϑτ͕উར͢Δ
    • OSʹϒϥ΢β͕ಉࠝ͞ΕΔࣄͰ NetScape ͷϒϥ΢βΑΓ
    ΋Ϣʔβʔ਺Λ৳͹͠ɺՉ઎ঢ়ଶ͕࡞ΒΕͯ͠·͏ɻ
    • NetScape ଆ͸Ϣʔβʔ਺ͷ֫ಘʹ͸ࣦഊͨ͠΋ͷͷɺ
    OSS Խͯ͠ϒϥ΢βͷٕज़Λޙੈʹ࢒͠ɺ Mozilla ͱ͍͏
    اۀʹܗΛม͑ͯଘଓ͢Δ

    View Slide

  40. 2000೥୅: Google Chrome ͷ
    ొ৔ɺεϚʔτϑΥϯͷొ৔
    • Mozilla ͕ຬΛ࣋ͯ͠ FireFox Λ։ൃͯ͠ɺϦϦʔε͢Δɻ
    • ࠓ·Ͱ Internet Explorer Ұڧঢ়ଶ͕ͩͬͨɺ࢓༷ʹ஧࣮Ͱ͋Γɺߴ଎ʹಈ͖ɺ
    λϒػೳ΍֦ுػೳΛඋ͑ͨ FireFox ͕Ϣʔβʔ਺Λൈ͘
    • 2000೥୅ޙ൒ʹͳΔͱϓϨΠϠʔ͕มΘΔɻ
    • ·ͣ Google ͕ JavaScript ͱಈతͳ HTTP ϦΫΤετʢ͍ΘΏΔ Ajaxʣ Λ૊Έ
    ߹ΘͤΔࣄͰ͜Ε·ͰͷHTMLɺ CSSɺ JavaScript ͱ͍͏ٕज़͚ͩͰΠϯλϥΫ
    ςΟϒͳΞϓϦέʔγϣϯΛ΢Σϒ্Ͱ࡞ΕΔ͜ͱΛ࣮ફ͢Δɻ
    • ࣍ʹ Google ͕ Chrome ΛϦϦʔε͢Δɻ

    View Slide

  41. 2000೥୅: Google Chrome ͷ
    ొ৔ɺεϚʔτϑΥϯͷొ৔
    • 2000೥୅ͷલ൒͔Βޙ൒ʹ͔͚ͯى͖ͨͷ͸ɺ΢Σϒ্ͰΠϯλϥ
    ΫςΟϒͳΞϓϦέʔγϣϯΛ࡞Δͱ͍͏ٕज़తͳύϥμΠϜγϑτ
    • ϒϥ΢β্Ͱ JavaScript Λத৺ʹΞϓϦέʔγϣϯΛ࡞Δػձ͕૿͑
    ͨɻ
    • ݁Ռͱͯ͠ɺΞϓϦέʔγϣϯͷ࣮ߦ଎౓ʹ௚݁͢Δ JavaScript ͷ࣮
    ߦ؀ڥʹ΋ݟ௚͕͠ೖΔɻ
    • ֤ϒϥ΢βͷJavaScript Engineʹ Just-in-time (JIT) Compiler ͱݺ͹
    ΕΔ࣮ߦதʹ࠷దԽ͢Δػೳ͕ಋೖ͞Ε͍ͯ͘

    View Slide

  42. 2000೥୅: Google Chrome ͷ
    ొ৔ɺεϚʔτϑΥϯͷొ৔
    • ϒϥ΢β͕୯ͳΔ΢ΣϒϖʔδͷӾཡ͚ͩͰ͸ͳ
    ͘ɺΞϓϦέʔγϣϯج൫ͱͯ͠ͷํ޲ʹਐΉɻ
    +*5

    View Slide

  43. 2010೥୅: HTML5ϒʔϜͱε
    ϚʔτϑΥϯωΠςΟϒΞϓϦ
    • 2010೥͔Β͸ΞϓϦέʔγϣϯΛ΢ΣϒͰΑΓޮ
    ཰తʹɺ৽͘͠࡞Ζ͏ͱ͢ΔϒʔϜ͕౸དྷͨ͠ɻ
    • ϒϥ΢βʹ΋εϚʔτϑΥϯͰݟΕΔΞϓϦέʔ
    γϣϯΛ࡞ΔྲྀΕ͕౸དྷͨ͠ɻ
    • ͜ͷ͋ͨΓ͔ΒωΠςΟϒΞϓϦͱϒϥ΢β྆ํ
    Ͱಉ͡Α͏ͳػೳΛఏڙ͢ΔΑ͏ʹͳΔ

    View Slide

  44. 2010೥୅: HTML5ϒʔϜͱε
    ϚʔτϑΥϯωΠςΟϒΞϓϦ
    • ΞϓϦέʔγϣϯͷ࡞Γํ͕ωΠςΟϒΞϓϦͷ࡞Γํʹۙ͘ͳͬͯ
    ͍ͬͨɻ
    • ΫϥΠΞϯτ಺Ͱ LocalStroage ΍ Session Stroage ͱ͍ͬͨΫϥΠΞ
    ϯτͷετϨʔδΛ࢖͓͏ͱͨ͠ΓɺΦϑϥΠϯͰ΋ಈ࡞͢ΔΑ͏ʹ
    ϒϥ΢β͕ਐԽ͍ͯͬͨ͠ɻ
    • ͜ͷࠒʹ Network ʹ΋ਐԽ͕๚ΕΔɻϒϥ΢β͕ར༻͢Δίϯςϯπ
    ͕ΑΓϦονʹͳΓɺΞϓϦέʔγϣϯ΋Ͱ͖Δ͜ͱ͕૿͍͑ͯ͘ͱɺ
    ωοτϫʔΫͷར༻཰্͕͕͍ͬͯ͘
    • HTTP/2 ͱ͍ͬͨޮ཰తʹϦΫΤετ͢Δํ๏͕ग़ͯ͘Δɻ

    View Slide

  45. 2010೥୅: HTML5ϒʔϜͱε
    ϚʔτϑΥϯωΠςΟϒΞϓϦ
    • ΑΓޮ཰తʹ࣮ߦͰ͖ΔΑ͏ʹɺΞϓϦέʔγϣϯ
    ΑΓͷػೳ͕૿͍͑ͯ͘
    +*5
    )551
    MPDBMTUPSBHF

    View Slide

  46. ϒϥ΢βྺ࢙·ͱΊ
    • ͜ͷΑ͏ʹΞϓϦέʔγϣϯΛ࡞Δํ๏͕֬
    ཱ͞Ε͍ͯͬͨΓɺ৽͍ٕ͠ज़తͳస׵͕ى
    ͖Δͱͦͷ౎౓ϒϥ΢β͸ٕज़తͳਐԽΛ਱
    ͖͛ͯͨɻ
    • ࠓ೔ͷϞμϯͳϒϥ΢β͸͜ͷΑ͏ͳٕज़త
    ਐԽ͕೔ਐ݄าͰߦΘΕ͍ͯΔɻ

    View Slide

  47. ϒϥ΢βΛյͯ͠͸͍͚ͳ͍

    View Slide

  48. HistoryΛյͯ͠͸͍͚ͳ͍
    • ϒϥ΢βͷػೳʹ͸ʮ໭ΔʯͱʮਐΉʯͱ͍ͬͨӾཡཤྺΛલʹ
    ໭͠ɺਐΊΔػೳ͕͋Δɻ
    • Ӿཡཤྺ͸ཤྺͰ͋Γɺ໭ΔΛԡͨ͠ͱ͖ʹ͸جຊతʹલͷঢ়ଶ
    ʹ໭Δ͜ͱ͕๬·͍͠ɻ
    • ͔͠͠ͳ͕Βɺ͍͔ͭ͘ͷ΢ΣϒΞϓϦέʔγϣϯͰ͸ɺʮ໭
    ΔʯΛԡͨ࣌͠ʹ໭Εͳ͍ΞϓϦέʔγϣϯ͕ଘࡏ͢Δɻ
    • ΋͘͠͸໭Ζ͏ͱͨ࣌͠ʹҰ෦ͷঢ়ଶ͚ͩ໭͢͜ͱ͕Ͱ͖Δ͕ɺ
    ׬શʹલͷঢ়ଶΛ࠶ݱͰ͖ͳ͍ΞϓϦέʔγϣϯ΋ଘࡏ͢Δɻ

    View Slide

  49. HistoryΛյͯ͠͸͍͚ͳ͍
    • ௚લʹߦͬͨίϝϯτ͕ফ͑ͯΔྫ

    View Slide

  50. HistoryΛյͯ͠͸͍͚ͳ͍
    • ໭ΔϘλϯ͕ແޮʹͳ͍ͬͯΔྫ

    View Slide

  51. εΫϩʔϧΛյͯ͠͸͍͚ͳ͍
    • ը໘ΛεΫϩʔϧ͢Δ͜ͱʹΑͬͯΨλΨλͱ
    ࢥͬͨҐஔʹεΫϩʔϧͰ͖ͳ͍ࣄ͕͋Δɻ
    • ͜ͷεΫϩʔϧͷΨλπΩͷ͜ͱΛʮεΫϩʔ
    ϧδϟϯΫʯͱݺͿɻ

    View Slide

  52. εΫϩʔϧΛյͯ͠͸͍͚ͳ͍
    • εΫϩʔϧҐஔ͕໭Βͳ͍ྫ

    View Slide

  53. ϑΥʔϜΛյͯ͠͸͍͚ͳ͍
    • λϒͰભҠͰ͖ͳ͍
    • ΤϯλʔΩʔͰૹ৴Ͱ͖ͳ͍

    View Slide

  54. ϨϯμϦϯάΤϯδϯ

    View Slide

  55. ϨϯμϦϯάΤϯδϯ
    • ίϯςϯπʢHTMLͳͲ) Λड͚औͬͯ಺༰Λ
    ඳը͢Δ
    HTML ϖʔδ
    ϨϯμϦϯά

    View Slide

  56. ϨϯμϦϯάΤϯδϯ
    • ίϯςϯπʢHTMLͳͲ) Λड͚औͬͯ಺༰Λ
    ඳը͢Δ
    HTML ϖʔδ
    ϨϯμϦϯά
    ͜͜ʹࢸΔ·ͰʹυϥϚ͕ͨ͘͞Μ͋Δɻ

    View Slide

  57. ϨϯμϦϯάΤϯδϯ
    • ࢦఆ͞ΕͨίϯςϯπΛඳը͢Δ΋ͷ
    • ͜͜Ͱ͸ओʹ HTML Λඳը͢Δ࣌ͷྲྀΕͰղ
    આ͢Δ͕ɺຊདྷ͸ HTML ʹґΒͣɺίϯςϯ
    πΛඳը͢Δɻ
    (SBQIJD
    *OUFSGBDF
    3FOEFS

    View Slide

  58. ϨϯμϦϯάΤϯδϯ
    • ࢦఆ͞ΕͨίϯςϯπΛඳը͢Δ΋ͷ
    • ͜͜Ͱ͸ओʹ HTML Λඳը͢Δ࣌ͷྲྀΕͰղ
    આ͢Δ͕ɺຊདྷ͸ HTML ʹґΒͣɺίϯςϯ
    πΛඳը͢Δɻ
    (SBQIJD
    *OUFSGBDF
    3FOEFS
    ಛʹ͜͜ΛਂງΓ͢Δ

    View Slide

  59. ϨϯμϦϯάϓϩηε
    • HTML ͷϨϯμϦϯά͸ "ಈతʹ" ϨϯμϦϯ
    ά͢Δɻ
    • JavaScript ΍ϢʔβʔೖྗɺΞχϝʔγϣϯ
    ͳͲͰϨϯμϦϯά͕ߋ৽͞ΕΔɻ
    *OJUJBM3FOEFS ߋ৽ ߋ৽ ߋ৽ ߋ৽

    View Slide

  60. ϨϯμϦϯάϓϩηε
    • ίϯςϯπ͕ಈతʹߋ৽͞ΕΔͱ͍͏͜ͱ͕
    ΢Σϒͷಛ௃
    • ͦͷͨΊʹ͍͔ͭ͘ͷதؒදݱΛ͍࣋ͬͯΔ
    IUNM
    IUNM
    %0. 4UZMFE
    1BSTF 4UZMF -BZPVU
    1BJOU

    View Slide

  61. HTML Parse
    EJW
    QIFMMPQ
    QXPSMEQ
    EJW
    1BSTF
    %*7
    1
    5&95
    1
    5SFF
    %PDVNFOU
    )5.-
    #PEZ
    %JW
    1
    5&95
    1
    5&95
    • λάΛωετͯ͠දݱ
    • ໦ߏ଄ͱ͍͏ܗͰσʔλߏ଄ͱͯ͠
    දݱ͞ΕΔɻ

    View Slide

  62. DOM
    %PDVNFOU
    )5.-
    #PEZ
    %JW
    1
    5&95
    1
    5&95
    • Document Object Model
    • ϒϥ΢β಺ͰͷHTMLͷ಺෦දݱ
    • Ͱ͋Γɺ͔ͭ JavaScript Ͱૢ࡞Ͱ͖Δσʔλߏ଄
    var div = document.body.firstChild;
    var p2 = div.childNodes[1];
    p2.appendChild(document.createElement("span"));
    +BWB4DSJQU
    &OHJOF
    CJOEJOHT

    View Slide

  63. Style
    • DOM Λ࡞ͬͨΒͦΕʹ Style Λ
    ౰͍ͯͯ͘

    %PDVNFOU
    )5.-
    #PEZ
    %JW
    1
    5&95
    1
    5&95
    p { color: red }
    IFMMP
    XPSME
    4UZMF

    View Slide

  64. Style
    • ΍Δ͜ͱ͸େ͖͘෼͚ͯ̎ͭ
    • ηϨΫλϚονϯά
    • ΧεέʔσΟϯά

    View Slide

  65. Style
    • ηϨΫλ
    • ελΠϧΛ౰ͯΔࡍͷ௚઀తͳϧʔϧΛهड़
    ͯ͠಺༰ΛؚΊͨ΋ͷ
    p { color: red; } #test { border: red 2px solid; }
    .foo { background-color: skyblue; }

    View Slide

  66. Style
    • CSS (Cascading Style Sheets)
    • ηϨΫλΛෳࡶʹࢦఆͰ͖Δ
    ͪͳΈʹෳࡶͳࢦఆΛ͢Ε͹͢Δ΄Ͳෳࡶͳܭࢉ͕ඞཁͳͷͰ஗͍ɻ
    • ηϨΫλ͸ඃΔ͜ͱ͕͋Δ
    • ඃͬͨΒৄࡉ౓Ͱܾ·Δ
    EJWOPU GPP
    QOUIPGUZQF O
    \
    DPMPSSFE
    ^
    Q\
    DPMPSCMVF
    ^

    View Slide

  67. Style
    • ηϨΫλϚονϯά
    • ֤ཁૉͷCSSͷηϨΫλΛҰͭҰͭݟ͍ͯͬͯελΠϧΛ൓ө͢Δ
    • Πϝʔδͱͯ͠͸ΞϯέʔτೖྗϑΥʔϜʹ͍ۙ

    .BSHJO 'POU
    $PMPS 1BEEJOH

    ✔ 255,255,255,0
    top: 20px
    left:
    ✔family: serif
    bottom:
    style:
    size:
    top:
    left:
    bottom:

    View Slide

  68. Style
    • CSS ৄࡉ౓ (ڧ͍ॱͷྫ)
    • styleଐੑͰͷࢦఆ
    • ηϨΫλͷ ID ͷ਺
    • ηϨΫλͷଐੑͷ਺
    • ηϨΫλͷཁૉ໊ͷ਺
    \^BCDETQFDJpDJUZ
    MJ\^BCDETQFDJpDJUZ
    MJpSTUMJOF\^BCDETQFDJpDJUZ
    VMMJ\^BCDETQFDJpDJUZ
    VMPMMJ\^BCDETQFDJpDJUZ
    I\^BCDETQFDJpDJUZ
    VMPMMJSFE\^BCDETQFDJpDJUZ
    MJSFEMFWFM\^BCDETQFDJpDJUZ
    YZ\^BCDETQFDJpDJUZ
    TUZMFBCDETQFDJpDJUZ
    http://taligarsiel.com/Projects/howbrowserswork1.htm#Specifity

    View Slide

  69. Style
    • ΧεέʔσΟϯά
    • ΞϯέʔτೖྗϑΥʔϜͷதͰۭཝΛݟ͚ͭͯิ͏ॲཧ
    • ਌ͷཁૉ͕͍࣋ͬͯͨΒࢠʹద༻͍ͯ͘͠

    .BSHJO 'POU
    $PMPS 1BEEJOH

    ✔ 255,255,255,0
    top: 20px
    left:
    ✔family: serif
    bottom:
    style:
    size:
    top:
    left:
    bottom:
    ຒ·ͬͯͳ͍ͱ͜ΖΛνΣοΫ
    .BSHJO 'POU
    $PMPS 1BEEJOH

    ✔ 255,255,255,0
    top: 20px
    left: 20px
    ✔family: serif
    bottom: 30px
    style: normal
    size: 10
    top: 20px
    left: 20px
    bottom: 20px







    ਌͔Β΋Β͑Δͱ͜Ζ͸आΓͯ͘Δ

    View Slide

  70. Style
    EJWOPU GPP
    QOUIPGUZQF O
    \
    DPMPSSFE
    ^
    Q\
    DPMPSCMVF
    ^
    1BSTF3VMF 4UZMF3VMFT
    4UZMF3VMFT
    4UZMF3VMFT
    $44΋ύʔε͠ɺελΠϧͷϧʔϧηοτΛ࡞Δɻ

    View Slide

  71. Style
    %PDVNFOU
    )5.-
    #PEZ
    %JW
    1
    5&95
    1
    5&95
    4UZMF3VMFT
    4UZMF3VMFT
    4UZMF3VMFT
    %PDVNFOU
    )5.-
    #PEZ
    %JW
    1
    5&95
    1
    5&95
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT

    View Slide

  72. Style
    %PDVNFOU
    )5.-
    #PEZ
    %JW
    1
    5&95
    1
    5&95
    4UZMF3VMFT
    4UZMF3VMFT
    4UZMF3VMFT
    %PDVNFOU
    )5.-
    #PEZ
    %JW
    1
    5&95
    1
    5&95
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    ϧʔϧΛ%0.ʹద༻ͯ͠$PNQVUFE4UZMFΛ࡞Δ

    View Slide

  73. Style
    %PDVNFOU
    )5.-
    #PEZ
    %JW
    1
    5&95
    1
    5&95
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMF\
    GPOU8FJHIU
    NBSHJO-FGU
    PVUMJOF
    USBOTGPSN
    CBDLHSPVOE
    ^
    ϑΥϯτ΍എܠͳͲͷελΠϧ৘ใΛ%0.ʹ෇༩͢Δ

    View Slide

  74. Layout
    • ҰͭҰͭͷཁૉ͸ελΠϧΛ΋͍ͬͯͯ΋ɺͦ
    Ε͕Ͳ͜ʹ഑ஔ͞ΕΔ͔ɺͲΕ͘Β͍ͷαΠζ
    ͳͷ͔ɺͱ͍͏৔ॴͷ৘ใ͸͍࣋ͬͯͳ͍ɻ
    • HTMLͷߏ଄ͱ Style ͷ৘ใΛجʹ৔ॴͱαΠζ
    Λܭࢉ͢Δॲཧ͕ Layout
    • ਌͔Β࠶ؼతʹḷͬͯ Layout ॲཧΛߦ͏

    View Slide

  75. Layout
    • ਌͔ΒࢠͲ΋ʹ࠶ؼతʹܭࢉΛ
    ͍ͯ͘͠
    • ࢠͲ΋ͷߴ͞ɾ෯Λܭࢉͨ͠Β
    ਌͸ࢠͲ΋ͷྦྷੵ͞Εͨߴ͞ɾ
    ෯ͱࣗ෼ࣗ਎ͷߴ͞ɾ෯ʹϚʔ
    δϯΛՃ͑ͯߴ͞Λܭࢉ͢Δ
    %PDVNFOU
    )5.-
    #PEZ
    %JW
    1
    5&95
    1
    5&95
    ߴ͞ɾ෯Λܭࢉ

    View Slide

  76. Paint
    • ඳը͢ΔҐஔͱαΠζ͕ܾ·ͬͨޙɺͲͷॱ
    ൪Ͱඳը͢Δ͔ΛܾΊΔॲཧ
    • DOMͷॱংͰ͸ͳ͘ɺޙΖ͔ΒલʹͪΌΜͱ
    ඳը͠ͳ͍ͱࢥͬͨͱ͓ΓʹϨϯμϦϯά͞
    Εͳ͍ɻ
    CBDLHSPVOE qPBUJOH GPSFHSPVOE PVUMJOF

    View Slide

  77. Paint
    • DOMͷཁૉͷॱ൪Ͱ͸ͳ͘ɺ z-index ౳Λ
    ࢖ͬͯޙΖͷཁૉͱલͷཁૉΛೖΕସ͑Δ͜
    ͱ͕Ͱ͖Δɻ


    <br/>.yellow { z-index: 2; ... }<br/>.green { z-index: 1; ... }<br/>

    View Slide

  78. Composite & Render
    • Ͱ͖͕͋ͬͨ΋ͷΛඞཁͳ෦෼͚ͩඳը͢ΔΑ͏ʹ
    Ωϟϓνϟʔͯ͠άϥϑΟοΫϥΠϒϥϦʹ౉͢
    • Πϝʔδͱͯ͠͸શ෦ܭࢉ͠ऴΘͬͯϨΠΞ΢τ΋ऴ
    ΘͬͯલܠͱഎܠऴΘͬͨͷͰɺͦΕΛҰຕͷϓϦϯ
    τ͢ΔࣸਅʹऔΔΈ͍ͨͳΠϝʔδ

    (SBQIJD
    *OUFSGBDF

    View Slide

  79. ಈతͳߋ৽
    )5.-
    %0.
    4UZMF
    -BZPVU
    EPDVNFOUXSJUF

    EPDVNFOUHFU&MFNFOU#Z*E

    FMFNUFYU$POUFOU

    View Slide

  80. ಈతͳߋ৽
    )5.-
    %0.
    4UZMF
    -BZPVU
    EPDVNFOUXSJUF

    EPDVNFOUHFU&MFNFOU#Z*E

    FMFNUFYU$POUFOU
    EPDVNFOUXSJUFࣗ਎͸௚ײతͰศར͕ͩɺ࣮͸)5.-͔Βࠩ
    ͠ସ͑ͯ͠·͏ɺͦͷͨΊɺࠓ·Ͱͷ%0.4UZMF
    -BZPVUͷྲྀΕ͕΍Γ௚͠ʹͳΔɻ࢖͏΂͖Ͱ͸ͳ͍ɻ

    View Slide

  81. ϨϯμϦϯάΤϯδϯ·ͱΊ
    • HTML͸ಈతʹߋ৽͞ΕΔϞσϧ
    • ಈతʹߋ৽͢ΔͨΊʹதؒදݱͱͯ͠ DOM Λ༻ҙ͓ͯ͠Γɺ
    JavaScript Ͱߋ৽Ͱ͖Δ
    • DOMʹม׵ͨ͠ޙɺ Style Λܭࢉ͠ɺͦͷޙͲͷϙδγϣϯʹཁૉ
    Λஔ͔͘ͱ͍͏ Layout Λܭࢉ͢Δ
    • ࠷ޙʹ Paint Ͱલ໘ʹஔ͔͘എ໘ʹஔ͔͘ΛܾΊͯඳը͢Δ
    • document.write ͸࢖Θͳ͍

    View Slide

  82. JavaScript Τϯδϯ

    View Slide

  83. JavaScript Τϯδϯ
    • JavaScript Λ࣮ߦ͢ΔΤϯδϯ
    • ࠷ۙͷΤϯδϯ͸େମ Just In Time ίϯύΠϥ͕͍ͭ
    ͓ͯΓɺ୯ͳΔΠϯλϓϦλͰ͸ͳ͘ɺ౷ܭతʹঢ়گ
    Λݟͯߴ଎Խ͞ΕΔ
    • ͜͜Ͱ͸ུ֓Λղઆ͠ɺΤϯδϯͷؾ࣋ͪΛ஌Δɻ
    • ͪͳΈʹ৘ใ͕ଟ͍ v8 ͷΤϯδϯΛࢀߟʹ͍ͯ͠Δɻ

    View Slide

  84. JavaScript Τϯδϯ
    GVODUJPOTVN B C
    \
    SFUVSOBC
    ^
    TVN

    >
    >
    < QBSFO
    >
    >
    >
    UPLFOJ[F
    "45
    >
    >
    < QBSFO
    >
    >
    >
    1SPHSBN
    'VODUJPO%FDMBSBUJPO
    *EFOUJpFSTVN
    QBSBNT
    *EFOUJpFSC
    *EFOUJpFSB

    View Slide

  85. JavaScript Τϯδϯ
    GVODUJPOTVN B C
    \
    SFUVSOBC
    ^
    TVN

    >
    >
    < QBSFO
    >
    >
    >
    UPLFOJ[F
    "45
    >
    >
    < QBSFO
    >
    >
    >
    1SPHSBN
    'VODUJPO%FDMBSBUJPO
    *EFOUJpFSTVN
    QBSBNT
    *EFOUJpFSC
    *EFOUJpFSB
    +BWB4DSJQU΋͜Ε·Ͱͱಉ༷໦ߏ଄Ͱද͞ΕΔɻ
    "CTUSBDU4ZOUBY5SFFͱ͍͏ߏ଄ɻ

    View Slide

  86. ΠϯλʔϓϦλ
    1SPHSBN
    'VODUJPO%FDMBSBUJPO
    *EFOUJpFSTVN
    QBSBNT
    *EFOUJpFSC
    *EFOUJpFSB
    *OUFSQSFUFS
    &YDBBFDBF!$SFBUF6ONBQQFE"SHVNFOUT
    YDBBFDBG!G4UBSS
    4YDBBFDC!G-EB/BNFE1SPQFSUZS <> <>
    YDBBFDC!G4UBSS
    YDBBFDC!C-EB;FSP
    &YDBBFDC!G5FTU&RVBM4USJDUS <>
    YDBBFDCC!B+VNQ*G'BMTF<> YDBBFDE!

    4YDBBFDCE!-EB/BNFE1SPQFSUZUIJT <> <>
    YDBBFDD!G4UBSS
    YDBBFDD!C-EB;FSP
    YDBBFDD!G4UBSS
    &YDBBFDD!-EB/BNFE1SPQFSUZUIJT <> <>
    YDBBFDDB!G4UBSS
    &YDBBFDDD!BGGG$BMM1SPQFSUZS UIJT S S <>
    4YDBBFDE!BB3FUVSO
    4YDBBFDE!-EB/BNFE1SPQFSUZUIJT <> <>
    YDBBFDE!GC4UBSS
    4YDBBFDE!C-EB;FSP
    &YDBBFDEB!CC5FTU-FTT5IBO0S&RVBMB <>
    YDBBFDEE!B+VNQ*G'BMTF<> YDBBFDF!

    4YDBBFDEG!C-EB;FSP
    YDBBFDF!4UBSB
    YDBBFDF!C+VNQ<> YDBBFDG!

    4YDBBFDF!GC-EBSS
    &YDBBFDF!DD5FTU(SFBUFS5IBO0S&RVBMB <>
    YDBBFDF!B+VNQ*G'BMTF<> YDBBFDFF!

    "45͔ΒCZUFDPEFʹ্ͨ͠Ͱ࣮ߦ͢Δɻ
    3FTVMU

    View Slide

  87. Just In Time ίϯύΠϥ
    *OUFSQSFUFS +*5$PNQJMFS
    &YDBBFDBF!$SFBUF6ONBQQFE"SHVNFOUT
    YDBBFDBG!G4UBSS
    4YDBBFDC!G-EB/BNFE1SPQFSUZS <> <>
    YDBBFDC!G4UBSS
    YDBBFDC!C-EB;FSP
    &YDBBFDC!G5FTU&RVBM4USJDUS <>
    YDBBFDCC!B+VNQ*G'BMTF<> YDBBFDE
    !

    4YDBBFDCE!-EB/BNFE1SPQFSUZUIJT <>
    <>
    YDBBFDD!G4UBSS
    YDBBFDD!C-EB;FSP
    YDBBFDD!G4UBSS
    &YDBBFDD!-EB/BNFE1SPQFSUZUIJT <>
    <>
    YDBBFDDB!G4UBSS
    &YDBBFDDD!BGGG$BMM1SPQFSUZS UIJT S
    S <>
    4YDBBFDE!BB3FUVSO
    4YDBBFDE!-EB/BNFE1SPQFSUZUIJT <>
    <>
    YDBBFDE!GC4UBSS





    bytecode Optimized machine code
    Optimize
    Deoptimize

    View Slide

  88. Just In Time ίϯύΠϥ
    *OUFSQSFUFS +*5$PNQJMFS
    &YDBBFDBF!$SFBUF6ONBQQFE"SHVNFOUT
    YDBBFDBG!G4UBSS
    4YDBBFDC!G-EB/BNFE1SPQFSUZS <> <>
    YDBBFDC!G4UBSS
    YDBBFDC!C-EB;FSP
    &YDBBFDC!G5FTU&RVBM4USJDUS <>
    YDBBFDCC!B+VNQ*G'BMTF<> YDBBFDE
    !

    4YDBBFDCE!-EB/BNFE1SPQFSUZUIJT <>
    <>
    YDBBFDD!G4UBSS
    YDBBFDD!C-EB;FSP
    YDBBFDD!G4UBSS
    &YDBBFDD!-EB/BNFE1SPQFSUZUIJT <>
    <>
    YDBBFDDB!G4UBSS
    &YDBBFDDD!BGGG$BMM1SPQFSUZS UIJT S
    S <>
    4YDBBFDE!BB3FUVSO
    4YDBBFDE!-EB/BNFE1SPQFSUZUIJT <>
    <>
    YDBBFDE!GC4UBSS





    bytecode Optimized machine code
    Optimize
    Deoptimize
    *OUFSQSFUFSͷ࣮ߦ࣌৘ใΛجʹ+*5$PNQJMFSͰ࠷దԽ͢Δ

    View Slide

  89. Just In Time ίϯύΠϥ
    *OUFSQSFUFS +*5$PNQJMFS
    &YDBBFDBF!$SFBUF6ONBQQFE"SHVNFOUT
    YDBBFDBG!G4UBSS
    4YDBBFDC!G-EB/BNFE1SPQFSUZS <> <>
    YDBBFDC!G4UBSS
    YDBBFDC!C-EB;FSP
    &YDBBFDC!G5FTU&RVBM4USJDUS <>
    YDBBFDCC!B+VNQ*G'BMTF<> YDBBFDE
    !

    4YDBBFDCE!-EB/BNFE1SPQFSUZUIJT <>
    <>
    YDBBFDD!G4UBSS
    YDBBFDD!C-EB;FSP
    YDBBFDD!G4UBSS
    &YDBBFDD!-EB/BNFE1SPQFSUZUIJT <>
    <>
    YDBBFDDB!G4UBSS
    &YDBBFDDD!BGGG$BMM1SPQFSUZS UIJT S
    S <>
    4YDBBFDE!BB3FUVSO
    4YDBBFDE!-EB/BNFE1SPQFSUZUIJT <>
    <>
    YDBBFDE!GC4UBSS





    bytecode Optimized machine code
    Optimize
    Deoptimize
    ΋͠΋ਪఆ஋͕֎Ε͍ͯͨΒඇ࠷దԽ͕૸Δɻ

    View Slide

  90. Just In Time ίϯύΠϥ
    GVODUJPOTVN B C
    \
    SFUVSOBC
    ^
    ਺ࣈΛ଍ؔ͢਺
    TVN

    Կ౓΋਺ࣈΛ଍͠߹Θ͓͚ͤͯ͹ɺTVNؔ਺ͷ
    Ҿ਺͸਺ࣈɺಛʹJOUFHFSCJUҐ͔͕Θ͔Δ
    ͦ͏͢Ε͹ɺػցޠʹ͢Δ࣌ʹ࠷దԽ͕Ͱ͖Δɻ

    View Slide

  91. Just In Time ίϯύΠϥ
    GVODUJPOTVN B C
    \
    SFUVSOBC
    ^
    ਺ࣈΛ଍ؔ͢਺
    TVN

    Կ౓΋਺ࣈΛ଍͠߹Θ͓͚ͤͯ͹ɺTVNؔ਺ͷ
    Ҿ਺͸਺ࣈɺಛʹJOUFHFSCJUҐ͔͕Θ͔Δ
    ͦ͏͢Ε͹ɺػցޠʹ͢Δ࣌ʹ࠷దԽ͕Ͱ͖Δɻ
    ͜Ε͕+VTU*O5JNFίϯύΠϥͰݴ͏ͱ͜Ζͷ࠷దԽॲཧ

    View Slide

  92. Just In Time ίϯύΠϥ
    GVODUJPOTVN B C
    \
    SFUVSOBC
    ^
    ਺ࣈΛ଍ؔ͢਺
    TVN

    Կ౓΋਺ࣈΛ଍͠߹Θ͓͚ͤͯ͹ɺTVNؔ਺ͷ
    Ҿ਺͸਺ࣈɺಛʹJOUFHFSCJUҐ͔͕Θ͔Δ
    ͦ͏͢Ε͹ɺػցޠʹ͢Δ࣌ʹ࠷దԽ͕Ͱ͖Δɻ
    GVODUJPOTVN B C
    \
    SFUVSOBC
    ^
    ͍͖ͳΓ͜͜ͰจࣈྻΛ଍͢
    TVN

    ࠷దԽ͞ΕͨॴͰจࣈྻΛҾ਺ʹ౉ͨ͠ΒͲ͏ͳ
    Δ͔ʁ

    View Slide

  93. Just In Time ίϯύΠϥ
    GVODUJPOTVN B C
    \
    SFUVSOBC
    ^
    ਺ࣈΛ଍ؔ͢਺
    TVN

    Կ౓΋਺ࣈΛ଍͠߹Θ͓͚ͤͯ͹ɺTVNؔ਺ͷ
    Ҿ਺͸਺ࣈɺಛʹJOUFHFSCJUҐ͔͕Θ͔Δ
    ͦ͏͢Ε͹ɺػցޠʹ͢Δ࣌ʹ࠷దԽ͕Ͱ͖Δɻ
    GVODUJPOTVN B C
    \
    SFUVSOBC
    ^
    ͍͖ͳΓ͜͜ͰจࣈྻΛ଍͢
    TVN

    ࠷దԽ͞ΕͨॴͰจࣈྻΛҾ਺ʹ౉ͨ͠ΒͲ͏ͳ
    Δ͔ʁ
    CZUFDPEF͔Β΍Γ௚͢͜ͱʹͳΔʢඇ࠷దԽ͕૸Δʣɻ
    ͔ͤͬ͘+*5Ͱ࠷దԽͨ͠ॲཧ͕ແବʹͳΔɻ

    View Slide

  94. JIT Λࡴ͢ཁҼҰཡ (v8)
    • ܕ৘ใͷෆҰக
    • not int32 (integer ͡Όͳ͔ͬͨ)
    • not a string (จࣈྻ͡Όͳ͔ͬͨ)
    • not an array index (഑ྻͷఴࣈ͡Ό
    ͳ͔ͬͨ)
    • etc
    https://github.com/v8/v8/blob/master/src/deoptimizer/deoptimize-reason.h
    • ༧ظͤ͵ૢ࡞
    • cow array's elements changed
    (ίϐʔͨ͠഑ྻ͕มߋ͞Εͨ)
    • division by zero (θϩআࢉ)
    • Out of bounds (഑ྻͷൣғ௒͑)
    • etc

    View Slide

  95. JIT Λࡴ͢ཁҼҰཡ (v8)
    • ܕ৘ใͷෆҰக
    • not int32 (integer ͡Όͳ͔ͬͨ)
    • not a string (จࣈྻ͡Όͳ͔ͬͨ)
    • not an array index (഑ྻͷఴࣈ͡Ό
    ͳ͔ͬͨ)
    • etc
    https://github.com/v8/v8/blob/master/src/deoptimizer/deoptimize-reason.h
    • ༧ظͤ͵ૢ࡞
    • cow array's elements changed
    (ίϐʔͨ͠഑ྻ͕มߋ͞Εͨ)
    • division by zero (θϩআࢉ)
    • Out of bounds (഑ྻͷൣғ௒͑)
    • etc
    ֮͑Δඞཁ͸ͳ͍͕ɺॻ࣌͘ʹʮԿΛ͠ͳ͍ํ͕͍͍͔ʯΛ
    ஌͓͍ͬͯͨ΄͏͕ྑ͍ɻ

    View Slide

  96. ωοτϫʔΫ

    View Slide

  97. ωοτϫʔΫ
    • ௨৴Λߦ͍ɺཁٻ͞ΕͨίϯςϯπΛμ΢ϯ
    ϩʔυͨ͠Γɺ·ͨσʔλΛΞοϓϩʔυ͠
    ͨΓ͢Δɻ
    • HTTP(S)௨৴Λߦ͏ϨΠϠͰɺۙ೥͸ HTTP/3
    ͳͲ͕༗ޮʹͳΓͭͭ͋Δɻ

    View Slide

  98. ͦ΋ͦ΋௨৴Λߦ͏ͱ͸ʁ
    • Public IP / PORT ΛΫϥΠΞϯτ͕஌͍ͬͯͯ
    • αʔό͕઀ଓΛ଴͍ͬͯͯ
    • ͦ͜ʹ઀ଓΛཁٻ͠
    • ઀ଓΛཱ֬ͨ͠Βɺσʔλͷަ׵Λߦ͏
    Public IP / PORT Listen
    Data Transfer

    View Slide

  99. ͡Ό͋ IP ͸Ͳ͏΍ͬͯ஌Δͷʁ
    • IP ͸ DNSαʔό͔Βڭ͑ͯ΋Β͏ɻ
    • https://example.com ʹΞΫηε͠Α͏ͱͨ͠৔߹ɺҰ౓΋ΞΫηε͞Εͯͳ͔ͬͨΒ
    DNS Lookup (໊લ͔ΒIPΞυϨεΛҾ͘ߦҝ)͕ߦΘΕΔɻ
    • DNS Lookup ͸ͦͷϦΫΤετઌͷυϝΠϯʹԠͯ͡౎౓ൃੜ͢ΔͷͰɺ 3rd party
    domain ͕ϖʔδ಺ʹ͋Δ৔߹͸ʢҰ౓΋๚໰͞Εͯͳ͔ͬͨΒʣͦͷ࣌఺Ͱൃੜ͢
    Δɻ
    EJHFYBNQMFDPN
    01514&6%04&$5*0/
    &%/4WFSTJPO qBHTVEQ
    26&45*0/4&$5*0/
    FYBNQMFDPN */ "
    "/48&34&$5*0/
    FYBNQMFDPN */ "

    View Slide

  100. PORT ͸ʁ
    • ༗໊ͳϓϩτίϧͷ৔߹༧Ίܾ·ͬͯΔɻ
    • http ͳΒ 80 ൪ɺ https ͳΒ 443 ൪ͱ͍ͬͨ෩ʹɻ
    • ͜ͷ༧ΊܾΊΒΕͨ PORT ͷ͜ͱΛ well-known PORT ͱݺͿɻ
    • well-known ͳ PORT ͸ಛݖ͕ඞཁͳέʔε΋ଟ͍ͷͰɺ։ൃ؀
    ڥ౳Ͱ͸ 3000 ൪ͱ͔ʹͯ͠ɺ localhost:3000 Ͱݺͼग़͢͜ͱ
    ΋ଟ͍ɻ

    View Slide

  101. ઀ଓΛཱ֬ͱ͍͏ͷ͸ʁ
    • (؆ུԽͷͨΊ) TCP Λϕʔεʹ࿩͢ͱɺ֘౰ͷαʔόʹ͍͖ͳ
    Γ઀ଓ͢ΔͷͰ͸ͳ͘ɺ3ճͷ઀ଓ֬ೝΛܦͯ઀ଓ͢Δɻ
    • ͜ͷ઀ଓ֬ೝͷ͜ͱΛ 3 way handshake ͱݺͿɻ
    ͭͳ͛ΔΑʔ (SYN)
    ͍͍Αʔ ͬͪ͜΋ͭͳ͛ΔΑʔ(SYN-ACK)
    ͡Ό͋ͭͳ͙Ͷʔ (ACK)

    View Slide

  102. ͡Ό͋ࢲͷ伴ͱ߹Θͤͯ͜ΕͰ࿩͠·͠ΐ͏ɻ
    (Client Certificate)
    ઀ଓΛཱ֬ͱ͍͏ͷ͸ʁ
    • HTTP ͳΒ͜ΕͰܨ͕Δ͕ɺ࠷ۙͷେମͷWebαʔό͸ HTTPS
    ͳͷͰɺ͜Ε͚ͩͰ͸ܨ͕Βͳ͍ɻ҉߸ԽͷͨΊͷ΍ΓऔΓ͕ߋ
    ʹߦΘΕΔɻ(※؆ུԽ͍ͯ͠ΔͨΊɺਖ਼֬Ͱ͸ͳ͍)
    ΑΖ͓͘͠ئ͍͍ͨ͠·͢ɻ(Client Hello)
    ͪ͜Βͦ͜ΑΖ͓͘͠Ͷ͕͍͠·͢ɻ (Server Hello)
    Θͨ͠͸͜͏͍͏΋ͷͰ͢ɻ (Server Certificate)
    ͜͏͍͏伴Ͱ࿩ͤ·͢ (Server Key Exchange)
    Θͨ͠͸͜͏͍͏΋ͷͰ͢ɻ(Client Certificate)

    View Slide

  103. ͡Ό͋ࢲͷ伴ͱ߹Θͤͯ͜ΕͰ࿩͠·͠ΐ͏ɻ
    (Client Certificate)
    ઀ଓΛཱ֬ͱ͍͏ͷ͸ʁ
    • HTTP ͳΒ͜ΕͰܨ͕Δ͕ɺ࠷ۙͷେମͷWebαʔό͸ HTTPS
    ͳͷͰɺ͜Ε͚ͩͰ͸ܨ͕Βͳ͍ɻ҉߸ԽͷͨΊͷ΍ΓऔΓ͕ߋ
    ʹߦΘΕΔɻ(※؆ུԽ͍ͯ͠ΔͨΊɺਖ਼֬Ͱ͸ͳ͍)
    ΑΖ͓͘͠ئ͍͍ͨ͠·͢ɻ(Client Hello)
    ͪ͜Βͦ͜ΑΖ͓͘͠Ͷ͕͍͠·͢ɻ (Server Hello)
    Θͨ͠͸͜͏͍͏΋ͷͰ͢ɻ (Server Certificate)
    ͜͏͍͏伴Ͱ࿩ͤ·͢ (Server Key Exchange)
    Θͨ͠͸͜͏͍͏΋ͷͰ͢ɻ(Client Certificate)
    )5514௨৴͸5$1ͷ΍ΓऔΓͷޙͰ҉߸ԽͷͨΊͷऔΓܾ
    ΊΛ͢Δεςοϓ͕͋ΔɻͦΕΛܦͯ઀ଓ͞ΕΔɻ

    View Slide

  104. ؓ࿩ٳ୊ TLS/1.3
    • TLS 1.3 Ͱ͸࠷ॳͷ઀ଓ࣌ʹϥ΢ϯυτϦοϓΛݮΒ͢ࢼΈΛ͍ͯ͠Δɻ
    • 0-RTT ͱݺ͹ΕΔ࢓૊ΈͰ͸͍͖ͳΓ Client ͕ Hello Λඈ͹ͯ͠σʔλΛ
    ૹΔ͜ͱ΋Մೳʹɻ
    Making the web faster with HTTP/3 by kazuho
    https://vimeo.com/485450984

    View Slide

  105. σʔλͷ΍ΓऔΓ
    • ઀ଓཱ͕֬͞Εͨޙ͸ HTTP ϓϩτίϧʹΑΔσʔλͷ΍ΓऔΓΛߦ͏ɻ
    • HTTP ͸جຊతʹϦΫΤετ / ϨεϙϯεͰͷ΍ΓऔΓ͕ߦΘΕΔɻ
    • HTTP ϦΫΤετʹ͸ϦΫΤετߦͱϔομʔͱݺ͹ΕΔϝλ৘ใͱϘσΟ
    ͱݺ͹ΕΔίϯςϯτ৘ใؚ͕·ΕΔɻ(※ ؆ུԽͷͨΊHTTP/1.1ͷղઆ)

    1045JOEFYIUNM)551
    BDDFQUUFYUIUNM
    BDDFQUFODPEJOHH[JQ EFqBUF CS
    BDDFQUMBOHVBHFFO64 FOR KBR
    DBDIFDPOUSPMOPDBDIF
    DPPLJFGPPCBSCB[

    GPPCBSIPHFGVHB
    ϦΫΤετߦ
    ϦΫΤετϔομʔ
    ϦΫΤετϘσΟ σʔλ಺༰

    View Slide

  106. σʔλͷ΍ΓऔΓ
    • ϦΫΤετΛड͚औͬͨΒαʔό͸ϨεϙϯεʢԠ౴ʣΛฦ͢
    • HTTP Ϩεϙϯεʹ͸εςʔλεΛද͢৘ใͱϨεϙϯεϔομ
    ʢϝλσʔλʣɺϨεϙϯεϘσΟʢ಺༰ʣؚ͕·ΕΔ
    )5510,
    "HF
    $BDIF$POUSPMNBYBHF
    $POUFOU5ZQFUFYUIUNMDIBSTFU65'
    %BUF.PO "QS(.5
    $POUFOU-FOHUI
    EPDUZQFIUNM
    IUNM
    IFBE

    εςʔλεߦ
    Ϩεϙϯεϔομ
    ϨεϙϯεϘσΟ

    View Slide

  107. σʔλͷ΍ΓऔΓ
    • 200ܥ: ੒ޭɺσʔλͷຊମ͕͋Ε͹ૹΔ
    • 300ܥ: ϦμΠϨΫγϣϯϝοηʔδ
    • 400ܥ: ΫϥΠΞϯτΤϥʔ
    • 500ܥ: αʔόΤϥʔ

    View Slide

  108. 4FSWFS
    GET /main.css
    GET /main.js
    GET /image0.png
    σʔλͷ΍ΓऔΓ
    GET /index.html
    200 OK
    200 OK
    404 Not Found
    304 Not Modified

    View Slide

  109. 4FSWFS
    GET /main.css
    GET /main.js
    GET /image0.png
    σʔλͷ΍ΓऔΓ
    GET /index.html
    200 OK
    200 OK
    404 Not Found
    304 Not Modified
    )551্Ͱσʔλͷ΍ΓऔΓ͕ߦΘΕɺͦΕ͕ϨϯμϦϯάϓ
    ϩηε΍+4Τϯδϯ͕࣮ߦ͞ΕΔϑΣʔζΛܦͯϖʔδ͕ग़Δ

    View Slide

  110. 4FSWFS
    ͪͳΈʹ)551ͷ৔߹ɺΫϥΠΞϯτ͔
    Βαʔόʹ͸࠷େ઀ଓ·Ͱ͔͠ૹΕͳ͍ɻ
    σʔλͷ΍ΓऔΓ

    View Slide

  111. 4FSWFS
    ҰݸͰ΋஗͍ͱղܾ͞ΕΔ·Ͱ͔ͭ͠࢖͑ͳ͍
    σʔλͷ΍ΓऔΓ

    View Slide

  112. 4FSWFS
    )551ͩͱͭͷίωΫγϣϯ
    ͷதͰଟॏԽͯ͠ૹΔɻ
    σʔλͷ΍ΓऔΓ

    View Slide

  113. 4FSWFS
    )551ͩͱͭͷίωΫγϣϯ
    ͷதͰଟॏԽͯ͠ૹΔɻ
    σʔλͷ΍ΓऔΓ
    ͖ͬ͞ͷ5$1)BOETIBLFd5-4઀ଓཱ֬·Ͱ͕
    Ұճ͚ͩʹͳΔɻޮ཰తɻ

    View Slide

  114. σʔλͷ΍ΓऔΓ: HTTP/3
    • HTTP/2 Ͱ઀ଓίετͷ௿ݮ͕Ͱ͖͕ͨ໰୊΋͋Δɻ
    • ωοτϫʔΫ઀ଓ͕ෆ҆ఆͳ৔߹ TCP ઀ଓʹΑΓɺ͢΂ͯͷίωΫ
    γϣϯ͕ղܾ·Ͱʹ଴ͨ͞ΕΔέʔε͕༗Δɻཁ͸ύέϩεʹऑ͍ɻ

    4FSWFS
    5$1ͷϨΠϠͰෆ੔߹͕͋Δͱෆ੔߹͕గਖ਼͞Ε
    Δ·Ͱશମ͕ϒϩοΫ͞ΕΔɻ

    View Slide

  115. TCP͓͞Β͍
    • TCP ͸৴པੑ͕ߴ͍ϓϩτίϧ
    • ύέϩε࣌ͷ࠶ૹ੍ޚ΍ॱং౸ୡ੍ޚͳͲɺసૹ࣌ͷ໰୊Λղ
    ܾͯ͘͠ΕΔɻ
    4FSWFS
    )
    &
    -
    "DL
    &
    "DL͕དྷ
    ͳ͍
    ࠶ૹ͢Δ
    "DL
    ͕དྷ͚ͨͲͦΕ
    ·Ͱड৴ͨ͠΋ͷ
    ͸ഁغ͢ΔͶɻ
    -
    ͔Β΋
    ͏Ұ౓࠶

    View Slide

  116. HTTP/3
    • UDP ্ʹϓϩτίϧΛ࡞͍ͬͯΔ
    • TCPͷޡΓగਖ਼ͳͲͷ࢓૊ΈΛࣗ෼ͨͪͷϨΠϠ্Ͱ࠶࣮૷
    4FSWFS
    )
    &
    -
    ͕དྷͯͳ͍Α
    ̐&
    ඞཁͳ
    ΋ͷͷΈ
    ࠶ૹ
    Λ࢒ͨ͠·
    ·͕དྷͨ͜
    ͱʹ͢Δ

    View Slide

  117. σʔλͷ΍ΓऔΓ: HTTP/3
    • HTTP/3 Ͱ͸͜ͷ࢓૊ΈʹΑΓɺ઀ଓ಺Ͱͷσʔλෆ੔߹͕
    ൃੜͯ͠΋શମΛετοϓͤͣ͞ʹ֘౰ͷετϦʔϜͷΈగ
    ਖ਼ͤ͞Δɻ

    4FSWFS
    Ұ෦ͷετϦʔϜ͕ࢭ·ͬͯ΋શମʹӨڹ͕ग़ͳ
    ͍࢓૊Έ

    View Slide

  118. σʔλετϨʔδ

    View Slide

  119. σʔλετϨʔδ
    • Ϩεϙϯεͷ৘ใ(Cache)΍Ϣʔβʔͷ৘ใ
    (Cookie, Localstorage etc)ΛϋʔυσΟεΫʹ
    ஝ੵ͓ͯ͘͠৔ॴ
    • σʔλετϨʔδʹσʔλΛஔ͍͓ͯ͘͜ͱ
    ͰσʔλΛӬଓԽͨ͠Γɺ Cache ʹΑΔ࠷ద
    ԽΛߦ͏͜ͱ͕Ͱ͖Δ

    View Slide

  120. Cache Storage
    • ϨεϙϯεΛΩϟογϡ͢Δ࢓૊Έ
    4FSWFS
    GET /main.css
    GET /main.js
    GET /image0.png
    GET /index.html
    200 OK
    200 OK
    404 Not Found
    304 Not Modified
    Ұճμ΢ϯϩʔυͨ͠ϑΝΠϧ͸ωοτϫʔΫ͔ΒಡΈࠐΈͨ
    ͘ͳ͍ɻ࠶ར༻͍ͨ͠ɻ

    View Slide

  121. Cache Storage
    • αʔόଆ͕ HTTP ϨεϙϯεϔομʹΩϟογϡͱ͠
    ͯอଘͯ͠ྑ͍͔Ͳ͏͔/Ωϟογϡ༗ޮظؒΛࣔͤ͹
    Ωϟογϡ͕༗ޮʹͳΔɻ
    • Cache-Control / ETag ͱ͍ͬͨΩϟογϡ༻ͷϔομ
    Λ׆༻͢Δɻ
    $BDIF$POUSPMNBYBHFඵؒɺΫϥΠΞϯτͷ$BDIFͱ
    ͯ͠༗ޮ
    &UBHJEFOUσʔλͷࣝผՄೳͳ஋ɺ&UBH஋͕มΘͬͯ
    ͍ͳ͍͔Ͳ͏͔Λαʔόʹ໰͍߹ΘͤͯมΘ͍ͬͯͳ͔ͬͨΒΩϟογϡ͕
    ࢖ΘΕΔɻมΘ͍ͬͯͨΒ࠶μ΢ϯϩʔυ

    View Slide

  122. Cookie Storage
    • ΫϥΠΞϯτ಺ͷσʔλͱͯ͠อଘ͞Εɺϒϥ΢β͔Β
    αʔόʹຖճϦΫΤετ͕ૹ৴͞ΕΔɻ
    • ओʹҎԼͷΑ͏ͳ༻్Ͱ࢖ΘΕΔɻ
    • ηογϣϯ؅ཧʢϩάΠϯɺγϣοϐϯάΧʔτͳͲʣ
    • ύʔιφϥΠζʢϢʔβઃఆɺςʔϚͳͲʣ
    • τϥοΩϯάʢϢʔβʔͷߦಈه࿥෼ੳʣ

    View Slide

  123. Cookie Storage
    • Ϩεϙϯεϔομʹ Set-Cookie ͔Β࢝·ΔσʔλΛೖ
    ΕΔ͜ͱͰอଘͤ͞Δ͜ͱ͕Ͱ͖Δɻ
    • ࣍ճҎ߱ͷϦΫΤετͰͦͷ Cookie ͕αʔόʹૹΒ
    ΕΔɻ
    4FSWFS
    Set-Cookie: id=1;
    Cookie: id=1;

    View Slide

  124. Cookie Storage
    • Cookie Λ࢖ͬͯྫ͑͹ϩάΠϯ੒ޭ࣌ʹηογϣϯID
    Λ෇༩͢Δɻ
    • ࣍ճҎ߱͸ηογϣϯID͕༗ޮ͔Ͳ͏͔Λ֬ೝ͢Ε͹
    ϩάΠϯ͍ͯ͠Δ͔Ͳ͏͔ΛαʔόଆͰ൑ผͰ͖Δɻ
    • ͦͷࡍʹ Expires ΍ MaxAge ଐੑΛ࢖͑͹͍ͭ·Ͱอ
    ࣋ͤ͞Δ͔΋ࢦఆͰ͖Δɻ

    View Slide

  125. Cookie Storage
    id
    pass
    4FSWFS
    GET /
    302 Redirect
    GET /login
    200 OK
    POST /login id=foo&pass=xxx
    302 Redirect Set-Cookie: session=xxx
    GET / cookie: session=xxx

    View Slide

  126. Cookie Storage
    id
    pass
    4FSWFS
    GET /
    302 Redirect
    GET /login
    200 OK
    POST /login id=foo&pass=xxx
    302 Redirect Set-Cookie: session=xxx
    GET / cookie: session=xxx
    4FTTJPO$PPLJFΛ࡞Δ·ͰͷྲྀΕ

    View Slide

  127. ޙ൒ Agenda
    • ϋϯζΦϯ
    • ϩάΠϯϑΥʔϜΛ࡞ͬͯΈΑ͏
    • ·ͱΊ

    View Slide

  128. ϋϯζΦϯ

    View Slide

  129. ϋϯζΦϯ
    • ࠓ·Ͱڭ͑ͨ͜ͱΛΞϓϦΛ࡞Γͳ͕ΒৼΓฦΔɻ
    • ωοτϫʔΫͷ΍ΓऔΓ
    • σʔλετϨʔδʹ͍ͭͯ
    • JavaScript Τϯδϯʹ͍ͭͯ
    • Ͳ͏΍ͬͯϨϯμϦϯά͞ΕͯΔ͔

    View Slide

  130. αʔόΛ࡞Δ
    • Ұ୴͔͜͜ΒϋϯζΦϯΛ։࢝͠·͢ɻ
    • Node.js ͕ඞཁͳͷͰೖΕ͓͍͍ͯͯͩ͘͞ɻ
    • HTML Λ഑৴Ͱ͖ΔΑ͏ʹͳΔ·Ͱ͸࡞͓ͬͯ
    ͍ͨͷͰɺ clone ࣮ͯ͠ߦ͍ͯͩ͘͠͞ɻ

    HJUDMPOFIUUQTHJUIVCDPNSFDSVJUUFDICSPXTFSIBOETPOHJU
    DECSPXTFSIBOETPO
    OQNJOTUBMM
    OPEFBQQNKT
    PQFOIUUQMPDBMIPTU

    View Slide

  131. ࣮ࡍͷϦΫΤετ/ϨεϙϯεΛ
    ோΊΔ
    • ಈ͍ͨΒ࣮ࡍͷϦΫΤετ/ϨεϙϯεΛோΊ
    ͯΈ·͠ΐ͏ɻ
    • Chrome Ͱ։ൃπʔϧ(⌘ + Shift + I)Λ։͖ɺ
    ωοτϫʔΫλϒʹભҠ͠ɺϦΫΤετɾϨ
    εϙϯεΛݟͯΈ·͢ɻ

    View Slide

  132. ωοτϫʔΫͷ΍ΓऔΓ
    • ͔ͤͬ͘ͳͷͰ https ʹͯ͠Έ·͠ΐ͏ɻ
    • લॲཧͱͯ͠CAͱূ໌ॻΛ࡞Γɺແཧ໼ཧ
    trust ͓͖ͤͯ͞·͢ɻ
    OQNFYFDNLDFSUDSFBUFDB
    OQNFYFDNLDFSUDSFBUFDFSU
    TVEPTFDVSJUZBEEUSVTUFEDFSUESUSVTU3PPUL-JCSBSZ
    ,FZDIBJOT4ZTUFNLFZDIBJODBDSU

    View Slide

  133. ωοτϫʔΫͷ΍ΓऔΓ
    • Node.js ଆ΋ https ʹରԠͤͯ͞Έ·͠ΐ͏ɻ
    • ઌఔ࡞ͬͨ cert ϑΝΠϧΛಡΊ͹ྑ͍Ͱ͢ɻ
    BQQNKT
    JNQPSU\SFBE'JMF4ZOD^GSPNGT௥ه
    JNQPSU\DSFBUF4FSWFS^GSPNIUUQTIUUQ͔ΒIUUQTʹมߋ
    DPOTUSFRTPO
    DSFBUF4FSWFS \
    LFZSFBE'JMF4ZOD DFSULFZ
    ௥ه
    DFSUSFBE'JMF4ZOD DFSUDSU
    ௥ه
    ^
    MJTUFO QPSU

    View Slide

  134. ωοτϫʔΫͷ΍ΓऔΓ
    • खͬऔΓૣ͘ curl ͰΞΫηεͯ͠த਎Λݟͯ
    Έ·͠ΐ͏ɻ
    DVSMJWWWIUUQTMPDBMIPTUMPHJO
    $POOFDUFEUPMPDBMIPTU
    QPSU

    TVDDFTTGVMMZTFUDFSUJpDBUFWFSJGZMPDBUJPOT
    5-4W 065
    5-4IBOETIBLF $MJFOUIFMMP

    5-4W */
    5-4IBOETIBLF 4FSWFSIFMMP

    5-4W */
    5-4IBOETIBLF $FSUJpDBUF

    5-4W */
    5-4IBOETIBLF 4FSWFSLFZFYDIBOHF

    5-4W */
    5-4IBOETIBLF 4FSWFSpOJTIFE

    View Slide

  135. ωοτϫʔΫͷ΍ΓऔΓ
    • ࣍ʹ http2 ʹͯ͠Έ·͠ΐ͏ɻ
    • http2 ͷ createSecureServer Λ࢖ͬͯ http2
    αʔόΛཱͯͯΈ·͠ΐ͏ɻ
    • Chrome ͷ։ൃऀπʔϧͰ http2 ʹͳ͍ͬͯ
    Ε͹੒ޭͰ͢ɻ

    View Slide

  136. σʔλετϨʔδΛࢼ͢
    • CSS΍JSΛ Cache-Control Λ࢖ͬͯΩϟο
    γϡʹೖΕͯΈ·͠ΐ͏ɻ
    • ։ൃπʔϧͰ (Cached) ͳϨεϙϯε͕ؼͬͯ
    ͖͍ͯͨΒ੒ޭͰ͢ɻ

    View Slide

  137. σʔλετϨʔδΛࢼ͢
    • ϩάΠϯΛ੒ޭͤͯ͞Έ·͠ΐ͏ɻ
    • id/password ΛνΣοΫ͠ɺ߹க͍ͯͨ͠Β੒ޭϨεϙϯ
    ε (302, Location: "/") ͱڞʹ Set-Cookie ͰΫοΩʔʹ
    ηογϣϯIDΛೖΕͯΈ·͠ΐ͏ʢηογϣϯID͸ԿͰ
    ΋Մʣɻ
    • ϩάΠϯηογϣϯ͕ϦμΠϨΫτ͞Εɺ `Login
    Success!` ͕දࣔ͞Ε͍ͯͨΒ੒ޭͰ͢ɻ

    View Slide

  138. JavaScript Τϯδϯʹ͍ͭͯ
    • ͪͳΈʹࠓͷ script.js ͸׶͑ͯಈ͔ͳ͍Α͏ʹͳͬ
    ͯ·͢ɻ
    • ಈ͘Α͏ʹͯ͠Έ͍ͯͩ͘͞ɻͳΜͰಈ͔ͳ͍͔Λ
    ࢦఠͰ͖ͨΒՃ఺ɻ
    • DOMΛૢ࡞͠ͳ͕ΒύεϫʔυͷϚεΫΛ֎ͯ͠ɺ
    දࣔ͢ΔϘλϯͷಈ࡞Λ֬ೝͯ͠Έ͍ͯͩ͘͞ɻ

    View Slide

  139. JavaScript Τϯδϯʹ͍ͭͯ
    • ΋͠Ͱ͖ͨΒಈతʹύεϫʔυೖྗΛνΣο
    Ϋͤͯ͞Έ͍ͯͩ͘͞ɻ
    • ೖྗʹԠͯ͡಺༰ΛνΣοΫ͠ɺத਎͕ظ଴
    ͢Δ΋ͷ͡Όͳ͔ͬͨΒૹΕͳ͍Α͏ʹͯ͠
    Έ͍ͯͩ͘͞ɻ

    View Slide

  140. Ͳ͏΍ͬͯϨϯμϦϯά͞Εͯ
    Δ͔
    • ࠷ޙʹ Login Success ͷը໘͕ऐ͍͠ͷͰ HTML Ͱࣗ༝ʹϚʔ
    ΫΞοϓ͍ͯͩ͘͠͞ɻ
    • ը૾ΛೖΕͨΓɺಈըͱ͔ೖΕͯΈͨΓ͢Δͷ͕ྑ͍Ͱ͠ΐ
    ͏ɻ
    • CSS ͷ z-index Λม͑ͯΈͯલܠͱഎܠΛม͑ͯΈ͍ͯͩ͘͞ɻ
    • ਌ͷཁૉ͕ࢠͲ΋ͷཁૉʹΑͬͯߴ͕͞มΘͬͨΓ͢Δ͜ͱΛ
    Chrome ͷ։ൃπʔϧͰ͔֬ΊͯΈ·͠ΐ͏ɻ

    View Slide

  141. ·ͱΊ

    View Slide

  142. લ൒
    • ϒϥ΢βͷػೳ
    • ϒϥ΢βͷߏ଄
    • ϨϯμϦϯάͷ࢓૊Έ
    • JavaScript Τϯδϯͷ࢓૊Έ
    • ωοτϫʔΫͷ࢓૊Έ
    • σʔλετϨʔδͷ࢓૊Έ

    View Slide

  143. ޙ൒
    • ϋϯζΦϯͰࠓ·Ͱशͬͨ΍ͭΛٯ޲͖ʹҰؾʹ
    ۦ͚ൈ͚ͯ΋Βͬͨɻ
    • ωοτϫʔΫ
    • σʔλετϨʔδ
    • JavaScript
    • ϨϯμϦϯά

    View Slide

  144. ϒϥ΢βͷத਎ͱ࢓૊ΈΛΘ্͔ͬͨ
    ͰϋϯζΦϯͰҰؾʹಈ͘΋ͷΛࢼ͢
    • ಄ͷதʹϒϥ΢βͷϚοϓΛ΋ͬͨঢ়ଶͰϋϯζΦϯΛ΍ͬ
    ͯ΋Β͍·ͨ͠ɻ
    • ͢΂ͯͰ͖ͳ͔ͬͨਓ΋͍Δͱࢥ͏ͷͰɺͦͷํ͸॓୊ͱ͠
    ͯ࢒͓͖ͯ͠·͢ɻ
    • ΞϓϦέʔγϣϯΛ࡞Δ͜ͱ͕Ұ൪ษڧʹͳΔͷͰ͓͢͢Ί
    ͠·͢ɻ
    • ಄ͷதʹϚοϓΛ࡞ΓɺΞϓϦέʔγϣϯΛ࡞ΓɺͦΕΛߋ
    ৽͢Δͱ͍͏αΠΫϧΛճ͍͖ͯ͠·͠ΐ͏ɻ

    View Slide