エンジニアになる覚悟

 エンジニアになる覚悟

Leveragesで発表したエンジニアになる覚悟の話です。

D76231a2114896dfcc7b79ac69558b79?s=128

Yosuke Furukawa

June 23, 2018
Tweet

Transcript

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

  2. Twitter: @yosuke_furukawa Github: yosuke-furukawa

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

  4. ΤϯδχΞʹͳΔ

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

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

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

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

  10. JavaScript Bootcamp Ͱڭ͑ͯ ͍Δ͜ͱ • ϦΫϧʔτςΫϊϩδʔζͷ "ϑϩϯτΤϯυΤϯ δχΞ" ͷఆٛ͸޿ͯ͘ਂ͍ •

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

  12. None
  13. None
  14. None
  15. HTML CSS JS ΢ΣϒΛߏ੒͢Δݴޠ Backend Language (Java, Go)

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

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

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

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

  20. React Angular Redux JS Frameworks Vue.js Polymer

  21. 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
  22. େมͰ͢Ͷ

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

  24. ϑϩϯτ͚ͩͰ͜Ε͚ͩͷ஌ ͕ࣝඞཁɺόοΫΤϯυ΋ؚ ΊΔͱ΄΅ແݶͷ͕࣌ؒඞཁ

  25. ແݶͷதͰ༗ݶͷॲཧΛ͢Δ ͷʹඞཁͳͷ͸ϚϯύϫʔͰ ղܾ͢ΔͷͰ͸ͳ͘ɺ Ϟνϕʔγϣϯ

  26. ๻ͷ৔߹

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

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

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

  30. ٕज़ΛֶͿͷͰ͸ͳ͘ɺٕज़ͷ ֶͼํΛֶͿ • twadaྲྀ: • ࢛൒ظ͝ͱʹٕज़ॻΛಡΉ • खΛಈֶ͔ͯ͠Ϳ • গͳ͘ͱ΋̍ͭ͸৽͍͠ݴޠΛֶͿ

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

    • Ξ΢τϓοτΛܧଓతʹߦ͏ ๻ͷ৔߹
  32. ΤϯδχΞͰ৺͕͚Δࣄ • ΞϓϦέʔγϣϯΛ࡞Ζ͏ • ඇػೳཁ݅ʹͩ͜ΘΖ͏ • ஌ࣝʹ֞ࠜ͸࡞Βͳ͍

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

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

  35. ·͊·͊ͷ൓ڹ

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

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

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

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

  40. A. ָ͍͔͠Β

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

  42. Կࣄ΋ָ͠Ή͜ͱॏཁ

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

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

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

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

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

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

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

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

  51. ඇػೳཁ݅ • ηΩϡϦςΟ • XSS/XSRF/DoS etc • ੑೳ • SPA/PWA/AMP

    etc • ϝϯςφϯαϏϦςΟ • ςετॻ͘/e2e/storyboard etc
  52. ػೳཁ݅Λຬͨͯ͠ظ೔ʹ௥ ΘΕΔதͰͲ͜·Ͱඇػೳཁ ݅ΛೖΕࠐΊΔ͔ͱ͍͏ͷ͕ ΤϯδχΞͷҰछͷೳྗ

  53. ๻ͷ৔߹

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

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

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

  57. Ͱ΋

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

  59. ര଎ʹͳͬͨ

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

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

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

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

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

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

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

  68. ඇػೳཁ݅ • ੑೳ
 => ϒϥ΢βͷதͷಈ͖ɺCPUɺmemoryɺωοτϫʔΫɺ ΞϧΰϦζϜ etc etc • ηΩϡϦςΟ


    => OS, middlewareͷதͷಈ͖ɺCPU, memory, etc etc • ϝϯςφϯαϏϦςΟ
 => ઃܭ࿦ɺݴޠ࢓༷ɺςετɺΞʔΩςΫνϟɺ etc etc
  69. ඇػೳཁ݅ • ΞϓϦέʔγϣϯΛ࡞Ζ͏ • ͦͷޙͰඇػೳཁ݅ʹ΋ͩ͜ΘΖ͏ • ͦ͏͢ΔͱجૅͱԠ༻ͷ྆ํʹৄ͍͠ਓʹͳ ΕΔ

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

  71. ஌ࣝʹ֞ࠜΛ࡞Βͳ͍ • Dev / Ops Ͱ͸ͳ͘
 Dev Ops • Engineer

    / Designer Ͱ͸ͳ͘ 
 Engineer Designer • Backend / Frontend Ͱ͸ͳ͘
 Backend Frontend
  72. ஌ࣝʹ֞ࠜΛ࡞Βͳ͍ • ཧ૝͸IࣈܕΑΓ΋Tࣈܕ • Ұݸ࣠Λ࡞͔ͬͯͦ͜Β޿͛Δ

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

  74. ๻ͷ৔߹

  75. ׂͱͳΜͰ΋޷͖ • Πϯϑϥ΋޷͖ • όοΫΤϯυ΋޷͖ • ϓϩάϥϛϯάݴޠͦͷ΋ͷ΋޷͖ • ϓϩμΫτΛߏங͢Δͷ΋޷͖ •

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

    σβΠϯܥͷπʔϧ΋ษڧͯ͠Δ ͳΜͰ΋஌Δඞཁ͸ͳ͍ɺͰ΋
 ޷ح৺ʹ֞ࠜ͸࡞ͬͯ΄͘͠ͳ͍ɻ
  77. ஌ࣝʹ֞ࠜΛ࡞Βͳ͍

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

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

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

    ͔ແ͍͠ɺ֮ޛΛ࣋ͭඞཁ͕͋Δ
  81. ·ͱΊ

  82. ·ͱΊ • ϑϩϯτΤϯυΤϯδχΞ͸ͨͩը໘Λ࡞Δ͚ͩͷਓ͡Όͳ ͍ • αΠτશମͷϢʔβϏϦςΟɾύϑΥʔϚϯεΛߟ͑Δਓ • ৺͕͚ͯ΄͍͜͠ͱ • ΞϓϦέʔγϣϯΛ࡞Ζ͏

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

    • ඇػೳཁ݅ʹͩ͜ΘΖ͏ • ஌ࣝʹ֞ࠜΛ࡞Βͳ͍Α͏ʹ͠Α͏ ͜ΕͱܾΊͨಓͰ஌Βͳͯ͘
 ྑ͍͜ͱͳΜ͔̍ͭ΋ͳ͍
  84. Thank You!!!