今後のフロントエンドについて(仮)

by Yosuke Furukawa

Slide 1

Slide 1 text

ࠓޙͷϑϩϯτΤϯυ (Ծ) @Lodge Yahoo Japan 2018/03/26 Yosuke FURUKAWA

Slide 2

Slide 2 text

Twitter: @yosuke_furukawa Github: yosuke-furukawa

Slide 3

Slide 3 text

ࠓ೔͔ͿΓͦ͏ɾɾɾ

Slide 4

Slide 4 text

ͳΔ΂͘ࢿྉ͔ͿΒͳ͍Α͏ ʹ͠·͢ʂʂʂʂ

Slide 5

Slide 5 text

ʮࠓޙʯΈ͍ͨͳ֬౓ͷ௿͍ ࿩ͯ͠΋ΞϨͳͷͰɺʮࠓʯ ϦΫϧʔτͰ΍ͬͯΔ͜ͱΛ ࿩͠·͢ɻ

Slide 6

Slide 6 text

https://recruit-tech.co.jp/blog/2017/06/07/bootcamp2017/

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

࿨ా୎ਓ͞Μύʔτ ʹ͠ΉͶ͋͞Μύʔτ Զύʔτ क԰͞Μύʔτ

Slide 9

Slide 9 text

࿨ా୎ਓ͞Μύʔτ ʹ͠ΉͶ͋͞Μύʔτ Զύʔτ क԰͞Μύʔτ ΤϯδχΞͷ৺ߏ͔͑ΒΞϓϦέʔ γϣϯͷத਎·Ͱ஌Δ

Slide 10

Slide 10 text

https://speakerdeck.com/rtechkouhou/javascript-bootcamp

Slide 11

Slide 11 text

JavaScript Bootcamp Ͱڭ͑ͯ ͍Δ͜ͱ • ϦΫϧʔτςΫϊϩδʔζͷ "ϑϩϯτΤϯυΤϯ δχΞ" ͷఆٛ͸޿ͯ͘ਂ͍ • HTML/CSS/JSΛۦ࢖ͯ͠ΫϥΠΞϯτΛ࡞Δ   *͚ͩͰ͸ͳ͍* • ωοτϫʔΫͷ஌ࣝ΍αʔόͷجૅ஌ࣝ΋༗͢Δ্ ʹͦΕΒΛ౿·͑ͯαΠτશମͷϢʔβϏϦςΟɾ ύϑΥʔϚϯεΛ্͛Δਓ

Slide 12

Slide 12 text

ϦΫϧʔτςΫϊϩδʔζͷ ϑϩϯτΤϯυΤϯδχΞ

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

React Angular Redux JS Frameworks Vue.js Polymer

Slide 22

Slide 22 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 23

Slide 23 text

େมͰ͢Ͷ

Slide 24

Slide 24 text

͜Ε͕(ϦΫϧʔτͷ)  ϑϩϯτΤϯυΤϯδχΞ  ʹͳΔɺͱ͍͏͜ͱͰ͢ɻ

Slide 25

Slide 25 text

๻ͷ৔߹

Slide 26

Slide 26 text

શ෦Λ஌͓ͬͯ͘ඞཁ͸ͳ͍ɺ ͱ͍͏΋ͷͷɺେମ஌ͬͯΔ

Slide 27

Slide 27 text

ৄ͘͠ͳ͍΋ͷͰ͋ͬͯ΋ 60%ҐͳΒେମ࿩ͤΔ

Slide 28

Slide 28 text

Ͳ͏΍ͬͨΒ͜͏ͳΕΔͷ͔ʁ • ۚݴ

Slide 29

Slide 29 text

ٕज़ΛֶͿͷͰ͸ͳ͘ɺٕज़ͷ ֶͼํΛֶͿ • twadaྲྀ: • ࢛൒ظ͝ͱʹٕज़ॻΛಡΉ • खΛಈֶ͔ͯ͠Ϳ • গͳ͘ͱ΋̍ͭ͸৽͍͠ݴޠΛֶͿ • Ξ΢τϓοτΛܧଓతʹߦ͏

