ブラウザ / Browser - Speaker Deck

ブラウザ / Browser

by Recruit

Slide 1

Slide 1 text

Browser 2021/04/06 @ Recruit

Slide 2

Slide 2 text

Twitter: @yosuke_furukawa Github: yosuke-furukawa

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Browse + er ோΊΔ΋ͷ

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

ϒϥ΢βͷػೳ

Slide 8

Slide 8 text

ϒϥ΢βͷػೳ 🔒IUUQTFYBNQMFDPN

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

ϒϥ΢βͷ࢓૊Έ

Slide 16

Slide 16 text

ϒϥ΢βͷߏ଄ 6TFS*OUFSGBDF #SPXTFS&OHJOF 3FOEFSJOH&OHJOF /FUXPSL +BWB4DSJQU &OHJOF 6*#BDLFOE %BUB 4UPSBHF http://taligarsiel.com/Projects/howbrowserswork1.htm

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

ϒϥ΢βͷߏ଄ 6TFS*OUFSGBDF #SPXTFS&OHJOF 3FOEFSJOH&OHJOF /FUXPSL +BWB4DSJQU &OHJOF 6*#BDLFOE %BUB 4UPSBHF http://taligarsiel.com/Projects/howbrowserswork1.htm ϨϯμϦϯάΤϯδϯΛૢ࡞͢Δϒϥ΢ βͷ֩ɺσʔλ૚ͱௐఀ͢Δ

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

ϒϥ΢βͷߏ଄ 6TFS*OUFSGBDF #SPXTFS&OHJOF 3FOEFSJOH&OHJOF /FUXPSL +BWB4DSJQU &OHJOF 6*#BDLFOE %BUB 4UPSBHF http://taligarsiel.com/Projects/howbrowserswork1.htm JOQVUͷ6*ͳͲɺڞ௨΢ΟδΣοτ෦෼ͷ6*Λग़͢ɻ ৔߹ʹΑͬͯ͸04ڞ௨ͷ΋ͷͷ࣌΋͋Δ

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

ϒϥ΢βͷߏ଄ • ͜ͷϚοϓΛུ֓ͱͯ͠಄ʹೖΕ͓͍ͯͯ΄͍͠ɻ • HTML/CSSΛ࣮ߦͯ͠Δ৔ॴ͕Ͳ͔͜ • JavaScript ͸Engine͕෼͔ΕͯΔͱ͔ • ࠷ۙೖͬͨ Service Worker ͸ͲͷลΓʹҐஔ͢Δͷ͔ʁ • Cookie ͷσʔλΛอଘͯ͠Δͷ͸Ͳ͔͜ʁ

Slide 25

Slide 25 text

ϨϯμϦϯάΤϯδϯ

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Style • DOM Λ࡞ͬͨΒͦΕʹ Style Λ ౰͍ͯͯ͘ • %PDVNFOU )5.- #PEZ %JW 1 5&95 1 5&95 p { color: red } IFMMP XPSME 4UZMF

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Slide 40

Slide 40 text

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.ʹ෇༩͢Δ

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

.yellow { z-index: 2; ... } .green { z-index: 1; ... }

Slide 45

Slide 45 text

ಈతͳߋ৽ )5.- %0. 4UZMF -BZPVU EPDVNFOUXSJUF EPDVNFOUHFU&MFNFOU#Z*E FMFNUFYU$POUFOU

Slide 46

Slide 46 text

ಈతͳߋ৽ )5.- %0. 4UZMF -BZPVU EPDVNFOUXSJUF EPDVNFOUHFU&MFNFOU#Z*E FMFNUFYU$POUFOU EPDVNFOUXSJUFࣗ਎͸௚ײతͰศར͕ͩɺ࣮͸)5.-͔Βࠩ ͠ସ͑ͯ͠·͏ɺͦͷͨΊɺࠓ·Ͱͷ%0.4UZMF -BZPVUͷྲྀΕ͕΍Γ௚͠ʹͳΔɻ࢖͏΂͖Ͱ͸ͳ͍ɻ

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

JavaScript Τϯδϯ

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

