Tweet
Tweet

Slide 1

Slide 1 text

ΤϯδχΞʹͳΔ֮ޛ 2018/06/23 @ ώΧϦΤ Leverages

Slide 2

Slide 2 text

Twitter: @yosuke_furukawa Github: yosuke-furukawa

Slide 3

Slide 3 text

2018/11/23 - 24 Node ֶԂࡇ։࠵

Slide 4

Slide 4 text

ΤϯδχΞʹͳΔ

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

࿨ా୎ਓ͞Μύʔτ ʹ͠ΉͶ͋͞Μύʔτ Զύʔτ ΋Γ΍͞Μύʔτ

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

React Angular Redux JS Frameworks Vue.js Polymer

Slide 21

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

Slide 22 text

େมͰ͢Ͷ

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

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

·͊·͊ͷ൓ڹ

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

A. ָ͍͔͠Β

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Կࣄ΋ָ͠Ή͜ͱॏཁ

Slide 43

Slide 43 text

ͨͩͨ·ʹ͜Μͳ͜ͱΛݴΘ ΕΔ͜ͱ΋͋Δ

Slide 44

Slide 44 text

3FBDUͱ͔7VFKTͱ͔Ұ೥ͰྲྀߦΓഇΓ͕มΘΔ ΋ͷΛ΍Δͷ͸࣌ؒతʹ΋͍ͬͨͳ͍ 3BJMTษڧͯ͠·͢ͱ͔$BLF1)1ษڧͯ͠·͢ͱ ͔ݴ͏ͷ΍ΊΖɺதͰԿͯ͠Δ͔Θ͔͔ͬͯΒ࢖͑ 999͸Φϫίϯɺ:::࢖͑ ;;;ͷ͕͍͍ͧ

Slide 45

Slide 45 text

3FBDUͱ͔7VFKTͱ͔Ұ೥ͰྲྀߦΓഇΓ͕มΘΔ ΋ͷΛ΍Δͷ͸࣌ؒతʹ΋͍ͬͨͳ͍ 3BJMTษڧͯ͠·͢ͱ͔$BLF1)1ษڧͯ͠·͢ͱ ͔ݴ͏ͷ΍ΊΖɺதͰԿͯ͠Δ͔Θ͔͔ͬͯΒ࢖͑ 999͸Φϫίϯɺ:::࢖͑ ;;;ͷ͕͍͍ͧ Ұ੾ฉ͔ͳͯ͘ྑ͍

Slide 46

Slide 46 text

൷൑Λ͍ͯ͠ΔਓΑΓ΋Կ͔ Λ࡞͍ͬͯΔਓͷ͕ѹ౗తʹ ଚ͍ɺϞνϕʔγϣϯΛམͱ ͢ඞཁ͸ͳ͍

Slide 47

Slide 47 text

ݟͨΓฉ͍ͨΓͯ͠ಘͨ஌ࣝ ΑΓ΋ॻ͍ͨΓಈ͔ͨ͠Γ͠ ͯಘͨܦݧͷ͕ੜ͖ͨ৘ใ

Slide 48

Slide 48 text

ٕज़ʹ͸ݶΓ͕ͳ͍ɺͲΜͳ ΋ͷʹ΋ϝϦοτͱσϝϦο τ͸͋Δ͠ɺͦΕΒ͸΍ͬͯ Έͳ͍ͱຊ౰͸Θ͔Βͳ͍ɻ

Slide 49

Slide 49 text

΍ͬͯΈͯࣗ෼ʹٕ͋ͬͨज़ Λݟ͚͍ͭͯ͘ͷ͕ॏཁ

Slide 50

Slide 50 text

2. ඇػೳཁ݅ʹͩ͜ΘΖ͏

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

๻ͷ৔߹

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

ύϑΥʔϚϯενϡʔχϯά • όοΫΤϯυͷσʔλϕʔεͱ͔શจݕࡧ෦ ෼ͷνϡʔχϯά΍ͬͯresponseͷ࣌ؒΛ୹ ͘͢Δͷ͕࢓ࣄͩͬͨɻ

Slide 56

Slide 56 text

ύϑΥʔϚϯενϡʔχϯά • όοΫΤϯυͷσʔλϕʔεͱ͔શจݕࡧ෦ ෼ͷνϡʔχϯά΍ͬͯresponseͷ࣌ؒΛ୹ ͘͢Δͷ͕࢓ࣄͩͬͨɻ ͕͜͜Զͷઓ͏৔ॴ

Slide 57

Slide 57 text

Ͱ΋

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

ര଎ʹͳͬͨ

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

ඇػೳཁ݅ʹͩ͜ΘΔͱجૅ ͷ͜ͱΛ஌Δඞཁ͕ग़ͯ͘Δ

Slide 68

Slide 68 text

ඇػೳཁ݅ • ੑೳ
 => ϒϥ΢βͷதͷಈ͖ɺCPUɺmemoryɺωοτϫʔΫɺ ΞϧΰϦζϜ etc etc • ηΩϡϦςΟ
 => OS, middlewareͷதͷಈ͖ɺCPU, memory, etc etc • ϝϯςφϯαϏϦςΟ
 => ઃܭ࿦ɺݴޠ࢓༷ɺςετɺΞʔΩςΫνϟɺ etc etc

Slide 69

Slide 69 text

ඇػೳཁ݅ • ΞϓϦέʔγϣϯΛ࡞Ζ͏ • ͦͷޙͰඇػೳཁ݅ʹ΋ͩ͜ΘΖ͏ • ͦ͏͢ΔͱجૅͱԠ༻ͷ྆ํʹৄ͍͠ਓʹͳ ΕΔ

Slide 70

Slide 70 text

3. ஌ࣝʹ֞ࠜΛ࡞Βͳ͍

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

๻ͷ৔߹

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

஌ࣝʹ֞ࠜΛ࡞Βͳ͍

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

·ͱΊ

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

Thank You!!!