Slide 30

Slide 30 text

ٕज़ΛֶͿͷͰ͸ͳ͘ɺٕज़ͷ ֶͼํΛֶͿ • twadaྲྀ: • ࢛൒ظ͝ͱʹٕज़ॻΛಡΉ • खΛಈֶ͔ͯ͠Ϳ • গͳ͘ͱ΋̍ͭ͸৽͍͠ݴޠΛֶͿ • Ξ΢τϓοτΛܧଓతʹߦ͏ ϑϩϯτΤϯυͷ৔߹

Slide 31

Slide 31 text

ϑϩϯτΤϯυͰ৺͕͚Δࣄ • ΞϓϦέʔγϣϯΛ࡞Ζ͏ • ඇػೳཁ݅ʹͩ͜ΘΖ͏ • ஌ࣝʹ֞ࠜ͸࡞Βͳ͍

Slide 32

Slide 32 text

ΞϓϦέʔγϣϯΛ࡞Ζ͏

Slide 33

Slide 33 text

Create Application /PEFֶԂࡇ ॳࢀՃޙʹҙࣝߴ·ͬͯ࡞੒

Slide 34

Slide 34 text

·͊·͊ͷ൓ڹ

Slide 35

Slide 35 text

Create Application • ͔ͦ͜Βௐࢠʹ৐ͬͯͨ͘͞Μ࡞੒

Slide 36

Slide 36 text

Ұ௨ΓNode.js࢖ͬͯԿ͔࡞ ΕΔΑ͏ʹͳͬͨ

Slide 37

Slide 37 text

Create Application • ࡞ͬͨΒ঺հ͠·ͬͨ͘ɻ

Slide 38

Slide 38 text

ͳΜͰ͜Μͳ͜ͱ͔ͯͨ͠ʁ

Slide 39

Slide 39 text

A. ָ͍͔͠Β

Slide 40

Slide 40 text

࡞Δ ͳΜ͔ษڧ͢Δ ൃද͢Δ ϑΟʔυόοΫ ΋Β͏ ͜͏͍͏ϥΠϑαΠΫϧͰ ָ͘͠ͳ͖ͬͯͨɻ

Slide 41

Slide 41 text

Կॲ͔Ͱݟͨ͜ͱ͋Δਤ ࡞Δ ͳΜ͔ษڧ͢Δ ൃද͢Δ ϑΟʔυόοΫ ΋Β͏ ͜͏͍͏ϥΠϑαΠΫϧͰ ָ͘͠ͳ͖ͬͯͨɻ

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

Կࣄ΋ָ͠Ή͜ͱॏཁ

Slide 44

Slide 44 text

ඇػೳཁ݅ʹͩ͜ΘΖ͏

Slide 45

Slide 45 text

ඇػೳཁ݅ • ηΩϡϦςΟ • XSS/XSRF/DoS etc • ੑೳ • SPA/PWA/AMP etc • ϝϯςφϯαϏϦςΟ • ςετॻ͘/e2e/storyboard etc

Slide 46

Slide 46 text

ػೳཁ݅Λຬͨͯ͠ظ೔ʹ௥ ΘΕΔதͰͲ͜·Ͱඇػೳཁ ݅ΛೖΕࠐΊΔ͔ͱ͍͏ͷ͕ ΤϯδχΞͷҰछͷೳྗ

Slide 47

Slide 47 text

๻ͷ৔߹

Slide 48

Slide 48 text

ύϑΥʔϚϯενϡʔχϯά େ޷͖ͩͬͨ

Slide 49

Slide 49 text

όοΫΤϯυͷσʔλϕʔε ͱ͔શจݕࡧ෦෼ͷνϡʔχ ϯά΍ͬͯresponseͷ࣌ؒΛ ୹͘͢Δͷ͕࢓ࣄͩͬͨɻ 1 sec => 300ms ʹͨ͜͠ͱ ΋

