Upgrade to Pro — share decks privately, control downloads, hide ads and more …

エンジニアになる覚悟

 エンジニアになる覚悟

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

Yosuke Furukawa
PRO

June 23, 2018
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

Transcript

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

    View Slide

  2. Twitter: @yosuke_furukawa
    Github: yosuke-furukawa

    View Slide

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

    View Slide

  4. ΤϯδχΞʹͳΔ

    View Slide

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

    View Slide

  6. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  10. JavaScript Bootcamp Ͱڭ͑ͯ
    ͍Δ͜ͱ
    • ϦΫϧʔτςΫϊϩδʔζͷ "ϑϩϯτΤϯυΤϯ
    δχΞ" ͷఆٛ͸޿ͯ͘ਂ͍
    • HTML/CSS/JSΛۦ࢖ͯ͠ΫϥΠΞϯτΛ࡞Δ 

    *͚ͩͰ͸ͳ͍*
    • ωοτϫʔΫͷ஌ࣝ΍αʔόͷجૅ஌ࣝ΋༗͢Δ্
    ʹͦΕΒΛ౿·͑ͯαΠτશମͷϢʔβϏϦςΟɾ
    ύϑΥʔϚϯεΛ্͛Δਓ

    View Slide

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

    View Slide

  12. View Slide

  13. View Slide

  14. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  20. React Angular Redux
    JS Frameworks
    Vue.js Polymer

    View Slide

  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

    View Slide

  22. େมͰ͢Ͷ

    View Slide

  23. Ͱ΋ɺ͜Ε͕(ϦΫϧʔτͷ)

    ϑϩϯτΤϯυΤϯδχΞ

    ʹͳΔɺͱ͍͏͜ͱͰ͢ɻ

    View Slide

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

    View Slide

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

    View Slide

  26. ๻ͷ৔߹

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  35. ·͊·͊ͷ൓ڹ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  40. A. ָ͍͔͠Β

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  53. ๻ͷ৔߹

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  57. Ͱ΋

    View Slide

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

    View Slide

  59. ര଎ʹͳͬͨ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  63. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  68. ඇػೳཁ݅
    • ੑೳ

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

    => OS, middlewareͷதͷಈ͖ɺCPU, memory, etc etc
    • ϝϯςφϯαϏϦςΟ

    => ઃܭ࿦ɺݴޠ࢓༷ɺςετɺΞʔΩςΫνϟɺ etc etc

    View Slide

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

    View Slide

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

    View Slide

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

    Dev Ops
    • Engineer / Designer Ͱ͸ͳ͘ 

    Engineer Designer
    • Backend / Frontend Ͱ͸ͳ͘

    Backend Frontend

    View Slide

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

    View Slide

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

    View Slide

  74. ๻ͷ৔߹

    View Slide

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

    View Slide

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

    ޷ح৺ʹ֞ࠜ͸࡞ͬͯ΄͘͠ͳ͍ɻ

    View Slide

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

    View Slide

  78. ஌ࣝʹ֞ࠜΛ࡞Βͳ͍
    • ͪ͸΍;Δ 13 ר


    ࡩ୔ ਯʮ͜ΕͱܾΊͨಓͰ஌Βͳͯ͘
    ྑ͍͜ͱͳΜ͔̍ͭ΋ͳ͍ΘΑʯ

    View Slide

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

    View Slide

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

    View Slide

  81. ·ͱΊ

    View Slide

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

    View Slide

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

    ྑ͍͜ͱͳΜ͔̍ͭ΋ͳ͍

    View Slide

  84. Thank You!!!

    View Slide