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

by Yosuke Furukawa

Slide 1

Slide 1 text

ϑϩϯτΤϯυΤϯδ χΞʹͳΔ֮ޛ 2021/07/07 @ Open 8 ࣾ಺ษڧձ

Slide 2

Slide 2 text

Twitter: @yosuke_furukawa Github: yosuke-furukawa

Slide 3

Slide 3 text

01&/ٕज़ސ໰ʹͳΓ·ͨ͠

Slide 4

Slide 4 text

ٕज़ސ໰ͱͯ͠΍͍͖͍ͬͯͨ ͜ͱ • ιʔείʔυͷϨϏϡʔ • ϖΞϓϩ • ٕज़ઓུͷΞυόΠε • ࣾ಺ษڧձͰͷߨࢣ׆ಈ (˒ࠓ೔͸ίϨͰ͢!)

Slide 5

Slide 5 text

ੲ࿩ͨ͠΋ͷ • ΤϯδχΞʹͳΔ֮ޛ • εϖγϟϦετʹͳΔ֮ޛ

Slide 6

Slide 6 text

ࠓճͷ࿩͸ • ϑϩϯτΤϯυΤϯδχΞͬͯಛʹͲ͏͍͏ ֮ޛ͕ඞཁͳͷ͔ʁ • ͳΜ͔ΩϥΩϥͯ͠Δ͚Ͳɺ࣮ଶͲ͏͍͏ਓ ୡͳͷ͔ʁ • ͜ͷลΓΛத৺ʹ࿩͠·͢

Slide 7

Slide 7 text

ϑϩϯτΤϯυΤϯδχΞͷ ྺ࢙͸࣮͸͘͢͝ઙ͍

Slide 8

Slide 8 text

ϑϩϯτΤϯυΤϯδχΞͱ͸... ͱ͍͏࿩Λ͢Δલʹ

Slide 9

Slide 9 text

ϦονͳUI͕͜͜࠷ۙ૿͑ͯ ͖ͨͱࢥ͍·ͤΜ͔?

Slide 10

Slide 10 text

εϫΠϓͯ͠ίϯςϯπΛࠩ͠ସ͑Δ Χϧʔηϧ UI

Slide 11

Slide 11 text

ແݶεΫϩʔϧ

Slide 12

Slide 12 text

ը໘ΛҾͬுͬͯϦϩʔυ͢Δ Pull to refresh

Slide 13

Slide 13 text

͜͏͍͏ϦονͳUI͕૿͑ͯ ͖͍ͯΔ

Slide 14

Slide 14 text

ͳ͔ͥʁ

Slide 15

Slide 15 text

εϚʔτϑΥϯͷ୆಄ͱڞʹ ยख͚ͩͰ࢖͑ΔUIͰ͋Γ͔ ͭΠϯλϥΫςΟϒͳ΋ͷ͕ ૿͍͑ͯΔɻ

Slide 16

Slide 16 text

ϑϩϯτΤϯυΤϯδχΞ͸ σόΠεͷਐԽͱUIͷมԽʹ Αͬͯ࢈·Εͨ

Slide 17

Slide 17 text

૯ͯ͡ݴ͏ͱϢʔβʔମݧ ʢUser eXperienceʣͷมԽ

Slide 18

Slide 18 text

ϑϩϯτΤϯυΤϯδχΞ͸ ϢʔβʔମݧΛ޲্͢Δ ΤϯδχΞͰ͋Δɻ

Slide 19

Slide 19 text

ϢʔβʔମݧΛ޲্͢ΔͨΊʹ • MUST NOT (΍ͬͯ͸͍͚ͳ͍͜ͱ) • MUST (΍Βͳ͖Ό͍͚ͳ͍͜ͱ) • ৺ߏ͑

Slide 20

Slide 20 text

MUST NOT ΍ͬͯ͸͍͚ͳ͍͜ͱ

Slide 21

Slide 21 text

ϒϥ΢βͷମݧΛ յͯ͠͸͍͚ͳ͍

Slide 22

Slide 22 text

ϒϥ΢βͷػೳ 🔒IUUQTFYBNQMFDPN

Slide 23

Slide 23 text

ϒϥ΢βͷػೳ 🔒IUUQTFYBNQMFDPN ໭Δ ਐΉ Ϧϩʔυɾதࢭ ΞυϨεόʔ

Slide 24

Slide 24 text

ϒϥ΢βͷػೳ • ΞυϨεόʔʹ͍Εͨ URL Λجʹϖʔδ͕ϨϯμϦϯά͞ΕΔ • ϦϯΫΛΫϦοΫ͢ΔͳͲͷΞΫγϣϯ͕͋Δͱ URL ͕มԽ ͠ɺཤྺʹͨ·Δ • ໭ΔϘλϯΛԡ͢ͱཤྺΛ໭ΕΔ • ਐΉϘλϯΛԡ͢ͱཤྺΛਐΊΒΕΔ • ϦϩʔυϘλϯΛԡ͢ͱ࠶౓ URL Λߋ৽͢Δ *NBHF

