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

Browser

 Browser

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

Recruit

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 ͷ։ൃπʔϧͰ͔֬ΊͯΈ·͠ΐ͏ɻ