JavaScript Τϯδϯ GVODUJPOTVN B C \ SFUVSOBC ^ TVN < QBSFO > UPLFOJ[F "45 < QBSFO > 1SPHSBN 'VODUJPO%FDMBSBUJPO *EFOUJpFSTVN QBSBNT *EFOUJpFSC *EFOUJpFSB

Slide 51

Slide 51 text

JavaScript Τϯδϯ GVODUJPOTVN B C \ SFUVSOBC ^ TVN < QBSFO > UPLFOJ[F "45 < QBSFO > 1SPHSBN 'VODUJPO%FDMBSBUJPO *EFOUJpFSTVN QBSBNT *EFOUJpFSC *EFOUJpFSB +BWB4DSJQU΋͜Ε·Ͱͱಉ༷໦ߏ଄Ͱද͞ΕΔɻ "CTUSBDU4ZOUBY5SFFͱ͍͏ߏ଄ɻ

Slide 52

Slide 52 text

ΠϯλʔϓϦλ 1SPHSBN 'VODUJPO%FDMBSBUJPO *EFOUJpFSTVN QBSBNT *EFOUJpFSC *EFOUJpFSB *OUFSQSFUFS &YDBBFDBF!$SFBUF6ONBQQFE"SHVNFOUT YDBBFDBG!G4UBSS 4YDBBFDC!G-EB/BNFE1SPQFSUZS <> <> YDBBFDC!G4UBSS YDBBFDC!C-EB;FSP &YDBBFDC!G5FTU&RVBM4USJDUS <> YDBBFDCC!B+VNQ*G'BMTF<> YDBBFDE! 4YDBBFDCE!-EB/BNFE1SPQFSUZUIJT <> <> YDBBFDD!G4UBSS YDBBFDD!C-EB;FSP YDBBFDD!G4UBSS &YDBBFDD!-EB/BNFE1SPQFSUZUIJT <> <> YDBBFDDB!G4UBSS &YDBBFDDD!BGGG$BMM1SPQFSUZS UIJT S S <> 4YDBBFDE!BB3FUVSO 4YDBBFDE!-EB/BNFE1SPQFSUZUIJT <> <> YDBBFDE!GC4UBSS 4YDBBFDE!C-EB;FSP &YDBBFDEB!CC5FTU-FTT5IBO0S&RVBMB <> YDBBFDEE!B+VNQ*G'BMTF<> YDBBFDF! 4YDBBFDEG!C-EB;FSP YDBBFDF!4UBSB YDBBFDF!C+VNQ<> YDBBFDG! 4YDBBFDF!GC-EBSS &YDBBFDF!DD5FTU(SFBUFS5IBO0S&RVBMB <> YDBBFDF!B+VNQ*G'BMTF<> YDBBFDFF! "45͔ΒCZUFDPEFʹ্ͨ͠Ͱ࣮ߦ͢Δɻ 3FTVMU

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Slide 55

Slide 55 text

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

Slide 62

Slide 62 text

ωοτϫʔΫ

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

σʔλͷ΍ΓऔΓ • ઀ଓཱ͕֬͞Εͨޙ͸ HTTP ϓϩτίϧʹΑΔσʔλͷ΍ΓऔΓΛߦ͏ɻ • HTTP ͸جຊతʹϦΫΤετ / ϨεϙϯεͰͷ΍ΓऔΓ͕ߦΘΕΔɻ • HTTP ϦΫΤετʹ͸ϦΫΤετߦͱϔομʔͱݺ͹ΕΔϝλ৘ใͱϘσΟ ͱݺ͹ΕΔίϯςϯτ৘ใؚ͕·ΕΔɻ(※ ؆ུԽͷͨΊHTTP/1.1ͷղઆ) • 1045JOEFYIUNM)551 BDDFQUUFYUIUNM BDDFQUFODPEJOHH[JQ EFqBUF CS BDDFQUMBOHVBHFFO64 FOR KBR DBDIFDPOUSPMOPDBDIF DPPLJFGPPCBSCB[ GPPCBSIPHFGVHB ϦΫΤετߦ ϦΫΤετϔομʔ ϦΫΤετϘσΟ σʔλ಺༰

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

σʔλͷ΍ΓऔΓ: HTTP/3 • HTTP/2 Ͱ઀ଓίετͷ௿ݮ͕Ͱ͖͕ͨ໰୊΋͋Δɻ • ωοτϫʔΫ઀ଓ͕ෆ҆ఆͳ৔߹ TCP ઀ଓʹΑΓɺ͢΂ͯͷίωΫ γϣϯ͕ղܾ·Ͱʹ଴ͨ͞ΕΔέʔε͕༗Δɻཁ͸ύέϩεʹऑ͍ɻ • 4FSWFS 5$1ͷϨΠϠͰෆ੔߹͕͋Δͱෆ੔߹͕గਖ਼͞Ε Δ·Ͱશମ͕ϒϩοΫ͞ΕΔɻ

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

σʔλͷ΍ΓऔΓ: HTTP/3 • HTTP/3 Ͱ͸͜ͷ࢓૊ΈʹΑΓɺ઀ଓ಺Ͱͷσʔλෆ੔߹͕ ൃੜͯ͠΋શମΛετοϓͤͣ͞ʹ֘౰ͷετϦʔϜͷΈగ ਖ਼ͤ͞Δɻ • 4FSWFS Ұ෦ͷετϦʔϜ͕ࢭ·ͬͯ΋શମʹӨڹ͕ग़ͳ ͍࢓૊Έ

Slide 84

Slide 84 text

σʔλετϨʔδ

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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ﬁed Ұճμ΢ϯϩʔυͨ͠ϑΝΠϧ͸ωοτϫʔΫ͔ΒಡΈࠐΈͨ ͘ͳ͍ɻ࠶ར༻͍ͨ͠ɻ

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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Λ࡞Δ·ͰͷྲྀΕ

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

ϋϯζΦϯ

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

ωοτϫʔΫͷ΍ΓऔΓ • खͬऔΓૣ͘ curl ͰΞΫηεͯ͠த਎Λݟͯ Έ·͠ΐ͏ɻ DVSMJWWWIUUQTMPDBMIPTUMPHJO $POOFDUFEUPMPDBMIPTU QPSU TVDDFTTGVMMZTFUDFSUJpDBUFWFSJGZMPDBUJPOT 5-4W 065 5-4IBOETIBLF $MJFOUIFMMP 5-4W */ 5-4IBOETIBLF 4FSWFSIFMMP 5-4W */ 5-4IBOETIBLF $FSUJpDBUF 5-4W */ 5-4IBOETIBLF 4FSWFSLFZFYDIBOHF 5-4W */ 5-4IBOETIBLF 4FSWFSpOJTIFE

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

·ͱΊ

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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