Browser

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

Transcript

1. Browser 2024/04/17 @ Recruit
2. Twitter: @yosuke_furukawa Github: yosuke-furukawa
3. ຊߨٛͷͶΒ͍ • օ͞Μʹϒϥ΢βͷத਎Λೝࣝͯ͠΋Β͍ɺ಄ͷதʹ ϚοϓΛ࡞ͬͯ΋Β͏ɻ • ϒϥ΢βͷ஍ਤΛ࡞্ͬͨͰ͜ͷ͋ͱͷߨٛʢύ ϑΥʔϚϯεɺηΩϡϦςΟɺJavaScript/ TypeScriptʣΛड͚ͯ΋Β͏͜ͱͰཧղ౓ΛਂΊΔɻ • HTTP/HTMLͳͲͷجૅతͳ෦෼͸ޙ൒ϋϯζΦϯͰ ;ΕΔɻ
4. ຊߨٛͷ΋͏ҰͭͷͶΒ͍ • ʮͦ΋ͦ΋ͦΕͬͯͲ͏ͳͬͯΔΜͩΖ͏ʯ Λߟ͑ΔบΛ࣋ͬͯ΋Β͏ • ஌ͬͯΔͱࢥͬͯͯ΋஌Βͳ͍͜ͱ΋ଟ͍ • ݪཧΛ஌Βͳͯ͘΋࢖͑Δ͚ͲݪཧΛ஌ͬͯ ͔Β࢖͑Δ΄͏͕ѹ౗తʹ༗ར
5. લ൒ Agenda • Webͱ͸ • ϒϥ΢βͷػೳ • ϒϥ΢βͷ࢓૊Έ • ϨϯμϦϯάΤϯδϯ • JavaScript Τϯδϯ • ωοτϫʔΫ • σʔλετϨʔδ
6. Webͱ͸Կ͔
7. Webͱ͸Կ͔ • Webϒϥ΢β΍WebαʔόɺWebϖʔδͳͲ Webͱ͍͏୯ޠͰར༻͢ΔΑΓ΋ޙΖʹԿ͔ Λ͚ͭͨݴ༿ͱͯ͠දݱ͞ΕΔ͜ͱ͕ଟ͍ • World Wide Web ੈքن໛ͷ஖ᥨͷ૥ͱ͔ݴ ΘΕΔ͜ͱ΋ଟ͍͚ͲɺͳΜͩΖ͏ͱࢥͬͯ ΈΑ͏ɻ
8. Web ফඅऀ ఏڙऀ ʓʓΛԼ͍͞ ʓʓ
9. Web Webϒϥ΢β 4FSWFS Webαʔό ʓʓΛԼ͍͞ ʓʓ
10. Web Webϒϥ΢β 4FSWFS Webαʔό (&5
     JOEFYIUNM JOEFYIUNM EJW
    Q
    IFMMP
    Q
    Q
    XPSME
    Q
    EJW
11. Web Webϒϥ΢β 4FSWFS Webαʔό EJW
    Q
    IFMMP
    Q
    Q
    XPSME
    Q
    EJW EJWOPU GPP
    
    QOUIPGUZQF O
    \
    
    
    DPMPS
    SFE
    ^
    Q
    \
    
    
    DPMPS
    CMVF
    ^ GVODUJPO
    TVN B
    C
    \
    
    
    SFUVSO
    B
    
    C
    ^
    TVN 
     
12. Web Webϒϥ΢β 4FSWFS Webαʔό Webϖʔδ
13. Web Webϒϥ΢β 4FSWFS Webαʔό Webϖʔδ แׅతͳ࢓૊Έͷ͜ͱΛ
    8FC
    ͱݺͿ
14. Webͱ͸Կ͔ • Webϒϥ΢β͸৘ใΛදࣔ͢ΔͨΊͷΫϥΠΞϯτ • Webαʔό͸ίϯςϯπͷ΋ͱͱͳΔσʔλΛ഑৴͢ΔϓϩόΠ μʔ • Webϖʔδ͸ͦΕΒͷ৘ใ͕૊Έ߹Θͬͯ͞ϖʔδͱ͍͏ܗͰදݱ ͞Εͨ΋ͷ • ΋ͬͱෳࡶʹͳΔͱදܭࢉιϑτ΍WebΞϓϦέʔγϣϯʹͳΔɻ • ͜ΕΒแׅతͳ࢓૊ΈͷࣄΛ Web ͱݺΜͰ͍Δ
15. Webͱ͸Կ͔ • Web͸৭Μͳ֯౓͔Β੾ΓޱΛ౰ͯͯ঺հ͞ Ε͍ͯΔɻ • ຊߨٛͰ͸͋͘·Ͱϒϥ΢βΛ੾Γޱͱͯ͠ ঺հ͢Δɻ • ϒϥ΢β୯ମͷ࿩Ͱ͸ͳ͘େ͍ʹ୤ઢ͢Δͷ Ͱ஫ҙ
16. Browser • ஌ͬͯΔΑ͏Ͱ஌Βͳ͍ • ΢ΣϒΞϓϦέʔγϣϯΛ࡞Δ࣌ʹඞͣ࢖͏ ΋ͷͷɺத਎͕Ͳ͏ͳͬͯΔ͔Λઆ໌ͯ͘͠ ͍ͩ͞ͱݴΘΕΔͱͲ͏ͨ͠Β͍͍͔Θ͔Β ͳ͍΋ͷ • ࠓճ͸ͦΜͳϒϥ΢βʹ৮ΕΑ͏ͱࢥ͍·͢
17. Browse + er ோΊΔ΋ͷ
18. Webϒϥ΢βΛऔΓר͘΋ͷ
19. Webϒϥ΢β EJW
    Q
    IFMMP
    Q
    Q
    XPSME
    Q
    EJW HTML EJWOPU GPP
    
    QOUIPGUZQF O
    \
    
    
    DPMPS
    SFE
    ^
    Q
    \
    
    
    DPMPS
    CMVF
    ^ CSS GVODUJPO
    TVN B
    C
    \
    
    
    SFUVSO
    B
    
    C
    ^
    TVN 
      JavaScript IUUQFYBNQMFDPN JOEFYIUNM URL (&5
    JOEFYIUNM
    
    0, HTTP $PPLJF
    GPPCBS
    IPHFGVHB $BDIF
    NBYBHF Cookie Cache
20. HTML/CSS/JavaScript
21. HTML • Hyper Text Markup Language ͷུͰ HTML ͱݺ͹ΕΔɻςΩε τʹΘ͔Γ΍͍͢ϚʔΫΛ͚ͭΔ͜ͱΛϚʔΫΞοϓͱݺͼɺ ϚʔΫΞοϓʹΑͬͯϋΠύʔςΩετʢϦϯΫͷཁૉΛ࣋ͬͨ ࢀরΛؚΜͩςΩετʣΛ࡞੒Ͱ͖Δɻ • ϚʔΫΞοϓͷ໾ׂ͸ཁૉΛ໌ࣔతʹදݱ͢Δ͜ͱʹ͋Δɻཁૉ ʹ͸ྫ͑͹ʮݟग़͠ʯɺʮϦϯΫʯɺʮը૾ʯɺʮஈམʯͱ͍ͬ ͨ΋ͷ͕ଘࡏ͢Δɻ • HTML ͸ʮཁૉͷछྨʯͱཁૉ͕Ͳ͔͜ΒͲ͜·ͰΛࣔ͢ͷ͔ͱ ݴͬͨʮཁૉͷൣғʯͷ̎ͭΛ໌ࣔͯ͠จॻશମΛදݱ͢Δɻ
22. HTML • ʮཁૉͷछྨʯͱʮཁૉͷൣғʯΛ໌ࣔ͢Δʹ͸ʮλάʯΛར༻͢Δɻ • λά͸ `<h1>` ͳͲͷΑ͏ʹ `<` ͱ `>` Ͱғ·Ε͍ͯͯɺཁૉͷൣғΛද͢ʹ͸։࢝ͱऴྃΛ ໌ࣔ͢Δඞཁ͕͋Δɻ • ։࢝λά͸ `<h1>` ͷΑ͏ʹ `<(೚ҙͷཁૉ)>` Ͱදݱ͢Δɻ • λάͷछྨΛදݱ͢Δͱಉ࣌ʹൣғͷ։࢝Λදݱ͢Δɻऴྃλά͸ `</h1>` ͷΑ͏ʹ `</(೚ ҙͷཁૉ)>` Ͱදݱ͢Δɻ
23. CSS • Cascading Style Sheet ͷུͰɺCSSͱݺ͹ΕΔɻ • HTML͸จॻߏ଄Λදݱ͍ͯ͠Δ͕ɺCSS͸૷০Λදݱ͢ Δ͜ͱ͕Ͱ͖Δɻ • CSS͸HTMLͷཁૉΛࢦఆ͠ɺͦͷཁૉͷ૷০಺༰Λهड़ ͢Δɻ • ཁૉΛࢦఆ͢ΔͨΊʹ͸ηϨΫλͱ͍͏૷০ΛͲͷ෦෼ʹ ద༻͢Δ͔Λ໌ࣔͨ͠هड़͕ඞཁʹͳΔɻ
24. CSS • ηϨΫλͷࢦఆํ๏ʹ͸λάΛࢦఆ͢Δํ๏ɺidΛ ࢦఆ͢Δํ๏ɺ classΛࢦఆ͢Δํ๏ɺٖࣅతͳཁ ૉΛࢦఆ͢Δํ๏ͳͲ͕ଘࡏ͢Δɻৄ͘͠͸Ϩϯ μϦϯάͰ࿩͢ɻ
25. JavaScript • ಈతʹߋ৽͞ΕΔίϯςϯπΛ࡞੒ͨ͠Γɺ σʔλΛऔಘ͖ͯͯ͠දࣔͨ͠Γͱݴͬͨ ༷ʑͳॲཧΛՄೳʹ͢ΔͨΊͷϓϩάϥϛϯ άݴޠ • ͍ΘΏΔεΫϦϓτݴޠʹ֘౰͢Δ
26. JavaScript document.addEventListener("DOMContentLoaded", () => { function createParagraph() { const para = document.createElement("p"); para.textContent = "Ϙλϯ͕ԡ͞Ε·ͨ͠!"; document.body.appendChild(para); } const buttons = document.querySelectorAll("button"); for (const button of buttons) { button.addEventListener("click", createParagraph); } }); • ϚδͰ৭ʑͰ͖ΔͷͰɺશ෦ղઆ͸͚ͩ͜͜Ͱ͸Ͱ͖ͳ͍ɻৄ͘͠͸͜ͷޙʹ͋ΔJavaScriptΤϯδϯͰগ͠ղઆ͢ Δɻ • ޙ͸དྷि͋Δ JS/TS ݚम, React, Next.jsߨٛΛָ͠Έʹʂʂ
27. URL/HTTP
28. URL • ࠷ॳͷ͜ͷਤΛࢥ͍ग़ͯ͠ཉ͍͠ɻ Webϒϥ΢β 4FSWFS Webαʔό ʓʓΛԼ͍͞ ʓʓ
29. URL • ͍͖ͳΓσʔλԼ͍ͬͯ͞ݴͬͯΔ͚ͲɺͲ ͏΍ͬͯͦ͜ʹσʔλ͕͋Δͱ஌Δͷ͔ʁ • σʔλͷॴࡏΛදݱ͢Δ΋ͷ͕ඞཁɺզʑͷ ੈքͰݴ͑͹ॅॴ • WebͷੈքͰ͸ͦΕ͕URL
30. URL • εΩʔϜ: ϦΫΤετૹ৴͢ΔࡍͷϓϩτίϧΛࢦఆ͢Δཁૉɺ http ΍ https ͳͲͷϓ ϩτίϧͷ໊લΛهड़͢Δɻ • υϝΠϯ໊: ެ։͞Ε͍ͯΔϗετͷॅॴΛࣔ͢ཁૉ • ϙʔτ: υϝΠϯ಺ͷϦιʔεʹΞΫηε͢ΔͨΊͷ൪߸ɺ80 (HTTP) ΍ 443 (HTTPS) ͳͲ • ύε: υϝΠϯ಺ͷϦιʔεͷ৔ॴ • ύϥϝʔλ: `?` ͔Β࢝·ΔɺϦιʔεʹରͯ͠औಘ΍ߋ৽ͳͲͷૢ࡞Λ͢Δ࣌ʹΫϥΠ Ξϯτ͔Βࢦఆͯ͠αʔόʹ౉͢͜ͱͰɺಛผͳॲཧΛͤ͞Δ͜ͱ͕Ͱ͖Δɻ • ΞϯΧʔ: `#` ͔Β࢝·ΔɻϦιʔε಺෦ͷίϯςϯπͷҐஔΛࢦ͢ɻ
31. HTTP • ಉ͘͡ʮʓʓΛԼ͍͞ʯ͸୯ͳΔ೔ຊޠ • ೔ຊޠ͸૬ख΋೔ຊਓ͔ͩΒ௨͡Δݴ༿ • ػցಉ࢜΋ಉ͡Ͱ૬खʹ௨͡Δݴ༿Ͱ࿩͢ඞཁ͕͋Δ Webϒϥ΢β 4FSWFS Webαʔό ʓʓΛԼ͍͞ ʓʓ
32. HTTP • ૬खͱࣗ෼͕ಉ͡༻ޠͰ௨৴Ͱ͖Ε͹ྑ͍ • ϒϥ΢βͱαʔόؒͰܾΊΒΕͨڞ௨ͷݴޠɺͦΕ͕ HTTP • σʔλΛૹड৴͢Δͱ͖ͷϝοηʔδͷϑΥʔϚοτΛܾ Ί͓ͯ͘ • ͦͷϑΥʔϚοτʹ߹ΘͤͨৼΔ෣͍ΛܾΊ͓͚ͯ͹ྑ͍ • ࣗવݴޠͱҧͬͯᐆດ͕͞ແ͍Α͏ʹ΋࡞ΕΔ
33. Cache/Cookie
34. Cookie/Cache • σʔλͷ΍ΓऔΓͷ࢓ํɺσʔλͷॴࡏ஍ɺσʔλͷදݱํ ๏͸෼͔ͬͨͱͯ͠΋ɺͦͷσʔλΛຖճऔͬͯ͘Δͷ͸େม • ಛʹ΍ΓऔΓ͍ͯ͠Δ૬ख͕୭͔͸ΞϓϦέʔγϣϯΛ࡞Δ͏ ͑Ͱ͸ඞཁʹͳΔ͜ͱ͕ଟ͍ɻ • ͦͷ࣌ʹ૬खͷ৘ใΛຖճ֬ೝ͢ΔͷͰ͸ͳ͘ɺҰ࣌తͳ σʔλஔ͖৔ʹ͓͍͓͖ͯɺ௨৴ͷͨͼʹૹΔࣄͰखؒΛݮΒ ͢ɻ • ͜ͷΑ͏ͳσʔλஔ͖৔ΛCookieͱݺͿɻ
35. Cache • σʔλΛຖճຖճαʔό͔Βऔಘ͢Δͷ΋େ ม • Ұճμ΢ϯϩʔυͨ͠σʔλ͸࠶ར༻͍ͨ͠ ͜ͱ΋͋Δ • ͜͏͍͏࣌ʹར༻͢Δͷ͕Cache
36. ϒϥ΢βͷػೳ
37. ϒϥ΢βͷػೳ 🔒
    IUUQTFYBNQMFDPN
38. ϒϥ΢βͷػೳ 🔒
    IUUQTFYBNQMFDPN ໭Δ ਐΉ Ϧϩʔυɾதࢭ ΞυϨεόʔ
39. ϒϥ΢βͷػೳ • ΞυϨεόʔʹ͍Εͨ URL Λجʹϖʔδ͕ϨϯμϦϯά͞ΕΔ • ϦϯΫΛΫϦοΫ͢ΔͳͲͷΞΫγϣϯ͕͋Δͱ URL ͕มԽ ͠ɺཤྺʹͨ·Δ • ໭ΔϘλϯΛԡ͢ͱཤྺΛ໭ΕΔ • ਐΉϘλϯΛԡ͢ͱཤྺΛਐΊΒΕΔ • ϦϩʔυϘλϯΛԡ͢ͱ࠶౓ URL Λߋ৽͢Δ *NBHF
40. ϒϥ΢βͷػೳ • ϒϥ΢βͷجຊػೳΛյ͢Α͏ͳΞϓϦέʔγϣϯ͸ମݧ͕ ѱ͍ɻ • ໭ͬͨ࣌ʹ΋ͱ΋ͱ͍ͨεΫϩʔϧҐஔ͡Όͳ͍৔ॴʹ໭͞ ΕͨΒɾɾɾɾʁ • εΫϩʔϧ͢ΔࡍʹΨλΨλͯ͠εϜʔεͳૢ࡞͕ग़དྷͳ ͔ͬͨΒɾɾʁ • Enter ΩʔͰૹ৴Ͱ͖ͳ͍ϑΥʔϜΛ࡞ͬͯ͠·ͬͨΒɾɾɾʁ
41. ϒϥ΢βͷػೳ • ϒϥ΢βͷجຊػೳΛյ͢Α͏ͳΞϓϦέʔγϣϯ͸ମݧ͕ ѱ͍ɻ • ໭ͬͨ࣌ʹ΋ͱ΋ͱ͍ͨεΫϩʔϧҐஔ͡Όͳ͍৔ॴʹ໭͞ ΕͨΒɾɾɾɾʁ • εΫϩʔϧ͢ΔࡍʹΨλΨλͯ͠εϜʔεͳૢ࡞͕ग़དྷͳ ͔ͬͨΒɾɾʁ • Enter ΩʔͰૹ৴Ͱ͖ͳ͍ϑΥʔϜΛ࡞ͬͯ͠·ͬͨΒɾɾɾʁ શ෦ѱ͍ϢʔβʔΤΫεϖϦΤϯε
42. ϒϥ΢βͷػೳ • େݪଇ: ΢ΣϒΞϓϦέʔγϣϯ͸ϒϥ΢βͷػೳΛ յͯ͠͸͍͚ͳ͍ɻ • յ͢ͱମݧ͕ѱ͍͚ͩ͡Όͳ͍ɻ • ΞΫηγϏϦςΟ΋ѱ͘ͳΔɻ • ηΩϡϦςΟͱ͔ͷอޢػߏ΋ಇ͔ͳ͘ͳΔ͔΋ɻ
43. ϒϥ΢βͷػೳ • େݪଇ: ΢ΣϒΞϓϦέʔγϣϯ͸ϒϥ΢βͷػೳΛ յͯ͠͸͍͚ͳ͍ɻ • յ͢ͱମݧ͕ѱ͍͚ͩ͡Όͳ͍ɻ • ΞΫηγϏϦςΟ΋ѱ͘ͳΔɻ • ηΩϡϦςΟͱ͔ͷอޢػߏ΋ಇ͔ͳ͘ͳΔ͔΋ɻ ͲΜͳʹྑ͍ΞϓϦͰ͋ͬͯ΋ 
 ϒϥ΢βͷػೳΛյ͢Α͏ͳΞϓϦ͸࢖ΘΕͳ͘ͳΔ
44. ϒϥ΢βͷ࢓૊Έ
45. ϒϥ΢βͷߏ଄ 6TFS
    *OUFSGBDF #SPXTFS
    &OHJOF 3FOEFSJOH
    &OHJOF /FUXPSL +BWB4DSJQU
    &OHJOF %BUB
    4UPSBHF
46. ϒϥ΢βͷߏ଄ 6TFS
    *OUFSGBDF #SPXTFS
    &OHJOF 3FOEFSJOH
    &OHJOF /FUXPSL +BWB4DSJQU
    &OHJOF %BUB
    4UPSBHF ϒϥ΢βͷΠϯλϑΣʔε
    ΞυϨεόʔͱ͔໭ΔϘλϯͱ͔
47. ϒϥ΢βͷߏ଄ 6TFS
    *OUFSGBDF #SPXTFS
    &OHJOF 3FOEFSJOH
    &OHJOF /FUXPSL +BWB4DSJQU
    &OHJOF %BUB
    4UPSBHF ϒϥ΢βͷ֩
    ޙͰ঺հ͢Δ༷ʑͳߏ੒ཁૉͱௐఀ͢Δ
48. ϒϥ΢βͷߏ଄ 6TFS
    *OUFSGBDF #SPXTFS
    &OHJOF 3FOEFSJOH
    &OHJOF /FUXPSL +BWB4DSJQU
    &OHJOF %BUB
    4UPSBHF ίϯςϯπͷඳըΛߦ͏ɻίϯςϯπ͕ )5.-ͳΒϖʔδΛύʔεͯ͠ϩʔυ͢Δ
49. ϒϥ΢βͷߏ଄ • ϨϯμϦϯάΤϯδϯ • HTML΍CSS͸ͦͷ··Ͱ͸ਓ͕ؒಡΊΔ΋ͷ ʹͳΒͳ͍ɻ • σʔλΛܭࢉ͠ɺਓ͕ؒݟ͑Δܗʹදݱ͢Δ ͜ͱΛϨϯμϦϯάͱݺͿ
50. ϒϥ΢βͷߏ଄ 6TFS
    *OUFSGBDF #SPXTFS
    &OHJOF 3FOEFSJOH
    &OHJOF /FUXPSL +BWB4DSJQU
    &OHJOF %BUB
    4UPSBHF ωοτϫʔΫ૚ɺ)551ϦΫΤετͨ͠ Γɺ)5514ͰϦΫΤετͨ͠Γ
