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

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