ブラウザ / Browser

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

Transcript

1. Browser 2021/04/06 @ Recruit
2. Twitter: @yosuke_furukawa Github: yosuke-furukawa
3. Browser • ஌ͬͯΔΑ͏Ͱ஌Βͳ͍ • ΢ΣϒΞϓϦέʔγϣϯΛ࡞Δ࣌ʹඞͣ࢖͏ ΋ͷͷɺத਎͕Ͳ͏ͳͬͯΔ͔Λઆ໌ͯ͘͠ ͍ͩ͞ͱݴΘΕΔͱͲ͏ͨ͠Β͍͍͔Θ͔Β ͳ͍΋ͷ • ࠓճ͸ͦΜͳϒϥ΢βʹ৮ΕΑ͏ͱࢥ͍·͢
4. Browse + er ோΊΔ΋ͷ
5. ຊߨٛͷͶΒ͍ • օ͞Μʹϒϥ΢βͷத਎Λೝࣝͯ͠΋Β͍ɺ಄ͷதʹ ϚοϓΛ࡞ͬͯ΋Β͏ɻ • ϒϥ΢βͷ஍ਤΛ࡞্ͬͨͰ͜ͷ͋ͱͷߨٛʢύ ϑΥʔϚϯεɺηΩϡϦςΟɺJavaScript/ TypeScriptʣΛड͚ͯ΋Β͏͜ͱͰཧղ౓ΛਂΊΔɻ • HTTP/HTMLͳͲͷجૅతͳ෦෼͸ޙ൒ϋϯζΦϯͰ ;ΕΔɻ
6. લ൒ Agenda • ϒϥ΢βͷػೳ • ϒϥ΢βͷ࢓૊Έ • ϨϯμϦϯάΤϯδϯ • JavaScript Τϯδϯ • ωοτϫʔΫ • σʔλετϨʔδ
7. ϒϥ΢βͷػೳ
8. ϒϥ΢βͷػೳ 🔒
   IUUQTFYBNQMFDPN
9. ϒϥ΢βͷػೳ 🔒
   IUUQTFYBNQMFDPN ໭Δ ਐΉ Ϧϩʔυɾதࢭ ΞυϨεόʔ
10. ϒϥ΢βͷػೳ • ΞυϨεόʔʹ͍Εͨ URL Λجʹϖʔδ͕ϨϯμϦϯά͞ΕΔ • ϦϯΫΛΫϦοΫ͢ΔͳͲͷΞΫγϣϯ͕͋Δͱ URL ͕มԽ ͠ɺཤྺʹͨ·Δ • ໭ΔϘλϯΛԡ͢ͱཤྺΛ໭ΕΔ • ਐΉϘλϯΛԡ͢ͱཤྺΛਐΊΒΕΔ • ϦϩʔυϘλϯΛԡ͢ͱ࠶౓ URL Λߋ৽͢Δ *NBHF
11. ϒϥ΢βͷػೳ • ϒϥ΢βͷجຊػೳΛյ͢Α͏ͳΞϓϦέʔγϣϯ͸ମݧ͕ѱ ͍ɻ • ໭ͬͨ࣌ʹ΋ͱ΋ͱ͍ͨεΫϩʔϧҐஔ͡Όͳ͍৔ॴʹ໭͞Ε ͨΒɾɾɾɾʁ • εΫϩʔϧ͢ΔࡍʹΨλΨλͯ͠εϜʔεͳૢ࡞͕ग़དྷͳ͔ͬ ͨΒɾɾʁ • Enter ΩʔͰૹ৴Ͱ͖ͳ͍ϑΥʔϜΛ࡞ͬͯ͠·ͬͨ Βɾɾɾʁ
12. ϒϥ΢βͷػೳ • ϒϥ΢βͷجຊػೳΛյ͢Α͏ͳΞϓϦέʔγϣϯ͸ମݧ͕ѱ ͍ɻ • ໭ͬͨ࣌ʹ΋ͱ΋ͱ͍ͨεΫϩʔϧҐஔ͡Όͳ͍৔ॴʹ໭͞Ε ͨΒɾɾɾɾʁ • εΫϩʔϧ͢ΔࡍʹΨλΨλͯ͠εϜʔεͳૢ࡞͕ग़དྷͳ͔ͬ ͨΒɾɾʁ • Enter ΩʔͰૹ৴Ͱ͖ͳ͍ϑΥʔϜΛ࡞ͬͯ͠·ͬͨ Βɾɾɾʁ શ෦ѱ͍ϢʔβʔΤΫεϖϦΤϯε
13. ϒϥ΢βͷػೳ • େݪଇ: ΢ΣϒΞϓϦέʔγϣϯ͸ϒϥ΢βͷػೳΛ յͯ͠͸͍͚ͳ͍ɻ • յ͢ͱମݧ͕ѱ͍͚ͩ͡Όͳ͍ɻ • ΞΫηγϏϦςΟ΋ѱ͘ͳΔɻ • ηΩϡϦςΟͱ͔ͷอޢػߏ΋ಇ͔ͳ͘ͳΔ͔΋ɻ
14. ϒϥ΢βͷػೳ • େݪଇ: ΢ΣϒΞϓϦέʔγϣϯ͸ϒϥ΢βͷػೳΛ յͯ͠͸͍͚ͳ͍ɻ • յ͢ͱମݧ͕ѱ͍͚ͩ͡Όͳ͍ɻ • ΞΫηγϏϦςΟ΋ѱ͘ͳΔɻ • ηΩϡϦςΟͱ͔ͷอޢػߏ΋ಇ͔ͳ͘ͳΔ͔΋ɻ ͲΜͳʹྑ͍ΞϓϦͰ͋ͬͯ΋
    ϒϥ΢βͷػೳΛյ͢Α͏ͳΞϓϦ͸࢖ΘΕͳ͘ͳΔ
15. ϒϥ΢βͷ࢓૊Έ
16. ϒϥ΢βͷߏ଄ 6TFS
    *OUFSGBDF #SPXTFS
    &OHJOF 3FOEFSJOH
    &OHJOF /FUXPSL +BWB4DSJQU
    &OHJOF 6*
    #BDLFOE %BUB
    4UPSBHF http://taligarsiel.com/Projects/howbrowserswork1.htm
17. ϒϥ΢βͷߏ଄ 6TFS
    *OUFSGBDF #SPXTFS
    &OHJOF 3FOEFSJOH
    &OHJOF /FUXPSL +BWB4DSJQU
    &OHJOF 6*
    #BDLFOE %BUB
    4UPSBHF http://taligarsiel.com/Projects/howbrowserswork1.htm ϒϥ΢βͷΠϯλϑΣʔε
    ΞυϨεόʔͱ͔໭ΔϘλϯͱ͔
