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

フロントエンドエンジニアになる覚悟 in Open8

フロントエンドエンジニアになる覚悟 in Open8

Open8 社で実施したフロントエンドエンジニアになる覚悟の話です。

D76231a2114896dfcc7b79ac69558b79?s=128

Yosuke Furukawa
PRO

July 21, 2021
Tweet

Transcript

  1. ϑϩϯτΤϯυΤϯδ χΞʹͳΔ֮ޛ 2021/07/07 @ Open 8 ࣾ಺ษڧձ

  2. Twitter: @yosuke_furukawa Github: yosuke-furukawa

  3. 01&/ٕज़ސ໰ʹͳΓ·ͨ͠

  4. ٕज़ސ໰ͱͯ͠΍͍͖͍ͬͯͨ ͜ͱ • ιʔείʔυͷϨϏϡʔ • ϖΞϓϩ • ٕज़ઓུͷΞυόΠε • ࣾ಺ษڧձͰͷߨࢣ׆ಈ

    (˒ࠓ೔͸ίϨͰ͢!)
  5. ੲ࿩ͨ͠΋ͷ • ΤϯδχΞʹͳΔ֮ޛ • εϖγϟϦετʹͳΔ֮ޛ

  6. ࠓճͷ࿩͸ • ϑϩϯτΤϯυΤϯδχΞͬͯಛʹͲ͏͍͏ ֮ޛ͕ඞཁͳͷ͔ʁ • ͳΜ͔ΩϥΩϥͯ͠Δ͚Ͳɺ࣮ଶͲ͏͍͏ਓ ୡͳͷ͔ʁ • ͜ͷลΓΛத৺ʹ࿩͠·͢

  7. ϑϩϯτΤϯυΤϯδχΞͷ ྺ࢙͸࣮͸͘͢͝ઙ͍

  8. ϑϩϯτΤϯυΤϯδχΞͱ͸... ͱ͍͏࿩Λ͢Δલʹ

  9. ϦονͳUI͕͜͜࠷ۙ૿͑ͯ ͖ͨͱࢥ͍·ͤΜ͔?

  10. εϫΠϓͯ͠ίϯςϯπΛࠩ͠ସ͑Δ Χϧʔηϧ UI

  11. ແݶεΫϩʔϧ

  12. ը໘ΛҾͬுͬͯϦϩʔυ͢Δ Pull to refresh

  13. ͜͏͍͏ϦονͳUI͕૿͑ͯ ͖͍ͯΔ

  14. ͳ͔ͥʁ

  15. εϚʔτϑΥϯͷ୆಄ͱڞʹ ยख͚ͩͰ࢖͑ΔUIͰ͋Γ͔ ͭΠϯλϥΫςΟϒͳ΋ͷ͕ ૿͍͑ͯΔɻ

  16. ϑϩϯτΤϯυΤϯδχΞ͸ σόΠεͷਐԽͱUIͷมԽʹ Αͬͯ࢈·Εͨ

  17. ૯ͯ͡ݴ͏ͱϢʔβʔମݧ ʢUser eXperienceʣͷมԽ

  18. ϑϩϯτΤϯυΤϯδχΞ͸ ϢʔβʔମݧΛ޲্͢Δ ΤϯδχΞͰ͋Δɻ

  19. ϢʔβʔମݧΛ޲্͢ΔͨΊʹ • MUST NOT (΍ͬͯ͸͍͚ͳ͍͜ͱ) • MUST (΍Βͳ͖Ό͍͚ͳ͍͜ͱ) • ৺ߏ͑

  20. MUST NOT ΍ͬͯ͸͍͚ͳ͍͜ͱ

  21. ϒϥ΢βͷମݧΛ յͯ͠͸͍͚ͳ͍

  22. ϒϥ΢βͷػೳ 🔒IUUQTFYBNQMFDPN

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

  24. ϒϥ΢βͷػೳ • ΞυϨεόʔʹ͍Εͨ URL Λجʹϖʔδ͕ϨϯμϦϯά͞ΕΔ • ϦϯΫΛΫϦοΫ͢ΔͳͲͷΞΫγϣϯ͕͋Δͱ URL ͕มԽ ͠ɺཤྺʹͨ·Δ

    • ໭ΔϘλϯΛԡ͢ͱཤྺΛ໭ΕΔ • ਐΉϘλϯΛԡ͢ͱཤྺΛਐΊΒΕΔ • ϦϩʔυϘλϯΛԡ͢ͱ࠶౓ URL Λߋ৽͢Δ *NBHF
  25. ϒϥ΢βͷػೳ • ϒϥ΢βͷجຊػೳΛյ͢Α͏ͳΞϓϦέʔγϣϯ͸ମݧ͕ѱ ͍ɻ • ໭ͬͨ࣌ʹ΋ͱ΋ͱ͍ͨεΫϩʔϧҐஔ͡Όͳ͍৔ॴʹ໭͞Ε ͨΒɾɾɾɾʁ • εΫϩʔϧ͢ΔࡍʹΨλΨλͯ͠εϜʔεͳૢ࡞͕ग़དྷͳ͔ͬ ͨΒɾɾʁ

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

    • Enter ΩʔͰૹ৴Ͱ͖ͳ͍ϑΥʔϜΛ࡞ͬͯ͠·ͬͨ Βɾɾɾʁ શ෦ѱ͍ϢʔβʔΤΫεϖϦΤϯε
  27. ϒϥ΢βͷػೳ • େݪଇ: ΢ΣϒΞϓϦέʔγϣϯ͸ϒϥ΢βͷػೳΛ յͯ͠͸͍͚ͳ͍ɻ • յ͢ͱମݧ͕ѱ͍͚ͩ͡Όͳ͍ɻ • ΞΫηγϏϦςΟ΋ѱ͘ͳΔɻ •

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

    ηΩϡϦςΟͱ͔ͷอޢػߏ΋ಇ͔ͳ͘ͳΔ͔΋ɻ ͲΜͳʹྑ͍ΞϓϦͰ͋ͬͯ΋ ϒϥ΢βͷػೳΛյ͢Α͏ͳΞϓϦ͸࢖ΘΕͳ͘ͳΔ
  29. MUST ΍Βͳ͖Ό͍͚ͳ͍͜ͱ

  30. ϒϥ΢βͱαʔόʹ͍ͭͯ ஌Δ

  31. ϒϥ΢βͷػೳΛյ͞ͳ͍ͨ Ίʹ͸ϒϥ΢βʹ͍ͭͯ஌Δ ͜ͱ͕Ұ൪ྑ͍

  32. ϒϥ΢β͚ͩͰ͸ΞϓϦέʔ γϣϯ͸੒ཱ͠ͳ͍ɺαʔόʹ ͍ͭͯ΋஌͓͔ͬͯͳͯ͘͸ ϢʔβʔମݧΛ޲্Ͱ͖ͳ͍

  33. ϒϥ΢βͷಈ͖ • ࠷ॳʹ HTML ΛಡΈࠐΉ • HTML ಺ʹ͋ΔαϒϦιʔε (CSS, JavaScript,

    Image, Video) ΛಡΈࠐΉ • ಡΈࠐ·ΕͨϦιʔεΛجʹϨΠΞ΢τͯ͠ϖʔδΛϨϯμ Ϧϯά͢Δ ϨϯμϦϯά
  34. ϒϥ΢βͷಈ͖ • ͜ͷʮ࠷ॳʹ಺༰͕දࣔ͞ΕΔʯ·Ͱͷ͜ͱ Λॳظදࣔͱ͍͏ɻ • ॳظදࣔΛ͍͔ʹ଎͘͢Δ͔ɺͱ͍͏ͷ΋Ұ ͭͷϢʔβʔମݧ /BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM

    1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU -BSHFTU$POUFOUGVM 1BJOU *NBHF 5JNF5P*OUFSBDUJWF *NBHF 'VMMZ-PBEFE *NBHF
  35. ϒϥ΢βͷಈ͖ • ͞Βʹϒϥ΢β͸ॳظදࣔ͞Ε͔ͯΒJavaScript ౳ ʹΑͬͯ෦෼తʹHTML͕ߋ৽͞ΕΔͱͦΕʹԠͯ͡ ݟͨ໨΋มΘΔɻ • ͜ͷ෦෼తʹHTMLΛߋ৽͢ΔࣄͰΠϯλϥΫςΟϒ ͳಈ͖Λग़͢ɻ 'VMMZ-PBEFE

    *NBHF 6QEBUFE *NBHF 6QEBUFE *NBHF
  36. ϨϯμϦϯάϓϩηε • HTML ͷϨϯμϦϯά͸ "ಈతʹ" ϨϯμϦϯ ά͢Δɻ • JavaScript ΍ϢʔβʔೖྗɺΞχϝʔγϣϯ

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

    1BSTF 4UZMF -BZPVU 1BJOU *NBHF
  38. HTML Parse EJW QIFMMPQ QXPSMEQ EJW 1BSTF %*7 1 5&95

    1 5SFF %PDVNFOU )5.- #PEZ %JW 1 5&95 1 5&95 • λάΛωετͯ͠දݱ • ໦ߏ଄ͱ͍͏ܗͰσʔλߏ଄ͱͯ͠ දݱ͞ΕΔɻ
  39. DOM %PDVNFOU )5.- #PEZ %JW 1 5&95 1 41"/ •

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

    DOM ʹରͯ͠ΠϕϯτΛ௥Ճ͢ Δ͜ͱͰϢʔβʔͷΞΫγϣϯʹ ରͯ͠ͷॲཧΛ௥ՃͰ͖Δɻ var button = document.getElementById("submit"); button.addEventListener("click", function () { console.log("clicked!!"); }); Πϕϯτ ௥Ճ
  41. ϒϥ΢βΛ஌Ζ͏ʢ·ͱΊʣ • ϒϥ΢βͷػೳΛ஌Ζ͏ • ϒϥ΢βͷಈ͖ • ॳظදࣔ͞Ε͔ͯΒߋ৽͢Δ • ෦෼తʹߋ৽͢ΔࡍʹDOMΛ࢖ͬͯߋ৽͢Δ͜ͱ͕Ͱ͖Δɻ •

    ΠϕϯτΛDOMʹ௥Ճ͢Δ͜ͱͰɺϢʔβʔͷΞΫγϣϯʹ ج͍ͮͯΠϯλϥΫςΟϒͳಈ࡞Λ͢Δ͜ͱ͕Ͱ͖Δɻ
  42. ͦͷ্Ͱ • ϒϥ΢βͷػೳ͕յΕͯ͠·͏΋ͷͰΑ͋͘Δ ͷ͸ʮؒҧͬͨΠϕϯτͷऔΓѻ͍ʯ Ϙλϯ͕ΫϦοΫ͞Ε͚ͨ࣌ͩ ৘ใΛૹ৴͢ΔΑ͏ʹ࡞ΒΕͨUI var button = document.getElementById("submit");

    button.addEventListener("click", async function () { await fetch("/login", { method: "POST" }) }); ຊདྷ͸ form ͕ submit ͞Εͨ࣌ʹൃՐ ͤ͞ΔΑ͏ʹ͠ͳ͍ͱ͍͚ͳ͍ɻ var form = document.getElementById("form"); form.addEventListener("submit", async function () { await fetch("/login", { method: "POST" }) });
  43. ଞʹ΋ • εΫϩʔϧதʹΨλΨλ͢Δͷ͸ɺεΫϩʔϧ࣌ʹෳࡶͳ ܭࢉΛ͍ͯ͠Δࣄ͕ଟ͍ɻ • Α͋͘Δͷ͸ແݶεΫϩʔϧͷ࣌ εΫϩʔϧ࣌ʹͲ͜·ͰಡΈࠐΜ͔ͩͳͲͷ ෳࡶͳܭࢉΛஞ࣍తʹॲཧ͍ͯ͠Δͱ͜͏ͳΔ document.addEventListener("scroll", function

    () { // ෳࡶͳܭࢉ }); scroll ͸౎౓ൃՐͤ͞Δඞཁ͸ͳ͍ͷͰɺ ΠϕϯτΛؒҾ͍ͨΓൃՐͤ͞ΔλΠϛϯά ΛݮΒ͢ඞཁ͕͋Δ
  44. αʔόʹ͍ͭͯ஌Ζ͏

  45. αʔόʹ͍ͭͯ஌Ζ͏ • ΫϥΠΞϯτʹಈ͖Λ༩͑ͯϢʔβʔମݧΛ࡞Δͷ ͕ϑϩϯτΤϯυΤϯδχΞͷ໾ׂͷେ෦෼ • ͨͩ͠ɺΫϥΠΞϯτͷ͜ͱ͚ͩ஌͓͚ͬͯ͹͍͍ Θ͚Ͱ͸ͳ͍ • ϢʔβʔମݧΛ࠷େԽ͢Δʹ͸ΫϥΠΞϯτͱαʔ όͷ྆ํΛ஌Δඞཁ͕͋Δɻ

  46. αʔόʹ͍ͭͯ஌Ζ͏ • WebΞϓϦέʔγϣϯ͸HTML΍CSS΍JavaScriptͱ ͍ͬͨϦιʔεΛαʔό͔ΒಘΔඞཁ͕͋Δɻ • JSONͳͲͷσʔλ΋αʔό͔ΒಘΔඞཁ͕͋Δɻ • ϒϥ΢β͔ΒϦιʔε΍σʔλΛཁٻʢϦΫΤε τʣ͠ɺαʔό͔ΒԠ౴ʢϨεϙϯεʣ͢Δɻ

  47. αʔόͱΫϥΠΞϯτ • ΫϥΠΞϯτ͔ΒαʔόʹϦΫΤετΛߦ͍ɺαʔό͸ͦΕΛ Ԡ౴͢ΔࣄͰϦιʔε΍σʔλΛऔಘ͍ͯ͠Δɻͦͷ಺༰Λج ʹDOMΛߋ৽ͤ͞Δɻ

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

  49. ͦ΋ͦ΋௨৴Λߦ͏ͱ͸ʁ • Public IP / PORT ΛΫϥΠΞϯτ͕஌͍ͬͯͯ • αʔό͕઀ଓΛ଴͍ͬͯͯ •

    ͦ͜ʹ઀ଓΛཁٻ͠ • ઀ଓΛཱ֬ͨ͠Βɺσʔλͷަ׵Λߦ͏ Public IP / PORT Listen Data Transfer
  50. ͡Ό͋ 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   */ " 
  51. PORT ͸ʁ • ༗໊ͳϓϩτίϧͷ৔߹༧Ίܾ·ͬͯΔɻ • http ͳΒ 80 ൪ɺ https

    ͳΒ 443 ൪ͱ͍ͬͨ෩ʹɻ • ͜ͷ༧ΊܾΊΒΕͨ PORT ͷ͜ͱΛ well-known PORT ͱݺͿɻ • well-known ͳ PORT ͸ಛݖ͕ඞཁͳέʔε΋ଟ͍ͷͰɺ։ൃ؀ ڥ౳Ͱ͸ 3000 ൪ͱ͔ʹͯ͠ɺ localhost:3000 Ͱݺͼग़͢͜ͱ ΋ଟ͍ɻ
  52. ઀ଓΛཱ֬ͱ͍͏ͷ͸ʁ • (؆ུԽͷͨΊ) TCP Λϕʔεʹ࿩͢ͱɺ֘౰ͷαʔόʹ͍͖ͳ Γ઀ଓ͢ΔͷͰ͸ͳ͘ɺ3ճͷ઀ଓ֬ೝΛܦͯ઀ଓ͢Δɻ • ͜ͷ઀ଓ֬ೝͷ͜ͱΛ 3 way

    handshake ͱݺͿɻ ͭͳ͛ΔΑʔ (SYN) ͍͍Αʔ ͬͪ͜΋ͭͳ͛ΔΑʔ(SYN-ACK) ͡Ό͋ͭͳ͙Ͷʔ (ACK)
  53. ͡Ό͋ࢲͷ伴ͱ߹Θͤͯ͜ΕͰ࿩͠·͠ΐ͏ɻ (Client Certificate) ઀ଓΛཱ֬ͱ͍͏ͷ͸ʁ • HTTP ͳΒ͜ΕͰܨ͕Δ͕ɺ࠷ۙͷେମͷWebαʔό͸ HTTPS ͳͷͰɺ͜Ε͚ͩͰ͸ܨ͕Βͳ͍ɻ҉߸ԽͷͨΊͷ΍ΓऔΓ͕ߋ ʹߦΘΕΔɻ(※؆ུԽ͍ͯ͠ΔͨΊɺਖ਼֬Ͱ͸ͳ͍)

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

    ΑΖ͓͘͠ئ͍͍ͨ͠·͢ɻ(Client Hello) ͪ͜Βͦ͜ΑΖ͓͘͠Ͷ͕͍͠·͢ɻ (Server Hello) Θͨ͠͸͜͏͍͏΋ͷͰ͢ɻ (Server Certificate) ͜͏͍͏伴Ͱ࿩ͤ·͢ (Server Key Exchange) Θͨ͠͸͜͏͍͏΋ͷͰ͢ɻ(Client Certificate) )5514௨৴͸5$1ͷ΍ΓऔΓͷޙͰ҉߸ԽͷͨΊͷऔΓܾ ΊΛ͢Δεςοϓ͕͋ΔɻͦΕΛܦͯ઀ଓ͞ΕΔɻ
  55. σʔλͷ΍ΓऔΓ • ઀ଓཱ͕֬͞Εͨޙ͸ HTTP ϓϩτίϧʹΑΔσʔλͷ΍ΓऔΓΛߦ͏ɻ • HTTP ͸جຊతʹϦΫΤετ / ϨεϙϯεͰͷ΍ΓऔΓ͕ߦΘΕΔɻ

    • HTTP ϦΫΤετʹ͸ϦΫΤετߦͱϔομʔͱݺ͹ΕΔϝλ৘ใͱϘσΟ ͱݺ͹ΕΔίϯςϯτ৘ใؚ͕·ΕΔɻ • 1045JOEFYIUNM)551 BDDFQUUFYUIUNM BDDFQUFODPEJOHH[JQ EFqBUF CS BDDFQUMBOHVBHFFO64 FOR KBR DBDIFDPOUSPMOPDBDIF DPPLJFGPPCBSCB[  GPPCBSIPHFGVHB ϦΫΤετߦ ϦΫΤετϔομʔ ϦΫΤετϘσΟ σʔλ಺༰
  56. σʔλͷ΍ΓऔΓ • ϦΫΤετΛड͚औͬͨΒαʔό͸ϨεϙϯεʢԠ౴ʣΛฦ͢ • HTTP Ϩεϙϯεʹ͸εςʔλεΛද͢৘ใͱϨεϙϯεϔομ ʢϝλσʔλʣɺϨεϙϯεϘσΟʢ಺༰ʣؚ͕·ΕΔ )5510, "HF $BDIF$POUSPMNBYBHF

    $POUFOU5ZQFUFYUIUNMDIBSTFU65' %BUF.PO "QS(.5 $POUFOU-FOHUI EPDUZQFIUNM IUNM IFBE  εςʔλεߦ Ϩεϙϯεϔομ ϨεϙϯεϘσΟ
  57. σʔλͷ΍ΓऔΓ • 200ܥ: ੒ޭɺσʔλͷຊମ͕͋Ε͹ૹΔ • 300ܥ: ϦμΠϨΫγϣϯϝοηʔδ • 400ܥ: ΫϥΠΞϯτΤϥʔ

    • 500ܥ: αʔόΤϥʔ
  58. 4FSWFS GET /main.css GET /main.js GET /image0.png σʔλͷ΍ΓऔΓ GET /index.html

    200 OK 200 OK 404 Not Found 304 Not Modified
  59. 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Τϯδϯ͕࣮ߦ͞ΕΔϑΣʔζΛܦͯϖʔδ͕ग़Δ
  60. αʔόΛ஌Ζ͏ʢ·ͱΊʣ • ΫϥΠΞϯτ͔Βཁٻͯ͠Ϧιʔε΍σʔλ Λ΍ΓऔΓ͢Δର৅͕αʔό • αʔόʹରͯ͠ωοτϫʔΫ઀ଓΛߦ͍ɺ σʔλΛసૹ͢Δ • HTTPͷϦΫΤετͱϨεϙϯεΛجʹϖʔδ Λߋ৽͢Δ

  61. ͦͷ্Ͱ • ϒϥ΢βͷػೳ͕յΕͯ͠·͏΋ͷͰΑ͋͘Δͷ͸ʮURLΛҙ͍ࣝͯ͠ͳ ͍ʯ͔Β • ຊདྷϖʔδͷ಺༰ͱURL͸ରԠ͍ͯ͠ͳ͍ͱ͍͚ͳ͍ • ʮແݶεΫϩʔϧʯ΍ʮ΋ͬͱݟΔʯͰϖʔδͷ಺༰͕มΘ͍ͬͯΔʹ΋ ͔͔ΘΒͣɺURL͕มΘΒͳ͔ͬͨ৔߹ •

    ϖʔδΛߋ৽ͯ͠͠·͏ͱݟͯͨ͸ͣͷεΫϩʔϧҐஔ͕ࣦΘΕͯ͠·͏ • ຊདྷͳΒʮ΋ͬͱݟΔʯ΍ʮࠓԿϖʔδ໨ʹ͍Δͷ͔ʯͱ͍ͬͨ৘ใ͕ URLʹೖ͍ͬͯͳ͍ͱ͍͚ͳ͍ɻ
  62. ͭ·Γ ࣮ࡍʹ͸ 2 ϖʔδ໨ʹ͍ͨͱͯ͠΋ͦΕΛ URL΋ߋ৽͓͔ͯ͠ͳ͍ͱϦϩʔυͯ͠͠·͏ͱ ϖʔδ͕ 1 ϖʔδ໨ʹ໭ͬͯ͠·͏ https://example.com/list?page=2 (ຊདྷ͍Δ΂͖URL)

    https://example.com/list (࣮ࡍͷURLɺ͜ͷ࣌఺ͰਐΜͩΓ໭ͬͨΓͨ͠Β...? Ϧϩʔυͨ͠Β...?)
  63. ϒϥ΢βͱαʔόΛ஌Ζ͏ • ϒϥ΢βͷத਎Λࡉ͔͘஌Βͳͯ͘΋ϑϩϯτΤϯυ։ ൃ͸Ͱ͖Δ͕ɺ஌Βͳ͍ͱϢʔβʔମݧΛ޲্ͤ͞Δ͜ ͱ͸Ͱ͖ͳ͍ɻ • ಛʹϒϥ΢βͷػೳΛյ͢Α͏ͳ࣮૷Λ͏͔ͬΓͯ͠͠ ·ͬͯ΋ؾ͚ͮͳ͔ͬͨΓ͢Δɻ • ʮಈ͔͘Β͍͍ʯͰ͸ͳ͘ɺϒϥ΢βͷݪཧΛ஌Γɺαʔ

    όͷಈ͖Λཧղ্ͨ͠ͰΞϓϦέʔγϣϯΛ࡞Ζ͏ɻ
  64. ৺ߏ͑

  65. ඇػೳཁ݅ʹͩ͜ΘΓΛ΋ͭ΂͖Ͱ͋ Δ͜ͱ͸ཧղ͕ͨ͠ɺʮϑϩϯτΤϯ υΤϯδχΞͱͯ͠΍ͬͨ΄͏͕͍͍ ͜ͱʯ͸ͲΜͳ͜ͱͳͷ͔ʁ

  66. ͜Ε·Ͱݟͯ΋Βͬͨͱ͓ ΓɺϑϩϯτΤϯυΤϯδχ Ξͱͯ͠ཁٻ͞Ε͍ͯΔ஌ࣝ ͸޿ͯ͘ਂ͍

  67. ͜ͷ஌ࣝΛશ෦཈͑Α͏ͱ͠ ͨΒແݶʹ͕࣌ؒඞཁʹͳΔ

  68. ແݶͷதͰ༗ݶͷॲཧΛ͢Δ ͷʹඞཁͳͷ͸ษڧ΍౒ྗͰ ͸ͳ͘ɺ Ϟνϕʔγϣϯ

  69. HTML CSS JS ΢ΣϒΛߏ੒͢Δݴޠ Backend Language (Java, Go)

  70. DOM Cookie DevTools ϒϥ΢βΛߏ੒͢Δ಺༰ CSSOM window navigator Headers

  71. DNS URL HTTP(S) ωοτϫʔΫ WebSocket TCP TLS HTTP/2

  72. Cache Critical- Rendering Path Metrics Tools ύϑΥʔϚϯε Memory CPU I/O

  73. XSS CSRF SQL Injection ηΩϡϦςΟ DoS TLS/SSL

  74. React Angular Redux JS Frameworks Vue.js Polymer

  75. HTML CSS JS DOM Cookie DevTools CSSOM window navigator Headers

    DNS URL HTTP(S) WebSocket TCP TLS React Redux Memory CPU I/O DoS TLS/SSL
  76. େมͰ͢Ͷ😨

  77. Ͳ͏΍ͬͨΒຬวͳ͘ ཈͑ΒΕΔͷ͔ʁ

  78. ๻ͷ৔߹

  79. ৺͕͚ͯΔࣄ • ஌ࣝʹ֞ࠜ͸࡞Βͳ͍ • ܧଓ͢Δ

  80. ஌ࣝʹ֞ࠜΛ࡞Βͳ͍

  81. ஌ࣝʹ֞ࠜΛ࡞Βͳ͍ • Dev / Ops Ͱ͸ͳ͘ Dev 💚 Ops •

    Engineer / Designer Ͱ͸ͳ͘ Engineer 💚 Designer • Backend / Frontend Ͱ͸ͳ͘ Backend 💚 Frontend
  82. ஌ࣝʹ֞ࠜΛ࡞Βͳ͍ • ཧ૝͸IࣈܕΑΓ΋Tࣈܕ • Ұݸ࣠Λ࡞͔ͬͯͦ͜Β޿͛Δ

  83. ஌ࣝʹ֞ࠜΛ࡞Βͳ͍ • Tࣈܕͷਓ͕૿΍͍͖͍ͯͨ͠ɻ • զʑͷֶͿ͜ͱ͸ଟ͍ɺͰ΋Tࣈܕͷਓ͕૿͑Ε͹ͦͷ෼ΧόʔͰ ͖Δɻ Designer FE BE

  84. ๻ͷ৔߹

  85. ׂͱͳΜͰ΋޷͖ • Πϯϑϥ΋޷͖ • όοΫΤϯυ΋޷͖ • ϓϩάϥϛϯάݴޠͦͷ΋ͷ΋޷͖ • ϓϩμΫτΛߏங͢Δͷ΋޷͖ •

    σβΠϯܥͷπʔϧ΋ษڧͯ͠Δ
  86. ׂͱͳΜͰ΋޷͖ • Πϯϑϥ΋޷͖ • όοΫΤϯυ΋޷͖ • ϓϩάϥϛϯάݴޠͦͷ΋ͷ΋޷͖ • ϓϩμΫτΛߏங͢Δͷ΋޷͖ •

    σβΠϯܥͷπʔϧ΋ษڧͯ͠Δ ͳΜͰ΋஌Δඞཁ͸ͳ͍ɺͰ΋ ޷ح৺ʹ֞ࠜ͸࡞ͬͯ΄͘͠ͳ͍ɻ
  87. ஌ࣝʹ֞ࠜΛ࡞Βͳ͍

  88. ஌ࣝʹ֞ࠜΛ࡞Βͳ͍ • ͪ͸΍;Δ 13 ר ࡩ୔ ਯʮ͜ΕͱܾΊͨಓͰ஌Βͳͯ͘ ྑ͍͜ͱͳΜ͔̍ͭ΋ͳ͍ΘΑʯ

  89. ܧଓ͢Δ

  90. ܧଓ͢Δ • ಠֶେશ • ʮԿ΋͍ͯ͠ͳ͍ঢ়ଶ͔Β ࢝ΊΔ͜ͱ͸೉͍͕͠ɺҰ୴ ࢝Ίͨ͜ͱΛ్தͰத్൒୺ͳ ··์Γग़͢͜ͱ΋·ͨ೉͍͠ʯ

  91. ຖ೔ίʔυΛॻ͘ ৽͍͠΋ͷʹ΋৮ΕΔ Leetcode Λຖ೔ղ͍ͯΔʢ࠷ۙ͸RustͰ) Write Code Everyday Ͱ1೥൒ܧଓ

  92. ܧଓ͢Δ • ϑϩϯτΤϯυΤϯδχΞʹͳΔͱಛʹݺٵ͢ ΔΑ͏ʹֶ͹ͳ͖Ό͍͚ͳ͍͜ͱ͕ग़ͯ͘Δ • ৽͍͠ϥΠϒϥϦ͸ৗʹग़ͯ͘Δ͠ɺߟ͑Δ͜ ͱ΋ଟ͍ • ʮָ͠Έͳ͕Βܧଓ͢Δʯ͜ͱ͕Ͱ͖Δͱྑ͍

  93. ֮ޛΛ࣋ͱ͏ • ΞϓϦέʔγϣϯΛ࡞Ζ͏ • ඇػೳཁ݅ʹͩ͜ΘΖ͏ • ஌ࣝΛᩦཉʹ࣋ͬͯௐ΂Α͏ • ͜ΕΛܧଓతʹ΍Γଓ͚Α͏

  94. ֮ޛΛ࣋ͱ͏ • ΞϓϦέʔγϣϯΛ࡞Ζ͏ • ඇػೳཁ݅ʹͩ͜ΘΖ͏ • ஌ࣝΛᩦཉʹ࣋ͬͯௐ΂Α͏ • ͜ΕΒΛܧଓతʹ΍Γଓ͚Α͏ ྑ͍ΤϯδχΞʹͳΔͷʹۙಓͳΜ

    ͔ແ͍͠ɺ֮ޛΛ࣋ͭඞཁ͕͋Δ
  95. ࠷ޙʹ

  96. ϑϩϯτΤϯυΤϯδχΞͷ ࠓޙ

  97. ϑϩϯτΤϯυΤϯδχΞత ʹ͸ܹಈͷ࣌୅

  98. ϓϥΠόγʔอޢʹΑΔϒϥ ΢βϓϥοτϑΥʔϜͷมߋ

  99. ωοτϫʔΫϨΠϠ΋ HTTP/3ʹɻ

  100. ॻ͍͍ͯΔݴޠ΋ TypeScript ͕ओྲྀʹɻ

  101. React / Vue.js ΋ Next.js / Nuxt.js ͔Β࢖͏ͳͲͷํ๏ ͕ओྲྀʹɻ

  102. ϓϥοτϑΥʔϜ΋ϓϩτίϧ ΋ݴޠ΋มΘΔɺϑϨʔϜϫʔ Ϋ΋ͲΜͲΜมΘ͍ͬͯ͘

  103. ਐԽʹ͍͍ͭͯ͘ͱ͍͏͜ͱͦ ͷ΋ͷ΋େมɻ

  104. ʮָ͠Έͳ͕Β΋ɺۤ͠Έͳ͕ Β΋લʹਐΉඞཁ͕͋Δɻʯ ͜ΕΛཧղ͢Δ͜ͱ͕͜Ε͔Β ͷϑϩϯτΤϯυΤϯδχΞʹ ඞཁͳૉ࣭ʹͳΔɻ

  105. ࣹܸͭͭ͠લਐ Կ΋ग़དྷͳ͍೔Ͱ͋ͬͯ΋Կ͔ Λͯ͠લʹਐΉɺͦΕΛ͠ଓ͚ Ε͹͕࣌ຯํʹͳͬͯ͘ΕΔ by Joel on Software

  106. ͍ͬ͠ΐʹ ʮࣹܸͭͭ͠લਐʯ ͠·͠ΐ͏ɻ ϑϩϯτΤϯυΤϯδχΞͱ ͯ͠Ұॹʹ੾᛭ୖຏͰ͖Δ೔ Λָ͠Έʹ͍ͯ͠·͢ɻ