51. ϒϥ΢βͷߏ଄ • ωοτϫʔΫ • HTML ΍ CSS ΍ JavaScript ͱ͍ͬͨίϯςϯπΛμ΢ϯϩʔυͨ͠ΓɺΞο ϓϩʔυ͢Δ࢓૊Έ • ϒϥ΢βͷσʔλަ׵ͷ࢓૊Έ͸ʮσʔλͷཁٻʢϦΫΤετʣʯͱʮཁٻ ʹରͯ͠ͷԠ౴ʢϨεϙϯεʣʯͱ͍͏̎ͭͷγϯϓϧͳ΍ΓऔΓʹΑͬͯ ߦΘΕ͍ͯΔ •
52. ϒϥ΢βͷߏ଄ 6TFS
    *OUFSGBDF #SPXTFS
    &OHJOF 3FOEFSJOH
    &OHJOF /FUXPSL +BWB4DSJQU
    &OHJOF %BUB
    4UPSBHF +BWB4DSJQU
    ࣮ߦΤϯδϯ
    W
    ͱ͔
    4QJEFS.POLFZ
    ͱ͔
    +4$
    ͱ͔
53. ϒϥ΢βͷߏ଄ • JavaScript Τϯδϯ • JavaScript ͸ίϯςϯπΛಈతʹมߋ͢Δͱ͍ͬͨඇৗʹॏཁͳॲཧΛߦ ͏෦෼ • ʮJust In Time ίϯύΠϥʯͱݺ͹ΕΔಈతʹίʔυΛղੳ͢ΔࣄͰੑೳ Λิ͍ͬͯΔ •
54. ϒϥ΢βͷߏ଄ 6TFS
    *OUFSGBDF #SPXTFS
    &OHJOF 3FOEFSJOH
    &OHJOF /FUXPSL +BWB4DSJQU
    &OHJOF %BUB
    4UPSBHF σΟεΫʹอଘ͢ΔϨΠϠ
    $PPLJF
    ͱ͔
    MPDBMTUPSBHF
    ͱ͔͕֘౰
55. ϒϥ΢βͷߏ଄ • σʔλετϨʔδ • σʔλΛӬଓతʹอଘ͢Δ෦෼ • ࣮͸ history ΋ cookie ΋ localstorage ΋શ෦ σʔλετϨʔδ෦෼ʹอଘ͞Ε͍ͯΔ
56. ϒϥ΢βͷߏ଄ • ͜ͷϚοϓΛུ֓ͱͯ͠಄ʹೖΕ͓͍ͯͯ΄͍͠ɻ • HTML/CSSΛ࣮ߦͯ͠Δ৔ॴ͕Ͳ͔͜ • JavaScript ͸Engine͕෼͔ΕͯΔͱ͔ • ωοτϫʔΫ෦෼ͰσʔλΛ͖͍࣋ͬͯͯΔͱ͔ • Cookie ͷσʔλΛอଘͯ͠Δͷ͸σʔλετϨʔδͱ͔
57. ϒϥ΢βͷྺ࢙
58. ϒϥ΢βͷྺ࢙ • ͍͖ͳΓ͜͏͍͏ߏ੒ཁૉʹͳͬͨΘ͚Ͱ͸ ͳ͍ɻ • ͜ͷߏ੒ཁૉʹͳΔ·Ͱʹḷͬͨྺ࢙ΛৼΓ ฦΔ͜ͱͰҰ୴ཧղΛਂΊΔ • ͱ͸͍͑ͨͩͷྺ࢙ͳͷͰɺ໾ʹཱͭ஌ࣝͱ ͍͏ΑΓ͸ʮ΁ʔʯͬͯฉ͍ͯͯ͘Εͯྑ͍
59. ࠷ॳظͷϒϥ΢β • WorldWideWebϒϥ΢β • Ұ൪࠷ॳͷϒϨΠΫεϧʔ͸ϋΠύʔςΩετͱΠϯ λʔωοτΛ૊Έ߹Θͤͨ͜ͱʹΑͬͯੜ·ΕΔɻ • ૊Έ߹Θͤͨਓ͸༗໊ͳςΟϜɾόʔφʔζɾϦʔ •
60. ࠷ॳظͷϒϥ΢β • WorldWideWeb • URLදࣔ΋ͳ͍ɺ໭ΔɾਐΉͱ͔ͷϘλϯ΋ ͳ͍
61. ࠷ॳظͷϒϥ΢β • WorldWideWeb 6TFS
    *OUFSGBDF #SPXTFS
    &OHJOF 3FOEFSJOH
    &OHJOF /FUXPSL %BUB
    4UPSBHF )5.- )551 )JTUPSZ
