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.4k
フロントエンドエンジニアになる覚悟 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
6
3k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
3.9k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
200
Removing Corepack
yosuke_furukawa
PRO
9
1.5k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.7k
Strip Types と Storage
yosuke_furukawa
PRO
4
380
Module Harmony について
yosuke_furukawa
PRO
3
1.7k
LTのやり方
yosuke_furukawa
PRO
16
2.5k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
770
Other Decks in Programming
See All in Programming
本当だってば!俺もTRICK 2022に入賞してたんだってば!
jinroq
0
250
PHPによる"非"構造化プログラミング入門 -本当に熱いスパゲティコードを求めて- #phperkaigi
o0h
PRO
0
1.1k
20250326_生成AIによる_レビュー承認システムの実現.pdf
takahiromatsui
17
5.6k
OpenTelemetryを活用したObservability入門 / Introduction to Observability with OpenTelemetry
seike460
PRO
0
340
バックエンドNode.js × フロントエンドDeno で開発して得られた知見
ayame113
5
1.3k
Devin , 正しい付き合い方と使い方 / Living and Working with Devin
yukinagae
1
530
Devinのメモリ活用の学びを自社サービスにどう組み込むか?
itarutomy
0
1.7k
PsySHから紐解くREPLの仕組み
muno92
PRO
1
520
AIエージェントを活用したアプリ開発手法の模索
kumamotone
1
750
安全に倒し切るリリースをするために:15年来レガシーシステムのフルリプレイス挑戦記
sakuraikotone
5
2.3k
アーキテクトと美学 / Architecture and Aesthetics
nrslib
12
3.1k
WordPress Playground for Developers
iambherulal
0
120
Featured
See All Featured
Docker and Python
trallard
44
3.3k
Faster Mobile Websites
deanohume
306
31k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
Designing for Performance
lara
606
69k
Testing 201, or: Great Expectations
jmmastey
42
7.4k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.4k
A better future with KSS
kneath
238
17k
Gamification - CAS2011
davidbonilla
81
5.2k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
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
͍ͬ͠ΐʹ ʮࣹܸͭͭ͠લਐʯ ͠·͠ΐ͏ɻ ϑϩϯτΤϯυΤϯδχΞͱ ͯ͠Ұॹʹ᛭ୖຏͰ͖Δ Λָ͠Έʹ͍ͯ͠·͢ɻ