18. ϒϥ΢βͷߏ଄ 6TFS
    *OUFSGBDF #SPXTFS
    &OHJOF 3FOEFSJOH
    &OHJOF /FUXPSL +BWB4DSJQU
    &OHJOF 6*
    #BDLFOE %BUB
    4UPSBHF http://taligarsiel.com/Projects/howbrowserswork1.htm ϨϯμϦϯάΤϯδϯΛૢ࡞͢Δϒϥ΢ βͷ֩ɺσʔλ૚ͱௐఀ͢Δ
19. ϒϥ΢βͷߏ଄ 6TFS
    *OUFSGBDF #SPXTFS
    &OHJOF 3FOEFSJOH
    &OHJOF /FUXPSL +BWB4DSJQU
    &OHJOF 6*
    #BDLFOE %BUB
    4UPSBHF http://taligarsiel.com/Projects/howbrowserswork1.htm ίϯςϯπͷඳըΛߦ͏ɻίϯςϯπ͕ )5.-ͳΒϖʔδΛύʔεͯ͠ϩʔυ͢Δ
20. ϒϥ΢βͷߏ଄ 6TFS
    *OUFSGBDF #SPXTFS
    &OHJOF 3FOEFSJOH
    &OHJOF /FUXPSL +BWB4DSJQU
    &OHJOF 6*
    #BDLFOE %BUB
    4UPSBHF http://taligarsiel.com/Projects/howbrowserswork1.htm ωοτϫʔΫ૚ɺ)551ϦΫΤετͨ͠ Γɺ)5514ͰϦΫΤετͨ͠Γ
21. ϒϥ΢βͷߏ଄ 6TFS
    *OUFSGBDF #SPXTFS
    &OHJOF 3FOEFSJOH
    &OHJOF /FUXPSL +BWB4DSJQU
    &OHJOF 6*
    #BDLFOE %BUB
    4UPSBHF http://taligarsiel.com/Projects/howbrowserswork1.htm +BWB4DSJQU
    ࣮ߦΤϯδϯ
    W
    ͱ͔
    4QJEFS.POLFZ
    ͱ͔
    +4$
    ͱ͔
22. ϒϥ΢βͷߏ଄ 6TFS
    *OUFSGBDF #SPXTFS
    &OHJOF 3FOEFSJOH
    &OHJOF /FUXPSL +BWB4DSJQU
    &OHJOF 6*
    #BDLFOE %BUB
    4UPSBHF http://taligarsiel.com/Projects/howbrowserswork1.htm JOQVUͷ6*ͳͲɺڞ௨΢ΟδΣοτ෦෼ͷ6*Λग़͢ɻ ৔߹ʹΑͬͯ͸04ڞ௨ͷ΋ͷͷ࣌΋͋Δ
23. ϒϥ΢βͷߏ଄ 6TFS
    *OUFSGBDF #SPXTFS
    &OHJOF 3FOEFSJOH
    &OHJOF /FUXPSL +BWB4DSJQU
    &OHJOF 6*
    #BDLFOE %BUB
    4UPSBHF http://taligarsiel.com/Projects/howbrowserswork1.htm σΟεΫʹอଘ͢ΔϨΠϠ
    $PPLJF
    ͱ͔
    MPDBMTUPSBHF
    ͱ͔͕֘౰