62. 1990೥୅: ϒϥ΢βઓ૪ • ͦͷதͰҰ൪ਓؾʹͳͬͨͷ͕ʮMosaicʯͱ͍͏ϒϥ΢β • ςΩετͱҰॹʹΠϯϥΠϯͰը૾Λදࣔ͢Δͱ͍͏ϒϨ ΠΫεϧʔΛىͨ͜͠ɻ •
63. 1990೥୅: ϒϥ΢βઓ૪ • จॻͷ಺༰ͱ૷০Λ෼͚ͯఆٛͰ͖ΔΑ͏ʹ͠Α͏ͱ͍͏ ํ਑ʹͳ͍ͬͯ͘ɻ • ࠷ॳظͷϒϥ΢β͸಺༰ͱ૷০͸ผΕͯͳ͔ͬͨɻ • CSS ͕஀ੜ͠ɺ࢓༷͕ਐΜͰ͍͘Α͏ʹͳΔɻ • ͜ͷࠒ͔Β HTML / CSS ͷଘࡏ͕Ͱ͖Δɻ
64. 1990೥୅: ϒϥ΢βઓ૪ • ϏοάΧϯύχʔ΋໧͍ͬͯͳ͍ɻ • IBM͕ WebExplorer Λ։ൃ͠ɺͦͷޙ Microsoft ͕ Internet Explorer Λ։ൃ͢Δɻ • Mosaic ͸ NetScape ձࣾΛ্ཱͪ͛ɺ Navigator ͱ͍͏໊ લͰ։ൃ͢Δɻ • ୈҰ࣍ϒϥ΢βઓ૪͕ຄൃ͢Δɻ
65. 1990೥୅: ϒϥ΢βઓ૪ • JavaScript ΋͜ͷࠒ͔Β։ൃ͞Εͩ͢ʢ1995೥ʣ • HTTP Cookie ͳͲͷ࢓૊Έ΋։ൃ͞ΕΔ • HTTPS ͳͲͷ҉߸Խͷ࢓૊Έ΋͜ͷࠒ͔Β •
66. 1990೥୅: ϒϥ΢βઓ૪ • 1990೥୅ޙ൒ʹ͸େମͷύʔπ͕ἧͬͯ͘Δ
67. 1990೥୅: ϒϥ΢βઓ૪ • ػೳͷ֦ॆ͕ਐΜͰ͍͘ҰํͰϒϥ΢βઓ૪͸൵ܶ΋΋ͨΒͨ͠ɻ • աܹͳࠩผԽͱػೳ֦ॆ͕ਐΉதͰಠ֦ࣗுʹ͸͠Δ͜ͱ΋૿͑ͯ ͍͘ • JScript ͱݺ͹ΕΔ΄ͱΜͲ JavaScript ͱಉ͡Α͏ͳػೳΛ࣋ͬͨ εΫϦϓτݴޠ͕ Internet Explorer ʹ࣮૷͞ΕΔ • JavaScript Ͱ Style ΛܾΊΒΕΔ JavaScript Style Sheet ΋ఏҊ͞ ΕΔ͕ɺ࢓༷ܾΊ͖Εͳ͍͏ͪʹऴΘΔͳͲɻ
68. 1990೥୅: ϒϥ΢βઓ૪ • ࠷ऴతʹୈҰ࣍ϒϥ΢βઓ૪͸ϚΠΫϩιϑτ͕উར͢Δ • OSʹϒϥ΢β͕ಉࠝ͞ΕΔࣄͰ NetScape ͷϒϥ΢βΑΓ ΋Ϣʔβʔ਺Λ৳͹͠ɺՉ઎ঢ়ଶ͕࡞ΒΕͯ͠·͏ɻ • NetScape ଆ͸Ϣʔβʔ਺ͷ֫ಘʹ͸ࣦഊͨ͠΋ͷͷɺ OSS Խͯ͠ϒϥ΢βͷٕज़Λޙੈʹ࢒͠ɺ Mozilla ͱ͍͏ اۀʹܗΛม͑ͯଘଓ͢Δ
69. 2000೥୅: Google Chrome ͷ ొ৔ɺεϚʔτϑΥϯͷొ৔ • Mozilla ͕ຬΛ࣋ͯ͠ FireFox Λ։ൃͯ͠ɺϦϦʔε͢Δɻ • ࠓ·Ͱ Internet Explorer Ұڧঢ়ଶ͕ͩͬͨɺ࢓༷ʹ஧࣮Ͱ͋Γɺߴ଎ʹಈ͖ɺ λϒػೳ΍֦ுػೳΛඋ͑ͨ FireFox ͕Ϣʔβʔ਺Λൈ͘ • 2000೥୅ޙ൒ʹͳΔͱϓϨΠϠʔ͕มΘΔɻ • ·ͣ Google ͕ JavaScript ͱಈతͳ HTTP ϦΫΤετʢ͍ΘΏΔ Ajaxʣ Λ૊Έ ߹ΘͤΔࣄͰ͜Ε·ͰͷHTMLɺ CSSɺ JavaScript ͱ͍͏ٕज़͚ͩͰΠϯλϥΫ ςΟϒͳΞϓϦέʔγϣϯΛ΢Σϒ্Ͱ࡞ΕΔ͜ͱΛ࣮ફ͢Δɻ • ࣍ʹ Google ͕ Chrome ΛϦϦʔε͢Δɻ
70. 2000೥୅: Google Chrome ͷ ొ৔ɺεϚʔτϑΥϯͷొ৔ • 2000೥୅ͷલ൒͔Βޙ൒ʹ͔͚ͯى͖ͨͷ͸ɺ΢Σϒ্ͰΠϯλϥ ΫςΟϒͳΞϓϦέʔγϣϯΛ࡞Δͱ͍͏ٕज़తͳύϥμΠϜγϑτ • ϒϥ΢β্Ͱ JavaScript Λத৺ʹΞϓϦέʔγϣϯΛ࡞Δػձ͕૿͑ ͨɻ • ݁Ռͱͯ͠ɺΞϓϦέʔγϣϯͷ࣮ߦ଎౓ʹ௚݁͢Δ JavaScript ͷ࣮ ߦ؀ڥʹ΋ݟ௚͕͠ೖΔɻ • ֤ϒϥ΢βͷJavaScript Engineʹ Just-in-time (JIT) Compiler ͱݺ͹ ΕΔ࣮ߦதʹ࠷దԽ͢Δػೳ͕ಋೖ͞Ε͍ͯ͘
71. 2000೥୅: Google Chrome ͷ ొ৔ɺεϚʔτϑΥϯͷొ৔ • ϒϥ΢β͕୯ͳΔ΢ΣϒϖʔδͷӾཡ͚ͩͰ͸ͳ ͘ɺΞϓϦέʔγϣϯج൫ͱͯ͠ͷํ޲ʹਐΉɻ +*5
72. 2010೥୅: HTML5ϒʔϜͱε ϚʔτϑΥϯωΠςΟϒΞϓϦ • 2010೥͔Β͸ΞϓϦέʔγϣϯΛ΢ΣϒͰΑΓޮ ཰తʹɺ৽͘͠࡞Ζ͏ͱ͢ΔϒʔϜ͕౸དྷͨ͠ɻ • ϒϥ΢βʹ΋εϚʔτϑΥϯͰݟΕΔΞϓϦέʔ γϣϯΛ࡞ΔྲྀΕ͕౸དྷͨ͠ɻ • ͜ͷ͋ͨΓ͔ΒωΠςΟϒΞϓϦͱϒϥ΢β྆ํ Ͱಉ͡Α͏ͳػೳΛఏڙ͢ΔΑ͏ʹͳΔ
73. 2010೥୅: HTML5ϒʔϜͱε ϚʔτϑΥϯωΠςΟϒΞϓϦ • ΞϓϦέʔγϣϯͷ࡞Γํ͕ωΠςΟϒΞϓϦͷ࡞Γํʹۙ͘ͳͬͯ ͍ͬͨɻ • ΫϥΠΞϯτ಺Ͱ LocalStroage ΍ Session Stroage ͱ͍ͬͨΫϥΠΞ ϯτͷετϨʔδΛ࢖͓͏ͱͨ͠ΓɺΦϑϥΠϯͰ΋ಈ࡞͢ΔΑ͏ʹ ϒϥ΢β͕ਐԽ͍ͯͬͨ͠ɻ • ͜ͷࠒʹ Network ʹ΋ਐԽ͕๚ΕΔɻϒϥ΢β͕ར༻͢Δίϯςϯπ ͕ΑΓϦονʹͳΓɺΞϓϦέʔγϣϯ΋Ͱ͖Δ͜ͱ͕૿͍͑ͯ͘ͱɺ ωοτϫʔΫͷར༻཰্͕͕͍ͬͯ͘ • HTTP/2 ͱ͍ͬͨޮ཰తʹϦΫΤετ͢Δํ๏͕ग़ͯ͘Δɻ
74. 2010೥୅: HTML5ϒʔϜͱε ϚʔτϑΥϯωΠςΟϒΞϓϦ • ΑΓޮ཰తʹ࣮ߦͰ͖ΔΑ͏ʹɺΞϓϦέʔγϣϯ ΑΓͷػೳ͕૿͍͑ͯ͘ +*5 )551 MPDBMTUPSBHF
75. ϒϥ΢βྺ࢙·ͱΊ • ͜ͷΑ͏ʹΞϓϦέʔγϣϯΛ࡞Δํ๏͕֬ ཱ͞Ε͍ͯͬͨΓɺ৽͍ٕ͠ज़తͳస׵͕ى ͖Δͱͦͷ౎౓ϒϥ΢β͸ٕज़తͳਐԽΛ਱ ͖͛ͯͨɻ • ࠓ೔ͷϞμϯͳϒϥ΢β͸͜ͷΑ͏ͳٕज़త ਐԽ͕೔ਐ݄าͰߦΘΕ͍ͯΔɻ
76. ϒϥ΢βΛյͯ͠͸͍͚ͳ͍
77. HistoryΛյͯ͠͸͍͚ͳ͍ • ϒϥ΢βͷػೳʹ͸ʮ໭ΔʯͱʮਐΉʯͱ͍ͬͨӾཡཤྺΛલʹ ໭͠ɺਐΊΔػೳ͕͋Δɻ • Ӿཡཤྺ͸ཤྺͰ͋Γɺ໭ΔΛԡͨ͠ͱ͖ʹ͸جຊతʹલͷঢ়ଶ ʹ໭Δ͜ͱ͕๬·͍͠ɻ • ͔͠͠ͳ͕Βɺ͍͔ͭ͘ͷ΢ΣϒΞϓϦέʔγϣϯͰ͸ɺʮ໭ ΔʯΛԡͨ࣌͠ʹ໭Εͳ͍ΞϓϦέʔγϣϯ͕ଘࡏ͢Δɻ • ΋͘͠͸໭Ζ͏ͱͨ࣌͠ʹҰ෦ͷঢ়ଶ͚ͩ໭͢͜ͱ͕Ͱ͖Δ͕ɺ ׬શʹલͷঢ়ଶΛ࠶ݱͰ͖ͳ͍ΞϓϦέʔγϣϯ΋ଘࡏ͢Δɻ
78. HistoryΛյͯ͠͸͍͚ͳ͍ • ௚લʹߦͬͨίϝϯτ͕ফ͑ͯΔྫ
79. HistoryΛյͯ͠͸͍͚ͳ͍ • ໭ΔϘλϯ͕ແޮʹͳ͍ͬͯΔྫ
80. εΫϩʔϧΛյͯ͠͸͍͚ͳ͍ • ը໘ΛεΫϩʔϧ͢Δ͜ͱʹΑͬͯΨλΨλͱ ࢥͬͨҐஔʹεΫϩʔϧͰ͖ͳ͍ࣄ͕͋Δɻ • ͜ͷεΫϩʔϧͷΨλπΩͷ͜ͱΛʮεΫϩʔ ϧδϟϯΫʯͱݺͿɻ •
81. εΫϩʔϧΛյͯ͠͸͍͚ͳ͍ • εΫϩʔϧҐஔ͕໭Βͳ͍ྫ
82. ϑΥʔϜΛյͯ͠͸͍͚ͳ͍ • λϒͰભҠͰ͖ͳ͍ • ΤϯλʔΩʔͰૹ৴Ͱ͖ͳ͍
83. ϨϯμϦϯάΤϯδϯ
84. ϨϯμϦϯάΤϯδϯ • ίϯςϯπʢHTMLͳͲ) Λड͚औͬͯ಺༰Λ ඳը͢Δ HTML ϖʔδ ϨϯμϦϯά
85. ϨϯμϦϯάΤϯδϯ • ίϯςϯπʢHTMLͳͲ) Λड͚औͬͯ಺༰Λ ඳը͢Δ HTML ϖʔδ ϨϯμϦϯά ͜͜ʹࢸΔ·ͰʹυϥϚ͕ͨ͘͞Μ͋Δɻ
86. ϨϯμϦϯάΤϯδϯ • ࢦఆ͞ΕͨίϯςϯπΛඳը͢Δ΋ͷ • ͜͜Ͱ͸ओʹ HTML Λඳը͢Δ࣌ͷྲྀΕͰղ આ͢Δ͕ɺຊདྷ͸ HTML ʹґΒͣɺίϯςϯ πΛඳը͢Δɻ (SBQIJD
    *OUFSGBDF 3FOEFS
87. ϨϯμϦϯάΤϯδϯ • ࢦఆ͞ΕͨίϯςϯπΛඳը͢Δ΋ͷ • ͜͜Ͱ͸ओʹ HTML Λඳը͢Δ࣌ͷྲྀΕͰղ આ͢Δ͕ɺຊདྷ͸ HTML ʹґΒͣɺίϯςϯ πΛඳը͢Δɻ (SBQIJD
    *OUFSGBDF 3FOEFS ಛʹ͜͜ΛਂງΓ͢Δ
88. ϨϯμϦϯάϓϩηε • HTML ͷϨϯμϦϯά͸ "ಈతʹ" ϨϯμϦϯ ά͢Δɻ • JavaScript ΍ϢʔβʔೖྗɺΞχϝʔγϣϯ ͳͲͰϨϯμϦϯά͕ߋ৽͞ΕΔɻ *OJUJBM
    3FOEFS ߋ৽ ߋ৽ ߋ৽ ߋ৽
89. ϨϯμϦϯάϓϩηε • ίϯςϯπ͕ಈతʹߋ৽͞ΕΔͱ͍͏͜ͱ͕ ΢Σϒͷಛ௃ • ͦͷͨΊʹ͍͔ͭ͘ͷதؒදݱΛ͍࣋ͬͯΔ IUNM
    IUNM %0. 4UZMFE 1BSTF 4UZMF -BZPVU 
 1BJOU
90. HTML Parse EJW
    Q
    IFMMP
    Q
    Q
    XPSME
    Q
    EJW 1BSTF %*7 
 1
    5&95
    1 5SFF %PDVNFOU )5.- #PEZ %JW 1 5&95 1 5&95 • λάΛωετͯ͠දݱ • ໦ߏ଄ͱ͍͏ܗͰσʔλߏ଄ͱͯ͠ 
 දݱ͞ΕΔɻ
91. DOM %PDVNFOU )5.- #PEZ %JW 1 5&95 1 5&95 • Document Object Model • ϒϥ΢β಺ͰͷHTMLͷ಺෦දݱ • Ͱ͋Γɺ͔ͭ JavaScript Ͱૢ࡞Ͱ͖Δσʔλߏ଄ var div = document.body. fi rstChild; var p2 = div.childNodes[1]; p2.appendChild(document.createElement("span")); +BWB4DSJQU
    &OHJOF CJOEJOHT