Slide 50

Slide 50 text

Ͱ΋

Slide 51

Slide 51 text

ରԠϒϥ΢βΛ IE => Chrome ʹ֦େͨ͠ͱ͖ͷ͜ͱ

Slide 52

Slide 52 text

ര଎ʹͳͬͨ

Slide 53

Slide 53 text

ϑϩϯτΤϯυͷٕज़͕ਐา ͢Δͱ๻ͷ΍ͬͯͨ͜ͱ͸ޡ ࠩʹมΘ͍ͬͯͬͨɻɻɻ

Slide 54

Slide 54 text

ඇػೳཁ݅Ͱੜ͖͍ͯͨࣗ෼ ͕ॳΊͯܦݧͨ͠িܸ

Slide 55

Slide 55 text

࣮ࡍʹ͸UXΛ࠷ߴʹ͢ΔͳΒ ϑϩϯτ͔ΒόοΫΤϯυ· Ͱશ෦ࣝΔඞཁ͕͋ΔΜͩͱ ஌ͬͨ

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

ϦΫΤετ͔ΒϨεϙϯε·ͰͰ͸ͳ͘ɺϖʔδ͕ಡΈ ࠐ·Ε࢝Ί͔ͯΒϢʔβʔͷظ଴ΛಘΔ·Ͱɻ

Slide 58

Slide 58 text

͔ͦ͜ΒϑϩϯτΤϯυʹڵຯ Λ࣋ͬͨ • Node.js͸JavaScriptֶ΅͏ͱͯ͠΍ͬͯͨΒ ָ͘͠ͳͬͯ΍ͬͯͨ • ϑϩϯτͰͳΜ͔ΞϓϦ΋࡞͍͕ͬͯͨɺ࣮ ࡍʹ͸స৬ͯ͠ػձΛ࡞࣮ͬͯࢪͨ͠ • ਺೥͔͚ͯɺͰ͖ΔΑ͏ʹͳͬͨ

Slide 59

Slide 59 text

ඇػೳཁ݅ʹͩ͜ΘΖ͏ɻ

Slide 60

Slide 60 text

஌ࣝʹ֞ࠜΛ࡞Βͳ͍

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

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

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

Slide 69

Slide 69 text

·ͱΊ

Slide 70

Slide 70 text

·ͱΊ • ϦΫϧʔτςΫϊϩδʔζͷϑϩϯτΤϯυ͸ͨͩը໘Λ࡞ Δ͚ͩͷਓ͡Όͳ͍ • αΠτશମͷϢʔβϏϦςΟɾύϑΥʔϚϯεΛ্͛Δਓ • ৺͕͚ͯ΄͍͜͠ͱ • ΞϓϦέʔγϣϯΛ࡞Ζ͏ • ඇػೳཁ݅ʹͩ͜ΘΖ͏ • ஌ࣝʹ֞ࠜΛ࡞Βͳ͍Α͏ʹ͠Α͏

Slide 71

Slide 71 text

·ͱΊ • ϦΫϧʔτςΫϊϩδʔζͷϑϩϯτΤϯυ͸ͨͩը໘Λ࡞ Δ͚ͩͷਓ͡Όͳ͍ • αΠτશମͷϢʔβϏϦςΟɾύϑΥʔϚϯεΛ্͛Δਓ • ৺͕͚ͯ΄͍͜͠ͱ • ΞϓϦέʔγϣϯΛ࡞Ζ͏ • ඇػೳཁ݅ʹͩ͜ΘΖ͏ • ஌ࣝʹ֞ࠜΛ࡞Βͳ͍Α͏ʹ͠Α͏ ͜ΕͱܾΊͨಓͰ஌Βͳͯ͘  ྑ͍͜ͱͳΜ͔̍ͭ΋ͳ͍

Slide 72

Slide 72 text

Thank You!!!