24. ϒϥ΢βͷߏ଄ • ͜ͷϚοϓΛུ֓ͱͯ͠಄ʹೖΕ͓͍ͯͯ΄͍͠ɻ • HTML/CSSΛ࣮ߦͯ͠Δ৔ॴ͕Ͳ͔͜ • JavaScript ͸Engine͕෼͔ΕͯΔͱ͔ • ࠷ۙೖͬͨ Service Worker ͸ͲͷลΓʹҐஔ͢Δͷ͔ʁ • Cookie ͷσʔλΛอଘͯ͠Δͷ͸Ͳ͔͜ʁ
25. ϨϯμϦϯάΤϯδϯ
26. ϨϯμϦϯάΤϯδϯ • ίϯςϯπʢHTMLͳͲ) Λड͚औͬͯ಺༰Λ ඳը͢Δ HTML ϖʔδ ϨϯμϦϯά
27. ϨϯμϦϯάΤϯδϯ • ίϯςϯπʢHTMLͳͲ) Λड͚औͬͯ಺༰Λ ඳը͢Δ HTML ϖʔδ ϨϯμϦϯά ͜͜ʹࢸΔ·ͰʹυϥϚ͕ͨ͘͞Μ͋Δɻ
28. ϨϯμϦϯάΤϯδϯ • ࢦఆ͞ΕͨίϯςϯπΛඳը͢Δ΋ͷ • ͜͜Ͱ͸ओʹ HTML Λඳը͢Δ࣌ͷྲྀΕͰղ આ͢Δ͕ɺຊདྷ͸ HTML ʹґΒͣɺίϯςϯ πΛඳը͢Δɻ (SBQIJD
    *OUFSGBDF 3FOEFS
29. ϨϯμϦϯάΤϯδϯ • ࢦఆ͞ΕͨίϯςϯπΛඳը͢Δ΋ͷ • ͜͜Ͱ͸ओʹ HTML Λඳը͢Δ࣌ͷྲྀΕͰղ આ͢Δ͕ɺຊདྷ͸ HTML ʹґΒͣɺίϯςϯ πΛඳը͢Δɻ (SBQIJD
    *OUFSGBDF 3FOEFS ಛʹ͜͜ΛਂງΓ͢Δ
30. ϨϯμϦϯάϓϩηε • HTML ͷϨϯμϦϯά͸ "ಈతʹ" ϨϯμϦϯ ά͢Δɻ • JavaScript ΍ϢʔβʔೖྗɺΞχϝʔγϣϯ ͳͲͰϨϯμϦϯά͕ߋ৽͞ΕΔɻ *OJUJBM
    3FOEFS ߋ৽ ߋ৽ ߋ৽ ߋ৽
31. ϨϯμϦϯάϓϩηε • ίϯςϯπ͕ಈతʹߋ৽͞ΕΔͱ͍͏͜ͱ͕ ΢Σϒͷಛ௃ • ͦͷͨΊʹ͍͔ͭ͘ͷதؒදݱΛ͍࣋ͬͯΔ IUNM
    IUNM %0. 4UZMFE 1BSTF 4UZMF -BZPVU
    1BJOU
32. 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 • λάΛωετͯ͠දݱ • ໦ߏ଄ͱ͍͏ܗͰσʔλߏ଄ͱͯ͠ දݱ͞ΕΔɻ
33. 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
34. Style • DOM Λ࡞ͬͨΒͦΕʹ Style Λ ౰͍ͯͯ͘ • %PDVNFOU )5.- #PEZ %JW 1 5&95 1 5&95 p { color: red } IFMMP
    XPSME 4UZMF
35. Style • CSS (Cascading Style Sheets) • ηϨΫλΛෳࡶʹࢦఆͰ͖Δ ͪͳΈʹෳࡶͳࢦఆΛ͢Ε͹͢Δ΄Ͳෳࡶͳܭࢉ͕ඞཁͳͷͰ஗͍ɻ • ηϨΫλ͸ඃΔ͜ͱ͕͋Δ • ඃͬͨΒৄࡉ౓Ͱܾ·Δ EJWOPU GPP
    
    QOUIPGUZQF O
    \
    
    
    DPMPS
    SFE
    ^
    Q
    \
    
    
    DPMPS
    CMVF
    ^
36. Style • CSS ৄࡉ౓ (ڧ͍ॱͷྫ) • styleଐੑͰͷࢦఆ • ηϨΫλͷ ID ͷ਺ • ηϨΫλͷଐੑͷ਺ • ηϨΫλͷཁૉ໊ͷ਺
    
    
    
    
    
    
    
    
    
    
    
    
    
    \^
    
    
    B
    C
    D
    E
    
    TQFDJpDJUZ
    
       
    
    
    MJ
    
    
    
    
    
    
    
    
    
    
    
    \^
    
    
    B
    C
    D
    E
    
    TQFDJpDJUZ
    
       
    
    
    MJpSTUMJOF
    \^
    
    
    B
    C
    D
    E
    
    TQFDJpDJUZ
    
       
    
    
    VM
    MJ
    
    
    
    
    
    
    
    
    \^
    
    
    B
    C
    D
    E
    
    TQFDJpDJUZ
    
       
    
    
    VM
    PM MJ
    
    
    
    
    
    \^
    
    
    B
    C
    D
    E
    
    TQFDJpDJUZ
    
       
    
    
    I
    
    <SFMVQ>\^
    
    
    B
    C
    D
    E
    
    TQFDJpDJUZ
    
       
    
    
    VM
    PM
    MJSFE
    
    \^
    
    
    B
    C
    D
    E
    
    TQFDJpDJUZ
    
       
    
    
    MJSFEMFWFM
    
    \^
    
    
    B
    C
    D
    E
    
    TQFDJpDJUZ
    
       
    
    
    YZ
    
    
    
    
    
    
    
    
    \^
    
    
    B
    C
    D
    E
    
    TQFDJpDJUZ
    
       
    
    
    TUZMF
    
    
    
    
    
    
    
    
    
    
    B
    C
    D
    E
    
    TQFDJpDJUZ
    
       
    
    http://taligarsiel.com/Projects/howbrowserswork1.htm#Specifity
37. Style EJWOPU GPP
    
    QOUIPGUZQF O
    \
    
    
    DPMPS
    SFE
    ^
    Q
    \
    
    
    DPMPS
    CMVF
    ^ 1BSTF3VMF 4UZMF
    3VMFT 4UZMF
    3VMFT 4UZMF
    3VMFT $44΋ύʔε͠ɺελΠϧͷϧʔϧηοτΛ࡞Δɻ
38. 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
39. 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
    Λ࡞Δ
40. 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.ʹ෇༩͢Δ
41. Layout • ҰͭҰͭͷཁૉ͸ελΠϧΛ΋͍ͬͯͯ΋ɺͦ Ε͕Ͳ͜ʹ഑ஔ͞ΕΔ͔ɺͲΕ͘Β͍ͷαΠζ ͳͷ͔ɺͱ͍͏৔ॴͷ৘ใ͸͍࣋ͬͯͳ͍ɻ • HTMLͷߏ଄ͱ Style ͷ৘ใΛجʹ৔ॴͱαΠζ Λܭࢉ͢Δॲཧ͕ Layout • ਌͔Β࠶ؼతʹḷͬͯ Layout ॲཧΛߦ͏
42. Layout • ਌͔ΒࢠͲ΋ʹ࠶ؼతʹܭࢉΛ ͍ͯ͘͠ • ࢠͲ΋ͷߴ͞ɾ෯Λܭࢉͨ͠Β ਌͸ࢠͲ΋ͷྦྷੵ͞Εͨߴ͞ɾ ෯ͱࣗ෼ࣗ਎ͷߴ͞ɾ෯ʹϚʔ δϯΛՃ͑ͯߴ͞Λܭࢉ͢Δ %PDVNFOU )5.- #PEZ %JW 1 5&95 1 5&95 ߴ͞ɾ෯Λܭࢉ
43. Paint • ඳը͢ΔҐஔͱαΠζ͕ܾ·ͬͨޙɺͲͷॱ ൪Ͱඳը͢Δ͔ΛܾΊΔॲཧ • DOMͷॱংͰ͸ͳ͘ɺޙΖ͔ΒલʹͪΌΜͱ ඳը͠ͳ͍ͱࢥͬͨͱ͓ΓʹϨϯμϦϯά͞ Εͳ͍ɻ CBDLHSPVOE qPBUJOH GPSFHSPVOE PVUMJOF
44. Paint • DOMͷཁૉͷॱ൪Ͱ͸ͳ͘ɺ z-index ౳Λ ࢖ͬͯޙΖͷཁૉͱલͷཁૉΛೖΕସ͑Δ͜ ͱ͕Ͱ͖Δɻ <div class="yellow"></div> <div class="green"></div> <style> .yellow { z-index: 2; ... } .green { z-index: 1; ... } </style>
45. ಈతͳߋ৽ )5.- %0. 4UZMF -BZPVU EPDVNFOUXSJUF EPDVNFOUHFU&MFNFOU#Z*E
    FMFNUFYU$POUFOU
    
    
46. ಈతͳߋ৽ )5.- %0. 4UZMF -BZPVU EPDVNFOUXSJUF EPDVNFOUHFU&MFNFOU#Z*E
    FMFNUFYU$POUFOU
    
     EPDVNFOUXSJUF
    ࣗ਎͸௚ײతͰศར͕ͩɺ࣮͸)5.-͔Βࠩ ͠ସ͑ͯ͠·͏ɺͦͷͨΊɺࠓ·Ͱͷ
    %0.
    
    4UZMF
    
    -BZPVU
    ͷྲྀΕ͕΍Γ௚͠ʹͳΔɻ࢖͏΂͖Ͱ͸ͳ͍ɻ