92. Style • DOM Λ࡞ͬͨΒͦΕʹ Style Λ ౰͍ͯͯ͘ • %PDVNFOU )5.- #PEZ %JW 1 5&95 1 5&95 p { color: red } IFMMP
    XPSME 4UZMF
93. Style • ΍Δ͜ͱ͸େ͖͘෼͚ͯ̎ͭ • ηϨΫλϚονϯά • ΧεέʔσΟϯά
94. Style • ηϨΫλ • ελΠϧΛ౰ͯΔࡍͷ௚઀తͳϧʔϧΛهड़ ͯ͠಺༰ΛؚΊͨ΋ͷ p { color: red; } #test { border: red 2px solid; } .foo { background-color: skyblue; }
95. Style • CSS (Cascading Style Sheets) • ηϨΫλΛෳࡶʹࢦఆͰ͖Δ 
 ͪͳΈʹෳࡶͳࢦఆΛ͢Ε͹͢Δ΄Ͳෳࡶͳܭࢉ͕ඞཁͳͷͰ஗͍ɻ • ηϨΫλ͸ඃΔ͜ͱ͕͋Δ • ඃͬͨΒৄࡉ౓Ͱܾ·Δ EJWOPU GPP
    
    QOUIPGUZQF O
    \
    
    
    DPMPS
    SFE
    ^
    Q
    \
    
    
    DPMPS
    CMVF
    ^
96. Style • ηϨΫλϚονϯά • ֤ཁૉͷCSSͷηϨΫλΛҰͭҰͭݟ͍ͯͬͯελΠϧΛ൓ө͢Δ • Πϝʔδͱͯ͠͸ΞϯέʔτೖྗϑΥʔϜʹ͍ۙ • .BSHJO 'POU $PMPS 1BEEJOH ✔ ✔ 255,255,255,0 top: 20px left: ✔family: serif bottom: style: size: top: left: bottom:
97. Style • CSS ৄࡉ౓ (ڧ͍ॱͷྫ) • styleଐੑͰͷࢦఆ • ηϨΫλͷ ID ͷ਺ • ηϨΫλͷଐੑͷ਺ • ηϨΫλͷཁૉ໊ͷ਺
    
    
    
    
    
    
    
    
    
    
    
    
    
    \^
    
    
    B
    C
    D
    E
    
    TQFDJ fi DJUZ
    
       
    
    
    MJ
    
    
    
    
    
    
    
    
    
    
    
    \^
    
    
    B
    C
    D
    E
    
    TQFDJ fi DJUZ
    
       
    
    
    MJ fi STUMJOF
    \^
    
    
    B
    C
    D
    E
    
    TQFDJ fi DJUZ
    
       
    
    
    VM
    MJ
    
    
    
    
    
    
    
    
    \^
    
    
    B
    C
    D
    E
    
    TQFDJ fi DJUZ
    
       
    
    
    VM
    PM MJ
    
    
    
    
    
    \^
    
    
    B
    C
    D
    E
    
    TQFDJ fi DJUZ
    
       
    
    
    I
    
    <SFMVQ>\^
    
    
    B
    C
    D
    E
    
    TQFDJ fi DJUZ
    
       
    
    
    VM
    PM
    MJSFE
    
    \^
    
    
    B
    C
    D
    E
    
    TQFDJ fi DJUZ
    
       
    
    
    MJSFEMFWFM
    
    \^
    
    
    B
    C
    D
    E
    
    TQFDJ fi DJUZ
    
       
    
    
    YZ
    
    
    
    
    
    
    
    
    \^
    
    
    B
    C
    D
    E
    
    TQFDJ fi DJUZ
    
       
    
    
    TUZMF
    
    
    
    
    
    
    
    
    
    
    B
    C
    D
    E
    
    TQFDJ fi DJUZ
    
       
    
    http://taligarsiel.com/Projects/howbrowserswork1.htm#Speci fi ty
98. 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 ✔ ✔ ✔ ✔ ✔ ✔ ✔ ਌͔Β΋Β͑Δͱ͜Ζ͸आΓͯ͘Δ
99. Style EJWOPU GPP
    
    QOUIPGUZQF O
    \
    
    
    DPMPS
    SFE
    ^
    Q
    \
    
    
    DPMPS
    CMVF
    ^ 1BSTF3VMF 4UZMF
    3VMFT 4UZMF
    3VMFT 4UZMF
    3VMFT $44΋ύʔε͠ɺελΠϧͷϧʔϧηοτΛ࡞Δɻ
100. Style %PDVNFOU )5.- #PEZ %JW 1 5&95 1 5&95 4UZMF
     3VMFT 4UZMF
     3VMFT 4UZMF
     3VMFT %PDVNFOU )5.- #PEZ %JW 1 5&95 1 5&95 $PNQVUFE
     4UZMFT $PNQVUFE
     4UZMFT $PNQVUFE
     4UZMFT $PNQVUFE
     4UZMFT $PNQVUFE
     4UZMFT $PNQVUFE
     4UZMFT $PNQVUFE
     4UZMFT $PNQVUFE
     4UZMFT
101. Style %PDVNFOU )5.- #PEZ %JW 1 5&95 1 5&95 4UZMF
     3VMFT 4UZMF
     3VMFT 4UZMF
     3VMFT %PDVNFOU )5.- #PEZ %JW 1 5&95 1 5&95 $PNQVUFE
     4UZMFT $PNQVUFE
     4UZMFT $PNQVUFE
     4UZMFT $PNQVUFE
     4UZMFT $PNQVUFE
     4UZMFT $PNQVUFE
     4UZMFT $PNQVUFE
     4UZMFT $PNQVUFE
     4UZMFT ϧʔϧΛ
     %0.
     ʹద༻ͯ͠
     $PNQVUFE
     4UZMF
     Λ࡞Δ
102. Style %PDVNFOU )5.- #PEZ %JW 1 5&95 1 5&95 $PNQVUFE
     4UZMFT $PNQVUFE
     4UZMFT $PNQVUFE
     4UZMFT $PNQVUFE
     4UZMFT $PNQVUFE
     4UZMFT $PNQVUFE
     4UZMFT $PNQVUFE
     4UZMFT $PNQVUFE
     4UZMFT $PNQVUFE
     4UZMF
     \
     
     
     GPOU8FJHIU
     
     
     
     
     NBSHJO-FGU
     
      

     
     PVUMJOF
     
      

     
     USBOTGPSN
     
     
     
     
     CBDLHSPVOE
     
     
     ^ ϑΥϯτ΍എܠͳͲͷελΠϧ৘ใΛ%0.ʹ෇༩͢Δ
103. Layout • ҰͭҰͭͷཁૉ͸ελΠϧΛ΋͍ͬͯͯ΋ɺͦ Ε͕Ͳ͜ʹ഑ஔ͞ΕΔ͔ɺͲΕ͘Β͍ͷαΠζ ͳͷ͔ɺͱ͍͏৔ॴͷ৘ใ͸͍࣋ͬͯͳ͍ɻ • HTMLͷߏ଄ͱ Style ͷ৘ใΛجʹ৔ॴͱαΠζ Λܭࢉ͢Δॲཧ͕ Layout • ਌͔Β࠶ؼతʹḷͬͯ Layout ॲཧΛߦ͏
104. Layout • ਌͔ΒࢠͲ΋ʹ࠶ؼతʹܭࢉΛ ͍ͯ͘͠ • ࢠͲ΋ͷߴ͞ɾ෯Λܭࢉͨ͠Β ਌͸ࢠͲ΋ͷྦྷੵ͞Εͨߴ͞ɾ ෯ͱࣗ෼ࣗ਎ͷߴ͞ɾ෯ʹϚʔ δϯΛՃ͑ͯߴ͞Λܭࢉ͢Δ %PDVNFOU )5.- #PEZ %JW 1 5&95 1 5&95 ߴ͞ɾ෯ɾҐஔΛܭࢉ
105. Paint • ඳը͢ΔҐஔͱαΠζ͕ܾ·ͬͨޙɺͲͷॱ ൪Ͱඳը͢Δ͔ΛܾΊΔॲཧ • DOMͷॱংͰ͸ͳ͘ɺޙΖ͔ΒલʹͪΌΜͱ ඳը͠ͳ͍ͱࢥͬͨͱ͓ΓʹϨϯμϦϯά͞ Εͳ͍ɻ CBDLHSPVOE fl PBUJOH GPSFHSPVOE PVUMJOF
106. Paint • DOMͷཁૉͷॱ൪Ͱ͸ͳ͘ɺ z-index ౳Λ ࢖ͬͯޙΖͷཁૉͱલͷཁૉΛೖΕସ͑Δ͜ ͱ͕Ͱ͖Δɻ <div class="yellow"></div> <div class="green"></div> <style> .yellow { z-index: 2; ... } .green { z-index: 1; ... } </style>
107. Composite & Render • Ͱ͖͕͋ͬͨ΋ͷΛඞཁͳ෦෼͚ͩඳը͢ΔΑ͏ʹ Ωϟϓνϟʔͯ͠άϥϑΟοΫϥΠϒϥϦʹ౉͢ • Πϝʔδͱͯ͠͸શ෦ܭࢉ͠ऴΘͬͯϨΠΞ΢τ΋ऴ ΘͬͯલܠͱഎܠऴΘͬͨͷͰɺͦΕΛҰຕͷϓϦϯ τ͢ΔࣸਅʹऔΔΈ͍ͨͳΠϝʔδ • (SBQIJD
     *OUFSGBDF
108. ΍ͬͪΌ͍͚ͳ͍͜ͱ • document.write ͱݺ͹ΕΔAPIΛ࢖Θͳ͍ • DOMͷߋ৽ස౓Λଟ͘͠ͳ͍
109. document.writeΛ࢖Θͳ͍ )5.- %0. 4UZMF -BZPVU EPDVNFOUXSJUF EPDVNFOUHFU&MFNFOU#Z*E 
 FMFNUFYU$POUFOU
     
     
110. document.writeΛ࢖Θͳ͍ )5.- %0. 4UZMF -BZPVU EPDVNFOUXSJUF EPDVNFOUHFU&MFNFOU#Z*E 
 FMFNUFYU$POUFOU
     
      EPDVNFOUXSJUF
     ࣗ਎͸௚ײతͰศར͕ͩɺ࣮͸)5.-͔Βࠩ ͠ସ͑ͯ͠·͏ɺͦͷͨΊɺࠓ·Ͱͷ
     %0.
     
     4UZMF
     
     -BZPVU
     ͷྲྀΕ͕΍Γ௚͠ʹͳΔɻ࢖͏΂͖Ͱ͸ͳ͍ɻ
