Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
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.jsJavaScriptֶ΅͏ͱͯͬͯͨ͠Β ָ͘͠ͳͬͯͬͯͨ • ϑϩϯτͰͳΜ͔ΞϓϦ࡞͍͕ͬͯͨɺ࣮ ࡍʹస৬ͯ͠ػձΛ࡞࣮ͬͯࢪͨ͠ • ͔͚ͯɺͰ͖ΔΑ͏ʹͳͬͨ
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!!!