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.2k
フロントエンドエンジニアになる覚悟 in Open8
Open8 社で実施したフロントエンドエンジニアになる覚悟の話です。
Yosuke Furukawa
PRO
July 21, 2021
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
14
2.2k
Strip Types と Storage
yosuke_furukawa
PRO
4
300
Module Harmony について
yosuke_furukawa
PRO
3
1.4k
LTのやり方
yosuke_furukawa
PRO
16
2k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
660
Node.js v22 で変わること
yosuke_furukawa
PRO
13
4.9k
リアーキテクトと開発生産性について
yosuke_furukawa
PRO
25
9.3k
JavaScript Server Runtime History
yosuke_furukawa
PRO
9
3.6k
tc39 x jsconf.jp Panel Discussion
yosuke_furukawa
PRO
0
1.7k
Other Decks in Programming
See All in Programming
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
390
rails_girls_is_my_gate_to_join_the_ruby_commuinty
maimux2x
0
190
私のEbitengineの第一歩
qt_luigi
0
440
いまから追い上げる、Jetpack Compose トレーニング
nyafunta9858
0
250
月間4.5億回再生を超える大規模サービス TVer iOSアプリのリアーキテクチャ戦略 - iOSDC2024
techtver
PRO
1
790
実践 Advanced CallKit 〜快適な通話の実現に向けて〜
mot_techtalk
3
120
マルチモジュールにおけるテスト最適化
fxwx23
0
200
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
580
開発を加速する共有Swift Package実践
elmetal
PRO
0
400
dRuby 入門者によるあなたの身近にあるdRuby 入門
makicamel
4
350
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
530
Kotlin 2.0 and Beyond
antonarhipov
2
150
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
65
9.8k
Typedesign – Prime Four
hannesfritz
39
2.3k
Scaling GitHub
holman
458
140k
Building an army of robots
kneath
302
42k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.5k
How To Stay Up To Date on Web Technology
chriscoyier
786
250k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
25
3.9k
For a Future-Friendly Web
brad_frost
174
9.3k
Designing with Data
zakiwarfel
98
5k
Designing for Performance
lara
604
68k
What's in a price? How to price your products and services
michaelherold
242
11k
Facilitating Awesome Meetings
lara
49
5.9k
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
͍ͬ͠ΐʹ ʮࣹܸͭͭ͠લਐʯ ͠·͠ΐ͏ɻ ϑϩϯτΤϯυΤϯδχΞͱ ͯ͠Ұॹʹ᛭ୖຏͰ͖Δ Λָ͠Έʹ͍ͯ͠·͢ɻ