Slide 25

Slide 25 text

ϒϥ΢βͷػೳ • ϒϥ΢βͷجຊػೳΛյ͢Α͏ͳΞϓϦέʔγϣϯ͸ମݧ͕ѱ ͍ɻ • ໭ͬͨ࣌ʹ΋ͱ΋ͱ͍ͨεΫϩʔϧҐஔ͡Όͳ͍৔ॴʹ໭͞Ε ͨΒɾɾɾɾʁ • εΫϩʔϧ͢ΔࡍʹΨλΨλͯ͠εϜʔεͳૢ࡞͕ग़དྷͳ͔ͬ ͨΒɾɾʁ • Enter ΩʔͰૹ৴Ͱ͖ͳ͍ϑΥʔϜΛ࡞ͬͯ͠·ͬͨ Βɾɾɾʁ

Slide 26

Slide 26 text

ϒϥ΢βͷػೳ • ϒϥ΢βͷجຊػೳΛյ͢Α͏ͳΞϓϦέʔγϣϯ͸ମݧ͕ѱ ͍ɻ • ໭ͬͨ࣌ʹ΋ͱ΋ͱ͍ͨεΫϩʔϧҐஔ͡Όͳ͍৔ॴʹ໭͞Ε ͨΒɾɾɾɾʁ • εΫϩʔϧ͢ΔࡍʹΨλΨλͯ͠εϜʔεͳૢ࡞͕ग़དྷͳ͔ͬ ͨΒɾɾʁ • Enter ΩʔͰૹ৴Ͱ͖ͳ͍ϑΥʔϜΛ࡞ͬͯ͠·ͬͨ Βɾɾɾʁ શ෦ѱ͍ϢʔβʔΤΫεϖϦΤϯε

Slide 27

Slide 27 text

ϒϥ΢βͷػೳ • େݪଇ: ΢ΣϒΞϓϦέʔγϣϯ͸ϒϥ΢βͷػೳΛ յͯ͠͸͍͚ͳ͍ɻ • յ͢ͱମݧ͕ѱ͍͚ͩ͡Όͳ͍ɻ • ΞΫηγϏϦςΟ΋ѱ͘ͳΔɻ • ηΩϡϦςΟͱ͔ͷอޢػߏ΋ಇ͔ͳ͘ͳΔ͔΋ɻ

Slide 28

Slide 28 text

ϒϥ΢βͷػೳ • େݪଇ: ΢ΣϒΞϓϦέʔγϣϯ͸ϒϥ΢βͷػೳΛ յͯ͠͸͍͚ͳ͍ɻ • յ͢ͱମݧ͕ѱ͍͚ͩ͡Όͳ͍ɻ • ΞΫηγϏϦςΟ΋ѱ͘ͳΔɻ • ηΩϡϦςΟͱ͔ͷอޢػߏ΋ಇ͔ͳ͘ͳΔ͔΋ɻ ͲΜͳʹྑ͍ΞϓϦͰ͋ͬͯ΋ ϒϥ΢βͷػೳΛյ͢Α͏ͳΞϓϦ͸࢖ΘΕͳ͘ͳΔ

Slide 29

Slide 29 text

MUST ΍Βͳ͖Ό͍͚ͳ͍͜ͱ

Slide 30

Slide 30 text

ϒϥ΢βͱαʔόʹ͍ͭͯ ஌Δ

Slide 31

Slide 31 text

ϒϥ΢βͷػೳΛյ͞ͳ͍ͨ Ίʹ͸ϒϥ΢βʹ͍ͭͯ஌Δ ͜ͱ͕Ұ൪ྑ͍

Slide 32

Slide 32 text

ϒϥ΢β͚ͩͰ͸ΞϓϦέʔ γϣϯ͸੒ཱ͠ͳ͍ɺαʔόʹ ͍ͭͯ΋஌͓͔ͬͯͳͯ͘͸ ϢʔβʔମݧΛ޲্Ͱ͖ͳ͍

Slide 33

Slide 33 text

ϒϥ΢βͷಈ͖ • ࠷ॳʹ HTML ΛಡΈࠐΉ • HTML ಺ʹ͋ΔαϒϦιʔε (CSS, JavaScript, Image, Video) ΛಡΈࠐΉ • ಡΈࠐ·ΕͨϦιʔεΛجʹϨΠΞ΢τͯ͠ϖʔδΛϨϯμ Ϧϯά͢Δ ϨϯμϦϯά

