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

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

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  4FSWJDF
   8PSLFS  "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. ͓खָ͔ܰͭ͘͠ੜ͖Α͏