47. ϨϯμϦϯάΤϯδϯ·ͱΊ • HTML͸ಈతʹߋ৽͞ΕΔϞσϧ • ಈతʹߋ৽͢ΔͨΊʹதؒදݱͱͯ͠ DOM Λ༻ҙ͓ͯ͠Γɺ JavaScript Ͱߋ৽Ͱ͖Δ • DOMʹม׵ͨ͠ޙɺ Style Λܭࢉ͠ɺͦͷޙͲͷϙδγϣϯʹཁૉ Λஔ͔͘ͱ͍͏ Layout Λܭࢉ͢Δ • ࠷ޙʹ Paint Ͱલ໘ʹஔ͔͘എ໘ʹஔ͔͘ΛܾΊͯඳը͢Δ • document.write ͸࢖Θͳ͍
48. JavaScript Τϯδϯ
49. JavaScript Τϯδϯ • JavaScript Λ࣮ߦ͢ΔΤϯδϯ • ࠷ۙͷΤϯδϯ͸େମ Just In Time ίϯύΠϥ͕͍ͭ ͓ͯΓɺ୯ͳΔΠϯλϓϦλͰ͸ͳ͘ɺ౷ܭతʹঢ়گ Λݟͯߴ଎Խ͞ΕΔ • ͜͜Ͱ͸ུ֓Λղઆ͠ɺΤϯδϯͷؾ࣋ͪΛ஌Δɻ • ͪͳΈʹ৘ใ͕ଟ͍ v8 ͷΤϯδϯΛࢀߟʹ͍ͯ͠Δɻ
50. JavaScript Τϯδϯ GVODUJPO
    TVN B
    C
    \
    
    
    SFUVSO
    B
    
    C
    ^
    TVN 
      <GVODUJPO LFZXPSE >
    <TVN JEFOUJpFS >
    <
    QBSFO >
    <B
    JEFOUJpFS >
    <C
    JEFOUJpFS > UPLFOJ[F "45 <GVODUJPO LFZXPSE >
    <TVN JEFOUJpFS >
    <
    QBSFO >
    <B
    JEFOUJpFS >
    <C
    JEFOUJpFS > 1SPHSBN 'VODUJPO%FDMBSBUJPO *EFOUJpFS
    TVN QBSBNT
    *EFOUJpFS
    C
    *EFOUJpFS
    B
    
51. JavaScript Τϯδϯ GVODUJPO
    TVN B
    C
    \
    
    
    SFUVSO
    B
    
    C
    ^
    TVN 
      <GVODUJPO LFZXPSE >
    <TVN JEFOUJpFS >
    <
    QBSFO >
    <B
    JEFOUJpFS >
    <C
    JEFOUJpFS > UPLFOJ[F "45 <GVODUJPO LFZXPSE >
    <TVN JEFOUJpFS >
    <
    QBSFO >
    <B
    JEFOUJpFS >
    <C
    JEFOUJpFS > 1SPHSBN 'VODUJPO%FDMBSBUJPO *EFOUJpFS
    TVN QBSBNT
    *EFOUJpFS
    C
    *EFOUJpFS
    B
    +BWB4DSJQU
    ΋͜Ε·Ͱͱಉ༷໦ߏ଄Ͱද͞ΕΔɻ
    "CTUSBDU
    4ZOUBY
    5SFF
    ͱ͍͏ߏ଄ɻ
52. ΠϯλʔϓϦλ 1SPHSBN 'VODUJPO%FDMBSBUJPO *EFOUJpFS
    TVN QBSBNT
    *EFOUJpFS
    C
    *EFOUJpFS
    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
    
53. 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
54. 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
    Ͱ࠷దԽ͢Δ
55. 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 ΋͠΋ਪఆ஋͕֎Ε͍ͯͨΒඇ࠷దԽ͕૸Δɻ
56. Just In Time ίϯύΠϥ GVODUJPO
    TVN B
    C
    \
    
    
    SFUVSO
    B
    
    C
    ^
    
    ਺ࣈΛ଍ؔ͢਺
    TVN 
      Կ౓΋਺ࣈΛ଍͠߹Θ͓͚ͤͯ͹ɺ
    TVN
    ؔ਺ͷ Ҿ਺͸਺ࣈɺಛʹ
    JOUFHFS
    CJU
    Ґ͔͕Θ͔Δ
    ͦ͏͢Ε͹ɺػցޠʹ͢Δ࣌ʹ࠷దԽ͕Ͱ͖Δɻ
57. Just In Time ίϯύΠϥ GVODUJPO
    TVN B
    C
    \
    
    
    SFUVSO
    B
    
    C
    ^
    
    ਺ࣈΛ଍ؔ͢਺
    TVN 
      Կ౓΋਺ࣈΛ଍͠߹Θ͓͚ͤͯ͹ɺ
    TVN
    ؔ਺ͷ Ҿ਺͸਺ࣈɺಛʹ
    JOUFHFS
    CJU
    Ґ͔͕Θ͔Δ
    ͦ͏͢Ε͹ɺػցޠʹ͢Δ࣌ʹ࠷దԽ͕Ͱ͖Δɻ ͜Ε͕
    +VTU
    *O
    5JNF
    ίϯύΠϥͰݴ͏ͱ͜Ζͷ࠷దԽॲཧ
58. Just In Time ίϯύΠϥ GVODUJPO
    TVN B
    C
    \
    
    
    SFUVSO
    B
    
    C
    ^
    
    ਺ࣈΛ଍ؔ͢਺
    TVN 
      Կ౓΋਺ࣈΛ଍͠߹Θ͓͚ͤͯ͹ɺ
    TVN
    ؔ਺ͷ Ҿ਺͸਺ࣈɺಛʹ
    JOUFHFS
    CJU
    Ґ͔͕Θ͔Δ
    ͦ͏͢Ε͹ɺػցޠʹ͢Δ࣌ʹ࠷దԽ͕Ͱ͖Δɻ GVODUJPO
    TVN B
    C
    \
    
    
    SFUVSO
    B
    
    C
    ^
    
    ͍͖ͳΓ͜͜ͰจࣈྻΛ଍͢
    TVN 
      ࠷దԽ͞ΕͨॴͰจࣈྻΛҾ਺ʹ౉ͨ͠ΒͲ͏ͳ Δ͔ʁ
59. Just In Time ίϯύΠϥ GVODUJPO
    TVN B
    C
    \
    
    
    SFUVSO
    B
    
    C
    ^
    
    ਺ࣈΛ଍ؔ͢਺
    TVN 
      Կ౓΋਺ࣈΛ଍͠߹Θ͓͚ͤͯ͹ɺ
    TVN
    ؔ਺ͷ Ҿ਺͸਺ࣈɺಛʹ
    JOUFHFS
    CJU
    Ґ͔͕Θ͔Δ
    ͦ͏͢Ε͹ɺػցޠʹ͢Δ࣌ʹ࠷దԽ͕Ͱ͖Δɻ GVODUJPO
    TVN B
    C
    \
    
    
    SFUVSO
    B
    
    C
    ^
    
    ͍͖ͳΓ͜͜ͰจࣈྻΛ଍͢
    TVN 
      ࠷దԽ͞ΕͨॴͰจࣈྻΛҾ਺ʹ౉ͨ͠ΒͲ͏ͳ Δ͔ʁ CZUFDPEF͔Β΍Γ௚͢͜ͱʹͳΔʢඇ࠷దԽ͕૸Δʣɻ
    ͔ͤͬ͘+*5Ͱ࠷దԽͨ͠ॲཧ͕ແବʹͳΔɻ
60. 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
61. 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 ֮͑Δඞཁ͸ͳ͍͕ɺॻ࣌͘ʹʮԿΛ͠ͳ͍ํ͕͍͍͔ʯΛ ஌͓͍ͬͯͨ΄͏͕ྑ͍ɻ
62. ωοτϫʔΫ
63. ωοτϫʔΫ • ௨৴Λߦ͍ɺཁٻ͞ΕͨίϯςϯπΛμ΢ϯ ϩʔυͨ͠Γɺ·ͨσʔλΛΞοϓϩʔυ͠ ͨΓ͢Δɻ • HTTP(S)௨৴Λߦ͏ϨΠϠͰɺۙ೥͸ HTTP/3 ͳͲ͕༗ޮʹͳΓͭͭ͋Δɻ
64. ͦ΋ͦ΋௨৴Λߦ͏ͱ͸ʁ • Public IP / PORT ΛΫϥΠΞϯτ͕஌͍ͬͯͯ • αʔό͕઀ଓΛ଴͍ͬͯͯ • ͦ͜ʹ઀ଓΛཁٻ͠ • ઀ଓΛཱ֬ͨ͠Βɺσʔλͷަ׵Λߦ͏ Public IP / PORT Listen Data Transfer
65. ͡Ό͋ IP ͸Ͳ͏΍ͬͯ஌Δͷʁ • IP ͸ DNSαʔό͔Βڭ͑ͯ΋Β͏ɻ • https://example.com ʹΞΫηε͠Α͏ͱͨ͠৔߹ɺҰ౓΋ΞΫηε͞Εͯͳ͔ͬͨΒ DNS Lookup (໊લ͔ΒIPΞυϨεΛҾ͘ߦҝ)͕ߦΘΕΔɻ • DNS Lookup ͸ͦͷϦΫΤετઌͷυϝΠϯʹԠͯ͡౎౓ൃੜ͢ΔͷͰɺ 3rd party domain ͕ϖʔδ಺ʹ͋Δ৔߹͸ʢҰ౓΋๚໰͞Εͯͳ͔ͬͨΒʣͦͷ࣌఺Ͱൃੜ͢ Δɻ 
    EJH
    FYBNQMFDPN
    
    015
    14&6%04&$5*0/
    
    &%/4
    WFSTJPO
    
    qBHT
    VEQ
    
    
    26&45*0/
    4&$5*0/
    FYBNQMFDPN
    
    
    */
    "
    
    "/48&3
    4&$5*0/
    FYBNQMFDPN
    
    
    */
    "
    
66. PORT ͸ʁ • ༗໊ͳϓϩτίϧͷ৔߹༧Ίܾ·ͬͯΔɻ • http ͳΒ 80 ൪ɺ https ͳΒ 443 ൪ͱ͍ͬͨ෩ʹɻ • ͜ͷ༧ΊܾΊΒΕͨ PORT ͷ͜ͱΛ well-known PORT ͱݺͿɻ • well-known ͳ PORT ͸ಛݖ͕ඞཁͳέʔε΋ଟ͍ͷͰɺ։ൃ؀ ڥ౳Ͱ͸ 3000 ൪ͱ͔ʹͯ͠ɺ localhost:3000 Ͱݺͼग़͢͜ͱ ΋ଟ͍ɻ
67. ઀ଓΛཱ֬ͱ͍͏ͷ͸ʁ • (؆ུԽͷͨΊ) TCP Λϕʔεʹ࿩͢ͱɺ֘౰ͷαʔόʹ͍͖ͳ Γ઀ଓ͢ΔͷͰ͸ͳ͘ɺ3ճͷ઀ଓ֬ೝΛܦͯ઀ଓ͢Δɻ • ͜ͷ઀ଓ֬ೝͷ͜ͱΛ 3 way handshake ͱݺͿɻ ͭͳ͛ΔΑʔ (SYN) ͍͍Αʔ ͬͪ͜΋ͭͳ͛ΔΑʔ(SYN-ACK) ͡Ό͋ͭͳ͙Ͷʔ (ACK)
68. ͡Ό͋ࢲͷ伴ͱ߹Θͤͯ͜ΕͰ࿩͠·͠ΐ͏ɻ (Client Certificate) ઀ଓΛཱ֬ͱ͍͏ͷ͸ʁ • HTTP ͳΒ͜ΕͰܨ͕Δ͕ɺ࠷ۙͷେମͷWebαʔό͸ HTTPS ͳͷͰɺ͜Ε͚ͩͰ͸ܨ͕Βͳ͍ɻ҉߸ԽͷͨΊͷ΍ΓऔΓ͕ߋ ʹߦΘΕΔɻ(※؆ུԽ͍ͯ͠ΔͨΊɺਖ਼֬Ͱ͸ͳ͍) ΑΖ͓͘͠ئ͍͍ͨ͠·͢ɻ(Client Hello) ͪ͜Βͦ͜ΑΖ͓͘͠Ͷ͕͍͠·͢ɻ (Server Hello) Θͨ͠͸͜͏͍͏΋ͷͰ͢ɻ (Server Certificate) ͜͏͍͏伴Ͱ࿩ͤ·͢ (Server Key Exchange) Θͨ͠͸͜͏͍͏΋ͷͰ͢ɻ(Client Certificate)
69. ͡Ό͋ࢲͷ伴ͱ߹Θͤͯ͜ΕͰ࿩͠·͠ΐ͏ɻ (Client Certificate) ઀ଓΛཱ֬ͱ͍͏ͷ͸ʁ • HTTP ͳΒ͜ΕͰܨ͕Δ͕ɺ࠷ۙͷେମͷWebαʔό͸ HTTPS ͳͷͰɺ͜Ε͚ͩͰ͸ܨ͕Βͳ͍ɻ҉߸ԽͷͨΊͷ΍ΓऔΓ͕ߋ ʹߦΘΕΔɻ(※؆ུԽ͍ͯ͠ΔͨΊɺਖ਼֬Ͱ͸ͳ͍) ΑΖ͓͘͠ئ͍͍ͨ͠·͢ɻ(Client Hello) ͪ͜Βͦ͜ΑΖ͓͘͠Ͷ͕͍͠·͢ɻ (Server Hello) Θͨ͠͸͜͏͍͏΋ͷͰ͢ɻ (Server Certificate) ͜͏͍͏伴Ͱ࿩ͤ·͢ (Server Key Exchange) Θͨ͠͸͜͏͍͏΋ͷͰ͢ɻ(Client Certificate) )5514
    ௨৴͸
    5$1
    ͷ΍ΓऔΓͷޙͰ҉߸ԽͷͨΊͷऔΓܾ ΊΛ͢Δεςοϓ͕͋ΔɻͦΕΛܦͯ઀ଓ͞ΕΔɻ
70. ؓ࿩ٳ୊ TLS/1.3 • TLS 1.3 Ͱ͸࠷ॳͷ઀ଓ࣌ʹϥ΢ϯυτϦοϓΛݮΒ͢ࢼΈΛ͍ͯ͠Δɻ • 0-RTT ͱݺ͹ΕΔ࢓૊ΈͰ͸͍͖ͳΓ Client ͕ Hello Λඈ͹ͯ͠σʔλΛ ૹΔ͜ͱ΋Մೳʹɻ Making the web faster with HTTP/3 by kazuho https://vimeo.com/485450984
71. σʔλͷ΍ΓऔΓ • ઀ଓཱ͕֬͞Εͨޙ͸ HTTP ϓϩτίϧʹΑΔσʔλͷ΍ΓऔΓΛߦ͏ɻ • HTTP ͸جຊతʹϦΫΤετ / ϨεϙϯεͰͷ΍ΓऔΓ͕ߦΘΕΔɻ • HTTP ϦΫΤετʹ͸ϦΫΤετߦͱϔομʔͱݺ͹ΕΔϝλ৘ใͱϘσΟ ͱݺ͹ΕΔίϯςϯτ৘ใؚ͕·ΕΔɻ(※ ؆ུԽͷͨΊHTTP/1.1ͷղઆ) • 1045
    JOEFYIUNM
    )551
    BDDFQU
    UFYUIUNM
    BDDFQUFODPEJOH
    H[JQ
    EFqBUF
    CS
    BDDFQUMBOHVBHF
    FO64 FOR KBR
    DBDIFDPOUSPM
    OPDBDIF
    DPPLJFGPPCBSCB[
    
    GPPCBSIPHFGVHB ϦΫΤετߦ ϦΫΤετϔομʔ ϦΫΤετϘσΟ σʔλ಺༰
72. σʔλͷ΍ΓऔΓ • ϦΫΤετΛड͚औͬͨΒαʔό͸ϨεϙϯεʢԠ౴ʣΛฦ͢ • HTTP Ϩεϙϯεʹ͸εςʔλεΛද͢৘ใͱϨεϙϯεϔομ ʢϝλσʔλʣɺϨεϙϯεϘσΟʢ಺༰ʣؚ͕·ΕΔ )551
    
    0,
    "HF
    
    $BDIF$POUSPM
    NBYBHF
    $POUFOU5ZQF
    UFYUIUNM
    DIBSTFU65'
    %BUF
    .PO
    
    "QS
    
    
    (.5
    $POUFOU-FOHUI
    
    EPDUZQF
    IUNM
    IUNM
    IFBE
     εςʔλεߦ Ϩεϙϯεϔομ ϨεϙϯεϘσΟ
73. σʔλͷ΍ΓऔΓ • 200ܥ: ੒ޭɺσʔλͷຊମ͕͋Ε͹ૹΔ • 300ܥ: ϦμΠϨΫγϣϯϝοηʔδ • 400ܥ: ΫϥΠΞϯτΤϥʔ • 500ܥ: αʔόΤϥʔ
74. 4FSWFS GET /main.css GET /main.js GET /image0.png σʔλͷ΍ΓऔΓ GET /index.html 200 OK 200 OK 404 Not Found 304 Not Modified
75. 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Τϯδϯ͕࣮ߦ͞ΕΔϑΣʔζΛܦͯϖʔδ͕ग़Δ
76. 4FSWFS ͪͳΈʹ
    )551
    
    ͷ৔߹ɺΫϥΠΞϯτ͔ Βαʔόʹ͸࠷େ઀ଓ·Ͱ͔͠ૹΕͳ͍ɻ σʔλͷ΍ΓऔΓ
77. 4FSWFS ҰݸͰ΋஗͍ͱղܾ͞ΕΔ·Ͱ͔ͭ͠࢖͑ͳ͍ σʔλͷ΍ΓऔΓ
78. 4FSWFS )551
    ͩͱͭͷίωΫγϣϯ ͷதͰଟॏԽͯ͠ૹΔɻ σʔλͷ΍ΓऔΓ