111. DOMͷߋ৽ස౓Λଟ͘͠ͳ͍ const ul = document.createElement("ul"); for (let i=0;i<10000;i++) { // ϧʔϓ಺Ͱຖճ append ͠ͳ͍ɻ let li = document.createElement("li"); li.textContent = "test" + i; ul.appendChild(li); }
112. DOMͷߋ৽ස౓Λଟ͘͠ͳ͍ EPDVNFOU IUNM CPEZ VM BQQFOE GPS
     MFU
     JJJ
     \
     
     
     MFU
     MJ
     
     EPDVNFOUDSFBUF&MFNFOU MJ 
     
     
     MJUFYU$POUFOU
     
     UFTU
     
     J
     
     
     VMBQQFOE$IJME MJ 
     ^
     4UZMF -BZPVU1BJOU MJ 4UZMF -BZPVU1BJOU MJ 4UZMF -BZPVU1BJOU MJ 4UZMF -BZPVU1BJOU MJ ࢠཁૉ͕௥Ճ͞ΕΔ౓ʹStyleॲཧ͕ಈ͘
113. DOMͷߋ৽ස౓Λଟ͘͠ͳ͍ const ul = document.getElementById("foo"); const fr = document.createDocumentFragment(); for (let i =0;i <100000;i++) { let li = document.createElement("li"); i.textContent = `${i}`; // fragment ʹରͯ͠ೖΕ͓ͯ͘ fr.appendChild(li); } ul.appendChild(fr);
114. DOMͷߋ৽ස౓Λଟ͘͠ͳ͍ EPDVNFOU IUNM CPEZ VM BQQFOE MFU
     VM
     
     EPDVNFOUHFU&MFNFOU#Z*E GPP 
     MFU
     GS
     
     EPDVNFOUDSFBUF%PDVNFOU'SBHNFOU 
     GPS
     MFU
     J
     J
     J
     \
     
     
     MFU
     MJ
     
     EPDVNFOUDSFBUF&MFNFOU MJ 
     
     JUFYU$POUFOU
     
     A\J^A
     
     
     GSBQQFOE$IJME MJ 
     ^
     VMBQQFOE$IJME GS 
     Ұ୴ϑϥάϝϯτΛ࡞͔ͬͯΒ·ͱΊͯ ௥ه͢ΔɻҰ౓͚͔ͩ͠Styleॲཧ͸૸Βͳ͍ MJ MJ MJ MJ 4UZMF -BZPVU1BJOU
115. ϨϯμϦϯάΤϯδϯ·ͱΊ • HTML͸ಈతʹߋ৽͞ΕΔϞσϧ • ಈతʹߋ৽͢ΔͨΊʹதؒදݱͱͯ͠ DOM Λ༻ҙ͓ͯ͠Γɺ JavaScript Ͱߋ৽ Ͱ͖Δ • DOMʹม׵ͨ͠ޙɺ Style Λܭࢉ͠ɺͦͷޙͲͷϙδγϣϯʹཁૉΛஔ͔͘ͱ͍ ͏ Layout Λܭࢉ͢Δ • ࠷ޙʹ Paint Ͱલ໘ʹஔ͔͘എ໘ʹஔ͔͘ΛܾΊͯඳը͢Δ • document.write ͸࢖Θͳ͍ • DOMͷߋ৽ස౓Λଟ͘͠ͳ͍
116. JavaScript Τϯδϯ
117. JavaScript Τϯδϯ • JavaScript Λ࣮ߦ͢ΔΤϯδϯ • ࠷ۙͷΤϯδϯ͸େମ Just In Time ίϯύΠϥ͕͍ͭ ͓ͯΓɺ୯ͳΔΠϯλϓϦλͰ͸ͳ͘ɺ౷ܭతʹঢ়گ Λݟͯߴ଎Խ͞ΕΔ • ͜͜Ͱ͸ུ֓Λղઆ͠ɺΤϯδϯͷؾ࣋ͪΛ஌Δɻ • ͪͳΈʹ৘ใ͕ଟ͍ v8 ͷΤϯδϯΛࢀߟʹ͍ͯ͠Δɻ
118. ͬ͘͟Γ֓ཁͱͯ͠ͷಈ͖ GVODUJPO
     TVN B
     C
     \
     
     
     SFUVSO
     B
     
     C
     ^
     TVN 
       ύʔαʔ ΠϯλϓϦλ +*5
     ίϯύΠϥ JavaScript ந৅ߏจ໦    
     &
     YDBBFDBF
     !
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     $SFBUF6ONBQQFE"SHVNFOUT
     
     
     
     
     
     
     
     
     
     YDBBFDBG
     !
     
     
     
     
     
     
     G
     
     
     
     
     
     
     
     
     
     
     
     
     4UBS
     S
     
     4
     YDBBFDC
     !
     
     
     
     
     
     
     G
     
     
     
     
     
     
     
     
     -EB/BNFE1SPQFSUZ
     S
     <>
     <>
     όΠτίʔυ ػցޠ ౷ܭ৘ใ ࠷దԽ ୤࠷దԽ
119. JavaScript Τϯδϯ • JavaScriptͷධՁ • ϝϞϦ؅ཧ • Πϕϯτϧʔϓ
120. JavaScriptͷධՁ • ύʔαʔ • ΠϯλϓϦλ • JITίϯύΠϥ
121. ύʔαʔ GVODUJPO
     TVN B
     C
     \
     
     
     SFUVSO
     B
     
     C
     ^
     TVN 
       <GVODUJPO LFZXPSE >
     <TVN JEFOUJ fi FS >
     <
     QBSFO >
     <B
     JEFOUJ fi FS >
     <C
     JEFOUJ fi FS > UPLFOJ[F "45 <GVODUJPO LFZXPSE >
     <TVN JEFOUJ fi FS >
     <
     QBSFO >
     <B
     JEFOUJ fi FS >
     <C
     JEFOUJ fi FS > 1SPHSBN 'VODUJPO%FDMBSBUJPO *EFOUJ fi FS
     TVN QBSBNT
     *EFOUJ fi FS
     C
     *EFOUJ fi FS
     B
     
122. ύʔαʔ GVODUJPO
     TVN B
     C
     \
     
     
     SFUVSO
     B
     
     C
     ^
     TVN 
       <GVODUJPO LFZXPSE >
     <TVN JEFOUJ fi FS >
     <
     QBSFO >
     <B
     JEFOUJ fi FS >
     <C
     JEFOUJ fi FS > UPLFOJ[F "45 <GVODUJPO LFZXPSE >
     <TVN JEFOUJ fi FS >
     <
     QBSFO >
     <B
     JEFOUJ fi FS >
     <C
     JEFOUJ fi FS > 1SPHSBN 'VODUJPO%FDMBSBUJPO *EFOUJ fi FS
     TVN QBSBNT
     *EFOUJ fi FS
     C
     *EFOUJ fi FS
     B
     +BWB4DSJQU
     ΋͜Ε·Ͱͱಉ༷໦ߏ଄Ͱද͞ΕΔɻ
     "CTUSBDU
     4ZOUBY
     5SFF
     ͱ͍͏ߏ଄ɻ
123. ΠϯλʔϓϦλ 1SPHSBN 'VODUJPO%FDMBSBUJPO *EFOUJ fi FS
     TVN QBSBNT
     *EFOUJ fi FS
     C
     *EFOUJ fi FS
     B
     *OUFSQSFUFS 
     &
     YDBBFDBF
     !
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     $SFBUF6ONBQQFE"SHVNFOUT
     
     
     
     
     
     
     
     
     
     YDBBFDBG
     !
     
     
     
     
     
     
     G
     
     
     
     
     
     
     
     
     
     
     
     
     4UBS
     S
     
     4
     YDBBFDC
     !
     
     
     
     
     
     
     G
     
     
     
     
     
     
     
     
     -EB/BNFE1SPQFSUZ
     S
     <>
     <>
     
     
     
     
     
     
     
     
     
     YDBBFDC
     !
     
     
     
     
     
     
     G
     
     
     
     
     
     
     
     
     
     
     
     
     4UBS
     S
     
     
     
     
     
     
     
     
     
     YDBBFDC
     !
     
     
     
     
     
     C
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     -EB;FSP
     
     &
     YDBBFDC
     !
     
     
     
     
     
     G
     
     
     
     
     
     
     
     
     
     
     5FTU&RVBM4USJDU
     S
     <>
     
     
     
     
     
     
     
     
     
     YDBBFDCC
     !
     
     
     
     
     B
     
     
     
     
     
     
     
     
     
     
     
     
     
     +VNQ*G'BMTF
     <>
     YDBBFDE
     !
     
     
     4
     YDBBFDCE
     !
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     -EB/BNFE1SPQFSUZ
     UIJT
     <>
     <>
     
     
     
     
     
     
     
     
     
     YDBBFDD
     !
     
     
     
     
     
     G
     
     
     
     
     
     
     
     
     
     
     
     
     4UBS
     S
     
     
     
     
     
     
     
     
     
     YDBBFDD
     !
     
     
     
     
     C
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     -EB;FSP
     
     
     
     
     
     
     
     
     
     YDBBFDD
     !
     
     
     
     
     
     G
     
     
     
     
     
     
     
     
     
     
     
     
     4UBS
     S
     
     &
     YDBBFDD
     !
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     -EB/BNFE1SPQFSUZ
     UIJT
     <>
     <>
     
     
     
     
     
     
     
     
     
     YDBBFDDB
     !
     
     
     
     
     
     G
     
     
     
     
     
     
     
     
     
     
     
     
     4UBS
     S
     
     &
     YDBBFDDD
     !
     
     
     
     
     B
     G
     
     G
     G
     
     $BMM1SPQFSUZ
     S
     UIJT
     S
     S
     <>
     
     4
     YDBBFDE
     !
     
     
     
     
     BB
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     3FUVSO
     
     4
     YDBBFDE
     !
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     -EB/BNFE1SPQFSUZ
     UIJT
     <>
     <>
     
     
     
     
     
     
     
     
     
     YDBBFDE
     !
     
     
     
     
     
     GC
     
     
     
     
     
     
     
     
     
     
     
     
     4UBS
     S
     
     4
     YDBBFDE
     !
     
     
     
     
     C
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     -EB;FSP
     
     &
     YDBBFDEB
     !
     
     
     
     
     C
     
     C
     
     
     
     
     
     
     
     
     
     5FTU-FTT5IBO0S&RVBM
     B
     <>
     
     
     
     
     
     
     
     
     
     YDBBFDEE
     !
     
     
     
     
     B
     
     
     
     
     
     
     
     
     
     
     
     
     
     +VNQ*G'BMTF
     <>
     YDBBFDF
     !
     
     
     4
     YDBBFDEG
     !
     
     
     
     
     C
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     -EB;FSP
     
     
     
     
     
     
     
     
     
     YDBBFDF
     !
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     4UBS
     B
     
     
     
     
     
     
     
     
     
     YDBBFDF
     !
     
     
     
     
     C
     
     
     
     
     
     
     
     
     
     
     
     
     
     +VNQ
     <>
     YDBBFDG
     !
     
     
     4
     YDBBFDF
     !
     
     
     
     
     
     GC
     
     
     
     
     
     
     
     
     
     
     
     
     -EBS
     S
     
     &
     YDBBFDF
     !
     
     
     
     
     D
     
     D
     
     
     
     
     
     
     
     
     
     5FTU(SFBUFS5IBO0S&RVBM
     B
     <>
     
     
     
     
     
     
     
     
     
     YDBBFDF
     !
     
     
     
     
     B
     
     
     
     
     
     
     
     
     
     
     
     
     
     +VNQ*G'BMTF
     <>
     YDBBFDFF
     !
     
     "45
     ͔Β
     CZUFDPEF
     ʹ্ͨ͠Ͱ࣮ߦ͢Δɻ 
     3FTVMU
     
124. Just In Time ίϯύΠϥ *OUFSQSFUFS +*5
     $PNQJMFS 
     &
     YDBBFDBF
     !
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     $SFBUF6ONBQQFE"SHVNFOUT
     
     
     
     
     
     
     
     
     
     YDBBFDBG
     !
     
     
     
     
     
     
     G
     
     
     
     
     
     
     
     
     
     
     
     
     4UBS
     S
     
     4
     YDBBFDC
     !
     
     
     
     
     
     
     G
     
     
     
     
     
     
     
     
     -EB/BNFE1SPQFSUZ
     S
     <>
     <>
     
     
     
     
     
     
     
     
     
     YDBBFDC
     !
     
     
     
     
     
     
     G
     
     
     
     
     
     
     
     
     
     
     
     
     4UBS
     S
     
     
     
     
     
     
     
     
     
     YDBBFDC
     !
     
     
     
     
     
     C
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     -EB;FSP
     
     &
     YDBBFDC
     !
     
     
     
     
     
     G
     
     
     
     
     
     
     
     
     
     
     5FTU&RVBM4USJDU
     S
     <>
     
     
     
     
     
     
     
     
     
     YDBBFDCC
     !
     
     
     
     
     B
     
     
     
     
     
     
     
     
     
     
     
     
     
     +VNQ*G'BMTF
     <>
     YDBBFDE
     !
     
     
     4
     YDBBFDCE
     !
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     -EB/BNFE1SPQFSUZ
     UIJT
     <>
     <>
     
     
     
     
     
     
     
     
     
     YDBBFDD
     !
     
     
     
     
     
     G
     
     
     
     
     
     
     
     
     
     
     
     
     4UBS
     S
     
     
     
     
     
     
     
     
     
     YDBBFDD
     !
     
     
     
     
     C
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     -EB;FSP
     
     
     
     
     
     
     
     
     
     YDBBFDD
     !
     
     
     
     
     
     G
     
     
     
     
     
     
     
     
     
     
     
     
     4UBS
     S
     
     &
     YDBBFDD
     !
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     -EB/BNFE1SPQFSUZ
     UIJT
     <>
     <>
     
     
     
     
     
     
     
     
     
     YDBBFDDB
     !
     
     
     
     
     
     G
     
     
     
     
     
     
     
     
     
     
     
     
     4UBS
     S
     
     &
     YDBBFDDD
     !
     
     
     
     
     B
     G
     
     G
     G
     
     $BMM1SPQFSUZ
     S
     UIJT
     S
     S
     <>
     
     4
     YDBBFDE
     !
     
     
     
     
     BB
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     3FUVSO
     
     4
     YDBBFDE
     !
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     -EB/BNFE1SPQFSUZ
     UIJT
     <>
     <>
     
     
     
     
     
     
     
     
     
     YDBBFDE
     !
     
     
     
     
     
     GC
     
     
     
     
     
     
     
     
     
     
     
     
     4UBS
     S
          bytecode Optimized machine code Optimize Deoptimize
125. Just In Time ίϯύΠϥ *OUFSQSFUFS +*5
     $PNQJMFS 
     &
     YDBBFDBF
     !
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     $SFBUF6ONBQQFE"SHVNFOUT
     
     
     
     
     
     
     
     
     
     YDBBFDBG
     !
     
     
     
     
     
     
     G
     
     
     
     
     
     
     
     
     
     
     
     
     4UBS
     S
     
     4
     YDBBFDC
     !
     
     
     
     
     
     
     G
     
     
     
     
     
     
     
     
     -EB/BNFE1SPQFSUZ
     S
     <>
     <>
     
     
     
     
     
     
     
     
     
     YDBBFDC
     !
     
     
     
     
     
     
     G
     
     
     
     
     
     
     
     
     
     
     
     
     4UBS
     S
     
     
     
     
     
     
     
     
     
     YDBBFDC
     !
     
     
     
     
     
     C
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     -EB;FSP
     
     &
     YDBBFDC
     !
     
     
     
     
     
     G
     
     
     
     
     
     
     
     
     
     
     5FTU&RVBM4USJDU
     S
     <>
     
     
     
     
     
     
     
     
     
     YDBBFDCC
     !
     
     
     
     
     B
     
     
     
     
     
     
     
     
     
     
     
     
     
     +VNQ*G'BMTF
     <>
     YDBBFDE
     !
     
     
     4
     YDBBFDCE
     !
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     -EB/BNFE1SPQFSUZ
     UIJT
     <>
     <>
     
     
     
     
     
     
     
     
     
     YDBBFDD
     !
     
     
     
     
     
     G
     
     
     
     
     
     
     
     
     
     
     
     
     4UBS
     S
     
     
     
     
     
     
     
     
     
     YDBBFDD
     !
     
     
     
     
     C
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     -EB;FSP
     
     
     
     
     
     
     
     
     
     YDBBFDD
     !
     
     
     
     
     
     G
     
     
     
     
     
     
     
     
     
     
     
     
     4UBS
     S
     
     &
     YDBBFDD
     !
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     -EB/BNFE1SPQFSUZ
     UIJT
     <>
     <>
     
     
     
     
     
     
     
     
     
     YDBBFDDB
     !
     
     
     
     
     
     G
     
     
     
     
     
     
     
     
     
     
     
     
     4UBS
     S
     
     &
     YDBBFDDD
     !
     
     
     
     
     B
     G
     
     G
     G
     
     $BMM1SPQFSUZ
     S
     UIJT
     S
     S
     <>
     
     4
     YDBBFDE
     !
     
     
     
     
     BB
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     3FUVSO
     
     4
     YDBBFDE
     !
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     -EB/BNFE1SPQFSUZ
     UIJT
     <>
     <>
     
     
     
     
     
     
     
     
     
     YDBBFDE
     !
     
     
     
     
     
     GC
     
     
     
     
     
     
     
     
     
     
     
     
     4UBS
     S
          bytecode Optimized machine code Optimize Deoptimize *OUFSQSFUFS
     ͷ࣮ߦ࣌৘ใΛجʹ
     +*5
     $PNQJMFS
     Ͱ࠷దԽ͢Δ
126. Just In Time ίϯύΠϥ *OUFSQSFUFS +*5
     $PNQJMFS 
     &
     YDBBFDBF
     !
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     $SFBUF6ONBQQFE"SHVNFOUT
     
     
     
     
     
     
     
     
     
     YDBBFDBG
     !
     
     
     
     
     
     
     G
     
     
     
     
     
     
     
     
     
     
     
     
     4UBS
     S
     
     4
     YDBBFDC
     !
     
     
     
     
     
     
     G
     
     
     
     
     
     
     
     
     -EB/BNFE1SPQFSUZ
     S
     <>
     <>
     
     
     
     
     
     
     
     
     
     YDBBFDC
     !
     
     
     
     
     
     
     G
     
     
     
     
     
     
     
     
     
     
     
     
     4UBS
     S
     
     
     
     
     
     
     
     
     
     YDBBFDC
     !
     
     
     
     
     
     C
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     -EB;FSP
     
     &
     YDBBFDC
     !
     
     
     
     
     
     G
     
     
     
     
     
     
     
     
     
     
     5FTU&RVBM4USJDU
     S
     <>
     
     
     
     
     
     
     
     
     
     YDBBFDCC
     !
     
     
     
     
     B
     
     
     
     
     
     
     
     
     
     
     
     
     
     +VNQ*G'BMTF
     <>
     YDBBFDE
     !
     
     
     4
     YDBBFDCE
     !
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     -EB/BNFE1SPQFSUZ
     UIJT
     <>
     <>
     
     
     
     
     
     
     
     
     
     YDBBFDD
     !
     
     
     
     
     
     G
     
     
     
     
     
     
     
     
     
     
     
     
     4UBS
     S
     
     
     
     
     
     
     
     
     
     YDBBFDD
     !
     
     
     
     
     C
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     -EB;FSP
     
     
     
     
     
     
     
     
     
     YDBBFDD
     !
     
     
     
     
     
     G
     
     
     
     
     
     
     
     
     
     
     
     
     4UBS
     S
     
     &
     YDBBFDD
     !
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     -EB/BNFE1SPQFSUZ
     UIJT
     <>
     <>
     
     
     
     
     
     
     
     
     
     YDBBFDDB
     !
     
     
     
     
     
     G
     
     
     
     
     
     
     
     
     
     
     
     
     4UBS
     S
     
     &
     YDBBFDDD
     !
     
     
     
     
     B
     G
     
     G
     G
     
     $BMM1SPQFSUZ
     S
     UIJT
     S
     S
     <>
     
     4
     YDBBFDE
     !
     
     
     
     
     BB
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     3FUVSO
     
     4
     YDBBFDE
     !
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     -EB/BNFE1SPQFSUZ
     UIJT
     <>
     <>
     
     
     
     
     
     
     
     
     
     YDBBFDE
     !
     
     
     
     
     
     GC
     
     
     
     
     
     
     
     
     
     
     
     
     4UBS
     S
          bytecode Optimized machine code Optimize Deoptimize ΋͠΋ਪఆ஋͕֎Ε͍ͯͨΒඇ࠷దԽ͕૸Δɻ
127. Just In Time ίϯύΠϥ GVODUJPO
     TVN B
     C
     \
     
     
     SFUVSO
     B
     
     C
     ^
     
     ਺ࣈΛ଍ؔ͢਺
     TVN 
       Կ౓΋਺ࣈΛ଍͠߹Θ͓͚ͤͯ͹ɺ
     TVN
     ؔ਺ͷ Ҿ਺͸਺ࣈɺಛʹ
     JOUFHFS
     CJU
     Ґ͔͕Θ͔Δ
     ͦ͏͢Ε͹ɺػցޠʹ͢Δ࣌ʹ࠷దԽ͕Ͱ͖Δɻ
128. Just In Time ίϯύΠϥ GVODUJPO
     TVN B
     C
     \
     
     
     SFUVSO
     B
     
     C
     ^
     
     ਺ࣈΛ଍ؔ͢਺
     TVN 
       Կ౓΋਺ࣈΛ଍͠߹Θ͓͚ͤͯ͹ɺ
     TVN
     ؔ਺ͷ Ҿ਺͸਺ࣈɺಛʹ
     JOUFHFS
     CJU
     Ґ͔͕Θ͔Δ
     ͦ͏͢Ε͹ɺػցޠʹ͢Δ࣌ʹ࠷దԽ͕Ͱ͖Δɻ ͜Ε͕
     +VTU
     *O
     5JNF
     ίϯύΠϥͰݴ͏ͱ͜Ζͷ࠷దԽॲཧ
129. Just In Time ίϯύΠϥ GVODUJPO
     TVN B
     C
     \
     
     
     SFUVSO
     B
     
     C
     ^
     
     ਺ࣈΛ଍ؔ͢਺
     TVN 
       Կ౓΋਺ࣈΛ଍͠߹Θ͓͚ͤͯ͹ɺ
     TVN
     ؔ਺ͷ Ҿ਺͸਺ࣈɺಛʹ
     JOUFHFS
     CJU
     Ґ͔͕Θ͔Δ
     ͦ͏͢Ε͹ɺػցޠʹ͢Δ࣌ʹ࠷దԽ͕Ͱ͖Δɻ GVODUJPO
     TVN B
     C
     \
     
     
     SFUVSO
     B
     
     C
     ^
     
     ͍͖ͳΓ͜͜ͰจࣈྻΛ଍͢
     TVN 
       ࠷దԽ͞ΕͨॴͰจࣈྻΛҾ਺ʹ౉ͨ͠ΒͲ͏ͳ Δ͔ʁ
130. Just In Time ίϯύΠϥ GVODUJPO
     TVN B
     C
     \
     
     
     SFUVSO
     B
     
     C
     ^
     
     ਺ࣈΛ଍ؔ͢਺
     TVN 
       Կ౓΋਺ࣈΛ଍͠߹Θ͓͚ͤͯ͹ɺ
     TVN
     ؔ਺ͷ Ҿ਺͸਺ࣈɺಛʹ
     JOUFHFS
     CJU
     Ґ͔͕Θ͔Δ
     ͦ͏͢Ε͹ɺػցޠʹ͢Δ࣌ʹ࠷దԽ͕Ͱ͖Δɻ GVODUJPO
     TVN B
     C
     \
     
     
     SFUVSO
     B
     
     C
     ^
     
     ͍͖ͳΓ͜͜ͰจࣈྻΛ଍͢
     TVN 
       ࠷దԽ͞ΕͨॴͰจࣈྻΛҾ਺ʹ౉ͨ͠ΒͲ͏ͳ Δ͔ʁ CZUFDPEF͔Β΍Γ௚͢͜ͱʹͳΔʢඇ࠷దԽ͕૸Δʣɻ 
 ͔ͤͬ͘+*5Ͱ࠷దԽͨ͠ॲཧ͕ແବʹͳΔɻ
131. 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
132. 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 ֮͑Δඞཁ͸ͳ͍͕ɺॻ࣌͘ʹʮԿΛ͠ͳ͍ํ͕͍͍͔ʯΛ ஌͓͍ͬͯͨ΄͏͕ྑ͍ɻ
133. JavaScript ͷϝϞϦ؅ཧ • جຊతʹԿ͔͠ΒͷΦϒδΣΫτΛ࡞ͬͨΒ ϝϞϦ͕֬อ͞ΕΔ • ϝϞϦʹೖ͍ͬͯΔΦϒδΣΫτ͸͍Βͳ͘ ͳͬͨΒ࡟আ͞ΕΔ • ͦͷಈ͖ʹ͍ͭͯղઆ͢Δ
134. ώʔϓྖҬ Ψϕʔδί ϨΫλ ࢖͍ͬͯͳ͍෺Λ ݟ͚ͭͯճऩ͢Δ JavaScriptΨϕʔδίϨΫγϣ ϯ
135. ϚʔΫΞϯυεΠʔϓ SPPU ✔ ✔ ✔ ✔ ✔ ✔ ✔ ౸ୡෆՄೳ 
 => ճऩՄೳ ౸ୡՄೳ 
 => ੜ͖ͯΔՄೳੑ͕ߴ͍
136. SPPU ຊདྷෆཁ͕ͩ root ͔Β 
 ౸ୡՄೳͳॴʹ͋Δ ϚʔΫΞϯυεΠʔϓ
137. SPPU ຊདྷෆཁ͕ͩ root ͔Β 
 ౸ୡՄೳͳॴʹ͋Δ ϚʔΫΞϯυεΠʔϓ ͜ͷঢ়گ͕ϝϞϦϦʔΫͱݺ͹ΕΔঢ়گ
138. Πϕϯτϧʔϓ • JavaScript ʹ͸ಉظతͳॲཧͱඇಉظతͳॲཧͷ2छྨ ͕ଘࡏ͢Δɻ • ୯७ͳԋࢉͳΒಉظతͳॲཧʹ౰ͨΔ • HTTPϦΫΤετ΍λΠϚʔʹΑΔॲཧ͸ඇಉظతͳॲཧ ʹ౰ͨΔ • ඇಉظతͳॲཧͱಉظతͳॲཧΛ࣮ࠞͥͯߦ͢ΔͨΊͷ ػߏ͕ΠϕϯτϧʔϓͰ͋Δ
139. Πϕϯτϧʔϓɹ
140. Πϕϯτϧʔϓ • ಉظతͳॲཧͷ৔߹
141. Πϕϯτϧʔϓ • ඇಉظతͳॲཧͷ৔߹
142. Πϕϯτϧʔϓ • ඇಉظతͳॲཧͷ৔߹
143. GFUDI FYBNQMFKTPO UIFO
     
     
     SFT
     
     \
     
     
     
     
     DPOTPMFMPH SFT 
     ^  GFUDI 5JNFS
     )551
     6TFS
     *OQVU
     ϚΠΫϩλεΫΩϡʔ ωοτϫʔΫϦΫΤετΛߦ͍ɺ ϨεϙϯεΛ଴ͭ Ϩεϙϯε͕ऴΘͬͨΒϚΠΫϩ λεΫΩϡʔʹੵ·ΕΔ
144. GFUDI FYBNQMFKTPO UIFO
     
     
     SFT
     
     \
     
     
     
     
     DPOTPMFMPH SFT 
     ^  GFUDI 5JNFS
     )551
     6TFS
     *OQVU
     ϚΠΫϩλεΫΩϡʔ 1. ωοτϫʔΫϦΫΤετΛߦ ͍ɺϨεϙϯεΛ଴ͭ 2. Ϩεϙϯε͕ऴΘͬͨΒίʔϧ όοΫΩϡʔʹੵ·ΕΔ ίʔϧόοΫΩϡʔ
145. ελοΫ 5JNFS
     )551
     6TFS
     *OQVU
     ϚΠΫϩλεΫΩϡʔ ίʔϧόοΫΩϡʔ DPOTPMFMPH SFT 3. ίʔϧόοΫΩϡʔ͔Βελο Ϋʹੵ·Εɺ࣮ߦ͞ΕΔ 4. ࣮ߦ͍ͯ͠ΔελοΫ͔ΒϚΠ ΫϩλεΫΩϡʔʹੵ·ΕΔ
146. ωοτϫʔΫ
147. ωοτϫʔΫ • ௨৴Λߦ͍ɺཁٻ͞ΕͨίϯςϯπΛμ΢ϯ ϩʔυͨ͠Γɺ·ͨσʔλΛΞοϓϩʔυ͠ ͨΓ͢Δɻ • HTTP(S)௨৴Λߦ͏ϨΠϠͰɺۙ೥͸ HTTP/3 ͳͲ͕༗ޮʹͳΓͭͭ͋Δɻ
148. ωοτϫʔΫ
149. ωοτϫʔΫ • URLΛೖྗ͔ͯ͠Βϖʔδ͕දࣔ͞ΕΔ·ͰͷྲྀΕ
150. ωοτϫʔΫ • URLΛೖྗ͔ͯ͠Βϖʔδ͕දࣔ͞ΕΔ·ͰͷྲྀΕ
151. HTTP֓ཁ
152. ίϯςϯτ ϔομϑΟʔϧυ τϨʔϥʔϑΟʔϧυ ίϯςϯτ ϔομϑΟʔϧυ τϨʔϥʔϑΟʔϧυ ։࢝ߦ HTTP/1.1 HTTP/2, HTTP/3 HTTP Semantics
153. HTTP Semantics • HTTP ͸جຊతʹϦΫΤετ / ϨεϙϯεͰͷ΍ΓऔΓ͕ߦΘΕΔɻ • HTTP ϦΫΤετʹ͸ϦΫΤετߦͱϔομʔͱݺ͹ΕΔϝλ৘ใͱϘ σΟͱݺ͹ΕΔίϯςϯτ৘ใؚ͕·ΕΔɻ(※ ؆ུԽͷͨΊHTTP/1.1 ͷղઆ) • 1045
     JOEFYIUNM
     )551 
 BDDFQU
     UFYUIUNM
     BDDFQUFODPEJOH
     H[JQ
     EF fl BUF
     CS
     BDDFQUMBOHVBHF
     FO64 FOR KBR 
 DBDIFDPOUSPM
     OPDBDIF
     DPPLJFGPPCBSCB[
     
 GPPCBSIPHFGVHB ϦΫΤετߦ ϦΫΤετϔομʔ ϦΫΤετϘσΟ σʔλ಺༰
154. HTTP Semantics • ϦΫΤετΛड͚औͬͨΒαʔό͸ϨεϙϯεʢԠ౴ʣΛฦ͢ • HTTP Ϩεϙϯεʹ͸εςʔλεΛද͢৘ใͱϨεϙϯεϔομ ʢϝλσʔλʣɺϨεϙϯεϘσΟʢ಺༰ʣؚ͕·ΕΔ )551
     
     0,
     "HF
     
     $BDIF$POUSPM
     NBYBHF
     $POUFOU5ZQF
     UFYUIUNM
     DIBSTFU65'
     %BUF
     .PO
     
     "QS
     
     
     (.5
     $POUFOU-FOHUI
     
     EPDUZQF
     IUNM
     IUNM
     IFBE
      εςʔλεߦ Ϩεϙϯεϔομ ϨεϙϯεϘσΟ
155. HTTP ௨৴Πϝʔδ
156. Method • GET ϦιʔεΛऔಘ͢ΔͨΊͷϝιου • HEAD ϦιʔεͷϝλσʔλͷΈऔಘ͢ΔͨΊͷϝιουɺίϯςϯτ ͸ؚ·ͳ͍ • POST ϦιʔεΛαʔόʹૹ৴͢ΔͨΊͷϝιου • PUT ϦιʔεΛαʔόʹૹ৴͢ΔͨΊͷϝιου • PATCH ϦιʔεΛαʔόʹૹ৴͢ΔͨΊͷϝιου • DELETE ϦιʔεΛαʔό͔Β࡟আ͢ΔͨΊͷϝιου
157. Status • 200ܥ: ੒ޭɺσʔλͷຊମ͕͋Ε͹ૹΔ • 300ܥ: ϦμΠϨΫγϣϯϝοηʔδ • 400ܥ: ΫϥΠΞϯτΤϥʔ • 500ܥ: αʔόΤϥʔ
158. 4FSWFS GET /main.css GET /main.js GET /image0.png σʔλͷ΍ΓऔΓ GET /index.html 200 OK 200 OK 404 Not Found 304 Not Modi fi ed
159. 4FSWFS GET /main.css GET /main.js GET /image0.png σʔλͷ΍ΓऔΓ GET /index.html 200 OK 200 OK 404 Not Found 304 Not Modi fi ed )551্Ͱσʔλͷ΍ΓऔΓ͕ߦΘΕɺͦΕ͕ϨϯμϦϯάϓ ϩηε΍+4Τϯδϯ͕࣮ߦ͞ΕΔϑΣʔζΛܦͯϖʔδ͕ग़Δ
160. ωοτϫʔΫ • ͪΐͬͱ͚ͩTCP/IPͱ͔ͷ࿩Λ͠·͢ɻ
161. TCP/IP • (؆ུԽͷͨΊ) TCP Λϕʔεʹ࿩͢ͱɺ֘౰ͷαʔόʹ͍͖ͳ Γ઀ଓ͢ΔͷͰ͸ͳ͘ɺ3ճͷ઀ଓ֬ೝΛܦͯ઀ଓ͢Δɻ • ͜ͷ઀ଓ֬ೝͷ͜ͱΛ 3 way handshake ͱݺͿɻ ͭͳ͛ΔΑʔ (SYN) ͍͍Αʔ ͬͪ͜΋ͭͳ͛ΔΑʔ(SYN-ACK) ͡Ό͋ͭͳ͙Ͷʔ (ACK)
162. ͡Ό͋ࢲͷ伴ͱ߹Θͤͯ͜ΕͰ࿩͠·͠ΐ͏ɻ 
 (Client Certi fi cate) TLS • HTTP ͳΒ͜ΕͰܨ͕Δ͕ɺ࠷ۙͷେମͷWebαʔό͸ HTTPS ͳ ͷͰɺ͜Ε͚ͩͰ͸ܨ͕Βͳ͍ɻ҉߸ԽͷͨΊͷ΍ΓऔΓ͕ߋʹ ߦΘΕΔɻ(※؆ུԽ͍ͯ͠ΔͨΊɺਖ਼֬Ͱ͸ͳ͍) ΑΖ͓͘͠ئ͍͍ͨ͠·͢ɻ(Client Hello) ͪ͜Βͦ͜ΑΖ͓͘͠Ͷ͕͍͠·͢ɻ (Server Hello) Θͨ͠͸͜͏͍͏΋ͷͰ͢ɻ (Server Certi fi cate) ͜͏͍͏伴Ͱ࿩ͤ·͢ (Server Key Exchange) Θͨ͠͸͜͏͍͏΋ͷͰ͢ɻ(Client Certi fi cate)
163. ͡Ό͋ࢲͷ伴ͱ߹Θͤͯ͜ΕͰ࿩͠·͠ΐ͏ɻ 
 (Client Certi fi cate) TLS • HTTP ͳΒ͜ΕͰܨ͕Δ͕ɺ࠷ۙͷେମͷWebαʔό͸ HTTPS ͳ ͷͰɺ͜Ε͚ͩͰ͸ܨ͕Βͳ͍ɻ҉߸ԽͷͨΊͷ΍ΓऔΓ͕ߋʹ ߦΘΕΔɻ(※؆ུԽ͍ͯ͠ΔͨΊɺਖ਼֬Ͱ͸ͳ͍) ΑΖ͓͘͠ئ͍͍ͨ͠·͢ɻ(Client Hello) ͪ͜Βͦ͜ΑΖ͓͘͠Ͷ͕͍͠·͢ɻ (Server Hello) Θͨ͠͸͜͏͍͏΋ͷͰ͢ɻ (Server Certi fi cate) ͜͏͍͏伴Ͱ࿩ͤ·͢ (Server Key Exchange) Θͨ͠͸͜͏͍͏΋ͷͰ͢ɻ(Client Certi fi cate) )5514
     ௨৴͸
     5$1
     ͷ΍ΓऔΓͷޙͰ҉߸ԽͷͨΊͷऔΓܾ ΊΛ͢Δεςοϓ͕͋ΔɻͦΕΛܦͯ઀ଓ͞ΕΔɻ
164. HTTP௨৴ํࣜ • HTTP/1.1 • HTTP/2 • HTTP/3
165. HTTP/1.1 • Ұճ઀ଓͨ͠ TCP ઀ଓΛ࢖͍ଓ͚Δ Keep-Alive ػೳ͕σϑΥϧτ ͰඋΘ͍ͬͯΔɻ • ͜ͷଞʹ΋ Pipelining ͳͲ΋ଘࡏ͢Δ͕͜͜Ͱͷղઆ͸ׂѪ͢Δɻ • ͜͜Ͱॏཁͳͷ͸ɺ HTTP/1.0 Ͱ͸Ұ୴ϦΫΤετͱϨεϙϯε͕ ऴྃͨ͠ΒɺͦΕʹ൐ͬͯ TCP ͷ઀ଓ΋ऴྃ͢Δͱ͍͏ಈ͖Λͯ͠ ͍ͨॴ͕ɺϦΫΤετͱϨεϙϯε͕ऴྃͨ͠ͱͯ͠΋઀ଓΛҡ࣋ ͢ΔΑ͏ʹվળ͞Ε͍ͯΔɻ • ͜ͷͨΊɺTCP/IPͷ઀ଓίετ͕Լ͕ͬͯΔɻ
166. HTTP/1.1 HTTP/1.0 HTTP/1.1
167. 4FSWFS ͪͳΈʹ
     )551
     
     ͷ৔߹ɺΫϥΠΞϯτ͔ Βαʔόʹ͸࠷େ઀ଓ·Ͱ͔͠ૹΕͳ͍ɻ HTTP/1.1ͷฐ֐