Slide 34

Slide 34 text

ϒϥ΢βͷಈ͖ • ͜ͷʮ࠷ॳʹ಺༰͕දࣔ͞ΕΔʯ·Ͱͷ͜ͱ Λॳظදࣔͱ͍͏ɻ • ॳظදࣔΛ͍͔ʹ଎͘͢Δ͔ɺͱ͍͏ͷ΋Ұ ͭͷϢʔβʔମݧ /BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU -BSHFTU$POUFOUGVM 1BJOU *NBHF 5JNF5P*OUFSBDUJWF *NBHF 'VMMZ-PBEFE *NBHF

Slide 35

Slide 35 text

ϒϥ΢βͷಈ͖ • ͞Βʹϒϥ΢β͸ॳظදࣔ͞Ε͔ͯΒJavaScript ౳ ʹΑͬͯ෦෼తʹHTML͕ߋ৽͞ΕΔͱͦΕʹԠͯ͡ ݟͨ໨΋มΘΔɻ • ͜ͷ෦෼తʹHTMLΛߋ৽͢ΔࣄͰΠϯλϥΫςΟϒ ͳಈ͖Λग़͢ɻ 'VMMZ-PBEFE *NBHF 6QEBUFE *NBHF 6QEBUFE *NBHF

Slide 36

Slide 36 text

ϨϯμϦϯάϓϩηε • HTML ͷϨϯμϦϯά͸ "ಈతʹ" ϨϯμϦϯ ά͢Δɻ • JavaScript ΍ϢʔβʔೖྗɺΞχϝʔγϣϯ ͳͲͰϨϯμϦϯά͕ߋ৽͞ΕΔɻ *OJUJBM3FOEFS ߋ৽ ߋ৽ ߋ৽ ߋ৽

Slide 37

Slide 37 text

ϨϯμϦϯάϓϩηε • ίϯςϯπ͕ಈతʹߋ৽͞ΕΔͱ͍͏͜ͱ͕ ΢Σϒͷಛ௃ • ͦͷͨΊʹ͍͔ͭ͘ͷதؒදݱΛ͍࣋ͬͯΔ IUNM IUNM %0. 4UZMFE 1BSTF 4UZMF -BZPVU 1BJOU *NBHF

Slide 38

Slide 38 text

HTML Parse EJW QIFMMPQ QXPSMEQ EJW 1BSTF %*7 1 5&95 1 5SFF %PDVNFOU )5.- #PEZ %JW 1 5&95 1 5&95 • λάΛωετͯ͠දݱ • ໦ߏ଄ͱ͍͏ܗͰσʔλߏ଄ͱͯ͠ දݱ͞ΕΔɻ

Slide 39

Slide 39 text

DOM %PDVNFOU )5.- #PEZ %JW 1 5&95 1 41"/ • Document Object Model • ϒϥ΢β಺ͰͷHTMLͷ಺෦දݱ • Ͱ͋Γɺ͔ͭ JavaScript Ͱૢ࡞Ͱ͖Δσʔλߏ଄ var div = document.body.ﬁrstChild; var p2 = div.childNodes[1]; p2.appendChild(document.createElement("span")); +BWB4DSJQU &OHJOF CJOEJOHT

Slide 40

Slide 40 text

DOM %PDVNFOU )5.- #PEZ %JW 1 5&95 1 #VUUPO • DOM ʹରͯ͠ΠϕϯτΛ௥Ճ͢ Δ͜ͱͰϢʔβʔͷΞΫγϣϯʹ ରͯ͠ͷॲཧΛ௥ՃͰ͖Δɻ var button = document.getElementById("submit"); button.addEventListener("click", function () { console.log("clicked!!"); }); Πϕϯτ ௥Ճ

Slide 41

Slide 41 text

ϒϥ΢βΛ஌Ζ͏ʢ·ͱΊʣ • ϒϥ΢βͷػೳΛ஌Ζ͏ • ϒϥ΢βͷಈ͖ • ॳظදࣔ͞Ε͔ͯΒߋ৽͢Δ • ෦෼తʹߋ৽͢ΔࡍʹDOMΛ࢖ͬͯߋ৽͢Δ͜ͱ͕Ͱ͖Δɻ • ΠϕϯτΛDOMʹ௥Ճ͢Δ͜ͱͰɺϢʔβʔͷΞΫγϣϯʹ ج͍ͮͯΠϯλϥΫςΟϒͳಈ࡞Λ͢Δ͜ͱ͕Ͱ͖Δɻ

Slide 42

Slide 42 text