79. 4FSWFS )551
    ͩͱͭͷίωΫγϣϯ ͷதͰଟॏԽͯ͠ૹΔɻ σʔλͷ΍ΓऔΓ ͖ͬ͞ͷ
    5$1
    )BOETIBLF
    d
    5-4
    ઀ଓཱ֬·Ͱ͕
    Ұճ͚ͩʹͳΔɻޮ཰తɻ
80. σʔλͷ΍ΓऔΓ: HTTP/3 • HTTP/2 Ͱ઀ଓίετͷ௿ݮ͕Ͱ͖͕ͨ໰୊΋͋Δɻ • ωοτϫʔΫ઀ଓ͕ෆ҆ఆͳ৔߹ TCP ઀ଓʹΑΓɺ͢΂ͯͷίωΫ γϣϯ͕ղܾ·Ͱʹ଴ͨ͞ΕΔέʔε͕༗Δɻཁ͸ύέϩεʹऑ͍ɻ • 4FSWFS 5$1ͷϨΠϠͰෆ੔߹͕͋Δͱෆ੔߹͕గਖ਼͞Ε Δ·Ͱશମ͕ϒϩοΫ͞ΕΔɻ
81. TCP͓͞Β͍ • TCP ͸৴པੑ͕ߴ͍ϓϩτίϧ • ύέϩε࣌ͷ࠶ૹ੍ޚ΍ॱং౸ୡ੍ޚͳͲɺసૹ࣌ͷ໰୊Λղ ܾͯ͘͠ΕΔɻ 4FSWFS 
    ) 
    & 
    - 
    "DL 
    & "DL͕དྷ ͳ͍
    ࠶ૹ͢Δ 
    "DL ͕དྷ͚ͨͲͦΕ ·Ͱड৴ͨ͠΋ͷ ͸ഁغ͢ΔͶɻ 
    - ͔Β΋ ͏Ұ౓࠶