168. 4FSWFS ҰݸͰ΋஗͍ͱղܾ͞ΕΔ·Ͱ͔ͭ͠࢖͑ͳ͍ HTTP/1.1ͷฐ֐
169. 4FSWFS )551
     ͩͱͭͷίωΫγϣϯ ͷதͰଟॏԽͯ͠ૹΔɻ HTTP/2
170. 4FSWFS )551
     ͩͱͭͷίωΫγϣϯ ͷதͰଟॏԽͯ͠ૹΔɻ HTTP/2 ͖ͬ͞ͷ
     5$1
     )BOETIBLF
     d
     5-4
     ઀ଓཱ֬·Ͱ͕ 
 Ұճ͚ͩʹͳΔɻޮ཰తɻ
171. σʔλͷ΍ΓऔΓ: HTTP/3 • HTTP/2 Ͱ઀ଓίετͷ௿ݮ͕Ͱ͖͕ͨ໰୊΋͋Δɻ • ωοτϫʔΫ઀ଓ͕ෆ҆ఆͳ৔߹ TCP ઀ଓʹΑΓɺ͢΂ͯͷίωΫ γϣϯ͕ղܾ·Ͱʹ଴ͨ͞ΕΔέʔε͕༗Δɻཁ͸ύέϩεʹऑ͍ɻ • 4FSWFS 5$1ͷϨΠϠͰෆ੔߹͕͋Δͱෆ੔߹͕గਖ਼͞Ε Δ·Ͱશମ͕ϒϩοΫ͞ΕΔɻ
172. TCP͓͞Β͍ • TCP ͸৴པੑ͕ߴ͍ϓϩτίϧ • ύέϩε࣌ͷ࠶ૹ੍ޚ΍ॱং౸ୡ੍ޚͳͲɺసૹ࣌ͷ໰୊Λղ ܾͯ͘͠ΕΔɻ 4FSWFS 
     ) 
     & 
     - 
     "DL 
     & "DL͕དྷ ͳ͍
     ࠶ૹ͢Δ 
     "DL ͕དྷ͚ͨͲͦΕ ·Ͱड৴ͨ͠΋ͷ ͸ഁغ͢ΔͶɻ 
     - ͔Β΋ ͏Ұ౓࠶