ͦͷ্Ͱ • ϒϥ΢βͷػೳ͕յΕͯ͠·͏΋ͷͰΑ͋͘Δ ͷ͸ʮؒҧͬͨΠϕϯτͷऔΓѻ͍ʯ Ϙλϯ͕ΫϦοΫ͞Ε͚ͨ࣌ͩ ৘ใΛૹ৴͢ΔΑ͏ʹ࡞ΒΕͨ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" }) });

Slide 43

Slide 43 text

ଞʹ΋ • εΫϩʔϧதʹΨλΨλ͢Δͷ͸ɺεΫϩʔϧ࣌ʹෳࡶͳ ܭࢉΛ͍ͯ͠Δࣄ͕ଟ͍ɻ • Α͋͘Δͷ͸ແݶεΫϩʔϧͷ࣌ εΫϩʔϧ࣌ʹͲ͜·ͰಡΈࠐΜ͔ͩͳͲͷ ෳࡶͳܭࢉΛஞ࣍తʹॲཧ͍ͯ͠Δͱ͜͏ͳΔ document.addEventListener("scroll", function () { // ෳࡶͳܭࢉ }); scroll ͸౎౓ൃՐͤ͞Δඞཁ͸ͳ͍ͷͰɺ ΠϕϯτΛؒҾ͍ͨΓൃՐͤ͞ΔλΠϛϯά ΛݮΒ͢ඞཁ͕͋Δ

Slide 44

Slide 44 text

αʔόʹ͍ͭͯ஌Ζ͏

Slide 45

Slide 45 text

αʔόʹ͍ͭͯ஌Ζ͏ • ΫϥΠΞϯτʹಈ͖Λ༩͑ͯϢʔβʔମݧΛ࡞Δͷ ͕ϑϩϯτΤϯυΤϯδχΞͷ໾ׂͷେ෦෼ • ͨͩ͠ɺΫϥΠΞϯτͷ͜ͱ͚ͩ஌͓͚ͬͯ͹͍͍ Θ͚Ͱ͸ͳ͍ • ϢʔβʔମݧΛ࠷େԽ͢Δʹ͸ΫϥΠΞϯτͱαʔ όͷ྆ํΛ஌Δඞཁ͕͋Δɻ

Slide 46

Slide 46 text

αʔόʹ͍ͭͯ஌Ζ͏ • WebΞϓϦέʔγϣϯ͸HTML΍CSS΍JavaScriptͱ ͍ͬͨϦιʔεΛαʔό͔ΒಘΔඞཁ͕͋Δɻ • JSONͳͲͷσʔλ΋αʔό͔ΒಘΔඞཁ͕͋Δɻ • ϒϥ΢β͔ΒϦιʔε΍σʔλΛཁٻʢϦΫΤε τʣ͠ɺαʔό͔ΒԠ౴ʢϨεϙϯεʣ͢Δɻ

Slide 47

Slide 47 text

αʔόͱΫϥΠΞϯτ • ΫϥΠΞϯτ͔ΒαʔόʹϦΫΤετΛߦ͍ɺαʔό͸ͦΕΛ Ԡ౴͢ΔࣄͰϦιʔε΍σʔλΛऔಘ͍ͯ͠Δɻͦͷ಺༰Λج ʹDOMΛߋ৽ͤ͞Δɻ

Slide 48

Slide 48 text

ωοτϫʔΫ • ௨৴Λߦ͍ɺཁٻ͞ΕͨίϯςϯπΛμ΢ϯ ϩʔυͨ͠Γɺ·ͨσʔλΛΞοϓϩʔυ͠ ͨΓ͢Δɻ • HTTP(S)௨৴Λߦ͏ϨΠϠͰɺۙ೥͸ HTTP/3 ͳͲ͕༗ޮʹͳΓͭͭ͋Δɻ

Slide 49

Slide 49 text

ͦ΋ͦ΋௨৴Λߦ͏ͱ͸ʁ • Public IP / PORT ΛΫϥΠΞϯτ͕஌͍ͬͯͯ • αʔό͕઀ଓΛ଴͍ͬͯͯ • ͦ͜ʹ઀ଓΛཁٻ͠ • ઀ଓΛཱ֬ͨ͠Βɺσʔλͷަ׵Λߦ͏ Public IP / PORT Listen Data Transfer

Slide 50

Slide 50 text

͡Ό͋ 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 */ "

Slide 51

Slide 51 text

PORT ͸ʁ • ༗໊ͳϓϩτίϧͷ৔߹༧Ίܾ·ͬͯΔɻ • http ͳΒ 80 ൪ɺ https ͳΒ 443 ൪ͱ͍ͬͨ෩ʹɻ • ͜ͷ༧ΊܾΊΒΕͨ PORT ͷ͜ͱΛ well-known PORT ͱݺͿɻ • well-known ͳ PORT ͸ಛݖ͕ඞཁͳέʔε΋ଟ͍ͷͰɺ։ൃ؀ ڥ౳Ͱ͸ 3000 ൪ͱ͔ʹͯ͠ɺ localhost:3000 Ͱݺͼग़͢͜ͱ ΋ଟ͍ɻ

Slide 52

Slide 52 text

઀ଓΛཱ֬ͱ͍͏ͷ͸ʁ • (؆ུԽͷͨΊ) TCP Λϕʔεʹ࿩͢ͱɺ֘౰ͷαʔόʹ͍͖ͳ Γ઀ଓ͢ΔͷͰ͸ͳ͘ɺ3ճͷ઀ଓ֬ೝΛܦͯ઀ଓ͢Δɻ • ͜ͷ઀ଓ֬ೝͷ͜ͱΛ 3 way handshake ͱݺͿɻ ͭͳ͛ΔΑʔ (SYN) ͍͍Αʔ ͬͪ͜΋ͭͳ͛ΔΑʔ(SYN-ACK) ͡Ό͋ͭͳ͙Ͷʔ (ACK)

Slide 53

Slide 53 text

͡Ό͋ࢲͷ伴ͱ߹Θͤͯ͜ΕͰ࿩͠·͠ΐ͏ɻ (Client Certificate) ઀ଓΛཱ֬ͱ͍͏ͷ͸ʁ • HTTP ͳΒ͜ΕͰܨ͕Δ͕ɺ࠷ۙͷେମͷWebαʔό͸ HTTPS ͳͷͰɺ͜Ε͚ͩͰ͸ܨ͕Βͳ͍ɻ҉߸ԽͷͨΊͷ΍ΓऔΓ͕ߋ ʹߦΘΕΔɻ(※؆ུԽ͍ͯ͠ΔͨΊɺਖ਼֬Ͱ͸ͳ͍) ΑΖ͓͘͠ئ͍͍ͨ͠·͢ɻ(Client Hello) ͪ͜Βͦ͜ΑΖ͓͘͠Ͷ͕͍͠·͢ɻ (Server Hello) Θͨ͠͸͜͏͍͏΋ͷͰ͢ɻ (Server Certificate) ͜͏͍͏伴Ͱ࿩ͤ·͢ (Server Key Exchange) Θͨ͠͸͜͏͍͏΋ͷͰ͢ɻ(Client Certificate)

Slide 54

Slide 54 text

Slide 55

Slide 55 text

σʔλͷ΍ΓऔΓ • ઀ଓཱ͕֬͞Εͨޙ͸ HTTP ϓϩτίϧʹΑΔσʔλͷ΍ΓऔΓΛߦ͏ɻ • HTTP ͸جຊతʹϦΫΤετ / ϨεϙϯεͰͷ΍ΓऔΓ͕ߦΘΕΔɻ • HTTP ϦΫΤετʹ͸ϦΫΤετߦͱϔομʔͱݺ͹ΕΔϝλ৘ใͱϘσΟ ͱݺ͹ΕΔίϯςϯτ৘ใؚ͕·ΕΔɻ • 1045JOEFYIUNM)551 BDDFQUUFYUIUNM BDDFQUFODPEJOHH[JQ EFqBUF CS BDDFQUMBOHVBHFFO64 FOR KBR DBDIFDPOUSPMOPDBDIF DPPLJFGPPCBSCB[ GPPCBSIPHFGVHB ϦΫΤετߦ ϦΫΤετϔομʔ ϦΫΤετϘσΟ σʔλ಺༰

Slide 56

Slide 56 text

σʔλͷ΍ΓऔΓ • ϦΫΤετΛड͚औͬͨΒαʔό͸ϨεϙϯεʢԠ౴ʣΛฦ͢ • HTTP Ϩεϙϯεʹ͸εςʔλεΛද͢৘ใͱϨεϙϯεϔομ ʢϝλσʔλʣɺϨεϙϯεϘσΟʢ಺༰ʣؚ͕·ΕΔ )5510, "HF $BDIF$POUSPMNBYBHF $POUFOU5ZQFUFYUIUNMDIBSTFU65' %BUF.PO "QS(.5 $POUFOU-FOHUI EPDUZQFIUNM IUNM IFBE εςʔλεߦ Ϩεϙϯεϔομ ϨεϙϯεϘσΟ

Slide 57

Slide 57 text

σʔλͷ΍ΓऔΓ • 200ܥ: ੒ޭɺσʔλͷຊମ͕͋Ε͹ૹΔ • 300ܥ: ϦμΠϨΫγϣϯϝοηʔδ • 400ܥ: ΫϥΠΞϯτΤϥʔ • 500ܥ: αʔόΤϥʔ

Slide 58

Slide 58 text

4FSWFS GET /main.css GET /main.js GET /image0.png σʔλͷ΍ΓऔΓ GET /index.html 200 OK 200 OK 404 Not Found 304 Not Modiﬁed

Slide 59

Slide 59 text

4FSWFS GET /main.css GET /main.js GET /image0.png σʔλͷ΍ΓऔΓ GET /index.html 200 OK 200 OK 404 Not Found 304 Not Modiﬁed )551্Ͱσʔλͷ΍ΓऔΓ͕ߦΘΕɺͦΕ͕ϨϯμϦϯάϓ ϩηε΍+4Τϯδϯ͕࣮ߦ͞ΕΔϑΣʔζΛܦͯϖʔδ͕ग़Δ

Slide 60

Slide 60 text

αʔόΛ஌Ζ͏ʢ·ͱΊʣ • ΫϥΠΞϯτ͔Βཁٻͯ͠Ϧιʔε΍σʔλ Λ΍ΓऔΓ͢Δର৅͕αʔό • αʔόʹରͯ͠ωοτϫʔΫ઀ଓΛߦ͍ɺ σʔλΛసૹ͢Δ • HTTPͷϦΫΤετͱϨεϙϯεΛجʹϖʔδ Λߋ৽͢Δ

Slide 61

Slide 61 text

ͦͷ্Ͱ • ϒϥ΢βͷػೳ͕յΕͯ͠·͏΋ͷͰΑ͋͘Δͷ͸ʮURLΛҙ͍ࣝͯ͠ͳ ͍ʯ͔Β • ຊདྷϖʔδͷ಺༰ͱURL͸ରԠ͍ͯ͠ͳ͍ͱ͍͚ͳ͍ • ʮແݶεΫϩʔϧʯ΍ʮ΋ͬͱݟΔʯͰϖʔδͷ಺༰͕มΘ͍ͬͯΔʹ΋ ͔͔ΘΒͣɺURL͕มΘΒͳ͔ͬͨ৔߹ • ϖʔδΛߋ৽ͯ͠͠·͏ͱݟͯͨ͸ͣͷεΫϩʔϧҐஔ͕ࣦΘΕͯ͠·͏ • ຊདྷͳΒʮ΋ͬͱݟΔʯ΍ʮࠓԿϖʔδ໨ʹ͍Δͷ͔ʯͱ͍ͬͨ৘ใ͕ URLʹೖ͍ͬͯͳ͍ͱ͍͚ͳ͍ɻ

Slide 62

Slide 62 text

ͭ·Γ ࣮ࡍʹ͸ 2 ϖʔδ໨ʹ͍ͨͱͯ͠΋ͦΕΛ URL΋ߋ৽͓͔ͯ͠ͳ͍ͱϦϩʔυͯ͠͠·͏ͱ ϖʔδ͕ 1 ϖʔδ໨ʹ໭ͬͯ͠·͏ https://example.com/list?page=2 (ຊདྷ͍Δ΂͖URL) https://example.com/list (࣮ࡍͷURLɺ͜ͷ࣌఺ͰਐΜͩΓ໭ͬͨΓͨ͠Β...? Ϧϩʔυͨ͠Β...?)

Slide 63

Slide 63 text

ϒϥ΢βͱαʔόΛ஌Ζ͏ • ϒϥ΢βͷத਎Λࡉ͔͘஌Βͳͯ͘΋ϑϩϯτΤϯυ։ ൃ͸Ͱ͖Δ͕ɺ஌Βͳ͍ͱϢʔβʔମݧΛ޲্ͤ͞Δ͜ ͱ͸Ͱ͖ͳ͍ɻ • ಛʹϒϥ΢βͷػೳΛյ͢Α͏ͳ࣮૷Λ͏͔ͬΓͯ͠͠ ·ͬͯ΋ؾ͚ͮͳ͔ͬͨΓ͢Δɻ • ʮಈ͔͘Β͍͍ʯͰ͸ͳ͘ɺϒϥ΢βͷݪཧΛ஌Γɺαʔ όͷಈ͖Λཧղ্ͨ͠ͰΞϓϦέʔγϣϯΛ࡞Ζ͏ɻ

Slide 64

Slide 64 text

৺ߏ͑

Slide 65

Slide 65 text

ඇػೳཁ݅ʹͩ͜ΘΓΛ΋ͭ΂͖Ͱ͋ Δ͜ͱ͸ཧղ͕ͨ͠ɺʮϑϩϯτΤϯ υΤϯδχΞͱͯ͠΍ͬͨ΄͏͕͍͍ ͜ͱʯ͸ͲΜͳ͜ͱͳͷ͔ʁ

Slide 66

Slide 66 text

͜Ε·Ͱݟͯ΋Βͬͨͱ͓ ΓɺϑϩϯτΤϯυΤϯδχ Ξͱͯ͠ཁٻ͞Ε͍ͯΔ஌ࣝ ͸޿ͯ͘ਂ͍

Slide 67

Slide 67 text

͜ͷ஌ࣝΛશ෦཈͑Α͏ͱ͠ ͨΒແݶʹ͕࣌ؒඞཁʹͳΔ

Slide 68

Slide 68 text

ແݶͷதͰ༗ݶͷॲཧΛ͢Δ ͷʹඞཁͳͷ͸ษڧ΍౒ྗͰ ͸ͳ͘ɺ Ϟνϕʔγϣϯ

Slide 69

Slide 69 text

HTML CSS JS ΢ΣϒΛߏ੒͢Δݴޠ Backend Language (Java, Go)

Slide 70

Slide 70 text

DOM Cookie DevTools ϒϥ΢βΛߏ੒͢Δ಺༰ CSSOM window navigator Headers

Slide 71

Slide 71 text

DNS URL HTTP(S) ωοτϫʔΫ WebSocket TCP TLS HTTP/2

Slide 72

Slide 72 text

Cache Critical- Rendering Path Metrics Tools ύϑΥʔϚϯε Memory CPU I/O

Slide 73

Slide 73 text

XSS CSRF SQL Injection ηΩϡϦςΟ DoS TLS/SSL

Slide 74

Slide 74 text

React Angular Redux JS Frameworks Vue.js Polymer

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

େมͰ͢Ͷ😨

Slide 77

Slide 77 text

Ͳ͏΍ͬͨΒຬวͳ͘ ཈͑ΒΕΔͷ͔ʁ

Slide 78

Slide 78 text

๻ͷ৔߹

Slide 79

Slide 79 text

৺͕͚ͯΔࣄ • ஌ࣝʹ֞ࠜ͸࡞Βͳ͍ • ܧଓ͢Δ

Slide 80

Slide 80 text

஌ࣝʹ֞ࠜΛ࡞Βͳ͍

Slide 81

Slide 81 text

஌ࣝʹ֞ࠜΛ࡞Βͳ͍ • Dev / Ops Ͱ͸ͳ͘ Dev 💚 Ops • Engineer / Designer Ͱ͸ͳ͘ Engineer 💚 Designer • Backend / Frontend Ͱ͸ͳ͘ Backend 💚 Frontend

Slide 82

Slide 82 text

஌ࣝʹ֞ࠜΛ࡞Βͳ͍ • ཧ૝͸IࣈܕΑΓ΋Tࣈܕ • Ұݸ࣠Λ࡞͔ͬͯͦ͜Β޿͛Δ

Slide 83

Slide 83 text

஌ࣝʹ֞ࠜΛ࡞Βͳ͍ • Tࣈܕͷਓ͕૿΍͍͖͍ͯͨ͠ɻ • զʑͷֶͿ͜ͱ͸ଟ͍ɺͰ΋Tࣈܕͷਓ͕૿͑Ε͹ͦͷ෼ΧόʔͰ ͖Δɻ Designer FE BE

Slide 84

Slide 84 text

๻ͷ৔߹

Slide 85

Slide 85 text

ׂͱͳΜͰ΋޷͖ • Πϯϑϥ΋޷͖ • όοΫΤϯυ΋޷͖ • ϓϩάϥϛϯάݴޠͦͷ΋ͷ΋޷͖ • ϓϩμΫτΛߏங͢Δͷ΋޷͖ • σβΠϯܥͷπʔϧ΋ษڧͯ͠Δ

Slide 86

Slide 86 text

ׂͱͳΜͰ΋޷͖ • Πϯϑϥ΋޷͖ • όοΫΤϯυ΋޷͖ • ϓϩάϥϛϯάݴޠͦͷ΋ͷ΋޷͖ • ϓϩμΫτΛߏங͢Δͷ΋޷͖ • σβΠϯܥͷπʔϧ΋ษڧͯ͠Δ ͳΜͰ΋஌Δඞཁ͸ͳ͍ɺͰ΋ ޷ح৺ʹ֞ࠜ͸࡞ͬͯ΄͘͠ͳ͍ɻ

Slide 87

Slide 87 text

஌ࣝʹ֞ࠜΛ࡞Βͳ͍

Slide 88

Slide 88 text

஌ࣝʹ֞ࠜΛ࡞Βͳ͍ • ͪ͸΍;Δ 13 ר ࡩ୔ ਯʮ͜ΕͱܾΊͨಓͰ஌Βͳͯ͘ ྑ͍͜ͱͳΜ͔̍ͭ΋ͳ͍ΘΑʯ

Slide 89

Slide 89 text

ܧଓ͢Δ

Slide 90

Slide 90 text

ܧଓ͢Δ • ಠֶେશ • ʮԿ΋͍ͯ͠ͳ͍ঢ়ଶ͔Β ࢝ΊΔ͜ͱ͸೉͍͕͠ɺҰ୴ ࢝Ίͨ͜ͱΛ్தͰத్൒୺ͳ ··์Γग़͢͜ͱ΋·ͨ೉͍͠ʯ

Slide 91

Slide 91 text

ຖ೔ίʔυΛॻ͘ ৽͍͠΋ͷʹ΋৮ΕΔ Leetcode Λຖ೔ղ͍ͯΔʢ࠷ۙ͸RustͰ) Write Code Everyday Ͱ1೥൒ܧଓ

Slide 92

Slide 92 text

ܧଓ͢Δ • ϑϩϯτΤϯυΤϯδχΞʹͳΔͱಛʹݺٵ͢ ΔΑ͏ʹֶ͹ͳ͖Ό͍͚ͳ͍͜ͱ͕ग़ͯ͘Δ • ৽͍͠ϥΠϒϥϦ͸ৗʹग़ͯ͘Δ͠ɺߟ͑Δ͜ ͱ΋ଟ͍ • ʮָ͠Έͳ͕Βܧଓ͢Δʯ͜ͱ͕Ͱ͖Δͱྑ͍

Slide 93

Slide 93 text

֮ޛΛ࣋ͱ͏ • ΞϓϦέʔγϣϯΛ࡞Ζ͏ • ඇػೳཁ݅ʹͩ͜ΘΖ͏ • ஌ࣝΛᩦཉʹ࣋ͬͯௐ΂Α͏ • ͜ΕΛܧଓతʹ΍Γଓ͚Α͏

Slide 94

Slide 94 text

֮ޛΛ࣋ͱ͏ • ΞϓϦέʔγϣϯΛ࡞Ζ͏ • ඇػೳཁ݅ʹͩ͜ΘΖ͏ • ஌ࣝΛᩦཉʹ࣋ͬͯௐ΂Α͏ • ͜ΕΒΛܧଓతʹ΍Γଓ͚Α͏ ྑ͍ΤϯδχΞʹͳΔͷʹۙಓͳΜ ͔ແ͍͠ɺ֮ޛΛ࣋ͭඞཁ͕͋Δ

Slide 95

Slide 95 text

࠷ޙʹ

Slide 96

Slide 96 text

ϑϩϯτΤϯυΤϯδχΞͷ ࠓޙ

Slide 97

Slide 97 text

ϑϩϯτΤϯυΤϯδχΞత ʹ͸ܹಈͷ࣌୅

Slide 98

Slide 98 text

ϓϥΠόγʔอޢʹΑΔϒϥ ΢βϓϥοτϑΥʔϜͷมߋ

Slide 99

Slide 99 text

ωοτϫʔΫϨΠϠ΋ HTTP/3ʹɻ

Slide 100

Slide 100 text

ॻ͍͍ͯΔݴޠ΋ TypeScript ͕ओྲྀʹɻ

Slide 101

Slide 101 text

React / Vue.js ΋ Next.js / Nuxt.js ͔Β࢖͏ͳͲͷํ๏ ͕ओྲྀʹɻ

Slide 102

Slide 102 text

ϓϥοτϑΥʔϜ΋ϓϩτίϧ ΋ݴޠ΋มΘΔɺϑϨʔϜϫʔ Ϋ΋ͲΜͲΜมΘ͍ͬͯ͘

Slide 103

Slide 103 text

ਐԽʹ͍͍ͭͯ͘ͱ͍͏͜ͱͦ ͷ΋ͷ΋େมɻ

Slide 104

Slide 104 text

ʮָ͠Έͳ͕Β΋ɺۤ͠Έͳ͕ Β΋લʹਐΉඞཁ͕͋Δɻʯ ͜ΕΛཧղ͢Δ͜ͱ͕͜Ε͔Β ͷϑϩϯτΤϯυΤϯδχΞʹ ඞཁͳૉ࣭ʹͳΔɻ

Slide 105

Slide 105 text

ࣹܸͭͭ͠લਐ Կ΋ग़དྷͳ͍೔Ͱ͋ͬͯ΋Կ͔ Λͯ͠લʹਐΉɺͦΕΛ͠ଓ͚ Ε͹͕࣌ຯํʹͳͬͯ͘ΕΔ by Joel on Software

Slide 106

Slide 106 text

͍ͬ͠ΐʹ ʮࣹܸͭͭ͠લਐʯ ͠·͠ΐ͏ɻ ϑϩϯτΤϯυΤϯδχΞͱ ͯ͠Ұॹʹ੾᛭ୖຏͰ͖Δ೔ Λָ͠Έʹ͍ͯ͠·͢ɻ