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

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

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. ϒϥ΢βͷಈ͖ • ͜ͷʮ࠷ॳʹ಺༰͕දࣔ͞ΕΔʯ·Ͱͷ͜ͱ Λॳظදࣔͱ͍͏ɻ • ॳظදࣔΛ͍͔ʹ଎͘͢Δ͔ɺͱ͍͏ͷ΋Ұ ͭͷϢʔβʔମݧ /BWJHBUJPO
    4UBSU 'JSTU
    1BJOU 'JSTU
    $POUFOUGVM
    1BJOU Loading.. 'JSTU
    .FBOJOHGVM
    1BJOU -BSHFTU
    $POUFOUGVM
    1BJOU *NBHF 5JNF
    5P
    *OUFSBDUJWF *NBHF 'VMMZ
    -PBEFE *NBHF
35. ϒϥ΢βͷಈ͖ • ͞Βʹϒϥ΢β͸ॳظදࣔ͞Ε͔ͯΒJavaScript ౳ ʹΑͬͯ෦෼తʹHTML͕ߋ৽͞ΕΔͱͦΕʹԠͯ͡ ݟͨ໨΋มΘΔɻ • ͜ͷ෦෼తʹHTMLΛߋ৽͢ΔࣄͰΠϯλϥΫςΟϒ ͳಈ͖Λग़͢ɻ 'VMMZ
    -PBEFE *NBHF 6QEBUFE *NBHF 6QEBUFE *NBHF
36. ϨϯμϦϯάϓϩηε • HTML ͷϨϯμϦϯά͸ "ಈతʹ" ϨϯμϦϯ ά͢Δɻ • JavaScript ΍ϢʔβʔೖྗɺΞχϝʔγϣϯ ͳͲͰϨϯμϦϯά͕ߋ৽͞ΕΔɻ *OJUJBM
    3FOEFS ߋ৽ ߋ৽ ߋ৽ ߋ৽
37. ϨϯμϦϯάϓϩηε • ίϯςϯπ͕ಈతʹߋ৽͞ΕΔͱ͍͏͜ͱ͕ ΢Σϒͷಛ௃ • ͦͷͨΊʹ͍͔ͭ͘ͷதؒදݱΛ͍࣋ͬͯΔ IUNM
    IUNM %0. 4UZMFE 1BSTF 4UZMF -BZPVU
    1BJOU *NBHF
38. HTML Parse EJW
    Q
    IFMMP
    Q
    Q
    XPSME
    Q
    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 ͕ϖʔδ಺ʹ͋Δ৔߹͸ʢҰ౓΋๚໰͞Εͯͳ͔ͬͨΒʣͦͷ࣌఺Ͱൃੜ͢ Δɻ 
    EJH
    FYBNQMFDPN
    
    015
    14&6%04&$5*0/
    
    &%/4
    WFSTJPO
    
    qBHT
    VEQ
    
    
    26&45*0/
    4&$5*0/
    FYBNQMFDPN
    
    
    */
    "
    
    "/48&3
    4&$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 ϦΫΤετʹ͸ϦΫΤετߦͱϔομʔͱݺ͹ΕΔϝλ৘ใͱϘσΟ ͱݺ͹ΕΔίϯςϯτ৘ใؚ͕·ΕΔɻ • 1045
    JOEFYIUNM
    )551
    BDDFQU
    UFYUIUNM
    BDDFQUFODPEJOH
    H[JQ
    EFqBUF
    CS
    BDDFQUMBOHVBHF
    FO64 FOR KBR
    DBDIFDPOUSPM
    OPDBDIF
    DPPLJFGPPCBSCB[
    
    GPPCBSIPHFGVHB ϦΫΤετߦ ϦΫΤετϔομʔ ϦΫΤετϘσΟ σʔλ಺༰
56. σʔλͷ΍ΓऔΓ • ϦΫΤετΛड͚औͬͨΒαʔό͸ϨεϙϯεʢԠ౴ʣΛฦ͢ • HTTP Ϩεϙϯεʹ͸εςʔλεΛද͢৘ใͱϨεϙϯεϔομ ʢϝλσʔλʣɺϨεϙϯεϘσΟʢ಺༰ʣؚ͕·ΕΔ )551
    
    0,
    "HF
    
    $BDIF$POUSPM
    NBYBHF
    $POUFOU5ZQF
    UFYUIUNM
    DIBSTFU65'
    %BUF
    .PO
    
    "QS
    
    
    (.5
    $POUFOU-FOHUI
    
    EPDUZQF
    IUNM
    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. ͍ͬ͠ΐʹ ʮࣹܸͭͭ͠લਐʯ ͠·͠ΐ͏ɻ ϑϩϯτΤϯυΤϯδχΞͱ ͯ͠Ұॹʹ੾᛭ୖຏͰ͖Δ೔ Λָ͠Έʹ͍ͯ͠·͢ɻ