Leveragesで発表したエンジニアになる覚悟の話です。
ΤϯδχΞʹͳΔ֮ޛ2018/06/23 @ ώΧϦΤ Leverages
View Slide
Twitter: @yosuke_furukawaGithub: yosuke-furukawa
2018/11/23 - 24Node ֶԂࡇ։࠵
ΤϯδχΞʹͳΔ
https://recruit-tech.co.jp/blog/2017/06/07/bootcamp2017/
ాਓ͞Μύʔτ ʹ͠ΉͶ͋͞ΜύʔτԶύʔτ Γ͞Μύʔτ
ాਓ͞Μύʔτ ʹ͠ΉͶ͋͞ΜύʔτԶύʔτ क͞ΜύʔτΤϯδχΞͷ৺ߏ͔͑ΒΞϓϦέʔγϣϯͷத·ͰΔ
https://speakerdeck.com/rtechkouhou/javascript-bootcamp
JavaScript Bootcamp Ͱڭ͍͑ͯΔ͜ͱ• ϦΫϧʔτςΫϊϩδʔζͷ "ϑϩϯτΤϯυΤϯδχΞ" ͷఆٛͯ͘ਂ͍• HTML/CSS/JSΛۦͯ͠ΫϥΠΞϯτΛ࡞Δ *͚ͩͰͳ͍*• ωοτϫʔΫͷࣝαʔόͷجૅࣝ༗͢Δ্ʹͦΕΒΛ౿·͑ͯαΠτશମͷϢʔβϏϦςΟɾύϑΥʔϚϯεΛ্͛Δਓ
ϦΫϧʔτςΫϊϩδʔζͷϑϩϯτΤϯυΤϯδχΞ
HTML CSS JSΣϒΛߏ͢ΔݴޠBackend Language(Java, Go)
DOM Cookie DevToolsϒϥβΛߏ͢Δ༰CSSOM window navigatorHeaders
DNS URL HTTP(S)ωοτϫʔΫWebSocket TCP TLSHTTP/2
Cache Critical-Rendering PathMetrics ToolsύϑΥʔϚϯεMemory CPU I/O
XSS CSRF SQL InjectionηΩϡϦςΟDoS TLS/SSL
React Angular ReduxJS FrameworksVue.js Polymer
HTML CSS JSDOM Cookie DevToolsCSSOM window navigatorHeadersDNS URL HTTP(S)WebSocketTCP TLSReact ReduxMemory CPUI/ODoS TLS/SSL
େมͰ͢Ͷ
Ͱɺ͜Ε͕(ϦΫϧʔτͷ) ϑϩϯτΤϯυΤϯδχΞ ʹͳΔɺͱ͍͏͜ͱͰ͢ɻ
ϑϩϯτ͚ͩͰ͜Ε͚ͩͷ͕ࣝඞཁɺόοΫΤϯυؚΊΔͱ΄΅ແݶͷ͕࣌ؒඞཁ
ແݶͷதͰ༗ݶͷॲཧΛ͢ΔͷʹඞཁͳͷϚϯύϫʔͰղܾ͢ΔͷͰͳ͘ɺϞνϕʔγϣϯ
ͷ߹
શ෦Λ͓ͬͯ͘ඞཁͳ͍ɺͱ͍͏ͷͷɺେମͬͯΔ
ৄ͘͠ͳ͍ͷͰ͋ͬͯ60%ҐͳΒେମͤΔ
Ͳ͏ͬͨΒ͜͏ͳΕΔͷ͔ʁ• ۚݴ
ٕज़ΛֶͿͷͰͳ͘ɺٕज़ͷֶͼํΛֶͿ• twadaྲྀ:• ࢛ظ͝ͱʹٕज़ॻΛಡΉ• खΛಈֶ͔ͯ͠Ϳ• গͳ͘ͱ̍ͭ৽͍͠ݴޠΛֶͿ• ΞτϓοτΛܧଓతʹߦ͏
ٕज़ΛֶͿͷͰͳ͘ɺٕज़ͷֶͼํΛֶͿ• twadaྲྀ:• ࢛ظ͝ͱʹٕज़ॻΛಡΉ• खΛಈֶ͔ͯ͠Ϳ• গͳ͘ͱ̍ͭ৽͍͠ݴޠΛֶͿ• ΞτϓοτΛܧଓతʹߦ͏ͷ߹
ΤϯδχΞͰ৺͕͚Δࣄ• ΞϓϦέʔγϣϯΛ࡞Ζ͏• ඇػೳཁ݅ʹͩ͜ΘΖ͏• ࣝʹ֞ࠜ࡞Βͳ͍
1. ΞϓϦέʔγϣϯΛ࡞Ζ͏
Create Application/PEFֶԂࡇॳࢀՃޙʹҙࣝߴ·ͬͯ࡞
·͊·͊ͷڹ
Create Application• ͔ͦ͜Βௐࢠʹͬͯͨ͘͞Μ࡞
Ұ௨ΓNode.jsͬͯԿ͔࡞ΕΔΑ͏ʹͳͬͨ
Create Application• ࡞ͬͨΒհ͠·ͬͨ͘ɻ
ͳΜͰ͜Μͳ͜ͱ͔ͯͨ͠ʁ
A. ָ͍͔͠Β
࡞ΔͳΜ͔ษڧ͢Δ ൃද͢ΔϑΟʔυόοΫΒ͏͜͏͍͏ϥΠϑαΠΫϧͰָ͘͠ͳ͖ͬͯͨɻ
Կࣄָ͠Ή͜ͱॏཁ
ͨͩͨ·ʹ͜Μͳ͜ͱΛݴΘΕΔ͜ͱ͋Δ
3FBDUͱ͔7VFKTͱ͔ҰͰྲྀߦΓഇΓ͕มΘΔͷΛΔͷ࣌ؒతʹ͍ͬͨͳ͍3BJMTษڧͯ͠·͢ͱ͔$BLF1)1ษڧͯ͠·͢ͱ͔ݴ͏ͷΊΖɺதͰԿͯ͠Δ͔Θ͔͔ͬͯΒ͑999Φϫίϯɺ:::͑;;;ͷ͕͍͍ͧ
3FBDUͱ͔7VFKTͱ͔ҰͰྲྀߦΓഇΓ͕มΘΔͷΛΔͷ࣌ؒతʹ͍ͬͨͳ͍3BJMTษڧͯ͠·͢ͱ͔$BLF1)1ษڧͯ͠·͢ͱ͔ݴ͏ͷΊΖɺதͰԿͯ͠Δ͔Θ͔͔ͬͯΒ͑999Φϫίϯɺ:::͑;;;ͷ͕͍͍ͧҰฉ͔ͳͯ͘ྑ͍
൷Λ͍ͯ͠ΔਓΑΓԿ͔Λ࡞͍ͬͯΔਓͷ͕ѹతʹଚ͍ɺϞνϕʔγϣϯΛམͱ͢ඞཁͳ͍
ݟͨΓฉ͍ͨΓͯ͠ಘͨࣝΑΓॻ͍ͨΓಈ͔ͨ͠Γͯ͠ಘͨܦݧͷ͕ੜ͖ͨใ
ٕज़ʹݶΓ͕ͳ͍ɺͲΜͳͷʹϝϦοτͱσϝϦοτ͋Δ͠ɺͦΕΒͬͯΈͳ͍ͱຊΘ͔Βͳ͍ɻ
ͬͯΈͯࣗʹٕ͋ͬͨज़Λݟ͚͍ͭͯ͘ͷ͕ॏཁ
2. ඇػೳཁ݅ʹͩ͜ΘΖ͏
ඇػೳཁ݅• ηΩϡϦςΟ• XSS/XSRF/DoS etc• ੑೳ• SPA/PWA/AMP etc• ϝϯςφϯαϏϦςΟ• ςετॻ͘/e2e/storyboard etc
ػೳཁ݅Λຬͨͯ͠ظʹΘΕΔதͰͲ͜·Ͱඇػೳཁ݅ΛೖΕࠐΊΔ͔ͱ͍͏ͷ͕ΤϯδχΞͷҰछͷೳྗ
ύϑΥʔϚϯενϡʔχϯάେ͖ͩͬͨ
ύϑΥʔϚϯενϡʔχϯά• όοΫΤϯυͷσʔλϕʔεͱ͔શจݕࡧ෦ͷνϡʔχϯάͬͯresponseͷ࣌ؒΛ͘͢Δͷ͕ࣄͩͬͨɻ
ύϑΥʔϚϯενϡʔχϯά• όοΫΤϯυͷσʔλϕʔεͱ͔શจݕࡧ෦ͷνϡʔχϯάͬͯresponseͷ࣌ؒΛ͘͢Δͷ͕ࣄͩͬͨɻ͕͜͜Զͷઓ͏ॴ
Ͱ
ରԠϒϥβΛIE => Chromeʹ֦େͨ͠ͱ͖ͷ͜ͱ
രʹͳͬͨ
ϑϩϯτΤϯυͷٕज़͕ਐา͢Δͱͷͬͯͨ͜ͱޡࠩʹมΘ͍ͬͯͬͨɻɻɻ
ඇػೳཁ݅Ͱੜ͖͍͕ͯͨࣗॳΊͯܦݧͨ͠িܸ
࣮ࡍʹUXΛ࠷ߴʹ͢ΔͳΒϑϩϯτ͔ΒόοΫΤϯυ·Ͱશ෦ࣝΔඞཁ͕͋ΔΜͩͱͬͨ
ϦΫΤετ͔ΒϨεϙϯε·ͰͰͳ͘ɺϖʔδ͕ಡΈࠐ·Ε࢝Ί͔ͯΒϢʔβʔͷظΛಘΔ·Ͱɻ
͔ͦ͜ΒϑϩϯτΤϯυʹڵຯΛ࣋ͬͨ• Node.jsJavaScriptֶ΅͏ͱͯͬͯͨ͠Βָ͘͠ͳͬͯͬͯͨ• ϑϩϯτͰͳΜ͔ΞϓϦ࡞͍͕ͬͯͨɺ࣮ࡍʹస৬ͯ͠ػձΛ࡞࣮ͬͯࢪͨ͠• ͔͚ͯɺͰ͖ΔΑ͏ʹͳͬͨ
ඇػೳཁ݅ʹͩ͜ΘΖ͏ɻ
ඇػೳཁ݅ʹͩ͜ΘΔͱجૅͷ͜ͱΛΔඞཁ͕ग़ͯ͘Δ
ඇػೳཁ݅• ੑೳ => ϒϥβͷதͷಈ͖ɺCPUɺmemoryɺωοτϫʔΫɺΞϧΰϦζϜ etc etc• ηΩϡϦςΟ => OS, middlewareͷதͷಈ͖ɺCPU, memory, etc etc• ϝϯςφϯαϏϦςΟ => ઃܭɺݴޠ༷ɺςετɺΞʔΩςΫνϟɺ etc etc
ඇػೳཁ݅• ΞϓϦέʔγϣϯΛ࡞Ζ͏• ͦͷޙͰඇػೳཁ݅ʹͩ͜ΘΖ͏• ͦ͏͢ΔͱجૅͱԠ༻ͷ྆ํʹৄ͍͠ਓʹͳΕΔ
3. ࣝʹ֞ࠜΛ࡞Βͳ͍
ࣝʹ֞ࠜΛ࡞Βͳ͍• Dev / Ops Ͱͳ͘ Dev Ops• Engineer / Designer Ͱͳ͘ Engineer Designer• Backend / Frontend Ͱͳ͘ Backend Frontend
ࣝʹ֞ࠜΛ࡞Βͳ͍• ཧIࣈܕΑΓTࣈܕ• Ұݸ࣠Λ࡞͔ͬͯͦ͜Β͛Δ
ࣝʹ֞ࠜΛ࡞Βͳ͍• Tࣈܕͷਓ͕૿͍͖͍ͯͨ͠ɻ• զʑͷֶͿ͜ͱଟ͍ɺͰTࣈܕͷਓ͕૿͑ΕͦͷΧόʔͰ͖ΔɻDesigner FE BE
ׂͱͳΜͰ͖• Πϯϑϥ͖• όοΫΤϯυ͖• ϓϩάϥϛϯάݴޠͦͷͷ͖• ϓϩμΫτΛߏங͢Δͷ͖• σβΠϯܥͷπʔϧษڧͯ͠Δ
ׂͱͳΜͰ͖• Πϯϑϥ͖• όοΫΤϯυ͖• ϓϩάϥϛϯάݴޠͦͷͷ͖• ϓϩμΫτΛߏங͢Δͷ͖• σβΠϯܥͷπʔϧษڧͯ͠ΔͳΜͰΔඞཁͳ͍ɺͰ ح৺ʹ֞ࠜ࡞ͬͯ΄͘͠ͳ͍ɻ
ࣝʹ֞ࠜΛ࡞Βͳ͍
ࣝʹ֞ࠜΛ࡞Βͳ͍• ͪ;Δ 13 ר ࡩ ਯʮ͜ΕͱܾΊͨಓͰΒͳͯ͘ྑ͍͜ͱͳΜ͔̍ͭͳ͍ΘΑʯ
֮ޛΛ࣋ͱ͏• ΞϓϦέʔγϣϯΛ࡞Ζ͏• ඇػೳཁ݅ʹͩ͜ΘΖ͏• ࣝΛᩦཉʹ࣋ͬͯௐΑ͏• ͜ΕΛܧଓతʹΓଓ͚Α͏
֮ޛΛ࣋ͱ͏• ΞϓϦέʔγϣϯΛ࡞Ζ͏• ඇػೳཁ݅ʹͩ͜ΘΖ͏• ࣝΛᩦཉʹ࣋ͬͯௐΑ͏• ͜ΕΒΛܧଓతʹΓଓ͚Α͏ྑ͍ΤϯδχΞʹͳΔͷʹۙಓͳΜ͔ແ͍͠ɺ֮ޛΛ࣋ͭඞཁ͕͋Δ
·ͱΊ
·ͱΊ• ϑϩϯτΤϯυΤϯδχΞͨͩը໘Λ࡞Δ͚ͩͷਓ͡Όͳ͍• αΠτશମͷϢʔβϏϦςΟɾύϑΥʔϚϯεΛߟ͑Δਓ• ৺͕͚ͯ΄͍͜͠ͱ• ΞϓϦέʔγϣϯΛ࡞Ζ͏• ඇػೳཁ݅ʹͩ͜ΘΖ͏• ࣝʹ֞ࠜΛ࡞Βͳ͍Α͏ʹ͠Α͏
·ͱΊ• ϑϩϯτΤϯυΤϯδχΞͨͩը໘Λ࡞Δ͚ͩͷਓ͡Όͳ͍• αΠτશମͷϢʔβϏϦςΟɾύϑΥʔϚϯεΛߟ͑Δਓ• ৺͕͚ͯ΄͍͜͠ͱ• ΞϓϦέʔγϣϯΛ࡞Ζ͏• ඇػೳཁ݅ʹͩ͜ΘΖ͏• ࣝʹ֞ࠜΛ࡞Βͳ͍Α͏ʹ͠Α͏͜ΕͱܾΊͨಓͰΒͳͯ͘ ྑ͍͜ͱͳΜ͔̍ͭͳ͍
Thank You!!!
yosuke_furukawa
gmvalentino8
ohmae
kazue
jmatsu
tomokusaba
lhespanha
taowata
uhooi
mh4gf
heyitsmohit
ogiwarat
polpielladev
aleyda
mclloyd
brad_frost
iamctodd
caitiem20
addyosmani
afnizarnur
geoffreycrofte
tammielis
orderedlist
kevinliebholz
jensimmons