173. HTTP/3 • UDP ্ʹϓϩτίϧΛ࡞͍ͬͯΔ • TCPͷޡΓగਖ਼ͳͲͷ࢓૊ΈΛࣗ෼ͨͪͷϨΠϠ্Ͱ࠶࣮૷ 4FSWFS 
     ) 
     & 
     - ͕དྷͯͳ͍Α ̐
     &
     ඞཁͳ ΋ͷͷΈ ࠶ૹ Λ࢒ͨ͠· ·͕དྷͨ͜ ͱʹ͢Δ
174. σʔλͷ΍ΓऔΓ: HTTP/3 • HTTP/3 Ͱ͸͜ͷ࢓૊ΈʹΑΓɺ઀ଓ಺Ͱͷσʔλෆ੔߹͕ ൃੜͯ͠΋શମΛετοϓͤͣ͞ʹ֘౰ͷετϦʔϜͷΈగ ਖ਼ͤ͞Δɻ • 4FSWFS Ұ෦ͷετϦʔϜ͕ࢭ·ͬͯ΋શମʹӨڹ͕ग़ͳ ͍࢓૊Έ
175. HTTP/3 ʹ͍ͭͯ • ผࢴࢀর
176. σʔλετϨʔδ
177. σʔλετϨʔδ • Ϩεϙϯεͷ৘ใ(Cache)΍Ϣʔβʔͷ৘ใ (Cookie, Localstorage etc)ΛϋʔυσΟεΫʹ ஝ੵ͓ͯ͘͠৔ॴ • σʔλετϨʔδʹσʔλΛஔ͍͓ͯ͘͜ͱ ͰσʔλΛӬଓԽͨ͠Γɺ Cache ʹΑΔ࠷ద ԽΛߦ͏͜ͱ͕Ͱ͖Δ
178. Cache Storage • ϨεϙϯεΛΩϟογϡ͢Δ࢓૊Έ 4FSWFS GET /main.css GET /main.js GET /image0.png GET /index.html 200 OK 200 OK 404 Not Found 304 Not Modi fi ed Ұճμ΢ϯϩʔυͨ͠ϑΝΠϧ͸ωοτϫʔΫ͔ΒಡΈࠐΈͨ ͘ͳ͍ɻ࠶ར༻͍ͨ͠ɻ
179. Cache Storage • αʔόଆ͕ HTTP ϨεϙϯεϔομʹΩϟογϡͱ͠ ͯอଘͯ͠ྑ͍͔Ͳ͏͔/Ωϟογϡ༗ޮظؒΛࣔͤ͹ Ωϟογϡ͕༗ޮʹͳΔɻ • Cache-Control / ETag ͱ͍ͬͨΩϟογϡ༻ͷϔομ Λ׆༻͢Δɻ $BDIF$POUSPM
     NBYBHF
     
     
     ඵؒɺ
     ΫϥΠΞϯτͷ
     $BDIF
     ͱ ͯ͠༗ޮ
     &UBH
      JEFOU
     
     σʔλͷࣝผՄೳͳ஋ɺ&UBH஋͕มΘͬͯ ͍ͳ͍͔Ͳ͏͔Λαʔόʹ໰͍߹ΘͤͯมΘ͍ͬͯͳ͔ͬͨΒΩϟογϡ͕ ࢖ΘΕΔɻมΘ͍ͬͯͨΒ࠶μ΢ϯϩʔυ
     