82. HTTP/3 • UDP ্ʹϓϩτίϧΛ࡞͍ͬͯΔ • TCPͷޡΓగਖ਼ͳͲͷ࢓૊ΈΛࣗ෼ͨͪͷϨΠϠ্Ͱ࠶࣮૷ 4FSWFS 
    ) 
    & 
    - ͕དྷͯͳ͍Α ̐
    &
    ඞཁͳ ΋ͷͷΈ ࠶ૹ Λ࢒ͨ͠· ·͕དྷͨ͜ ͱʹ͢Δ
83. σʔλͷ΍ΓऔΓ: HTTP/3 • HTTP/3 Ͱ͸͜ͷ࢓૊ΈʹΑΓɺ઀ଓ಺Ͱͷσʔλෆ੔߹͕ ൃੜͯ͠΋શମΛετοϓͤͣ͞ʹ֘౰ͷετϦʔϜͷΈగ ਖ਼ͤ͞Δɻ • 4FSWFS Ұ෦ͷετϦʔϜ͕ࢭ·ͬͯ΋શମʹӨڹ͕ग़ͳ ͍࢓૊Έ
84. σʔλετϨʔδ
85. σʔλετϨʔδ • Ϩεϙϯεͷ৘ใ(Cache)΍Ϣʔβʔͷ৘ใ (Cookie, Localstorage etc)ΛϋʔυσΟεΫʹ ஝ੵ͓ͯ͘͠৔ॴ • σʔλετϨʔδʹσʔλΛஔ͍͓ͯ͘͜ͱ ͰσʔλΛӬଓԽͨ͠Γɺ Cache ʹΑΔ࠷ద ԽΛߦ͏͜ͱ͕Ͱ͖Δ
86. 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 Ұճμ΢ϯϩʔυͨ͠ϑΝΠϧ͸ωοτϫʔΫ͔ΒಡΈࠐΈͨ ͘ͳ͍ɻ࠶ར༻͍ͨ͠ɻ
87. Cache Storage • αʔόଆ͕ HTTP ϨεϙϯεϔομʹΩϟογϡͱ͠ ͯอଘͯ͠ྑ͍͔Ͳ͏͔/Ωϟογϡ༗ޮظؒΛࣔͤ͹ Ωϟογϡ͕༗ޮʹͳΔɻ • Cache-Control / ETag ͱ͍ͬͨΩϟογϡ༻ͷϔομ Λ׆༻͢Δɻ $BDIF$POUSPM
    NBYBHF
    
    
    ඵؒɺ
    ΫϥΠΞϯτͷ
    $BDIF
    ͱ ͯ͠༗ޮ
    &UBH
     JEFOU
    
    σʔλͷࣝผՄೳͳ஋ɺ&UBH஋͕มΘͬͯ ͍ͳ͍͔Ͳ͏͔Λαʔόʹ໰͍߹ΘͤͯมΘ͍ͬͯͳ͔ͬͨΒΩϟογϡ͕ ࢖ΘΕΔɻมΘ͍ͬͯͨΒ࠶μ΢ϯϩʔυ
    
