Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンドエンジニアになる覚悟 in Open8
Search
Yosuke Furukawa
PRO
July 21, 2021
Programming
7
4.5k
フロントエンドエンジニアになる覚悟 in Open8
Open8 社で実施したフロントエンドエンジニアになる覚悟の話です。
Yosuke Furukawa
PRO
July 21, 2021
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
7
3.5k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
220
Removing Corepack
yosuke_furukawa
PRO
9
1.6k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
400
Module Harmony について
yosuke_furukawa
PRO
3
1.7k
LTのやり方
yosuke_furukawa
PRO
16
2.6k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
800
Other Decks in Programming
See All in Programming
CQRS/ESのクラスとシステムフロー ~ RailsでフルスクラッチでCQRSESを組んで みたことから得た学び~
suzukimar
0
190
マテリアルって何者?RealityKitで扱うマテリアル入門
nao_randd
0
140
複雑なフォームを継続的に開発していくための技術選定・設計・実装 #tskaigi / #tskaigi2025
izumin5210
12
6.3k
AI Coding Agent Enablement in TypeScript
yukukotani
17
7.1k
漸進。
ssssota
0
1.1k
MLOps Japan 勉強会 #52 - 特徴量を言語を越えて一貫して管理する, 『特徴量ドリブン』な MLOps の実現への試み
taniiicom
2
570
がんばりすぎないコーディングルール運用術
tsukakei
1
180
OpenTelemetryで始めるベンダーフリーなobservability / Vendor-free observability starting with OpenTelemetry
seike460
PRO
0
160
Parallel::Pipesの紹介
skaji
2
870
「MCPを使ってる人」が より詳しくなるための解説
yamaguchidesu
0
600
「兵法」から見る質とスピード
ickx
0
190
Interface vs Types ~型推論が過多推論~
hirokiomote
1
230
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.2k
Adopting Sorbet at Scale
ufuk
76
9.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Designing for humans not robots
tammielis
253
25k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
460
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
Automating Front-end Workflow
addyosmani
1370
200k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.6k
Transcript
ϑϩϯτΤϯυΤϯδ χΞʹͳΔ֮ޛ 2021/07/07 @ Open 8 ࣾษڧձ
Twitter: @yosuke_furukawa Github: 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$POUFOUGVM
1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU -BSHFTU$POUFOUGVM 1BJOU *NBHF 5JNF5P*OUFSBDUJWF *NBHF 'VMMZ-PBEFE *NBHF
ϒϥβͷಈ͖ • ͞Βʹϒϥβॳظදࣔ͞Ε͔ͯΒJavaScript ʹΑͬͯ෦తʹHTML͕ߋ৽͞ΕΔͱͦΕʹԠͯ͡ ݟͨมΘΔɻ • ͜ͷ෦తʹHTMLΛߋ৽͢ΔࣄͰΠϯλϥΫςΟϒ ͳಈ͖Λग़͢ɻ 'VMMZ-PBEFE
*NBHF 6QEBUFE *NBHF 6QEBUFE *NBHF
ϨϯμϦϯάϓϩηε • HTML ͷϨϯμϦϯά "ಈతʹ" ϨϯμϦϯ ά͢Δɻ • JavaScript ϢʔβʔೖྗɺΞχϝʔγϣϯ
ͳͲͰϨϯμϦϯά͕ߋ৽͞ΕΔɻ *OJUJBM3FOEFS ߋ৽ ߋ৽ ߋ৽ ߋ৽
ϨϯμϦϯάϓϩηε • ίϯςϯπ͕ಈతʹߋ৽͞ΕΔͱ͍͏͜ͱ͕ Σϒͷಛ • ͦͷͨΊʹ͍͔ͭ͘ͷதؒදݱΛ͍࣋ͬͯΔ IUNM IUNM %0. 4UZMFE
1BSTF 4UZMF -BZPVU 1BJOU *NBHF
HTML Parse EJW QIFMMPQ QXPSMEQ EJW 1BSTF %*7 1 5&95
1 5SFF %PDVNFOU )5.- #PEZ %JW 1 5&95 1 5&95 • λάΛωετͯ͠දݱ • ߏͱ͍͏ܗͰσʔλߏͱͯ͠ දݱ͞ΕΔɻ
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
DOM %PDVNFOU )5.- #PEZ %JW 1 5&95 1 #VUUPO •
DOM ʹରͯ͠ΠϕϯτΛՃ͢ Δ͜ͱͰϢʔβʔͷΞΫγϣϯʹ ରͯ͠ͷॲཧΛՃͰ͖Δɻ var button = document.getElementById("submit"); button.addEventListener("click", function () { console.log("clicked!!"); }); Πϕϯτ Ճ
ϒϥβΛΖ͏ʢ·ͱΊʣ • ϒϥβͷػೳΛΖ͏ • ϒϥβͷಈ͖ • ॳظදࣔ͞Ε͔ͯΒߋ৽͢Δ • ෦తʹߋ৽͢ΔࡍʹDOMΛͬͯߋ৽͢Δ͜ͱ͕Ͱ͖Δɻ •
ΠϕϯτΛDOMʹՃ͢Δ͜ͱͰɺϢʔβʔͷΞΫγϣϯʹ ج͍ͮͯΠϯλϥΫςΟϒͳಈ࡞Λ͢Δ͜ͱ͕Ͱ͖Δɻ
ͦͷ্Ͱ • ϒϥβͷػೳ͕յΕͯ͠·͏ͷͰΑ͋͘Δ ͷʮؒҧͬͨΠϕϯτͷऔΓѻ͍ʯ Ϙλϯ͕ΫϦοΫ͞Ε͚ͨ࣌ͩ ใΛૹ৴͢ΔΑ͏ʹ࡞ΒΕͨ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" }) });
ଞʹ • εΫϩʔϧதʹΨλΨλ͢ΔͷɺεΫϩʔϧ࣌ʹෳࡶͳ ܭࢉΛ͍ͯ͠Δࣄ͕ଟ͍ɻ • Α͋͘ΔͷແݶεΫϩʔϧͷ࣌ εΫϩʔϧ࣌ʹͲ͜·ͰಡΈࠐΜ͔ͩͳͲͷ ෳࡶͳܭࢉΛஞ࣍తʹॲཧ͍ͯ͠Δͱ͜͏ͳΔ document.addEventListener("scroll", function
() { // ෳࡶͳܭࢉ }); scroll ൃՐͤ͞Δඞཁͳ͍ͷͰɺ ΠϕϯτΛؒҾ͍ͨΓൃՐͤ͞ΔλΠϛϯά ΛݮΒ͢ඞཁ͕͋Δ
αʔόʹ͍ͭͯΖ͏
αʔόʹ͍ͭͯΖ͏ • ΫϥΠΞϯτʹಈ͖Λ༩͑ͯϢʔβʔମݧΛ࡞Δͷ ͕ϑϩϯτΤϯυΤϯδχΞͷׂͷେ෦ • ͨͩ͠ɺΫϥΠΞϯτͷ͜ͱ͚͓͚͍͍ͩͬͯ Θ͚Ͱͳ͍ • ϢʔβʔମݧΛ࠷େԽ͢ΔʹΫϥΠΞϯτͱαʔ όͷ྆ํΛΔඞཁ͕͋Δɻ
αʔόʹ͍ͭͯΖ͏ • WebΞϓϦέʔγϣϯHTMLCSSJavaScriptͱ ͍ͬͨϦιʔεΛαʔό͔ΒಘΔඞཁ͕͋Δɻ • JSONͳͲͷσʔλαʔό͔ΒಘΔඞཁ͕͋Δɻ • ϒϥβ͔ΒϦιʔεσʔλΛཁٻʢϦΫΤε τʣ͠ɺαʔό͔ΒԠʢϨεϙϯεʣ͢Δɻ
αʔόͱΫϥΠΞϯτ • ΫϥΠΞϯτ͔ΒαʔόʹϦΫΤετΛߦ͍ɺαʔόͦΕΛ Ԡ͢ΔࣄͰϦιʔεσʔλΛऔಘ͍ͯ͠Δɻͦͷ༰Λج ʹDOMΛߋ৽ͤ͞Δɻ
ωοτϫʔΫ • ௨৴Λߦ͍ɺཁٻ͞ΕͨίϯςϯπΛμϯ ϩʔυͨ͠Γɺ·ͨσʔλΛΞοϓϩʔυ͠ ͨΓ͢Δɻ • HTTP(S)௨৴Λߦ͏ϨΠϠͰɺۙ HTTP/3 ͳͲ͕༗ޮʹͳΓͭͭ͋Δɻ
ͦͦ௨৴Λߦ͏ͱʁ • Public IP / PORT ΛΫϥΠΞϯτ͕͍ͬͯͯ • αʔό͕ଓΛ͍ͬͯͯ •
ͦ͜ʹଓΛཁٻ͠ • ଓΛཱ֬ͨ͠ΒɺσʔλͷަΛߦ͏ Public IP / PORT Listen Data Transfer
͡Ό͋ 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 */ "
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)551 BDDFQUUFYUIUNM BDDFQUFODPEJOHH[JQ EFqBUF CS BDDFQUMBOHVBHFFO64 FOR KBR DBDIFDPOUSPMOPDBDIF DPPLJFGPPCBSCB[ GPPCBSIPHFGVHB ϦΫΤετߦ ϦΫΤετϔομʔ ϦΫΤετϘσΟ σʔλ༰
σʔλͷΓऔΓ • ϦΫΤετΛड͚औͬͨΒαʔόϨεϙϯεʢԠʣΛฦ͢ • HTTP ϨεϙϯεʹεςʔλεΛද͢ใͱϨεϙϯεϔομ ʢϝλσʔλʣɺϨεϙϯεϘσΟʢ༰ʣؚ͕·ΕΔ )5510, "HF $BDIF$POUSPMNBYBHF
$POUFOU5ZQFUFYUIUNMDIBSTFU65' %BUF.PO "QS(.5 $POUFOU-FOHUI EPDUZQFIUNM IUNM IFBE εςʔλεߦ Ϩεϙϯεϔομ ϨεϙϯεϘσΟ
σʔλͷΓऔΓ • 200ܥ: ޭɺσʔλͷຊମ͕͋ΕૹΔ • 300ܥ: ϦμΠϨΫγϣϯϝοηʔδ • 400ܥ: ΫϥΠΞϯτΤϥʔ
• 500ܥ: αʔόΤϥʔ
4FSWFS GET /main.css GET /main.js GET /image0.png σʔλͷΓऔΓ GET /index.html
200 OK 200 OK 404 Not Found 304 Not Modified
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Τϯδϯ͕࣮ߦ͞ΕΔϑΣʔζΛܦͯϖʔδ͕ग़Δ
αʔόΛΖ͏ʢ·ͱΊʣ • ΫϥΠΞϯτ͔Βཁٻͯ͠Ϧιʔεσʔλ ΛΓऔΓ͢Δର͕αʔό • αʔόʹରͯ͠ωοτϫʔΫଓΛߦ͍ɺ σʔλΛసૹ͢Δ • 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 navigator Headers
DNS URL HTTP(S) ωοτϫʔΫ WebSocket TCP TLS HTTP/2
Cache Critical- Rendering Path Metrics Tools ύϑΥʔϚϯε Memory CPU I/O
XSS CSRF SQL Injection ηΩϡϦςΟ DoS TLS/SSL
React Angular Redux JS Frameworks Vue.js Polymer
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
େมͰ͢Ͷ😨
Ͳ͏ͬͨΒຬวͳ͘ ͑ΒΕΔͷ͔ʁ
ͷ߹
৺͕͚ͯΔࣄ • ࣝʹ֞ࠜ࡞Βͳ͍ • ܧଓ͢Δ
ࣝʹ֞ࠜΛ࡞Βͳ͍
ࣝʹ֞ࠜΛ࡞Βͳ͍ • 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
͍ͬ͠ΐʹ ʮࣹܸͭͭ͠લਐʯ ͠·͠ΐ͏ɻ ϑϩϯτΤϯυΤϯδχΞͱ ͯ͠Ұॹʹ᛭ୖຏͰ͖Δ Λָ͠Έʹ͍ͯ͠·͢ɻ