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

今後のフロントエンドについて(仮)

 今後のフロントエンドについて(仮)

bonfire frontendで発表した今後のフロントエンドの話です。

D76231a2114896dfcc7b79ac69558b79?s=128

Yosuke Furukawa
PRO

March 26, 2018
Tweet

Transcript

  1. ࠓޙͷϑϩϯτΤϯυ (Ծ) @Lodge Yahoo Japan 2018/03/26 Yosuke FURUKAWA

  2. Twitter: @yosuke_furukawa Github: yosuke-furukawa

  3. ࠓ೔͔ͿΓͦ͏ɾɾɾ

  4. ͳΔ΂͘ࢿྉ͔ͿΒͳ͍Α͏ ʹ͠·͢ʂʂʂʂ

  5. ʮࠓޙʯΈ͍ͨͳ֬౓ͷ௿͍ ࿩ͯ͠΋ΞϨͳͷͰɺʮࠓʯ ϦΫϧʔτͰ΍ͬͯΔ͜ͱΛ ࿩͠·͢ɻ

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

  7. None
  8. ࿨ా୎ਓ͞Μύʔτ ʹ͠ΉͶ͋͞Μύʔτ Զύʔτ क԰͞Μύʔτ

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

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

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

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

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

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

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

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

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

  21. React Angular Redux JS Frameworks Vue.js Polymer

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

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

  25. ๻ͷ৔߹

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

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

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

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

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

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

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

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

  34. ·͊·͊ͷ൓ڹ

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

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

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

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

  39. A. ָ͍͔͠Β

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

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

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

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

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

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

  47. ๻ͷ৔߹

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

  49. όοΫΤϯυͷσʔλϕʔε ͱ͔શจݕࡧ෦෼ͷνϡʔχ ϯά΍ͬͯresponseͷ࣌ؒΛ ୹͘͢Δͷ͕࢓ࣄͩͬͨɻ 1 sec => 300ms ʹͨ͜͠ͱ ΋

  50. Ͱ΋

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

  52. ര଎ʹͳͬͨ

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

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

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

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

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

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

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

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

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

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

  64. ๻ͷ৔߹

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

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

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

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

  69. ·ͱΊ

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

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

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