88. Cookie Storage • ΫϥΠΞϯτ಺ͷσʔλͱͯ͠อଘ͞Εɺϒϥ΢β͔Β αʔόʹຖճϦΫΤετ͕ૹ৴͞ΕΔɻ • ओʹҎԼͷΑ͏ͳ༻్Ͱ࢖ΘΕΔɻ • ηογϣϯ؅ཧʢϩάΠϯɺγϣοϐϯάΧʔτͳͲʣ • ύʔιφϥΠζʢϢʔβઃఆɺςʔϚͳͲʣ • τϥοΩϯάʢϢʔβʔͷߦಈه࿥෼ੳʣ
89. Cookie Storage • Ϩεϙϯεϔομʹ Set-Cookie ͔Β࢝·ΔσʔλΛೖ ΕΔ͜ͱͰอଘͤ͞Δ͜ͱ͕Ͱ͖Δɻ • ࣍ճҎ߱ͷϦΫΤετͰͦͷ Cookie ͕αʔόʹૹΒ ΕΔɻ 4FSWFS Set-Cookie: id=1; Cookie: id=1;
90. Cookie Storage • Cookie Λ࢖ͬͯྫ͑͹ϩάΠϯ੒ޭ࣌ʹηογϣϯID Λ෇༩͢Δɻ • ࣍ճҎ߱͸ηογϣϯID͕༗ޮ͔Ͳ͏͔Λ֬ೝ͢Ε͹ ϩάΠϯ͍ͯ͠Δ͔Ͳ͏͔ΛαʔόଆͰ൑ผͰ͖Δɻ • ͦͷࡍʹ Expires ΍ MaxAge ଐੑΛ࢖͑͹͍ͭ·Ͱอ ࣋ͤ͞Δ͔΋ࢦఆͰ͖Δɻ
91. 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
92. 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
    Λ࡞Δ·ͰͷྲྀΕ
93. ޙ൒ Agenda • ϋϯζΦϯ • ϩάΠϯϑΥʔϜΛ࡞ͬͯΈΑ͏ • ·ͱΊ
94. ϋϯζΦϯ
95. ϋϯζΦϯ • ࠓ·Ͱڭ͑ͨ͜ͱΛΞϓϦΛ࡞Γͳ͕ΒৼΓฦΔɻ • ωοτϫʔΫͷ΍ΓऔΓ • σʔλετϨʔδʹ͍ͭͯ • JavaScript Τϯδϯʹ͍ͭͯ • Ͳ͏΍ͬͯϨϯμϦϯά͞ΕͯΔ͔
96. αʔόΛ࡞Δ • Ұ୴͔͜͜ΒϋϯζΦϯΛ։࢝͠·͢ɻ • Node.js ͕ඞཁͳͷͰೖΕ͓͍͍ͯͯͩ͘͞ɻ • HTML Λ഑৴Ͱ͖ΔΑ͏ʹͳΔ·Ͱ͸࡞͓ͬͯ ͍ͨͷͰɺ clone ࣮ͯ͠ߦ͍ͯͩ͘͠͞ɻ • 
    HJU
    DMPOF
    IUUQTHJUIVCDPNSFDSVJUUFDICSPXTFSIBOETPOHJU
    
    DE
    CSPXTFSIBOETPO
    
    OQN
    JOTUBMM
    
    OPEF
    BQQNKT
    
    PQFO
    IUUQMPDBMIPTU
97. ࣮ࡍͷϦΫΤετ/ϨεϙϯεΛ ோΊΔ • ಈ͍ͨΒ࣮ࡍͷϦΫΤετ/ϨεϙϯεΛோΊ ͯΈ·͠ΐ͏ɻ • Chrome Ͱ։ൃπʔϧ(⌘ + Shift + I)Λ։͖ɺ ωοτϫʔΫλϒʹભҠ͠ɺϦΫΤετɾϨ εϙϯεΛݟͯΈ·͢ɻ
98. ωοτϫʔΫͷ΍ΓऔΓ • ͔ͤͬ͘ͳͷͰ https ʹͯ͠Έ·͠ΐ͏ɻ • લॲཧͱͯ͠CAͱূ໌ॻΛ࡞Γɺແཧ໼ཧ trust ͓͖ͤͯ͞·͢ɻ 
    OQN
    FYFD
    NLDFSU
    DSFBUFDB
    
    OQN
    FYFD
    NLDFSU
    DSFBUFDFSU
    
    TVEP
    TFDVSJUZ
    BEEUSVTUFEDFSU
    E
    S
    USVTU3PPU
    L
    -JCSBSZ ,FZDIBJOT4ZTUFNLFZDIBJO
    DBDSU
