Open8 社で実施したフロントエンドエンジニアになる覚悟の話です。
ϑϩϯτΤϯυΤϯδχΞʹͳΔ֮ޛ2021/07/07 @ Open 8 ࣾษڧձ
View Slide
Twitter: @yosuke_furukawaGithub: yosuke-furukawa
01&/ٕज़ސʹͳΓ·ͨ͠
ٕज़ސͱ͍͖͍ͯͬͯͨ͜͠ͱ• ιʔείʔυͷϨϏϡʔ• ϖΞϓϩ• ٕज़ઓུͷΞυόΠε• ࣾษڧձͰͷߨࢣ׆ಈ (˒ࠓίϨͰ͢!)
ੲͨ͠ͷ• ΤϯδχΞʹͳΔ֮ޛ• εϖγϟϦετʹͳΔ֮ޛ
ࠓճͷ• ϑϩϯτΤϯυΤϯδχΞͬͯಛʹͲ͏͍͏֮ޛ͕ඞཁͳͷ͔ʁ• ͳΜ͔ΩϥΩϥͯ͠Δ͚Ͳɺ࣮ଶͲ͏͍͏ਓୡͳͷ͔ʁ• ͜ͷลΓΛத৺ʹ͠·͢
ϑϩϯτΤϯυΤϯδχΞͷྺ࢙࣮͘͢͝ઙ͍
ϑϩϯτΤϯυΤϯδχΞͱ...ͱ͍͏Λ͢Δલʹ
ϦονͳUI͕͜͜࠷ۙ૿͖͑ͯͨͱࢥ͍·ͤΜ͔?
εϫΠϓͯ͠ίϯςϯπΛࠩ͠ସ͑ΔΧϧʔηϧ UI
ແݶεΫϩʔϧ
ը໘ΛҾͬுͬͯϦϩʔυ͢ΔPull to refresh
͜͏͍͏ϦονͳUI͕૿͖͍͑ͯͯΔ
ͳ͔ͥʁ
εϚʔτϑΥϯͷ಄ͱڞʹยख͚ͩͰ͑ΔUIͰ͋Γ͔ͭΠϯλϥΫςΟϒͳͷ͕૿͍͑ͯΔɻ
ϑϩϯτΤϯυΤϯδχΞσόΠεͷਐԽͱUIͷมԽʹΑͬͯ࢈·Εͨ
૯ͯ͡ݴ͏ͱϢʔβʔମݧʢUser eXperienceʣͷมԽ
ϑϩϯτΤϯυΤϯδχΞϢʔβʔମݧΛ্͢ΔΤϯδχΞͰ͋Δɻ
ϢʔβʔମݧΛ্͢ΔͨΊʹ• MUST NOT (͍͚ͬͯͳ͍͜ͱ)• MUST (Βͳ͖Ό͍͚ͳ͍͜ͱ)• ৺ߏ͑
MUST NOT͍͚ͬͯͳ͍͜ͱ
ϒϥβͷମݧΛյ͍͚ͯ͠ͳ͍
ϒϥβͷػೳ🔒IUUQTFYBNQMFDPN
ϒϥβͷػೳ🔒IUUQTFYBNQMFDPNΔ ਐΉϦϩʔυɾதࢭΞυϨεόʔ
ϒϥβͷػೳ• ΞυϨεόʔʹ͍Εͨ URL Λجʹϖʔδ͕ϨϯμϦϯά͞ΕΔ• ϦϯΫΛΫϦοΫ͢ΔͳͲͷΞΫγϣϯ͕͋Δͱ URL ͕มԽ͠ɺཤྺʹͨ·Δ• ΔϘλϯΛԡ͢ͱཤྺΛΕΔ• ਐΉϘλϯΛԡ͢ͱཤྺΛਐΊΒΕΔ• ϦϩʔυϘλϯΛԡ͢ͱ࠶ URL Λߋ৽͢Δ*NBHF
ϒϥβͷػೳ• ϒϥβͷجຊػೳΛյ͢Α͏ͳΞϓϦέʔγϣϯମݧ͕ѱ͍ɻ• ͬͨ࣌ʹͱͱ͍ͨεΫϩʔϧҐஔ͡Όͳ͍ॴʹ͞ΕͨΒɾɾɾɾʁ• εΫϩʔϧ͢ΔࡍʹΨλΨλͯ͠εϜʔεͳૢ࡞͕ग़དྷͳ͔ͬͨΒɾɾʁ• Enter ΩʔͰૹ৴Ͱ͖ͳ͍ϑΥʔϜΛ࡞ͬͯ͠·ͬͨΒɾɾɾʁ
ϒϥβͷػೳ• ϒϥβͷجຊػೳΛյ͢Α͏ͳΞϓϦέʔγϣϯମݧ͕ѱ͍ɻ• ͬͨ࣌ʹͱͱ͍ͨεΫϩʔϧҐஔ͡Όͳ͍ॴʹ͞ΕͨΒɾɾɾɾʁ• εΫϩʔϧ͢ΔࡍʹΨλΨλͯ͠εϜʔεͳૢ࡞͕ग़དྷͳ͔ͬͨΒɾɾʁ• Enter ΩʔͰૹ৴Ͱ͖ͳ͍ϑΥʔϜΛ࡞ͬͯ͠·ͬͨΒɾɾɾʁશ෦ѱ͍ϢʔβʔΤΫεϖϦΤϯε
ϒϥβͷػೳ• େݪଇ: ΣϒΞϓϦέʔγϣϯϒϥβͷػೳΛյ͍͚ͯ͠ͳ͍ɻ• յ͢ͱମݧ͕ѱ͍͚ͩ͡Όͳ͍ɻ• ΞΫηγϏϦςΟѱ͘ͳΔɻ• ηΩϡϦςΟͱ͔ͷอޢػߏಇ͔ͳ͘ͳΔ͔ɻ
ϒϥβͷػೳ• େݪଇ: ΣϒΞϓϦέʔγϣϯϒϥβͷػೳΛյ͍͚ͯ͠ͳ͍ɻ• յ͢ͱମݧ͕ѱ͍͚ͩ͡Όͳ͍ɻ• ΞΫηγϏϦςΟѱ͘ͳΔɻ• ηΩϡϦςΟͱ͔ͷอޢػߏಇ͔ͳ͘ͳΔ͔ɻͲΜͳʹྑ͍ΞϓϦͰ͋ͬͯϒϥβͷػೳΛյ͢Α͏ͳΞϓϦΘΕͳ͘ͳΔ
MUSTΒͳ͖Ό͍͚ͳ͍͜ͱ
ϒϥβͱαʔόʹ͍ͭͯΔ
ϒϥβͷػೳΛյ͞ͳ͍ͨΊʹϒϥβʹ͍ͭͯΔ͜ͱ͕Ұ൪ྑ͍
ϒϥβ͚ͩͰΞϓϦέʔγϣϯཱ͠ͳ͍ɺαʔόʹ͍͓͔ͭͯͬͯͳͯ͘ϢʔβʔମݧΛ্Ͱ͖ͳ͍
ϒϥβͷಈ͖• ࠷ॳʹ HTML ΛಡΈࠐΉ• HTML ʹ͋ΔαϒϦιʔε (CSS, JavaScript, Image,Video) ΛಡΈࠐΉ• ಡΈࠐ·ΕͨϦιʔεΛجʹϨΠΞτͯ͠ϖʔδΛϨϯμϦϯά͢ΔϨϯμϦϯά
ϒϥβͷಈ͖• ͜ͷʮ࠷ॳʹ༰͕දࣔ͞ΕΔʯ·Ͱͷ͜ͱΛॳظදࣔͱ͍͏ɻ• ॳظදࣔΛ͍͔ʹ͘͢Δ͔ɺͱ͍͏ͷҰͭͷϢʔβʔମݧ/BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM1BJOULoading..'JSTU.FBOJOHGVM1BJOU-BSHFTU$POUFOUGVM1BJOU*NBHF5JNF5P*OUFSBDUJWF*NBHF'VMMZ-PBEFE*NBHF
ϒϥβͷಈ͖• ͞Βʹϒϥβॳظදࣔ͞Ε͔ͯΒJavaScript ʹΑͬͯ෦తʹHTML͕ߋ৽͞ΕΔͱͦΕʹԠͯ͡ݟͨมΘΔɻ• ͜ͷ෦తʹHTMLΛߋ৽͢ΔࣄͰΠϯλϥΫςΟϒͳಈ͖Λग़͢ɻ'VMMZ-PBEFE*NBHF6QEBUFE*NBHF6QEBUFE*NBHF
ϨϯμϦϯάϓϩηε• HTML ͷϨϯμϦϯά "ಈతʹ" ϨϯμϦϯά͢Δɻ• JavaScript ϢʔβʔೖྗɺΞχϝʔγϣϯͳͲͰϨϯμϦϯά͕ߋ৽͞ΕΔɻ*OJUJBM3FOEFS ߋ৽ ߋ৽ ߋ৽ ߋ৽
ϨϯμϦϯάϓϩηε• ίϯςϯπ͕ಈతʹߋ৽͞ΕΔͱ͍͏͜ͱ͕Σϒͷಛ• ͦͷͨΊʹ͍͔ͭ͘ͷதؒදݱΛ͍࣋ͬͯΔIUNMIUNM%0. 4UZMFE1BSTF 4UZMF -BZPVU1BJOU *NBHF
HTML ParseEJWQIFMMPQQXPSMEQEJW1BSTF%*715&9515SFF%PDVNFOU)5.-#PEZ%JW15&9515&95• λάΛωετͯ͠දݱ• ߏͱ͍͏ܗͰσʔλߏͱͯ͠දݱ͞ΕΔɻ
DOM%PDVNFOU)5.-#PEZ%JW15&95141"/• Document Object Model• ϒϥβͰͷHTMLͷ෦දݱ• Ͱ͋Γɺ͔ͭ JavaScript Ͱૢ࡞Ͱ͖Δσʔλߏvar div = document.body.firstChild;var p2 = div.childNodes[1];p2.appendChild(document.createElement("span"));+BWB4DSJQU&OHJOFCJOEJOHT
DOM%PDVNFOU)5.-#PEZ%JW15&951#VUUPO• DOM ʹରͯ͠ΠϕϯτΛՃ͢Δ͜ͱͰϢʔβʔͷΞΫγϣϯʹରͯ͠ͷॲཧΛՃͰ͖Δɻvar button = document.getElementById("submit");button.addEventListener("click", function () {console.log("clicked!!");});ΠϕϯτՃ
ϒϥβΛΖ͏ʢ·ͱΊʣ• ϒϥβͷػೳΛΖ͏• ϒϥβͷಈ͖• ॳظදࣔ͞Ε͔ͯΒߋ৽͢Δ• ෦తʹߋ৽͢ΔࡍʹDOMΛͬͯߋ৽͢Δ͜ͱ͕Ͱ͖Δɻ• ΠϕϯτΛDOMʹՃ͢Δ͜ͱͰɺϢʔβʔͷΞΫγϣϯʹج͍ͮͯΠϯλϥΫςΟϒͳಈ࡞Λ͢Δ͜ͱ͕Ͱ͖Δɻ
ͦͷ্Ͱ• ϒϥβͷػೳ͕յΕͯ͠·͏ͷͰΑ͋͘ΔͷʮؒҧͬͨΠϕϯτͷऔΓѻ͍ʯϘλϯ͕ΫϦοΫ͞Ε͚ͨ࣌ͩใΛૹ৴͢ΔΑ͏ʹ࡞ΒΕͨUIvar 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" })});
ଞʹ• εΫϩʔϧதʹΨλΨλ͢ΔͷɺεΫϩʔϧ࣌ʹෳࡶͳܭࢉΛ͍ͯ͠Δࣄ͕ଟ͍ɻ• Α͋͘ΔͷແݶεΫϩʔϧͷ࣌εΫϩʔϧ࣌ʹͲ͜·ͰಡΈࠐΜ͔ͩͳͲͷෳࡶͳܭࢉΛஞ࣍తʹॲཧ͍ͯ͠Δͱ͜͏ͳΔdocument.addEventListener("scroll", function () {// ෳࡶͳܭࢉ});scroll ൃՐͤ͞Δඞཁͳ͍ͷͰɺΠϕϯτΛؒҾ͍ͨΓൃՐͤ͞ΔλΠϛϯάΛݮΒ͢ඞཁ͕͋Δ
αʔόʹ͍ͭͯΖ͏
αʔόʹ͍ͭͯΖ͏• ΫϥΠΞϯτʹಈ͖Λ༩͑ͯϢʔβʔମݧΛ࡞Δͷ͕ϑϩϯτΤϯυΤϯδχΞͷׂͷେ෦• ͨͩ͠ɺΫϥΠΞϯτͷ͜ͱ͚͓͚͍͍ͩͬͯΘ͚Ͱͳ͍• ϢʔβʔମݧΛ࠷େԽ͢ΔʹΫϥΠΞϯτͱαʔόͷ྆ํΛΔඞཁ͕͋Δɻ
αʔόʹ͍ͭͯΖ͏• WebΞϓϦέʔγϣϯHTMLCSSJavaScriptͱ͍ͬͨϦιʔεΛαʔό͔ΒಘΔඞཁ͕͋Δɻ• JSONͳͲͷσʔλαʔό͔ΒಘΔඞཁ͕͋Δɻ• ϒϥβ͔ΒϦιʔεσʔλΛཁٻʢϦΫΤετʣ͠ɺαʔό͔ΒԠʢϨεϙϯεʣ͢Δɻ
αʔόͱΫϥΠΞϯτ• ΫϥΠΞϯτ͔ΒαʔόʹϦΫΤετΛߦ͍ɺαʔόͦΕΛԠ͢ΔࣄͰϦιʔεσʔλΛऔಘ͍ͯ͠Δɻͦͷ༰ΛجʹDOMΛߋ৽ͤ͞Δɻ
ωοτϫʔΫ• ௨৴Λߦ͍ɺཁٻ͞ΕͨίϯςϯπΛμϯϩʔυͨ͠Γɺ·ͨσʔλΛΞοϓϩʔυͨ͠Γ͢Δɻ• HTTP(S)௨৴Λߦ͏ϨΠϠͰɺۙ HTTP/3ͳͲ͕༗ޮʹͳΓͭͭ͋Δɻ
ͦͦ௨৴Λߦ͏ͱʁ• Public IP / PORT ΛΫϥΠΞϯτ͕͍ͬͯͯ• αʔό͕ଓΛ͍ͬͯͯ• ͦ͜ʹଓΛཁٻ͠• ଓΛཱ֬ͨ͠ΒɺσʔλͷަΛߦ͏Public IP / PORT ListenData Transfer
͡Ό͋ IP Ͳ͏ͬͯΔͷʁ• IP DNSαʔό͔Βڭ͑ͯΒ͏ɻ• https://example.com ʹΞΫηε͠Α͏ͱͨ͠߹ɺҰΞΫηε͞Εͯͳ͔ͬͨΒDNS Lookup (໊લ͔ΒIPΞυϨεΛҾ͘ߦҝ)͕ߦΘΕΔɻ• DNS Lookup ͦͷϦΫΤετઌͷυϝΠϯʹԠͯ͡ൃੜ͢ΔͷͰɺ 3rd partydomain ͕ϖʔδʹ͋Δ߹ʢҰ๚͞Εͯͳ͔ͬͨΒʣͦͷ࣌Ͱൃੜ͢ΔɻEJHFYBNQMFDPN01514&6%04&$5*0/&%/4WFSTJPO qBHTVEQ26&45*0/4&$5*0/FYBNQMFDPN */ ""/48&34&$5*0/FYBNQMFDPN */ "
PORT ʁ• ༗໊ͳϓϩτίϧͷ߹༧Ίܾ·ͬͯΔɻ• http ͳΒ 80 ൪ɺ https ͳΒ 443 ൪ͱ͍ͬͨ෩ʹɻ• ͜ͷ༧ΊܾΊΒΕͨ PORT ͷ͜ͱΛ well-known PORT ͱݺͿɻ• well-known ͳ PORT ಛݖ͕ඞཁͳέʔεଟ͍ͷͰɺ։ൃڥͰ 3000 ൪ͱ͔ʹͯ͠ɺ localhost:3000 Ͱݺͼग़͢͜ͱଟ͍ɻ
ଓΛཱ֬ͱ͍͏ͷʁ• (؆ུԽͷͨΊ) TCP Λϕʔεʹ͢ͱɺ֘ͷαʔόʹ͍͖ͳΓଓ͢ΔͷͰͳ͘ɺ3ճͷଓ֬ೝΛܦͯଓ͢Δɻ• ͜ͷଓ֬ೝͷ͜ͱΛ 3 way handshake ͱݺͿɻͭͳ͛ΔΑʔ (SYN)͍͍Αʔ ͬͪͭ͜ͳ͛ΔΑʔ(SYN-ACK)͡Ό͋ͭͳ͙Ͷʔ (ACK)
͡Ό͋ࢲͷ伴ͱ߹Θͤͯ͜ΕͰ͠·͠ΐ͏ɻ(Client Certificate)ଓΛཱ֬ͱ͍͏ͷʁ• HTTP ͳΒ͜ΕͰܨ͕Δ͕ɺ࠷ۙͷେମͷWebαʔό HTTPSͳͷͰɺ͜Ε͚ͩͰܨ͕Βͳ͍ɻ҉߸ԽͷͨΊͷΓऔΓ͕ߋʹߦΘΕΔɻ(※؆ུԽ͍ͯ͠ΔͨΊɺਖ਼֬Ͱͳ͍)ΑΖ͓͘͠ئ͍͍ͨ͠·͢ɻ(Client Hello)ͪ͜Βͦ͜ΑΖ͓͘͠Ͷ͕͍͠·͢ɻ (Server Hello)Θͨ͜͠͏͍͏ͷͰ͢ɻ (Server Certificate)͜͏͍͏伴Ͱͤ·͢ (Server Key Exchange)Θͨ͜͠͏͍͏ͷͰ͢ɻ(Client Certificate)
͡Ό͋ࢲͷ伴ͱ߹Θͤͯ͜ΕͰ͠·͠ΐ͏ɻ(Client Certificate)ଓΛཱ֬ͱ͍͏ͷʁ• HTTP ͳΒ͜ΕͰܨ͕Δ͕ɺ࠷ۙͷେମͷWebαʔό HTTPSͳͷͰɺ͜Ε͚ͩͰܨ͕Βͳ͍ɻ҉߸ԽͷͨΊͷΓऔΓ͕ߋʹߦΘΕΔɻ(※؆ུԽ͍ͯ͠ΔͨΊɺਖ਼֬Ͱͳ͍)ΑΖ͓͘͠ئ͍͍ͨ͠·͢ɻ(Client Hello)ͪ͜Βͦ͜ΑΖ͓͘͠Ͷ͕͍͠·͢ɻ (Server Hello)Θͨ͜͠͏͍͏ͷͰ͢ɻ (Server Certificate)͜͏͍͏伴Ͱͤ·͢ (Server Key Exchange)Θͨ͜͠͏͍͏ͷͰ͢ɻ(Client Certificate))5514௨৴5$1ͷΓऔΓͷޙͰ҉߸ԽͷͨΊͷऔΓܾΊΛ͢Δεςοϓ͕͋ΔɻͦΕΛܦͯଓ͞ΕΔɻ
σʔλͷΓऔΓ• ଓཱ͕֬͞Εͨޙ HTTP ϓϩτίϧʹΑΔσʔλͷΓऔΓΛߦ͏ɻ• HTTP جຊతʹϦΫΤετ / ϨεϙϯεͰͷΓऔΓ͕ߦΘΕΔɻ• HTTP ϦΫΤετʹϦΫΤετߦͱϔομʔͱݺΕΔϝλใͱϘσΟͱݺΕΔίϯςϯτใؚ͕·ΕΔɻ•1045JOEFYIUNM)551BDDFQUUFYUIUNMBDDFQUFODPEJOHH[JQ EFqBUF CSBDDFQUMBOHVBHFFO64 FOR KBRDBDIFDPOUSPMOPDBDIFDPPLJFGPPCBSCB[GPPCBSIPHFGVHBϦΫΤετߦϦΫΤετϔομʔϦΫΤετϘσΟ σʔλ༰
σʔλͷΓऔΓ• ϦΫΤετΛड͚औͬͨΒαʔόϨεϙϯεʢԠʣΛฦ͢• HTTP ϨεϙϯεʹεςʔλεΛද͢ใͱϨεϙϯεϔομʢϝλσʔλʣɺϨεϙϯεϘσΟʢ༰ʣؚ͕·ΕΔ)5510,"HF$BDIF$POUSPMNBYBHF$POUFOU5ZQFUFYUIUNMDIBSTFU65'%BUF.PO "QS(.5$POUFOU-FOHUIEPDUZQFIUNMIUNMIFBEεςʔλεߦϨεϙϯεϔομϨεϙϯεϘσΟ
σʔλͷΓऔΓ• 200ܥ: ޭɺσʔλͷຊମ͕͋ΕૹΔ• 300ܥ: ϦμΠϨΫγϣϯϝοηʔδ• 400ܥ: ΫϥΠΞϯτΤϥʔ• 500ܥ: αʔόΤϥʔ
4FSWFSGET /main.cssGET /main.jsGET /image0.pngσʔλͷΓऔΓGET /index.html200 OK200 OK404 Not Found304 Not Modified
4FSWFSGET /main.cssGET /main.jsGET /image0.pngσʔλͷΓऔΓGET /index.html200 OK200 OK404 Not Found304 Not Modified)551্ͰσʔλͷΓऔΓ͕ߦΘΕɺͦΕ͕ϨϯμϦϯάϓϩηε+4Τϯδϯ͕࣮ߦ͞ΕΔϑΣʔζΛܦͯϖʔδ͕ग़Δ
αʔόΛΖ͏ʢ·ͱΊʣ• ΫϥΠΞϯτ͔Βཁٻͯ͠ϦιʔεσʔλΛΓऔΓ͢Δର͕αʔό• αʔόʹରͯ͠ωοτϫʔΫଓΛߦ͍ɺσʔλΛసૹ͢Δ• HTTPͷϦΫΤετͱϨεϙϯεΛجʹϖʔδΛߋ৽͢Δ
ͦͷ্Ͱ• ϒϥβͷػೳ͕յΕͯ͠·͏ͷͰΑ͋͘ΔͷʮURLΛҙ͍ࣝͯ͠ͳ͍ʯ͔Β• ຊདྷϖʔδͷ༰ͱURLରԠ͍ͯ͠ͳ͍ͱ͍͚ͳ͍• ʮແݶεΫϩʔϧʯʮͬͱݟΔʯͰϖʔδͷ༰͕มΘ͍ͬͯΔʹ͔͔ΘΒͣɺURL͕มΘΒͳ͔ͬͨ߹• ϖʔδΛߋ৽ͯ͠͠·͏ͱݟͯͨͣͷεΫϩʔϧҐஔ͕ࣦΘΕͯ͠·͏• ຊདྷͳΒʮͬͱݟΔʯʮࠓԿϖʔδʹ͍Δͷ͔ʯͱ͍ͬͨใ͕URLʹೖ͍ͬͯͳ͍ͱ͍͚ͳ͍ɻ
ͭ·Γ࣮ࡍʹ 2 ϖʔδʹ͍ͨͱͯͦ͠ΕΛURLߋ৽͓͔ͯ͠ͳ͍ͱϦϩʔυͯ͠͠·͏ͱϖʔδ͕ 1 ϖʔδʹͬͯ͠·͏https://example.com/list?page=2(ຊདྷ͍Δ͖URL)https://example.com/list(࣮ࡍͷURLɺ͜ͷ࣌ͰਐΜͩΓͬͨΓͨ͠Β...?Ϧϩʔυͨ͠Β...?)
ϒϥβͱαʔόΛΖ͏• ϒϥβͷதΛࡉ͔͘Βͳͯ͘ϑϩϯτΤϯυ։ൃͰ͖Δ͕ɺΒͳ͍ͱϢʔβʔମݧΛ্ͤ͞Δ͜ͱͰ͖ͳ͍ɻ• ಛʹϒϥβͷػೳΛյ͢Α͏ͳ࣮Λ͏͔ͬΓͯ͠͠·ͬͯؾ͚ͮͳ͔ͬͨΓ͢Δɻ• ʮಈ͔͘Β͍͍ʯͰͳ͘ɺϒϥβͷݪཧΛΓɺαʔόͷಈ͖Λཧղ্ͨ͠ͰΞϓϦέʔγϣϯΛ࡞Ζ͏ɻ
৺ߏ͑
ඇػೳཁ݅ʹͩ͜ΘΓΛ͖ͭͰ͋Δ͜ͱཧղ͕ͨ͠ɺʮϑϩϯτΤϯυΤϯδχΞͱͯͬͨ͠΄͏͕͍͍͜ͱʯͲΜͳ͜ͱͳͷ͔ʁ
͜Ε·ͰݟͯΒͬͨͱ͓ΓɺϑϩϯτΤϯυΤϯδχΞͱͯ͠ཁٻ͞Ε͍ͯΔࣝͯ͘ਂ͍
͜ͷࣝΛશ෦͑Α͏ͱͨ͠Βແݶʹ͕࣌ؒඞཁʹͳΔ
ແݶͷதͰ༗ݶͷॲཧΛ͢ΔͷʹඞཁͳͷษڧྗͰͳ͘ɺϞνϕʔγϣϯ
HTML CSS JSΣϒΛߏ͢ΔݴޠBackend Language(Java, Go)
DOM Cookie DevToolsϒϥβΛߏ͢Δ༰CSSOM window navigatorHeaders
DNS URL HTTP(S)ωοτϫʔΫWebSocket TCP TLSHTTP/2
Cache Critical-Rendering PathMetrics ToolsύϑΥʔϚϯεMemory CPU I/O
XSS CSRF SQL InjectionηΩϡϦςΟDoS TLS/SSL
React Angular ReduxJS FrameworksVue.js Polymer
HTML CSS JSDOM Cookie DevToolsCSSOM window navigatorHeadersDNS URL HTTP(S)WebSocketTCP TLSReact ReduxMemory CPUI/ODoS TLS/SSL
େมͰ͢Ͷ😨
Ͳ͏ͬͨΒຬวͳ͑͘ΒΕΔͷ͔ʁ
ͷ߹
৺͕͚ͯΔࣄ• ࣝʹ֞ࠜ࡞Βͳ͍• ܧଓ͢Δ
ࣝʹ֞ࠜΛ࡞Βͳ͍
ࣝʹ֞ࠜΛ࡞Βͳ͍• Dev / Ops Ͱͳ͘Dev 💚 Ops• Engineer / Designer Ͱͳ͘Engineer 💚 Designer• Backend / Frontend Ͱͳ͘Backend 💚 Frontend
ࣝʹ֞ࠜΛ࡞Βͳ͍• ཧIࣈܕΑΓTࣈܕ• Ұݸ࣠Λ࡞͔ͬͯͦ͜Β͛Δ
ࣝʹ֞ࠜΛ࡞Βͳ͍• Tࣈܕͷਓ͕૿͍͖͍ͯͨ͠ɻ• զʑͷֶͿ͜ͱଟ͍ɺͰTࣈܕͷਓ͕૿͑ΕͦͷΧόʔͰ͖ΔɻDesigner FE BE
ׂͱͳΜͰ͖• Πϯϑϥ͖• όοΫΤϯυ͖• ϓϩάϥϛϯάݴޠͦͷͷ͖• ϓϩμΫτΛߏங͢Δͷ͖• σβΠϯܥͷπʔϧษڧͯ͠Δ
ׂͱͳΜͰ͖• Πϯϑϥ͖• όοΫΤϯυ͖• ϓϩάϥϛϯάݴޠͦͷͷ͖• ϓϩμΫτΛߏங͢Δͷ͖• σβΠϯܥͷπʔϧษڧͯ͠ΔͳΜͰΔඞཁͳ͍ɺͰح৺ʹ֞ࠜ࡞ͬͯ΄͘͠ͳ͍ɻ
ࣝʹ֞ࠜΛ࡞Βͳ͍• ͪ;Δ 13 רࡩ ਯʮ͜ΕͱܾΊͨಓͰΒͳͯ͘ྑ͍͜ͱͳΜ͔̍ͭͳ͍ΘΑʯ
ܧଓ͢Δ
ܧଓ͢Δ• ಠֶେશ• ʮԿ͍ͯ͠ͳ͍ঢ়ଶ͔Β࢝ΊΔ͜ͱ͍͕͠ɺҰ୴࢝Ίͨ͜ͱΛ్தͰத్ͳ··์Γग़͢͜ͱ·͍ͨ͠ʯ
ຖίʔυΛॻ͘৽͍͠ͷʹ৮ΕΔLeetcode Λຖղ͍ͯΔʢ࠷ۙRustͰ) Write Code Everyday Ͱ1ܧଓ
ܧଓ͢Δ• ϑϩϯτΤϯυΤϯδχΞʹͳΔͱಛʹݺٵ͢ΔΑ͏ʹֶͳ͖Ό͍͚ͳ͍͜ͱ͕ग़ͯ͘Δ• ৽͍͠ϥΠϒϥϦৗʹग़ͯ͘Δ͠ɺߟ͑Δ͜ͱଟ͍• ʮָ͠Έͳ͕Βܧଓ͢Δʯ͜ͱ͕Ͱ͖Δͱྑ͍
֮ޛΛ࣋ͱ͏• ΞϓϦέʔγϣϯΛ࡞Ζ͏• ඇػೳཁ݅ʹͩ͜ΘΖ͏• ࣝΛᩦཉʹ࣋ͬͯௐΑ͏• ͜ΕΛܧଓతʹΓଓ͚Α͏
֮ޛΛ࣋ͱ͏• ΞϓϦέʔγϣϯΛ࡞Ζ͏• ඇػೳཁ݅ʹͩ͜ΘΖ͏• ࣝΛᩦཉʹ࣋ͬͯௐΑ͏• ͜ΕΒΛܧଓతʹΓଓ͚Α͏ྑ͍ΤϯδχΞʹͳΔͷʹۙಓͳΜ͔ແ͍͠ɺ֮ޛΛ࣋ͭඞཁ͕͋Δ
࠷ޙʹ
ϑϩϯτΤϯυΤϯδχΞͷࠓޙ
ϑϩϯτΤϯυΤϯδχΞతʹܹಈͷ࣌
ϓϥΠόγʔอޢʹΑΔϒϥβϓϥοτϑΥʔϜͷมߋ
ωοτϫʔΫϨΠϠHTTP/3ʹɻ
ॻ͍͍ͯΔݴޠ TypeScript͕ओྲྀʹɻ
React / Vue.js Next.js /Nuxt.js ͔Β͏ͳͲͷํ๏͕ओྲྀʹɻ
ϓϥοτϑΥʔϜϓϩτίϧݴޠมΘΔɺϑϨʔϜϫʔΫͲΜͲΜมΘ͍ͬͯ͘
ਐԽʹ͍͍ͭͯ͘ͱ͍͏͜ͱͦͷͷେมɻ
ʮָ͠Έͳ͕Βɺۤ͠Έͳ͕ΒલʹਐΉඞཁ͕͋Δɻʯ͜ΕΛཧղ͢Δ͜ͱ͕͜Ε͔ΒͷϑϩϯτΤϯυΤϯδχΞʹඞཁͳૉ࣭ʹͳΔɻ
ࣹܸͭͭ͠લਐԿग़དྷͳ͍Ͱ͋ͬͯԿ͔Λͯ͠લʹਐΉɺͦΕΛ͠ଓ͚Ε͕࣌ຯํʹͳͬͯ͘ΕΔby Joel on Software
͍ͬ͠ΐʹʮࣹܸͭͭ͠લਐʯ͠·͠ΐ͏ɻϑϩϯτΤϯυΤϯδχΞͱͯ͠Ұॹʹ᛭ୖຏͰ͖ΔΛָ͠Έʹ͍ͯ͠·͢ɻ
yosuke_furukawa
naokimrmt
ymotongpoo
yumakann
mozu1206
headius
masatoshiitoh
kinocoboy2
heronshoes
beberlei
honma12345
os1ma
tmokmss
eileencodes
samanthasiow
holman
scottboms
colly
lauravandoore
tanoku
wjessup
rasmusluckow
ufuk
reverentgeek