2018年秋 JavaScriptエンジニアの技術投資状況 #jserinfo

2018年秋 JavaScriptエンジニアの技術投資状況 #jserinfo

2018/09/22 に JSer.info 400回記念イベントにて発表したプレゼンテーションスライドです。

A54b31d4ebbce222dff88a5c42bac033?s=128

Potato4d(Hanatani Takuma)

September 22, 2018
Tweet

Transcript

  1. 2018೥ळ JavaScriptΤϯδχΞͷٕज़౤ࢿঢ়گ HANATANI Takuma(@potato4d) 2018.09.22 #jserinfo

  2. Agenda • ࣗݾ঺հ • ݸਓతͳ 2018 ೥ळݱࡏͷٕज़౤ࢿঢ়گ • Nuxt.jsʹ͍ͭͯͷϦβϧτ •

    αʔόʔϨεʹ͍ͭͯͷϦβϧτ • BET͢Δٕज़ͷͪΐͬͱมΘͬͨج४ • ͳΜͷͨΊʹٕज़ʹBET͢Δͷ͔ • ʮ1.5าઌʯͰੜ׆͠ଓ͚Δ͜ͱ
  3. Profile

  4. About • Ֆ୩୓ຏ(@potato4d) • ϑϦʔϥϯεΤϯδχΞ(԰߸: ElevenBack)͕ຊۀ • ϑϩϯτΤϯυ(React, Vue&Nuxt), όοΫΤϯυ(PHP,

    Node) • Πϯϑϥ͸Ϋϥ΢υ(AWS)ݶఆͰαʔόʔϨεपΓ΋ • ৬຿ྖҬ • ੥ෛ։ൃɾ४ҕ೚։ൃ • ܦݧऀ޲͚ITڭҭɾٕज़ϥΠλʔɾࣥචۀɾߨԋͳͲ • ۀ຿ҕୗઌ → Increments, ALIS ͳͲ
  5. About • Ֆ୩୓ຏ(@potato4d) • ՝֎׆ಈ • Vue.js ೔ຊޠυΩϡϝϯτ ίΞϝϯςφ •

    Vue.js / Nuxt.js ೔ຊޠυΩϡϝϯτ ίΞϝϯςφ ʔ ʔ ʔ ʔ
  6. About Ϋϥ΢υ  αʔόʔαΠυ  ϑϩϯτΤϯυ  0UIFST  4FSWJDF8PSLFS

     "OHVMBS  3FBDUKT  7VFKT/VYUKT  0UIFST  3VCZ  1)1  αʔόʔϨε 
  7. About https://www.amazon.co.jp/dp/4863542569/

  8. About ͳਓͷ 2018

  9. ݸਓతͳ 2018 ೥ळݱࡏͷٕज़౤ࢿঢ়گ

  10. 2018೥ͷ Nuxt.js • ࡢ೥Նʹݱ৔΁ͷॳ౤ೖʹ੒ޭ • 20Ҏ্ͷϓϩδΣΫτͰ࣮ફ • ίΞʹগ͚ͩ͠ߩݙɺυΩϡϝϯτϝϯςφ • WebͰͷ৘ใൃ৴

    • HTMLExperts.jpدߘ, Qiitaهࣄ౤ߘ • ࢴഔମ • ಉਓɾ঎ۀͰҰ࡭
  11. 2018೥ͷ Nuxt.js • Qiita Vue/Nuxt λά೔ຊҰ • ͞Βʹ͜͜Ұ೥Ͱ౤ߘ਺໿ೋഒʹ • Ҋ͕݅΄΅શͯ

    Vue.js → Nuxt.js • ਺ഒύϑΥʔϚϯε͕ग़ΔͷͰফԽޮ཰૿ • ઐ༻ͷ୯ஶग़൛ • OSSతߩݙྔ΋૿Ճ • ઐ໳෼໺ͱͯ͠ͷ࿐ग़ػձͷ૿Ճ
  12. 2018೥ͷ Nuxt.js

  13. 2018೥ͷαʔόʔϨε • ͪ͜Β΋ݱ৔Ͱͷ౤ೖ͸ࡢ೥Նʙ • Web αʔϏεόοΫΤϯυɺιγϟήΩϟ ϯϖʔϯαΠτ API ͳͲ •

    ٕज़ • AWS / GCP&Firebase functions Λར༻ • ۀ຿ҕୗઌͷͻͱͭʮALISʯ͸ Nuxt.js on Lambda & Serverless Python
  14. 2018೥ͷαʔόʔϨε • ҎԼͷจ຺Ͱׂͱ࿩͕ • Nuxt + Firebase • Serverless Universal

    Application • ϕʔγοΫͳαʔόʔϨε͸ී௨ʹࢀೖ͕ ஗͔ͬͨ • ͦͷ෼৽نͷͭ·Έ৯͍͸࠷༏ઌ
  15. ࢒Γ3ϲ݄͸झຯʹׂ͖͍ͨ • ʮͰ͖Δ͜ͱ͕޿͕Βͳ͍΋ͷ͸΍Βͳ͍ʯΛج४ͰਐΊΔ • Firebase ͸ FireStore Tokyo ͕དྷΔͱ for

    Web ͕όέͦ͏ • ΋ͬͱ΍͓͖͍ͬͯͨ • ࠷ۙ୯७ʹڵຯຊҐͰ Dart/Flutter Λ৮͍ͬͯΔ • ͬͪ͜͸݁ߏલ͔Β͋Δ͚ͲͦΖͦΖsuffixͱΕΔ͠೔ຊޠ ৘ใগͳ͍͠Ͱ৭ʑ༡΂ͦ͏
  16. About օ͞ΜͲΜͳײ͡Ͱ͔͢

  17. BET͢Δٕज़ͷͪΐͬͱมΘͬͨج४

  18. ৽͍ٕ͠ज़ΛΩϟονΞοϓ͢Δ͖͔͚ͬ • ٕज़తڵຯͷΈ • ΍ͬͨΒྑ͍ • ࠓͷ࢓ࣄͰඞཁ • ͜Ε΋΍ͬͨΒྑ͍

  19. ৽͍ٕ͠ज़ΛΩϟονΞοϓ͢Δ͖͔͚ͬ • ٕज़తڵຯͷΈ • ΍ͬͨΒྑ͍ • ࠓͷ࢓ࣄͰඞཁ • ͜Ε΋΍ͬͨΒྑ͍ ඞવੑͷ͋Δ΋ͷʹ͍ͭͯ͸΍Δ͚ͩ

  20. ৽͍ٕ͠ज़ΛΩϟονΞοϓ͢Δ͖͔͚ͬ • ٕज़తڵຯͷΈ • ΍ͬͨΒྑ͍ • ࠓͷ࢓ࣄͰඞཁ • ͜Ε΋΍ͬͨΒྑ͍ •

    ʮ͜Ε͔Βདྷͦ͏ָͩͦ͠͠͏ʯ
  21. ৽͍ٕ͠ज़ΛΩϟονΞοϓ͢Δ͖͔͚ͬ • ٕज़తڵຯͷΈ • ΍ͬͨΒྑ͍ • ࠓͷ࢓ࣄͰඞཁ • ͜Ε΋΍ͬͨΒྑ͍ •

    ʮ͜Ε͔Βདྷͦ͏(ଧࢉ)ָͩͦ͠͠͏(ڵຯ)ʯ
  22. ৽͍ٕ͠ज़ΛΩϟονΞοϓ͢Δ͖͔͚ͬ • ٕज़తڵຯͷΈ • ΍ͬͨΒྑ͍ • ࠓͷ࢓ࣄͰඞཁ • ͜Ε΋΍ͬͨΒྑ͍ •

    ʮ͜Ε͔Βདྷͦ͏(ଧࢉ)ָͩͦ͠͠͏(ڵຯ)ʯ ͕͜͜Ձ஋ʹͳΓ΍͍͢
  23. ৽͍ٕ͠ज़ΛΩϟονΞοϓ͢Δ͖͔͚ͬ • ٕज़తڵຯͷΈ • ΍ͬͨΒྑ͍ • ࠓͷ࢓ࣄͰඞཁ • ͜Ε΋΍ͬͨΒྑ͍ •

    ʮ͜Ε͔Βདྷͦ͏(ଧࢉ)ָͩͦ͠͠͏(ڵຯ)ʯ • ౤ػతٕज़બఆͷج४ˠʁʁʁ
  24. ৽͍ٕ͠ज़ΛΩϟονΞοϓ͢Δ͖͔͚ͬ • ٕज़తڵຯͷΈ • ΍ͬͨΒྑ͍ • ࠓͷ࢓ࣄͰඞཁ • ͜Ε΋΍ͬͨΒྑ͍ •

    ʮ͜Ε͔Βདྷͦ͏(ଧࢉ)ָͩͦ͠͠͏(ڵຯ)ʯ • ౤ػతٕज़બఆͷج४ˠ
  25. ʮ1.5าઌʯ

  26. ʮ1.5าઌʯͰੜ׆͠ଓ͚Δ͜ͱ

  27. 1.5าઌͰੜ׆͠ଓ͚Δ͜ͱ ਓʑͷʮ͜Εདྷͦ͏ʯͷ࢓૊Έ

  28. ʮ͜Εདྷͦ͏ʯͷ࢓૊Έ • ࠓͷ··࢓ࣄΛ͍ͯͯ͠΋૬ରతʹՁ஋͸Լ͕Δ • ৗʹগͣͭ͠Ͱ΋ྑ͍͔ΒલʹਐΈ͍ͨ • ͱ͸͍͑େ୾ʹ଩Λ੾Γ͗ͯ͢΋࣌୅͕͍ͭͯ͜ͳ͍ • ஌ݟ͸݂ͱͳΓ೑ͱͳΔ͕ɺཧෆਚͳఔͷതଧ •

    ࠓͷ࢓ࣄ΋΋ͪΖΜָ͍ͨ͠
  29. ʮ͜Εདྷͦ͏ʯͷ࢓૊Έ • ࠓͷ··࢓ࣄΛ͍ͯͯ͠΋૬ରతʹՁ஋͸Լ͕Δ • ৗʹগͣͭ͠Ͱ΋ྑ͍͔ΒલʹਐΈ͍ͨ • ͱ͸͍͑େ୾ʹ଩Λ੾Γ͗ͯ͢΋࣌୅͕͍ͭͯ͜ͳ͍ • ஌ݟ͸݂ͱͳΓ೑ͱͳΔ͕ɺཧෆਚͳఔͷതଧ •

    ࠓͷ࢓ࣄ΋΋ͪΖΜָ͍ͨ͠ ࠓ͋Δཁૉ (+ͦͷ࠷લઢ) + ͍ۙະདྷͷ՝୊ কདྷBETͨ͘͠ͳΔ =
  30. ʮ͜Εདྷͦ͏ʯͷ࢓૊Έ ࠓ͋Δཁૉ (+ͦͷ࠷લઢ) + ͍ۙະདྷͷ՝୊ BETͨ͘͠ͳΔ =

  31. ʮ͜Εདྷͦ͏ʯͷ࢓૊Έ ࠓ͋Δཁૉ (+ͦͷ࠷લઢ) + ͍ۙະདྷͷ՝୊ BETͨ͘͠ͳΔ = 0 (+0.5) +

    1.0 1.5 =
  32. 1.5า͸ʮΘ͔Γ΍͍͢ʯ

  33. 1.5า͸ʮΘ͔Γ΍͍͢ʯ https://slides.com/potato4d/vuejs_meetup7

  34. 1.5า͸ʮΘ͔Γ΍͍͢ʯ Vue.js + εέʔϧ͢Δ։ൃ

  35. 1.5า͸ʮΘ͔Γ΍͍͢ʯ Vue.js + εέʔϧ͢Δ։ൃ ։ൃޮ཰΍டং

  36. 1.5า͸ʮΘ͔Γ΍͍͢ʯ Vue.js + εέʔϧ͢Δ։ൃ ৳ͼ͍ͯΔ ͜Ε͔Β͋Γͦ͏

  37. 1.5า͸ʮΘ͔Γ΍͍͢ʯ Vue.js + εέʔϧ͢Δ։ൃ ։ൃޮ཰΍டং 0 0.5 1.0

  38. 1.5า͸ʮϓϨθϯεΛ๨ΕΒΕΔʯ

  39. 1.5า͸ʮϓϨθϯεΛ๨ΕΒΕΔʯ • 1.5าʹҐஔ͍ͯ͠Δͱࣗಈతʹ͍ͭͯ͘Δ • ߩݙ͢Δҙࢤ͕͋Ε͹ઌߦऀརӹ͸ͦΕͳΓʹ͍ͭͯ͘Δ • ٯʹݴ͏ͱߩݙ͢Δҙࢤ͕ͳ͍ͱࢫຯ͕ͳ͍ • Ξ΢τϓοτ͕ۤͰ͸ͳ͍ਓ͸ɺ୯ʹࣗ෼͕஌ͬͨ৘ใ΍ϝ ϞΛɺ੔ܗͯ͠୶ʑͱύϒϦοΫʹग़͚ͩ͢

    • ͜ͷลΓ͸൒าઌఔ౓Ͱ΋ڞ௨(͕ͩઌͷ΄͏͕ޮՌ͸ߴ͍)
  40. ൒าઌ͔ΒͰ΋༗ޮͳΞ΢τϓοτ

  41. ൒าઌ͔ΒͰ΋༗ޮͳΞ΢τϓοτ ಛʹଉ͕௕ͦ͏ͳؾ΋͠ͳ͍͚ͲVueͰ͸Element͕ಠ઎ͳͷͰࢼݧར༻

  42. ൒าઌ͔ΒͰ΋༗ޮͳΞ΢τϓοτ

  43. ൒าઌ͔ΒͰ΋༗ޮͳΞ΢τϓοτ

  44. ൒าઌ͔ΒͰ΋༗ޮͳΞ΢τϓοτ

  45. ൒าઌ͔ΒͰ΋༗ޮͳΞ΢τϓοτ

  46. ΤϯδχΞΒ͍͠Ξ΢τϓοτΛ ৺͕͚Δ ൒าઌ͔ΒͰ΋༗ޮͳΞ΢τϓοτ

  47. ౰ͨΓલͷ͜ͱͰ΋ॻ͕͘ɺἤΒͳ͍ ൒าઌ͔ΒͰ΋༗ޮͳΞ΢τϓοτ

  48. ৭Μͳ΋ͷ͸ޙ͔Β͍ͭͯ͘Δ ൒าઌ͔ΒͰ΋༗ޮͳΞ΢τϓοτ

  49. ૯ׅ

  50. ૯ׅ • ݸਓత౤ࢿঢ়گ • Nuxt.js ͱαʔόʔϨεΛத৺ʹਾ͑ͯ׆ಈΛਐΊ͍ͯͨ • ੒Ռ͸ྑ͘ɺશମతͳମݧ(Developer ExperienceؚΉ)΋ •

    ࠓ೥ͷ࢒Γ3ϲ݄ʹ͍ͭͯ • Ҿ͖ଓ͖ Nuxt.js ͱαʔόʔϨεͷ༷ࢠݟɻαʔόʔϨε͸ ৽ن੡඼΍ϓϨΠϠʔͷࢀೖʹ஫໨
  51. ૯ׅ • ٕज़౤ࢿج४ • ΍Βͳ͍ͱ͍͚ͳ͍͜ͱɺ७ਮʹ΍Γ͍ͨ͜ͱʹ͍ͭͯ͸΍ Ε͹͍͍ • ͦΕҎ֎ʹ͍ͭͯ͸શମͷۭؾײΛݟ͍ͯ͘ͱྑ͍ • ͦͷࡍ͸ɺϚδϣϦςΟ͔Βݟͯʮ਌͠Έ΍͍͢ʯͱʮະདྷ

    ײʯΛཱ͍྆ͯ͠Δ͔Λҙࣝ͢Δͱԁ׈
  52. ૯ׅ • 1.5าઌͷ౤ࢿʹ͍ͭͯ • Ұาઌ͸௥͍͔ͭΕΔ͕ɺ1.5าઌ͸ҙ֎ͱ༗ޮ • ൒าઌͰ΋ྑ͍ͷͰɺΞ΢τϓοτΛద੾ʹߦ͏ͱॾʑޙͰ ͍ͭͯ͘Δ ͳΜ΍͔Μ΍ݴͬͯ΋େମ޷͖Ͱ΍͍ͬͯΔͱ͜Ζ͕େ͖͍ͷͰ ઓུʹݻٕࣥͯ͠ज़͕ݏ͍ʹͳͬͨΒҙຯ͸ͳ͍

  53. ͓खָ͔ܰͭ͘͠ੜ͖Α͏