99. ωοτϫʔΫͷ΍ΓऔΓ • 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
    
    
100. ωοτϫʔΫͷ΍ΓऔΓ • खͬऔΓૣ͘ curl ͰΞΫηεͯ͠த਎Λݟͯ Έ·͠ΐ͏ɻ 
     
     DVSM
     J
     WWW
     IUUQTMPDBMIPTUMPHJO
     
     $POOFDUFE
     UP
     MPDBMIPTU
     
     QPSU
     
     
     
     TVDDFTTGVMMZ
     TFU
     DFSUJpDBUF
     WFSJGZ
     MPDBUJPOT
     
     5-4W
     065
     5-4
     IBOETIBLF
     $MJFOU
     IFMMP
      
     
     5-4W
     */
     5-4
     IBOETIBLF
     4FSWFS
     IFMMP
      
     
     5-4W
     */
     5-4
     IBOETIBLF
     $FSUJpDBUF
      
     
     5-4W
     */
     5-4
     IBOETIBLF
     4FSWFS
     LFZ
     FYDIBOHF
      
     
     5-4W
     */
     5-4
     IBOETIBLF
     4FSWFS
     pOJTIFE
      
     
101. ωοτϫʔΫͷ΍ΓऔΓ • ࣍ʹ http2 ʹͯ͠Έ·͠ΐ͏ɻ • http2 ͷ createSecureServer Λ࢖ͬͯ http2 αʔόΛཱͯͯΈ·͠ΐ͏ɻ • Chrome ͷ։ൃऀπʔϧͰ http2 ʹͳ͍ͬͯ Ε͹੒ޭͰ͢ɻ
102. σʔλετϨʔδΛࢼ͢ • CSS΍JSΛ Cache-Control Λ࢖ͬͯΩϟο γϡʹೖΕͯΈ·͠ΐ͏ɻ • ։ൃπʔϧͰ (Cached) ͳϨεϙϯε͕ؼͬͯ ͖͍ͯͨΒ੒ޭͰ͢ɻ
103. σʔλετϨʔδΛࢼ͢ • ϩάΠϯΛ੒ޭͤͯ͞Έ·͠ΐ͏ɻ • id/password ΛνΣοΫ͠ɺ߹க͍ͯͨ͠Β੒ޭϨεϙϯ ε (302, Location: "/") ͱڞʹ Set-Cookie ͰΫοΩʔʹ ηογϣϯIDΛೖΕͯΈ·͠ΐ͏ʢηογϣϯID͸ԿͰ ΋Մʣɻ • ϩάΠϯηογϣϯ͕ϦμΠϨΫτ͞Εɺ `Login Success!` ͕දࣔ͞Ε͍ͯͨΒ੒ޭͰ͢ɻ
104. JavaScript Τϯδϯʹ͍ͭͯ • ͪͳΈʹࠓͷ script.js ͸׶͑ͯಈ͔ͳ͍Α͏ʹͳͬ ͯ·͢ɻ • ಈ͘Α͏ʹͯ͠Έ͍ͯͩ͘͞ɻͳΜͰಈ͔ͳ͍͔Λ ࢦఠͰ͖ͨΒՃ఺ɻ • DOMΛૢ࡞͠ͳ͕ΒύεϫʔυͷϚεΫΛ֎ͯ͠ɺ දࣔ͢ΔϘλϯͷಈ࡞Λ֬ೝͯ͠Έ͍ͯͩ͘͞ɻ
105. JavaScript Τϯδϯʹ͍ͭͯ • ΋͠Ͱ͖ͨΒಈతʹύεϫʔυೖྗΛνΣο Ϋͤͯ͞Έ͍ͯͩ͘͞ɻ • ೖྗʹԠͯ͡಺༰ΛνΣοΫ͠ɺத਎͕ظ଴ ͢Δ΋ͷ͡Όͳ͔ͬͨΒૹΕͳ͍Α͏ʹͯ͠ Έ͍ͯͩ͘͞ɻ
106. Ͳ͏΍ͬͯϨϯμϦϯά͞Εͯ Δ͔ • ࠷ޙʹ Login Success ͷը໘͕ऐ͍͠ͷͰ HTML Ͱࣗ༝ʹϚʔ ΫΞοϓ͍ͯͩ͘͠͞ɻ • ը૾ΛೖΕͨΓɺಈըͱ͔ೖΕͯΈͨΓ͢Δͷ͕ྑ͍Ͱ͠ΐ ͏ɻ • CSS ͷ z-index Λม͑ͯΈͯલܠͱഎܠΛม͑ͯΈ͍ͯͩ͘͞ɻ • ਌ͷཁૉ͕ࢠͲ΋ͷཁૉʹΑͬͯߴ͕͞มΘͬͨΓ͢Δ͜ͱΛ Chrome ͷ։ൃπʔϧͰ͔֬ΊͯΈ·͠ΐ͏ɻ
107. ·ͱΊ
108. લ൒ • ϒϥ΢βͷػೳ • ϒϥ΢βͷߏ଄ • ϨϯμϦϯάͷ࢓૊Έ • JavaScript Τϯδϯͷ࢓૊Έ • ωοτϫʔΫͷ࢓૊Έ • σʔλετϨʔδͷ࢓૊Έ
109. ޙ൒ • ϋϯζΦϯͰࠓ·Ͱशͬͨ΍ͭΛٯ޲͖ʹҰؾʹ ۦ͚ൈ͚ͯ΋Βͬͨɻ • ωοτϫʔΫ • σʔλετϨʔδ • JavaScript • ϨϯμϦϯά
110. ϒϥ΢βͷத਎ͱ࢓૊ΈΛΘ্͔ͬͨ ͰϋϯζΦϯͰҰؾʹಈ͘΋ͷΛࢼ͢ • ಄ͷதʹϒϥ΢βͷϚοϓΛ΋ͬͨঢ়ଶͰϋϯζΦϯΛ΍ͬ ͯ΋Β͍·ͨ͠ɻ • ͢΂ͯͰ͖ͳ͔ͬͨਓ΋͍Δͱࢥ͏ͷͰɺͦͷํ͸॓୊ͱ͠ ͯ࢒͓͖ͯ͠·͢ɻ • ΞϓϦέʔγϣϯΛ࡞Δ͜ͱ͕Ұ൪ษڧʹͳΔͷͰ͓͢͢Ί ͠·͢ɻ • ಄ͷதʹϚοϓΛ࡞ΓɺΞϓϦέʔγϣϯΛ࡞ΓɺͦΕΛߋ ৽͢Δͱ͍͏αΠΫϧΛճ͍͖ͯ͠·͠ΐ͏ɻ