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

Browser

Avatar for Recruit Recruit PRO
August 09, 2024

 Browser

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

Avatar for Recruit

Recruit PRO

August 09, 2024
Tweet

More Decks by Recruit

Other Decks in Technology

Transcript

  1. લ൒ Agenda • Webͱ͸ • ϒϥ΢βͷػೳ • ϒϥ΢βͷ࢓૊Έ • ϨϯμϦϯάΤϯδϯ

    • JavaScript Τϯδϯ • ωοτϫʔΫ • σʔλετϨʔδ
  2. Web Webϒϥ΢β 4FSWFS Webαʔό EJW QIFMMPQ QXPSMEQ EJW EJWOPU GPP

    QOUIPGUZQF O \ DPMPSSFE ^ Q\ DPMPSCMVF ^ GVODUJPOTVN B C \ SFUVSOB C ^ TVN   
  3. Webϒϥ΢β EJW QIFMMPQ QXPSMEQ EJW HTML EJWOPU GPP QOUIPGUZQF O

    \ DPMPSSFE ^ Q\ DPMPSCMVF ^ CSS GVODUJPOTVN B C \ SFUVSOB C ^ TVN    JavaScript IUUQFYBNQMFDPN JOEFYIUNM URL (&5JOEFYIUNM 0, HTTP $PPLJFGPPCBSIPHFGVHB $BDIFNBYBHF Cookie Cache
  4. HTML • Hyper Text Markup Language ͷུͰ HTML ͱݺ͹ΕΔɻςΩε τʹΘ͔Γ΍͍͢ϚʔΫΛ͚ͭΔ͜ͱΛϚʔΫΞοϓͱݺͼɺ

    ϚʔΫΞοϓʹΑͬͯϋΠύʔςΩετʢϦϯΫͷཁૉΛ࣋ͬͨ ࢀরΛؚΜͩςΩετʣΛ࡞੒Ͱ͖Δɻ • ϚʔΫΞοϓͷ໾ׂ͸ཁૉΛ໌ࣔతʹදݱ͢Δ͜ͱʹ͋Δɻཁૉ ʹ͸ྫ͑͹ʮݟग़͠ʯɺʮϦϯΫʯɺʮը૾ʯɺʮஈམʯͱ͍ͬ ͨ΋ͷ͕ଘࡏ͢Δɻ • HTML ͸ʮཁૉͷछྨʯͱཁૉ͕Ͳ͔͜ΒͲ͜·ͰΛࣔ͢ͷ͔ͱ ݴͬͨʮཁૉͷൣғʯͷ̎ͭΛ໌ࣔͯ͠จॻશମΛදݱ͢Δɻ
  5. HTML • ʮཁૉͷछྨʯͱʮཁૉͷൣғʯΛ໌ࣔ͢Δʹ͸ʮλάʯΛར༻͢Δɻ • λά͸ `<h1>` ͳͲͷΑ͏ʹ `<` ͱ `>`

    Ͱғ·Ε͍ͯͯɺཁૉͷൣғΛද͢ʹ͸։࢝ͱऴྃΛ ໌ࣔ͢Δඞཁ͕͋Δɻ • ։࢝λά͸ `<h1>` ͷΑ͏ʹ `<(೚ҙͷཁૉ)>` Ͱදݱ͢Δɻ • λάͷछྨΛදݱ͢Δͱಉ࣌ʹൣғͷ։࢝Λදݱ͢Δɻऴྃλά͸ `</h1>` ͷΑ͏ʹ `</(೚ ҙͷཁૉ)>` Ͱදݱ͢Δɻ
  6. CSS • Cascading Style Sheet ͷུͰɺCSSͱݺ͹ΕΔɻ • HTML͸จॻߏ଄Λදݱ͍ͯ͠Δ͕ɺCSS͸૷০Λදݱ͢ Δ͜ͱ͕Ͱ͖Δɻ •

    CSS͸HTMLͷཁૉΛࢦఆ͠ɺͦͷཁૉͷ૷০಺༰Λهड़ ͢Δɻ • ཁૉΛࢦఆ͢ΔͨΊʹ͸ηϨΫλͱ͍͏૷০ΛͲͷ෦෼ʹ ద༻͢Δ͔Λ໌ࣔͨ͠هड़͕ඞཁʹͳΔɻ
  7. 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ߨٛΛָ͠Έʹʂʂ
  8. URL • εΩʔϜ: ϦΫΤετૹ৴͢ΔࡍͷϓϩτίϧΛࢦఆ͢Δཁૉɺ http ΍ https ͳͲͷϓ ϩτίϧͷ໊લΛهड़͢Δɻ •

    υϝΠϯ໊: ެ։͞Ε͍ͯΔϗετͷॅॴΛࣔ͢ཁૉ • ϙʔτ: υϝΠϯ಺ͷϦιʔεʹΞΫηε͢ΔͨΊͷ൪߸ɺ80 (HTTP) ΍ 443 (HTTPS) ͳͲ • ύε: υϝΠϯ಺ͷϦιʔεͷ৔ॴ • ύϥϝʔλ: `?` ͔Β࢝·ΔɺϦιʔεʹରͯ͠औಘ΍ߋ৽ͳͲͷૢ࡞Λ͢Δ࣌ʹΫϥΠ Ξϯτ͔Βࢦఆͯ͠αʔόʹ౉͢͜ͱͰɺಛผͳॲཧΛͤ͞Δ͜ͱ͕Ͱ͖Δɻ • ΞϯΧʔ: `#` ͔Β࢝·ΔɻϦιʔε಺෦ͷίϯςϯπͷҐஔΛࢦ͢ɻ
  9. ϒϥ΢βͷػೳ • ΞυϨεόʔʹ͍Εͨ URL Λجʹϖʔδ͕ϨϯμϦϯά͞ΕΔ • ϦϯΫΛΫϦοΫ͢ΔͳͲͷΞΫγϣϯ͕͋Δͱ URL ͕มԽ ͠ɺཤྺʹͨ·Δ

    • ໭ΔϘλϯΛԡ͢ͱཤྺΛ໭ΕΔ • ਐΉϘλϯΛԡ͢ͱཤྺΛਐΊΒΕΔ • ϦϩʔυϘλϯΛԡ͢ͱ࠶౓ URL Λߋ৽͢Δ *NBHF
  10. ϒϥ΢βͷػೳ • େݪଇ: ΢ΣϒΞϓϦέʔγϣϯ͸ϒϥ΢βͷػೳΛ յͯ͠͸͍͚ͳ͍ɻ • յ͢ͱମݧ͕ѱ͍͚ͩ͡Όͳ͍ɻ • ΞΫηγϏϦςΟ΋ѱ͘ͳΔɻ •

    ηΩϡϦςΟͱ͔ͷอޢػߏ΋ಇ͔ͳ͘ͳΔ͔΋ɻ ͲΜͳʹྑ͍ΞϓϦͰ͋ͬͯ΋ 
 ϒϥ΢βͷػೳΛյ͢Α͏ͳΞϓϦ͸࢖ΘΕͳ͘ͳΔ
  11. ϒϥ΢βͷߏ଄ 6TFS*OUFSGBDF #SPXTFS&OHJOF 3FOEFSJOH &OHJOF /FUXPSL +BWB4DSJQU &OHJOF %BUB 4UPSBHF

    ίϯςϯπͷඳըΛߦ͏ɻίϯςϯπ͕ )5.-ͳΒϖʔδΛύʔεͯ͠ϩʔυ͢Δ
  12. ϒϥ΢βͷߏ଄ • ωοτϫʔΫ • HTML ΍ CSS ΍ JavaScript ͱ͍ͬͨίϯςϯπΛμ΢ϯϩʔυͨ͠ΓɺΞο

    ϓϩʔυ͢Δ࢓૊Έ • ϒϥ΢βͷσʔλަ׵ͷ࢓૊Έ͸ʮσʔλͷཁٻʢϦΫΤετʣʯͱʮཁٻ ʹରͯ͠ͷԠ౴ʢϨεϙϯεʣʯͱ͍͏̎ͭͷγϯϓϧͳ΍ΓऔΓʹΑͬͯ ߦΘΕ͍ͯΔ •
  13. 1990೥୅: ϒϥ΢βઓ૪ • ϏοάΧϯύχʔ΋໧͍ͬͯͳ͍ɻ • IBM͕ WebExplorer Λ։ൃ͠ɺͦͷޙ Microsoft ͕

    Internet Explorer Λ։ൃ͢Δɻ • Mosaic ͸ NetScape ձࣾΛ্ཱͪ͛ɺ Navigator ͱ͍͏໊ લͰ։ൃ͢Δɻ • ୈҰ࣍ϒϥ΢βઓ૪͕ຄൃ͢Δɻ
  14. 1990೥୅: ϒϥ΢βઓ૪ • ػೳͷ֦ॆ͕ਐΜͰ͍͘ҰํͰϒϥ΢βઓ૪͸൵ܶ΋΋ͨΒͨ͠ɻ • աܹͳࠩผԽͱػೳ֦ॆ͕ਐΉதͰಠ֦ࣗுʹ͸͠Δ͜ͱ΋૿͑ͯ ͍͘ • JScript ͱݺ͹ΕΔ΄ͱΜͲ

    JavaScript ͱಉ͡Α͏ͳػೳΛ࣋ͬͨ εΫϦϓτݴޠ͕ Internet Explorer ʹ࣮૷͞ΕΔ • JavaScript Ͱ Style ΛܾΊΒΕΔ JavaScript Style Sheet ΋ఏҊ͞ ΕΔ͕ɺ࢓༷ܾΊ͖Εͳ͍͏ͪʹऴΘΔͳͲɻ
  15. 1990೥୅: ϒϥ΢βઓ૪ • ࠷ऴతʹୈҰ࣍ϒϥ΢βઓ૪͸ϚΠΫϩιϑτ͕উར͢Δ • OSʹϒϥ΢β͕ಉࠝ͞ΕΔࣄͰ NetScape ͷϒϥ΢βΑΓ ΋Ϣʔβʔ਺Λ৳͹͠ɺՉ઎ঢ়ଶ͕࡞ΒΕͯ͠·͏ɻ •

    NetScape ଆ͸Ϣʔβʔ਺ͷ֫ಘʹ͸ࣦഊͨ͠΋ͷͷɺ OSS Խͯ͠ϒϥ΢βͷٕज़Λޙੈʹ࢒͠ɺ Mozilla ͱ͍͏ اۀʹܗΛม͑ͯଘଓ͢Δ
  16. 2000೥୅: Google Chrome ͷ ొ৔ɺεϚʔτϑΥϯͷొ৔ • Mozilla ͕ຬΛ࣋ͯ͠ FireFox Λ։ൃͯ͠ɺϦϦʔε͢Δɻ

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

    JavaScript Λத৺ʹΞϓϦέʔγϣϯΛ࡞Δػձ͕૿͑ ͨɻ • ݁Ռͱͯ͠ɺΞϓϦέʔγϣϯͷ࣮ߦ଎౓ʹ௚݁͢Δ JavaScript ͷ࣮ ߦ؀ڥʹ΋ݟ௚͕͠ೖΔɻ • ֤ϒϥ΢βͷJavaScript Engineʹ Just-in-time (JIT) Compiler ͱݺ͹ ΕΔ࣮ߦதʹ࠷దԽ͢Δػೳ͕ಋೖ͞Ε͍ͯ͘
  18. 2010೥୅: HTML5ϒʔϜͱε ϚʔτϑΥϯωΠςΟϒΞϓϦ • ΞϓϦέʔγϣϯͷ࡞Γํ͕ωΠςΟϒΞϓϦͷ࡞Γํʹۙ͘ͳͬͯ ͍ͬͨɻ • ΫϥΠΞϯτ಺Ͱ LocalStroage ΍

    Session Stroage ͱ͍ͬͨΫϥΠΞ ϯτͷετϨʔδΛ࢖͓͏ͱͨ͠ΓɺΦϑϥΠϯͰ΋ಈ࡞͢ΔΑ͏ʹ ϒϥ΢β͕ਐԽ͍ͯͬͨ͠ɻ • ͜ͷࠒʹ Network ʹ΋ਐԽ͕๚ΕΔɻϒϥ΢β͕ར༻͢Δίϯςϯπ ͕ΑΓϦονʹͳΓɺΞϓϦέʔγϣϯ΋Ͱ͖Δ͜ͱ͕૿͍͑ͯ͘ͱɺ ωοτϫʔΫͷར༻཰্͕͕͍ͬͯ͘ • HTTP/2 ͱ͍ͬͨޮ཰తʹϦΫΤετ͢Δํ๏͕ग़ͯ͘Δɻ
  19. HTML Parse EJW QIFMMPQ QXPSMEQ EJW 1BSTF %*7 
 1

    5&95 1 5SFF %PDVNFOU )5.- #PEZ %JW 1 5&95 1 5&95 • λάΛωετͯ͠දݱ • ໦ߏ଄ͱ͍͏ܗͰσʔλߏ଄ͱͯ͠ 
 දݱ͞ΕΔɻ
  20. 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
  21. Style • DOM Λ࡞ͬͨΒͦΕʹ Style Λ ౰͍ͯͯ͘ • %PDVNFOU )5.-

    #PEZ %JW 1 5&95 1 5&95 p { color: red } IFMMP XPSME 4UZMF
  22. Style • ηϨΫλ • ελΠϧΛ౰ͯΔࡍͷ௚઀తͳϧʔϧΛهड़ ͯ͠಺༰ΛؚΊͨ΋ͷ p { color: red;

    } #test { border: red 2px solid; } .foo { background-color: skyblue; }
  23. Style • CSS (Cascading Style Sheets) • ηϨΫλΛෳࡶʹࢦఆͰ͖Δ 
 ͪͳΈʹෳࡶͳࢦఆΛ͢Ε͹͢Δ΄Ͳෳࡶͳܭࢉ͕ඞཁͳͷͰ஗͍ɻ

    • ηϨΫλ͸ඃΔ͜ͱ͕͋Δ • ඃͬͨΒৄࡉ౓Ͱܾ·Δ EJWOPU GPP QOUIPGUZQF O \ DPMPSSFE ^ Q\ DPMPSCMVF ^
  24. Style • ηϨΫλϚονϯά • ֤ཁૉͷCSSͷηϨΫλΛҰͭҰͭݟ͍ͯͬͯελΠϧΛ൓ө͢Δ • Πϝʔδͱͯ͠͸ΞϯέʔτೖྗϑΥʔϜʹ͍ۙ • .BSHJO 'POU

    $PMPS 1BEEJOH ✔ ✔ 255,255,255,0 top: 20px left: ✔family: serif bottom: style: size: top: left: bottom:
  25. Style • CSS ৄࡉ౓ (ڧ͍ॱͷྫ) • styleଐੑͰͷࢦఆ • ηϨΫλͷ ID

    ͷ਺ • ηϨΫλͷଐੑͷ਺ • ηϨΫλͷཁૉ໊ͷ਺  \^ BCDETQFDJ fi DJUZ     MJ\^ BCDETQFDJ fi DJUZ     MJ fi STUMJOF\^ BCDETQFDJ fi DJUZ     VMMJ\^ BCDETQFDJ fi DJUZ     VMPM MJ\^ BCDETQFDJ fi DJUZ     I  <SFMVQ>\^ BCDETQFDJ fi DJUZ     VMPMMJSFE\^ BCDETQFDJ fi DJUZ     MJSFEMFWFM\^ BCDETQFDJ fi DJUZ     YZ\^ BCDETQFDJ fi DJUZ     TUZMF BCDETQFDJ fi DJUZ     http://taligarsiel.com/Projects/howbrowserswork1.htm#Speci fi ty
  26. 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 ✔ ✔ ✔ ✔ ✔ ✔ ✔ ਌͔Β΋Β͑Δͱ͜Ζ͸आΓͯ͘Δ
  27. Style EJWOPU GPP QOUIPGUZQF O \ DPMPSSFE ^ Q\ DPMPSCMVF

    ^ 1BSTF3VMF 4UZMF3VMFT 4UZMF3VMFT 4UZMF3VMFT $44΋ύʔε͠ɺελΠϧͷϧʔϧηοτΛ࡞Δɻ
  28. 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
  29. 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Λ࡞Δ
  30. 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.ʹ෇༩͢Δ
  31. 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); }
  32. DOMͷߋ৽ස౓Λଟ͘͠ͳ͍ EPDVNFOU IUNM CPEZ VM BQQFOE GPS MFUJJJ \ MFUMJEPDVNFOUDSFBUF&MFNFOU

    MJ  MJUFYU$POUFOUUFTU J VMBQQFOE$IJME MJ  ^ 4UZMF -BZPVU1BJOU MJ 4UZMF -BZPVU1BJOU MJ 4UZMF -BZPVU1BJOU MJ 4UZMF -BZPVU1BJOU MJ ࢠཁૉ͕௥Ճ͞ΕΔ౓ʹStyleॲཧ͕ಈ͘
  33. 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);
  34. DOMͷߋ৽ස౓Λଟ͘͠ͳ͍ EPDVNFOU IUNM CPEZ VM BQQFOE MFUVMEPDVNFOUHFU&MFNFOU#Z*E GPP  MFUGSEPDVNFOUDSFBUF%PDVNFOU'SBHNFOU

     GPS MFUJJJ \ MFUMJEPDVNFOUDSFBUF&MFNFOU MJ  JUFYU$POUFOUA\J^A GSBQQFOE$IJME MJ  ^ VMBQQFOE$IJME GS  Ұ୴ϑϥάϝϯτΛ࡞͔ͬͯΒ·ͱΊͯ ௥ه͢ΔɻҰ౓͚͔ͩ͠Styleॲཧ͸૸Βͳ͍ MJ MJ MJ MJ 4UZMF -BZPVU1BJOU
  35. ϨϯμϦϯάΤϯδϯ·ͱΊ • HTML͸ಈతʹߋ৽͞ΕΔϞσϧ • ಈతʹߋ৽͢ΔͨΊʹதؒදݱͱͯ͠ DOM Λ༻ҙ͓ͯ͠Γɺ JavaScript Ͱߋ৽ Ͱ͖Δ

    • DOMʹม׵ͨ͠ޙɺ Style Λܭࢉ͠ɺͦͷޙͲͷϙδγϣϯʹཁૉΛஔ͔͘ͱ͍ ͏ Layout Λܭࢉ͢Δ • ࠷ޙʹ Paint Ͱલ໘ʹஔ͔͘എ໘ʹஔ͔͘ΛܾΊͯඳը͢Δ • document.write ͸࢖Θͳ͍ • DOMͷߋ৽ස౓Λଟ͘͠ͳ͍
  36. JavaScript Τϯδϯ • JavaScript Λ࣮ߦ͢ΔΤϯδϯ • ࠷ۙͷΤϯδϯ͸େମ Just In Time

    ίϯύΠϥ͕͍ͭ ͓ͯΓɺ୯ͳΔΠϯλϓϦλͰ͸ͳ͘ɺ౷ܭతʹঢ়گ Λݟͯߴ଎Խ͞ΕΔ • ͜͜Ͱ͸ུ֓Λղઆ͠ɺΤϯδϯͷؾ࣋ͪΛ஌Δɻ • ͪͳΈʹ৘ใ͕ଟ͍ v8 ͷΤϯδϯΛࢀߟʹ͍ͯ͠Δɻ
  37. ͬ͘͟Γ֓ཁͱͯ͠ͷಈ͖ GVODUJPOTVN B C \ SFUVSOB C ^ TVN 

      ύʔαʔ ΠϯλϓϦλ +*5ίϯύΠϥ JavaScript ந৅ߏจ໦    &YDBBFDBF! $SFBUF6ONBQQFE"SHVNFOUT YDBBFDBG!G4UBSS 4YDBBFDC!G -EB/BNFE1SPQFSUZS <> <> όΠτίʔυ ػցޠ ౷ܭ৘ใ ࠷దԽ ୤࠷దԽ
  38. ύʔαʔ GVODUJPOTVN B C \ SFUVSOB 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 FSTVN QBSBNT *EFOUJ fi FSC *EFOUJ fi FSB
  39. ύʔαʔ GVODUJPOTVN B C \ SFUVSOB 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 FSTVN QBSBNT *EFOUJ fi FSC *EFOUJ fi FSB +BWB4DSJQU΋͜Ε·Ͱͱಉ༷໦ߏ଄Ͱද͞ΕΔɻ "CTUSBDU4ZOUBY5SFFͱ͍͏ߏ଄ɻ
  40. ΠϯλʔϓϦλ 1SPHSBN 'VODUJPO%FDMBSBUJPO *EFOUJ fi FSTVN QBSBNT *EFOUJ fi FSC

    *EFOUJ fi FSB *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
  41. 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
  42. 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Ͱ࠷దԽ͢Δ
  43. 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 ΋͠΋ਪఆ஋͕֎Ε͍ͯͨΒඇ࠷దԽ͕૸Δɻ
  44. Just In Time ίϯύΠϥ GVODUJPOTVN B C \ SFUVSOB C

    ^ ਺ࣈΛ଍ؔ͢਺ TVN    Կ౓΋਺ࣈΛ଍͠߹Θ͓͚ͤͯ͹ɺTVNؔ਺ͷ Ҿ਺͸਺ࣈɺಛʹJOUFHFSCJUҐ͔͕Θ͔Δ ͦ͏͢Ε͹ɺػցޠʹ͢Δ࣌ʹ࠷దԽ͕Ͱ͖Δɻ
  45. Just In Time ίϯύΠϥ GVODUJPOTVN B C \ SFUVSOB C

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

    ^ ਺ࣈΛ଍ؔ͢਺ TVN    Կ౓΋਺ࣈΛ଍͠߹Θ͓͚ͤͯ͹ɺTVNؔ਺ͷ Ҿ਺͸਺ࣈɺಛʹJOUFHFSCJUҐ͔͕Θ͔Δ ͦ͏͢Ε͹ɺػցޠʹ͢Δ࣌ʹ࠷దԽ͕Ͱ͖Δɻ GVODUJPOTVN B C \ SFUVSOB C ^ ͍͖ͳΓ͜͜ͰจࣈྻΛ଍͢ TVN    ࠷దԽ͞ΕͨॴͰจࣈྻΛҾ਺ʹ౉ͨ͠ΒͲ͏ͳ Δ͔ʁ
  47. Just In Time ίϯύΠϥ GVODUJPOTVN B C \ SFUVSOB C

    ^ ਺ࣈΛ଍ؔ͢਺ TVN    Կ౓΋਺ࣈΛ଍͠߹Θ͓͚ͤͯ͹ɺTVNؔ਺ͷ Ҿ਺͸਺ࣈɺಛʹJOUFHFSCJUҐ͔͕Θ͔Δ ͦ͏͢Ε͹ɺػցޠʹ͢Δ࣌ʹ࠷దԽ͕Ͱ͖Δɻ GVODUJPOTVN B C \ SFUVSOB C ^ ͍͖ͳΓ͜͜ͰจࣈྻΛ଍͢ TVN    ࠷దԽ͞ΕͨॴͰจࣈྻΛҾ਺ʹ౉ͨ͠ΒͲ͏ͳ Δ͔ʁ CZUFDPEF͔Β΍Γ௚͢͜ͱʹͳΔʢඇ࠷దԽ͕૸Δʣɻ 
 ͔ͤͬ͘+*5Ͱ࠷దԽͨ͠ॲཧ͕ແବʹͳΔɻ
  48. 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
  49. 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 ֮͑Δඞཁ͸ͳ͍͕ɺॻ࣌͘ʹʮԿΛ͠ͳ͍ํ͕͍͍͔ʯΛ ஌͓͍ͬͯͨ΄͏͕ྑ͍ɻ
  50. ϚʔΫΞϯυεΠʔϓ SPPU ✔ ✔ ✔ ✔ ✔ ✔ ✔ ౸ୡෆՄೳ

    
 => ճऩՄೳ ౸ୡՄೳ 
 => ੜ͖ͯΔՄೳੑ͕ߴ͍
  51. GFUDI FYBNQMFKTPO UIFO   SFT \ DPOTPMFMPH SFT 

    ^  GFUDI 5JNFS )551 6TFS*OQVU ϚΠΫϩλεΫΩϡʔ ωοτϫʔΫϦΫΤετΛߦ͍ɺ ϨεϙϯεΛ଴ͭ Ϩεϙϯε͕ऴΘͬͨΒϚΠΫϩ λεΫΩϡʔʹੵ·ΕΔ
  52. GFUDI FYBNQMFKTPO UIFO   SFT \ DPOTPMFMPH SFT 

    ^  GFUDI 5JNFS )551 6TFS*OQVU ϚΠΫϩλεΫΩϡʔ 1. ωοτϫʔΫϦΫΤετΛߦ ͍ɺϨεϙϯεΛ଴ͭ 2. Ϩεϙϯε͕ऴΘͬͨΒίʔϧ όοΫΩϡʔʹੵ·ΕΔ ίʔϧόοΫΩϡʔ
  53. ελοΫ 5JNFS )551 6TFS*OQVU ϚΠΫϩλεΫΩϡʔ ίʔϧόοΫΩϡʔ DPOTPMFMPH SFT 3. ίʔϧόοΫΩϡʔ͔Βελο

    Ϋʹੵ·Εɺ࣮ߦ͞ΕΔ 4. ࣮ߦ͍ͯ͠ΔελοΫ͔ΒϚΠ ΫϩλεΫΩϡʔʹੵ·ΕΔ
  54. HTTP Semantics • HTTP ͸جຊతʹϦΫΤετ / ϨεϙϯεͰͷ΍ΓऔΓ͕ߦΘΕΔɻ • HTTP ϦΫΤετʹ͸ϦΫΤετߦͱϔομʔͱݺ͹ΕΔϝλ৘ใͱϘ

    σΟͱݺ͹ΕΔίϯςϯτ৘ใؚ͕·ΕΔɻ(※ ؆ུԽͷͨΊHTTP/1.1 ͷղઆ) • 1045JOEFYIUNM)551 
 BDDFQUUFYUIUNM BDDFQUFODPEJOHH[JQ EF fl BUF CS BDDFQUMBOHVBHFFO64 FOR KBR 
 DBDIFDPOUSPMOPDBDIF DPPLJFGPPCBSCB[ 
 GPPCBSIPHFGVHB ϦΫΤετߦ ϦΫΤετϔομʔ ϦΫΤετϘσΟ σʔλ಺༰
  55. HTTP Semantics • ϦΫΤετΛड͚औͬͨΒαʔό͸ϨεϙϯεʢԠ౴ʣΛฦ͢ • HTTP Ϩεϙϯεʹ͸εςʔλεΛද͢৘ใͱϨεϙϯεϔομ ʢϝλσʔλʣɺϨεϙϯεϘσΟʢ಺༰ʣؚ͕·ΕΔ )5510, "HF

    $BDIF$POUSPMNBYBHF $POUFOU5ZQFUFYUIUNMDIBSTFU65' %BUF.PO "QS(.5 $POUFOU-FOHUI EPDUZQFIUNM IUNM IFBE  εςʔλεߦ Ϩεϙϯεϔομ ϨεϙϯεϘσΟ
  56. Method • GET ϦιʔεΛऔಘ͢ΔͨΊͷϝιου • HEAD ϦιʔεͷϝλσʔλͷΈऔಘ͢ΔͨΊͷϝιουɺίϯςϯτ ͸ؚ·ͳ͍ • POST

    ϦιʔεΛαʔόʹૹ৴͢ΔͨΊͷϝιου • PUT ϦιʔεΛαʔόʹૹ৴͢ΔͨΊͷϝιου • PATCH ϦιʔεΛαʔόʹૹ৴͢ΔͨΊͷϝιου • DELETE ϦιʔεΛαʔό͔Β࡟আ͢ΔͨΊͷϝιου
  57. 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Τϯδϯ͕࣮ߦ͞ΕΔϑΣʔζΛܦͯϖʔδ͕ग़Δ
  58. ͡Ό͋ࢲͷ伴ͱ߹Θͤͯ͜ΕͰ࿩͠·͠ΐ͏ɻ 
 (Client Certi fi cate) TLS • HTTP ͳΒ͜ΕͰܨ͕Δ͕ɺ࠷ۙͷେମͷWebαʔό͸

    HTTPS ͳ ͷͰɺ͜Ε͚ͩͰ͸ܨ͕Βͳ͍ɻ҉߸ԽͷͨΊͷ΍ΓऔΓ͕ߋʹ ߦΘΕΔɻ(※؆ུԽ͍ͯ͠ΔͨΊɺਖ਼֬Ͱ͸ͳ͍) ΑΖ͓͘͠ئ͍͍ͨ͠·͢ɻ(Client Hello) ͪ͜Βͦ͜ΑΖ͓͘͠Ͷ͕͍͠·͢ɻ (Server Hello) Θͨ͠͸͜͏͍͏΋ͷͰ͢ɻ (Server Certi fi cate) ͜͏͍͏伴Ͱ࿩ͤ·͢ (Server Key Exchange) Θͨ͠͸͜͏͍͏΋ͷͰ͢ɻ(Client Certi fi cate)
  59. ͡Ό͋ࢲͷ伴ͱ߹Θͤͯ͜ΕͰ࿩͠·͠ΐ͏ɻ 
 (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ͷ΍ΓऔΓͷޙͰ҉߸ԽͷͨΊͷऔΓܾ ΊΛ͢Δεςοϓ͕͋ΔɻͦΕΛܦͯ઀ଓ͞ΕΔɻ
  60. HTTP/1.1 • Ұճ઀ଓͨ͠ TCP ઀ଓΛ࢖͍ଓ͚Δ Keep-Alive ػೳ͕σϑΥϧτ ͰඋΘ͍ͬͯΔɻ • ͜ͷଞʹ΋

    Pipelining ͳͲ΋ଘࡏ͢Δ͕͜͜Ͱͷղઆ͸ׂѪ͢Δɻ • ͜͜Ͱॏཁͳͷ͸ɺ HTTP/1.0 Ͱ͸Ұ୴ϦΫΤετͱϨεϙϯε͕ ऴྃͨ͠ΒɺͦΕʹ൐ͬͯ TCP ͷ઀ଓ΋ऴྃ͢Δͱ͍͏ಈ͖Λͯ͠ ͍ͨॴ͕ɺϦΫΤετͱϨεϙϯε͕ऴྃͨ͠ͱͯ͠΋઀ଓΛҡ࣋ ͢ΔΑ͏ʹվળ͞Ε͍ͯΔɻ • ͜ͷͨΊɺTCP/IPͷ઀ଓίετ͕Լ͕ͬͯΔɻ
  61. TCP͓͞Β͍ • TCP ͸৴པੑ͕ߴ͍ϓϩτίϧ • ύέϩε࣌ͷ࠶ૹ੍ޚ΍ॱং౸ୡ੍ޚͳͲɺసૹ࣌ͷ໰୊Λղ ܾͯ͘͠ΕΔɻ 4FSWFS ) &

    - "DL & "DL͕དྷ ͳ͍ ࠶ૹ͢Δ "DL ͕དྷ͚ͨͲͦΕ ·Ͱड৴ͨ͠΋ͷ ͸ഁغ͢ΔͶɻ - ͔Β΋ ͏Ұ౓࠶
  62. 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 Ұճμ΢ϯϩʔυͨ͠ϑΝΠϧ͸ωοτϫʔΫ͔ΒಡΈࠐΈͨ ͘ͳ͍ɻ࠶ར༻͍ͨ͠ɻ
  63. Cache Storage • αʔόଆ͕ HTTP ϨεϙϯεϔομʹΩϟογϡͱ͠ ͯอଘͯ͠ྑ͍͔Ͳ͏͔/Ωϟογϡ༗ޮظؒΛࣔͤ͹ Ωϟογϡ͕༗ޮʹͳΔɻ • Cache-Control

    / ETag ͱ͍ͬͨΩϟογϡ༻ͷϔομ Λ׆༻͢Δɻ $BDIF$POUSPMNBYBHFඵؒɺΫϥΠΞϯτͷ$BDIFͱ ͯ͠༗ޮ &UBH JEFOUσʔλͷࣝผՄೳͳ஋ɺ&UBH஋͕มΘͬͯ ͍ͳ͍͔Ͳ͏͔Λαʔόʹ໰͍߹ΘͤͯมΘ͍ͬͯͳ͔ͬͨΒΩϟογϡ͕ ࢖ΘΕΔɻมΘ͍ͬͯͨΒ࠶μ΢ϯϩʔυ
  64. 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
  65. 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Λ࡞Δ·ͰͷྲྀΕ
  66. ֤ετϨʔδͷಛ௃ Cookie local storage session storage Indexed DB σʔλͷӾཡ ൣғ

    ϒϥ΢βͷλ ϒؒͰڞ௨ ϒϥ΢βͷλ ϒؒͰڞ௨ λϒ಺ͷΈ ϒϥ΢βͷλ ϒؒͰڞ௨ ΞΫηε੍ݶ Path ΍ Domain ͰҰ ಉҰੜ੒ݩϙ Ϧγʔ ಉҰੜ੒ݩϙ Ϧγʔ ಉҰੜ੒ݩϙ Ϧγʔ αʔόͷϦΫ Τετ࣌ʹࣗ ૹ৴͞ΕΔ ૹ৴͞Εͳ͍ ૹ৴͞Εͳ͍ ૹ৴͞Εͳ͍ JavaScript͔ ΒͷΞΫηε httpOnly Ͱ੍ ݶՄೳ ຖճΞΫηε Մೳ ຖճΞΫηε Մೳ ຖճΞΫηε Մೳ σʔλͷੜଘ ظؒ max-age, expires Ͱ੍ݶ Մೳ ແ੍ݶ λϒΛด͡Δ ·Ͱ ແ੍ݶ σʔλͷ༰ྔ 4KB 5MB 5MB جຊແ੍ݶ(ϒ ϥ΢β࣍ୈ)
  67. αʔόΛ࡞Δ • Ұ୴͔͜͜ΒϋϯζΦϯΛ։࢝͠·͢ɻ • Node.js ͕ඞཁͳͷͰೖΕ͓͍͍ͯͯͩ͘͞ɻ • HTML Λ഑৴Ͱ͖ΔΑ͏ʹͳΔ·Ͱ͸࡞͓ͬͯ ͍ͨͷͰɺ

    clone ࣮ͯ͠ߦ͍ͯͩ͘͠͞ɻ • HJUDMPOFIUUQTHJUIVCDPNSFDSVJUUFDICSPXTFSIBOETPOHJU DECSPXTFSIBOETPO OQNJOTUBMM OPEFBQQNKT PQFOIUUQMPDBMIPTU
  68. ωοτϫʔΫͷ΍ΓऔΓ • ͔ͤͬ͘ͳͷͰ https ʹͯ͠Έ·͠ΐ͏ɻ • લॲཧͱͯ͠CAͱূ໌ॻΛ࡞Γɺແཧ໼ཧ trust ͓͖ͤͯ͞·͢ɻ OQNFYFDNLDFSUDSFBUFDB

    OQNFYFDNLDFSUDSFBUFDFSU TVEPTFDVSJUZBEEUSVTUFEDFSUESUSVTU3PPUL-JCSBSZ ,FZDIBJOT4ZTUFNLFZDIBJODBDSU
  69. ωοτϫʔΫͷ΍ΓऔΓ • Node.js ଆ΋ https ʹରԠͤͯ͞Έ·͠ΐ͏ɻ • ઌఔ࡞ͬͨ cert ϑΝΠϧΛಡΊ͹ྑ͍Ͱ͢ɻ

    BQQNKT JNQPSU\SFBE'JMF4ZOD^GSPNGT௥ه JNQPSU\DSFBUF4FSWFS^GSPNIUUQTIUUQ͔ΒIUUQTʹมߋ DPOTUSFRTPO  DSFBUF4FSWFS \ LFZSFBE'JMF4ZOD DFSULFZ ௥ه DFSUSFBE'JMF4ZOD DFSUDSU ௥ه ^ MJTUFO QPSU 
  70. ωοτϫʔΫͷ΍ΓऔΓ • खͬऔΓૣ͘ curl ͰΞΫηεͯ͠த਎Λݟͯ Έ·͠ΐ͏ɻ DVSMJWWWIUUQTMPDBMIPTUMPHJO $POOFDUFEUPMPDBMIPTU  QPSU

      TVDDFTTGVMMZTFUDFSUJ fi DBUFWFSJGZMPDBUJPOT 5-4W 065 5-4IBOETIBLF $MJFOUIFMMP   5-4W */ 5-4IBOETIBLF 4FSWFSIFMMP   5-4W */ 5-4IBOETIBLF $FSUJ fi DBUF   5-4W */ 5-4IBOETIBLF 4FSWFSLFZFYDIBOHF   5-4W */ 5-4IBOETIBLF 4FSWFS fi OJTIFE  
  71. ωοτϫʔΫͷ΍ΓऔΓ • ࣍ʹ http2 ʹͯ͠Έ·͠ΐ͏ɻ • http2 ͷ createSecureServer Λ࢖ͬͯ

    http2 αʔόΛཱͯͯΈ·͠ΐ͏ɻ • Chrome ͷ։ൃऀπʔϧͰ http2 ʹͳ͍ͬͯ Ε͹੒ޭͰ͢ɻ
  72. σʔλετϨʔδΛࢼ͢ • ϩάΠϯΛ੒ޭͤͯ͞Έ·͠ΐ͏ɻ • id/password ΛνΣοΫ͠ɺ߹க͍ͯͨ͠Β੒ޭϨεϙϯ ε (302, Location: "/")

    ͱڞʹ Set-Cookie ͰΫοΩʔʹηο γϣϯIDΛೖΕͯΈ·͠ΐ͏ʢηογϣϯID͸ԿͰ΋ Մʣɻ • ϩάΠϯηογϣϯ͕ϦμΠϨΫτ͞Εɺ `Login Success!` ͕දࣔ͞Ε͍ͯͨΒ੒ޭͰ͢ɻ
  73. Ͳ͏΍ͬͯϨϯμϦϯά͞Εͯ Δ͔ • ࠷ޙʹ Login Success ͷը໘͕ऐ͍͠ͷͰ HTML Ͱࣗ༝ʹϚʔ ΫΞοϓ͍ͯͩ͘͠͞ɻ

    • ը૾ΛೖΕͨΓɺಈըͱ͔ೖΕͯΈͨΓ͢Δͷ͕ྑ͍Ͱ͠ΐ ͏ɻ • CSS ͷ z-index Λม͑ͯΈͯલܠͱഎܠΛม͑ͯΈ͍ͯͩ͘͞ɻ • ਌ͷཁૉ͕ࢠͲ΋ͷཁૉʹΑͬͯߴ͕͞มΘͬͨΓ͢Δ͜ͱΛ Chrome ͷ։ൃπʔϧͰ͔֬ΊͯΈ·͠ΐ͏ɻ