180. Cookie Storage • ΫϥΠΞϯτ಺ͷσʔλͱͯ͠อଘ͞Εɺϒϥ΢β͔Β αʔόʹຖճϦΫΤετ͕ૹ৴͞ΕΔɻ • ओʹҎԼͷΑ͏ͳ༻్Ͱ࢖ΘΕΔɻ • ηογϣϯ؅ཧʢϩάΠϯɺγϣοϐϯάΧʔτͳͲʣ • ύʔιφϥΠζʢϢʔβઃఆɺςʔϚͳͲʣ • τϥοΩϯάʢϢʔβʔͷߦಈه࿥෼ੳʣ
181. Cookie Storage • Ϩεϙϯεϔομʹ Set-Cookie ͔Β࢝·ΔσʔλΛೖ ΕΔ͜ͱͰอଘͤ͞Δ͜ͱ͕Ͱ͖Δɻ • ࣍ճҎ߱ͷϦΫΤετͰͦͷ Cookie ͕αʔόʹૹΒ ΕΔɻ 4FSWFS Set-Cookie: id=1; Cookie: id=1;
182. Cookie Storage • Cookie Λ࢖ͬͯྫ͑͹ϩάΠϯ੒ޭ࣌ʹηογϣϯID Λ෇༩͢Δɻ • ࣍ճҎ߱͸ηογϣϯID͕༗ޮ͔Ͳ͏͔Λ֬ೝ͢Ε͹ ϩάΠϯ͍ͯ͠Δ͔Ͳ͏͔ΛαʔόଆͰ൑ผͰ͖Δɻ • ͦͷࡍʹ Expires ΍ MaxAge ଐੑΛ࢖͑͹͍ͭ·Ͱอ ࣋ͤ͞Δ͔΋ࢦఆͰ͖Δɻ
183. 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
184. 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
     Λ࡞Δ·ͰͷྲྀΕ
185. Web Storages • Session/Local storage • IndexedDB
186. Session Storage • গྔͷσʔλΛλϒ͕ੜ͖͍ͯΔ͚ؒͩอଘ ͍ͨ͠ͱ͍͏έʔε
187. Local Storage • গྔͷσʔλΛλϒΛ·͍ͨͰͰ͖Δ͚ͩ௕ ͘อଘ͍ͨ͠
188. IndexedDB • ଟྔͷσʔλΛอଘ͍ͨ͠৔߹
189. ֤ετϨʔδͷಛ௃ Cookie local storage session storage Indexed DB σʔλͷӾཡ ൣғ ϒϥ΢βͷλ ϒؒͰڞ௨ ϒϥ΢βͷλ ϒؒͰڞ௨ λϒ಺ͷΈ ϒϥ΢βͷλ ϒؒͰڞ௨ ΞΫηε੍ݶ Path ΍ Domain ͰҰ ಉҰੜ੒ݩϙ Ϧγʔ ಉҰੜ੒ݩϙ Ϧγʔ ಉҰੜ੒ݩϙ Ϧγʔ αʔόͷϦΫ Τετ࣌ʹࣗ ૹ৴͞ΕΔ ૹ৴͞Εͳ͍ ૹ৴͞Εͳ͍ ૹ৴͞Εͳ͍ JavaScript͔ ΒͷΞΫηε httpOnly Ͱ੍ ݶՄೳ ຖճΞΫηε Մೳ ຖճΞΫηε Մೳ ຖճΞΫηε Մೳ σʔλͷੜଘ ظؒ max-age, expires Ͱ੍ݶ Մೳ ແ੍ݶ λϒΛด͡Δ ·Ͱ ແ੍ݶ σʔλͷ༰ྔ 4KB 5MB 5MB جຊແ੍ݶ(ϒ ϥ΢β࣍ୈ)
190. ޙ൒ Agenda • ϋϯζΦϯ • ϩάΠϯϑΥʔϜΛ࡞ͬͯΈΑ͏ • ·ͱΊ
191. ϋϯζΦϯ
192. ϋϯζΦϯ • ࠓ·Ͱڭ͑ͨ͜ͱΛΞϓϦΛ࡞Γͳ͕ΒৼΓฦΔɻ • ωοτϫʔΫͷ΍ΓऔΓ • σʔλετϨʔδʹ͍ͭͯ • JavaScript Τϯδϯʹ͍ͭͯ • Ͳ͏΍ͬͯϨϯμϦϯά͞ΕͯΔ͔
193. αʔόΛ࡞Δ • Ұ୴͔͜͜ΒϋϯζΦϯΛ։࢝͠·͢ɻ • Node.js ͕ඞཁͳͷͰೖΕ͓͍͍ͯͯͩ͘͞ɻ • HTML Λ഑৴Ͱ͖ΔΑ͏ʹͳΔ·Ͱ͸࡞͓ͬͯ ͍ͨͷͰɺ clone ࣮ͯ͠ߦ͍ͯͩ͘͠͞ɻ • 
     HJU
     DMPOF
     IUUQTHJUIVCDPNSFDSVJUUFDICSPXTFSIBOETPOHJU
     
     DE
     CSPXTFSIBOETPO
     
     OQN
     JOTUBMM
     
     OPEF
     BQQNKT
     
     PQFO
     IUUQMPDBMIPTU
194. ࣮ࡍͷϦΫΤετ/ϨεϙϯεΛ ோΊΔ • ಈ͍ͨΒ࣮ࡍͷϦΫΤετ/ϨεϙϯεΛோΊ ͯΈ·͠ΐ͏ɻ • Chrome Ͱ։ൃπʔϧ(⌘ + Shift + I)Λ։͖ɺ ωοτϫʔΫλϒʹભҠ͠ɺϦΫΤετɾϨ εϙϯεΛݟͯΈ·͢ɻ
195. ωοτϫʔΫͷ΍ΓऔΓ • ͔ͤͬ͘ͳͷͰ https ʹͯ͠Έ·͠ΐ͏ɻ • લॲཧͱͯ͠CAͱূ໌ॻΛ࡞Γɺແཧ໼ཧ trust ͓͖ͤͯ͞·͢ɻ 
     OQN
     FYFD
     NLDFSU
     DSFBUFDB
     
     OQN
     FYFD
     NLDFSU
     DSFBUFDFSU
     
     TVEP
     TFDVSJUZ
     BEEUSVTUFEDFSU
     E
     S
     USVTU3PPU
     L
     -JCSBSZ ,FZDIBJOT4ZTUFNLFZDIBJO
     DBDSU
196. ωοτϫʔΫͷ΍ΓऔΓ • Node.js ଆ΋ https ʹରԠͤͯ͞Έ·͠ΐ͏ɻ • ઌఔ࡞ͬͨ cert ϑΝΠϧΛಡΊ͹ྑ͍Ͱ͢ɻ 
     BQQNKT
     JNQPSU
     \
     SFBE'JMF4ZOD
     ^
     GSPN
     GT
     
     ௥ه
     JNQPSU
     \
     DSFBUF4FSWFS
     ^
     GSPN
     IUUQT
     
     IUUQ
     ͔Β
     IUUQT
     ʹมߋ
     DPOTU
     SFRT
     
     PO
     
     
     DSFBUF4FSWFS \
     
     
     
     
     LFZ
     SFBE'JMF4ZOD DFSULFZ
     
     ௥ه
     
     
     
     
     DFSU
     SFBE'JMF4ZOD DFSUDSU
     
     ௥ه
     
     
     ^ MJTUFO QPSU
     
     
197. ωοτϫʔΫͷ΍ΓऔΓ • खͬऔΓૣ͘ curl ͰΞΫηεͯ͠த਎Λݟͯ Έ·͠ΐ͏ɻ 
     
     DVSM
     J
     WWW
     IUUQTMPDBMIPTUMPHJO
     
     $POOFDUFE
     UP
     MPDBMIPTU
     
     QPSU
     
     
     
     TVDDFTTGVMMZ
     TFU
     DFSUJ fi DBUF
     WFSJGZ
     MPDBUJPOT
     
     5-4W
     065
     5-4
     IBOETIBLF
     $MJFOU
     IFMMP
      
     
     5-4W
     */
     5-4
     IBOETIBLF
     4FSWFS
     IFMMP
      
     
     5-4W
     */
     5-4
     IBOETIBLF
     $FSUJ fi DBUF
      
     
     5-4W
     */
     5-4
     IBOETIBLF
     4FSWFS
     LFZ
     FYDIBOHF
      
     
     5-4W
     */
     5-4
     IBOETIBLF
     4FSWFS
     fi OJTIFE
      
     
198. ωοτϫʔΫͷ΍ΓऔΓ • ࣍ʹ http2 ʹͯ͠Έ·͠ΐ͏ɻ • http2 ͷ createSecureServer Λ࢖ͬͯ http2 αʔόΛཱͯͯΈ·͠ΐ͏ɻ • Chrome ͷ։ൃऀπʔϧͰ http2 ʹͳ͍ͬͯ Ε͹੒ޭͰ͢ɻ
199. σʔλετϨʔδΛࢼ͢ • CSS΍JSΛ Cache-Control Λ࢖ͬͯΩϟο γϡʹೖΕͯΈ·͠ΐ͏ɻ • ։ൃπʔϧͰ (Cached) ͳϨεϙϯε͕ؼͬͯ ͖͍ͯͨΒ੒ޭͰ͢ɻ
200. σʔλετϨʔδΛࢼ͢ • ϩάΠϯΛ੒ޭͤͯ͞Έ·͠ΐ͏ɻ • id/password ΛνΣοΫ͠ɺ߹க͍ͯͨ͠Β੒ޭϨεϙϯ ε (302, Location: "/") ͱڞʹ Set-Cookie ͰΫοΩʔʹηο γϣϯIDΛೖΕͯΈ·͠ΐ͏ʢηογϣϯID͸ԿͰ΋ Մʣɻ • ϩάΠϯηογϣϯ͕ϦμΠϨΫτ͞Εɺ `Login Success!` ͕දࣔ͞Ε͍ͯͨΒ੒ޭͰ͢ɻ
201. JavaScript Τϯδϯʹ͍ͭͯ • ͪͳΈʹࠓͷ script.js ͸׶͑ͯಈ͔ͳ͍Α͏ʹͳͬ ͯ·͢ɻ • ಈ͘Α͏ʹͯ͠Έ͍ͯͩ͘͞ɻͳΜͰಈ͔ͳ͍͔Λ ࢦఠͰ͖ͨΒՃ఺ɻ • DOMΛૢ࡞͠ͳ͕ΒύεϫʔυͷϚεΫΛ֎ͯ͠ɺ දࣔ͢ΔϘλϯͷಈ࡞Λ֬ೝͯ͠Έ͍ͯͩ͘͞ɻ
202. JavaScript Τϯδϯʹ͍ͭͯ • ΋͠Ͱ͖ͨΒಈతʹύεϫʔυೖྗΛνΣο Ϋͤͯ͞Έ͍ͯͩ͘͞ɻ • ೖྗʹԠͯ͡಺༰ΛνΣοΫ͠ɺத਎͕ظ଴ ͢Δ΋ͷ͡Όͳ͔ͬͨΒૹΕͳ͍Α͏ʹͯ͠ Έ͍ͯͩ͘͞ɻ
203. Ͳ͏΍ͬͯϨϯμϦϯά͞Εͯ Δ͔ • ࠷ޙʹ Login Success ͷը໘͕ऐ͍͠ͷͰ HTML Ͱࣗ༝ʹϚʔ ΫΞοϓ͍ͯͩ͘͠͞ɻ • ը૾ΛೖΕͨΓɺಈըͱ͔ೖΕͯΈͨΓ͢Δͷ͕ྑ͍Ͱ͠ΐ ͏ɻ • CSS ͷ z-index Λม͑ͯΈͯલܠͱഎܠΛม͑ͯΈ͍ͯͩ͘͞ɻ • ਌ͷཁૉ͕ࢠͲ΋ͷཁૉʹΑͬͯߴ͕͞มΘͬͨΓ͢Δ͜ͱΛ Chrome ͷ։ൃπʔϧͰ͔֬ΊͯΈ·͠ΐ͏ɻ
204. ·ͱΊ
205. લ൒ • ϒϥ΢βͷػೳ • ϒϥ΢βͷߏ଄ • ϨϯμϦϯάͷ࢓૊Έ • JavaScript Τϯδϯͷ࢓૊Έ • ωοτϫʔΫͷ࢓૊Έ • σʔλετϨʔδͷ࢓૊Έ
206. ޙ൒ • ϋϯζΦϯͰࠓ·Ͱशͬͨ΍ͭΛٯ޲͖ʹҰؾʹ ۦ͚ൈ͚ͯ΋Βͬͨɻ • ωοτϫʔΫ • σʔλετϨʔδ • JavaScript • ϨϯμϦϯά
207. ϒϥ΢βͷத਎ͱ࢓૊ΈΛΘ্͔ͬͨ ͰϋϯζΦϯͰҰؾʹಈ͘΋ͷΛࢼ͢ • ಄ͷதʹϒϥ΢βͷϚοϓΛ΋ͬͨঢ়ଶͰϋϯζΦϯΛ΍ͬ ͯ΋Β͍·ͨ͠ɻ • ͢΂ͯͰ͖ͳ͔ͬͨਓ΋͍Δͱࢥ͏ͷͰɺͦͷํ͸॓୊ͱ͠ ͯ࢒͓͖ͯ͠·͢ɻ • ΞϓϦέʔγϣϯΛ࡞Δ͜ͱ͕Ұ൪ษڧʹͳΔͷͰ͓͢͢Ί ͠·͢ɻ • ಄ͷதʹϚοϓΛ࡞ΓɺΞϓϦέʔγϣϯΛ࡞ΓɺͦΕΛߋ ৽͢Δͱ͍͏αΠΫϧΛճ͍͖ͯ͠·͠ΐ͏ɻ