Movatterモバイル変換

[0]ホーム
URL:

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

Browser

Avatar for Recruit Recruit
August 09, 2024

 Browser

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

Avatar for Recruit

Recruit

August 09, 2024
Tweet

More Decks by Recruit

See All by Recruit

Other Decks in Technology

See All in Technology

Featured

See All Featured

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 QIFMMPQ QXPSMEQ

    EJW

  11. Web Webϒϥ΢β 4FSWFS Webαʔό EJW QIFMMPQ QXPSMEQ EJW EJWOPU GPP

    QOUIPGUZQF O \ DPMPSSFE ^ Q\ DPMPSCMVF ^ GVODUJPOTVN B C \ SFUVSOB 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 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

  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 ΍ϢʔβʔೖྗɺΞχϝʔγϣϯ

    ͳͲͰϨϯμϦϯά͕ߋ৽͞ΕΔɻ *OJUJBM3FOEFS ߋ৽ ߋ৽ ߋ৽ ߋ৽

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

    1BSTF 4UZMF -BZPVU 
 1BJOU

  90. HTML Parse EJW QIFMMPQ QXPSMEQ 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 \ DPMPSSFE ^ Q\ DPMPSCMVF ^

  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

    ͷ਺ • ηϨΫλͷଐੑͷ਺ • ηϨΫλͷཁૉ໊ͷ਺  \^ 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

  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 \ DPMPSSFE ^ Q\ DPMPSCMVF

    ^ 1BSTF3VMF 4UZMF3VMFT 4UZMF3VMFT 4UZMF3VMFT $44΋ύʔε͠ɺελΠϧͷϧʔϧηοτΛ࡞Δɻ

  100. 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

  101. 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Λ࡞Δ

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

  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 MFUJJJ \ MFUMJEPDVNFOUDSFBUF&MFNFOU

    MJ  MJUFYU$POUFOUUFTU 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 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

  115. ϨϯμϦϯάΤϯδϯ·ͱΊ • HTML͸ಈతʹߋ৽͞ΕΔϞσϧ • ಈతʹߋ৽͢ΔͨΊʹதؒදݱͱͯ͠ DOM Λ༻ҙ͓ͯ͠Γɺ JavaScript Ͱߋ৽ Ͱ͖Δ

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

  116. JavaScript Τϯδϯ

  117. JavaScript Τϯδϯ • JavaScript Λ࣮ߦ͢ΔΤϯδϯ • ࠷ۙͷΤϯδϯ͸େମ Just In Time

    ίϯύΠϥ͕͍ͭ ͓ͯΓɺ୯ͳΔΠϯλϓϦλͰ͸ͳ͘ɺ౷ܭతʹঢ়گ Λݟͯߴ଎Խ͞ΕΔ • ͜͜Ͱ͸ུ֓Λղઆ͠ɺΤϯδϯͷؾ࣋ͪΛ஌Δɻ • ͪͳΈʹ৘ใ͕ଟ͍ v8 ͷΤϯδϯΛࢀߟʹ͍ͯ͠Δɻ

  118. ͬ͘͟Γ֓ཁͱͯ͠ͷಈ͖ GVODUJPOTVN B C \ SFUVSOB C ^ TVN 

      ύʔαʔ ΠϯλϓϦλ +*5ίϯύΠϥ JavaScript ந৅ߏจ໦    &YDBBFDBF! $SFBUF6ONBQQFE"SHVNFOUT YDBBFDBG!G4UBSS 4YDBBFDC!G -EB/BNFE1SPQFSUZS <> <> όΠτίʔυ ػցޠ ౷ܭ৘ใ ࠷దԽ ୤࠷దԽ

  119. JavaScript Τϯδϯ • JavaScriptͷධՁ • ϝϞϦ؅ཧ • Πϕϯτϧʔϓ

  120. JavaScriptͷධՁ • ύʔαʔ • ΠϯλϓϦλ • JITίϯύΠϥ

  121. ύʔαʔ 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

  122. ύʔαʔ 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ͱ͍͏ߏ଄ɻ

  123. ΠϯλʔϓϦλ 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

  124. 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

  125. 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Ͱ࠷దԽ͢Δ

  126. 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 ΋͠΋ਪఆ஋͕֎Ε͍ͯͨΒඇ࠷దԽ͕૸Δɻ

  127. Just In Time ίϯύΠϥ GVODUJPOTVN B C \ SFUVSOB C

    ^ ਺ࣈΛ଍ؔ͢਺ TVN    Կ౓΋਺ࣈΛ଍͠߹Θ͓͚ͤͯ͹ɺTVNؔ਺ͷ Ҿ਺͸਺ࣈɺಛʹJOUFHFSCJUҐ͔͕Θ͔Δ ͦ͏͢Ε͹ɺػցޠʹ͢Δ࣌ʹ࠷దԽ͕Ͱ͖Δɻ

  128. Just In Time ίϯύΠϥ GVODUJPOTVN B C \ SFUVSOB C

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

  129. Just In Time ίϯύΠϥ GVODUJPOTVN B C \ SFUVSOB C

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

  130. Just In Time ίϯύΠϥ GVODUJPOTVN B C \ SFUVSOB C

    ^ ਺ࣈΛ଍ؔ͢਺ TVN    Կ౓΋਺ࣈΛ଍͠߹Θ͓͚ͤͯ͹ɺTVNؔ਺ͷ Ҿ਺͸਺ࣈɺಛʹJOUFHFSCJUҐ͔͕Θ͔Δ ͦ͏͢Ε͹ɺػցޠʹ͢Δ࣌ʹ࠷దԽ͕Ͱ͖Δɻ GVODUJPOTVN B C \ SFUVSOB 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 ͷղઆ) • 1045JOEFYIUNM)551 
 BDDFQUUFYUIUNM BDDFQUFODPEJOHH[JQ EF fl BUF CS BDDFQUMBOHVBHFFO64 FOR KBR 
 DBDIFDPOUSPMOPDBDIF DPPLJFGPPCBSCB[ 
 GPPCBSIPHFGVHB ϦΫΤετߦ ϦΫΤετϔομʔ ϦΫΤετϘσΟ σʔλ಺༰

  154. HTTP Semantics • ϦΫΤετΛड͚औͬͨΒαʔό͸ϨεϙϯεʢԠ౴ʣΛฦ͢ • HTTP Ϩεϙϯεʹ͸εςʔλεΛද͢৘ใͱϨεϙϯεϔομ ʢϝλσʔλʣɺϨεϙϯεϘσΟʢ಺༰ʣؚ͕·ΕΔ )5510, "HF

    $BDIF$POUSPMNBYBHF $POUFOU5ZQFUFYUIUNMDIBSTFU65' %BUF.PO "QS(.5 $POUFOU-FOHUI EPDUZQFIUNM 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)BOETIBLFd5-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$POUSPMNBYBHFඵؒɺΫϥΠΞϯτͷ$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 ࣮ͯ͠ߦ͍ͯͩ͘͠͞ɻ • HJUDMPOFIUUQTHJUIVCDPNSFDSVJUUFDICSPXTFSIBOETPOHJU DECSPXTFSIBOETPO OQNJOTUBMM OPEFBQQNKT PQFOIUUQMPDBMIPTU

  194. ࣮ࡍͷϦΫΤετ/ϨεϙϯεΛ ோΊΔ • ಈ͍ͨΒ࣮ࡍͷϦΫΤετ/ϨεϙϯεΛோΊ ͯΈ·͠ΐ͏ɻ • Chrome Ͱ։ൃπʔϧ(⌘ + Shift

    + I)Λ։͖ɺ ωοτϫʔΫλϒʹભҠ͠ɺϦΫΤετɾϨ εϙϯεΛݟͯΈ·͢ɻ

  195. ωοτϫʔΫͷ΍ΓऔΓ • ͔ͤͬ͘ͳͷͰ https ʹͯ͠Έ·͠ΐ͏ɻ • લॲཧͱͯ͠CAͱূ໌ॻΛ࡞Γɺແཧ໼ཧ trust ͓͖ͤͯ͞·͢ɻ OQNFYFDNLDFSUDSFBUFDB

    OQNFYFDNLDFSUDSFBUFDFSU TVEPTFDVSJUZBEEUSVTUFEDFSUESUSVTU3PPUL-JCSBSZ ,FZDIBJOT4ZTUFNLFZDIBJODBDSU

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

    BQQNKT JNQPSU\SFBE'JMF4ZOD^GSPNGT௥ه JNQPSU\DSFBUF4FSWFS^GSPNIUUQTIUUQ͔ΒIUUQTʹมߋ DPOTUSFRTPO  DSFBUF4FSWFS \ LFZSFBE'JMF4ZOD DFSULFZ ௥ه DFSUSFBE'JMF4ZOD DFSUDSU ௥ه ^ MJTUFO QPSU 

  197. ωοτϫʔΫͷ΍ΓऔΓ • खͬऔΓૣ͘ 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  

  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. ϒϥ΢βͷத਎ͱ࢓૊ΈΛΘ্͔ͬͨ ͰϋϯζΦϯͰҰؾʹಈ͘΋ͷΛࢼ͢ • ಄ͷதʹϒϥ΢βͷϚοϓΛ΋ͬͨঢ়ଶͰϋϯζΦϯΛ΍ͬ ͯ΋Β͍·ͨ͠ɻ • ͢΂ͯͰ͖ͳ͔ͬͨਓ΋͍Δͱࢥ͏ͷͰɺͦͷํ͸॓୊ͱ͠ ͯ࢒͓͖ͯ͠·͢ɻ • ΞϓϦέʔγϣϯΛ࡞Δ͜ͱ͕Ұ൪ษڧʹͳΔͷͰ͓͢͢Ί

    ͠·͢ɻ • ಄ͷதʹϚοϓΛ࡞ΓɺΞϓϦέʔγϣϯΛ࡞ΓɺͦΕΛߋ ৽͢Δͱ͍͏αΠΫϧΛճ͍͖ͯ͠·͠ΐ͏ɻ
[8]ページ先頭
©2009-2025 Movatter.jp