2018/09/22 に JSer.info 400回記念イベントにて発表したプレゼンテーションスライドです。
2018ळJavaScriptΤϯδχΞͷٕज़ࢿঢ়گHANATANI Takuma(@potato4d)2018.09.22 #jserinfo
View Slide
Agenda• ࣗݾհ• ݸਓతͳ 2018 ळݱࡏͷٕज़ࢿঢ়گ• Nuxt.jsʹ͍ͭͯͷϦβϧτ• αʔόʔϨεʹ͍ͭͯͷϦβϧτ• BET͢Δٕज़ͷͪΐͬͱมΘͬͨج४• ͳΜͷͨΊʹٕज़ʹBET͢Δͷ͔• ʮ1.5าઌʯͰੜ׆͠ଓ͚Δ͜ͱ
Profile
About• Ֆ୩ຏ(@potato4d)• ϑϦʔϥϯεΤϯδχΞ(߸: ElevenBack)͕ຊۀ• ϑϩϯτΤϯυ(React, Vue&Nuxt), όοΫΤϯυ(PHP, Node)• ΠϯϑϥΫϥυ(AWS)ݶఆͰαʔόʔϨεपΓ• ৬ྖҬ• ෛ։ൃɾ४ҕ։ൃ• ܦݧऀ͚ITڭҭɾٕज़ϥΠλʔɾࣥචۀɾߨԋͳͲ• ۀҕୗઌ → Increments, ALIS ͳͲ
About• Ֆ୩ຏ(@potato4d)• ՝֎׆ಈ• Vue.js ຊޠυΩϡϝϯτ ίΞϝϯςφ• Vue.js / Nuxt.js ຊޠυΩϡϝϯτ ίΞϝϯςφʔʔʔʔ
AboutΫϥυαʔόʔαΠυϑϩϯτΤϯυ0UIFST4FSWJDF8PSLFS"OHVMBS3FBDUKT7VFKT/VYUKT0UIFST3VCZ1)1αʔόʔϨε
Abouthttps://www.amazon.co.jp/dp/4863542569/
Aboutͳਓͷ 2018
ݸਓతͳ2018 ळݱࡏͷٕज़ࢿঢ়گ
2018ͷ Nuxt.js• ࡢՆʹݱͷॳೖʹޭ• 20Ҏ্ͷϓϩδΣΫτͰ࣮ફ• ίΞʹগ͚ͩ͠ߩݙɺυΩϡϝϯτϝϯςφ• WebͰͷใൃ৴• HTMLExperts.jpدߘ, Qiitaهࣄߘ• ࢴഔମ• ಉਓɾۀͰҰ
2018ͷ Nuxt.js• Qiita Vue/Nuxt λάຊҰ• ͞Βʹ͜͜ҰͰߘೋഒʹ• Ҋ͕݅΄΅શͯ Vue.js → Nuxt.js• ഒύϑΥʔϚϯε͕ग़ΔͷͰফԽޮ૿• ઐ༻ͷ୯ஶग़൛ • OSSతߩݙྔ૿Ճ• ઐͱͯ͠ͷ࿐ग़ػձͷ૿Ճ
2018ͷ Nuxt.js
2018ͷαʔόʔϨε• ͪ͜ΒݱͰͷೖࡢՆʙ• Web αʔϏεόοΫΤϯυɺιγϟήΩϟϯϖʔϯαΠτ API ͳͲ• ٕज़• AWS / GCP&Firebase functions Λར༻• ۀҕୗઌͷͻͱͭʮALISʯ Nuxt.js onLambda & Serverless Python
2018ͷαʔόʔϨε• ҎԼͷจ຺Ͱׂͱ͕ • Nuxt + Firebase• Serverless Universal Application• ϕʔγοΫͳαʔόʔϨεී௨ʹࢀೖ͕͔ͬͨ• ͦͷ৽نͷͭ·Έ৯͍࠷༏ઌ
Γ3ϲ݄झຯʹׂ͖͍ͨ• ʮͰ͖Δ͜ͱ͕͕Βͳ͍ͷΒͳ͍ʯΛج४ͰਐΊΔ• Firebase FireStore Tokyo ͕དྷΔͱ for Web ͕όέͦ͏• ͬͱ͓͖͍ͬͯͨ• ࠷ۙ୯७ʹڵຯຊҐͰ Dart/Flutter Λ৮͍ͬͯΔ• ͬͪ݁͜ߏલ͔Β͋Δ͚ͲͦΖͦΖsuffixͱΕΔ͠ຊޠใগͳ͍͠Ͱ৭ʑ༡ͦ͏
Aboutօ͞ΜͲΜͳײ͡Ͱ͔͢
BET͢Δٕज़ͷͪΐͬͱมΘͬͨج४
৽͍ٕ͠ज़ΛΩϟονΞοϓ͢Δ͖͔͚ͬ• ٕज़తڵຯͷΈ• ͬͨΒྑ͍• ࠓͷࣄͰඞཁ• ͜ΕͬͨΒྑ͍
৽͍ٕ͠ज़ΛΩϟονΞοϓ͢Δ͖͔͚ͬ• ٕज़తڵຯͷΈ• ͬͨΒྑ͍• ࠓͷࣄͰඞཁ• ͜ΕͬͨΒྑ͍ඞવੑͷ͋Δͷʹ͍ͭͯΔ͚ͩ
৽͍ٕ͠ज़ΛΩϟονΞοϓ͢Δ͖͔͚ͬ• ٕज़తڵຯͷΈ• ͬͨΒྑ͍• ࠓͷࣄͰඞཁ• ͜ΕͬͨΒྑ͍• ʮ͜Ε͔Βདྷͦ͏ָͩͦ͠͠͏ʯ
৽͍ٕ͠ज़ΛΩϟονΞοϓ͢Δ͖͔͚ͬ• ٕज़తڵຯͷΈ• ͬͨΒྑ͍• ࠓͷࣄͰඞཁ• ͜ΕͬͨΒྑ͍• ʮ͜Ε͔Βདྷͦ͏(ଧࢉ)ָͩͦ͠͠͏(ڵຯ)ʯ
৽͍ٕ͠ज़ΛΩϟονΞοϓ͢Δ͖͔͚ͬ• ٕज़తڵຯͷΈ• ͬͨΒྑ͍• ࠓͷࣄͰඞཁ• ͜ΕͬͨΒྑ͍• ʮ͜Ε͔Βདྷͦ͏(ଧࢉ)ָͩͦ͠͠͏(ڵຯ)ʯ͕͜͜ՁʹͳΓ͍͢
৽͍ٕ͠ज़ΛΩϟονΞοϓ͢Δ͖͔͚ͬ• ٕज़తڵຯͷΈ• ͬͨΒྑ͍• ࠓͷࣄͰඞཁ• ͜ΕͬͨΒྑ͍• ʮ͜Ε͔Βདྷͦ͏(ଧࢉ)ָͩͦ͠͠͏(ڵຯ)ʯ• ػతٕज़બఆͷج४ˠʁʁʁ
৽͍ٕ͠ज़ΛΩϟονΞοϓ͢Δ͖͔͚ͬ• ٕज़తڵຯͷΈ• ͬͨΒྑ͍• ࠓͷࣄͰඞཁ• ͜ΕͬͨΒྑ͍• ʮ͜Ε͔Βདྷͦ͏(ଧࢉ)ָͩͦ͠͠͏(ڵຯ)ʯ• ػతٕज़બఆͷج४ˠ
ʮ1.5าઌʯ
ʮ1.5าઌʯͰੜ׆͠ଓ͚Δ͜ͱ
1.5าઌͰੜ׆͠ଓ͚Δ͜ͱਓʑͷʮ͜Εདྷͦ͏ʯͷΈ
ʮ͜Εདྷͦ͏ʯͷΈ• ࠓͷ··ࣄΛ͍ͯͯ͠૬ରతʹՁԼ͕Δ• ৗʹগͣͭ͠Ͱྑ͍͔ΒલʹਐΈ͍ͨ• ͱ͍͑େʹΛΓ͕͍͗ͯ࣌ͭͯ͢͜ͳ͍• ݟ݂ͱͳΓͱͳΔ͕ɺཧෆਚͳఔͷതଧ• ࠓͷࣄͪΖΜָ͍ͨ͠
ʮ͜Εདྷͦ͏ʯͷΈ• ࠓͷ··ࣄΛ͍ͯͯ͠૬ରతʹՁԼ͕Δ• ৗʹগͣͭ͠Ͱྑ͍͔ΒલʹਐΈ͍ͨ• ͱ͍͑େʹΛΓ͕͍͗ͯ࣌ͭͯ͢͜ͳ͍• ݟ݂ͱͳΓͱͳΔ͕ɺཧෆਚͳఔͷതଧ• ࠓͷࣄͪΖΜָ͍ͨ͠ࠓ͋Δཁૉ (+ͦͷ࠷લઢ) + ͍ۙະདྷͷ՝ কདྷBETͨ͘͠ͳΔ=
ʮ͜Εདྷͦ͏ʯͷΈࠓ͋Δཁૉ (+ͦͷ࠷લઢ) + ͍ۙະདྷͷ՝ BETͨ͘͠ͳΔ=
ʮ͜Εདྷͦ͏ʯͷΈࠓ͋Δཁૉ (+ͦͷ࠷લઢ) + ͍ۙະདྷͷ՝ BETͨ͘͠ͳΔ=0 (+0.5) + 1.0 1.5=
1.5าʮΘ͔Γ͍͢ʯ
1.5าʮΘ͔Γ͍͢ʯhttps://slides.com/potato4d/vuejs_meetup7
1.5าʮΘ͔Γ͍͢ʯVue.js + εέʔϧ͢Δ։ൃ
1.5าʮΘ͔Γ͍͢ʯVue.js + εέʔϧ͢Δ։ൃ։ൃޮடং
1.5าʮΘ͔Γ͍͢ʯVue.js + εέʔϧ͢Δ։ൃ৳ͼ͍ͯΔ ͜Ε͔Β͋Γͦ͏
1.5าʮΘ͔Γ͍͢ʯVue.js + εέʔϧ͢Δ։ൃ։ൃޮடং0 0.51.0
1.5าʮϓϨθϯεΛΕΒΕΔʯ
1.5าʮϓϨθϯεΛΕΒΕΔʯ• 1.5าʹҐஔ͍ͯ͠Δͱࣗಈతʹ͍ͭͯ͘Δ• ߩݙ͢Δҙࢤ͕͋ΕઌߦऀརӹͦΕͳΓʹ͍ͭͯ͘Δ• ٯʹݴ͏ͱߩݙ͢Δҙࢤ͕ͳ͍ͱࢫຯ͕ͳ͍• Ξτϓοτ͕ۤͰͳ͍ਓɺ୯ʹ͕ࣗͬͨใϝϞΛɺܗͯ͠୶ʑͱύϒϦοΫʹग़͚ͩ͢• ͜ͷลΓาઌఔͰڞ௨(͕ͩઌͷ΄͏͕ޮՌߴ͍)
าઌ͔ΒͰ༗ޮͳΞτϓοτ
าઌ͔ΒͰ༗ޮͳΞτϓοτಛʹଉ͕ͦ͏ͳؾ͠ͳ͍͚ͲVueͰElement͕ಠͳͷͰࢼݧར༻
ΤϯδχΞΒ͍͠ΞτϓοτΛ৺͕͚Δาઌ͔ΒͰ༗ޮͳΞτϓοτ
ͨΓલͷ͜ͱͰॻ͕͘ɺἤΒͳ͍าઌ͔ΒͰ༗ޮͳΞτϓοτ
৭Μͳͷޙ͔Β͍ͭͯ͘Δาઌ͔ΒͰ༗ޮͳΞτϓοτ
૯ׅ
૯ׅ• ݸਓతࢿঢ়گ• Nuxt.js ͱαʔόʔϨεΛத৺ʹਾ͑ͯ׆ಈΛਐΊ͍ͯͨ• Ռྑ͘ɺશମతͳମݧ(Developer ExperienceؚΉ)• ࠓͷΓ3ϲ݄ʹ͍ͭͯ• Ҿ͖ଓ͖ Nuxt.js ͱαʔόʔϨεͷ༷ࢠݟɻαʔόʔϨε৽نϓϨΠϠʔͷࢀೖʹ
૯ׅ• ٕज़ࢿج४• Βͳ͍ͱ͍͚ͳ͍͜ͱɺ७ਮʹΓ͍ͨ͜ͱʹ͍ͭͯΕ͍͍• ͦΕҎ֎ʹ͍ͭͯશମͷۭؾײΛݟ͍ͯ͘ͱྑ͍• ͦͷࡍɺϚδϣϦςΟ͔Βݟͯʮ͠Έ͍͢ʯͱʮະདྷײʯΛཱ͍྆ͯ͠Δ͔Λҙࣝ͢Δͱԁ
૯ׅ• 1.5าઌͷࢿʹ͍ͭͯ• Ұาઌ͍͔ͭΕΔ͕ɺ1.5าઌҙ֎ͱ༗ޮ• าઌͰྑ͍ͷͰɺΞτϓοτΛదʹߦ͏ͱॾʑޙͰ͍ͭͯ͘ΔͳΜ͔Μݴͬͯେମ͖Ͱ͍ͬͯΔͱ͜Ζ͕େ͖͍ͷͰઓུʹݻٕࣥͯ͠ज़͕ݏ͍ʹͳͬͨΒҙຯͳ͍
͓खָ͔ܰͭ͘͠ੜ͖Α͏
potato4d
ivargrimstad
itsmedreamwalker
daipresents
pospome
mot_techtalk
skanehira
akitotsukahara
jrsaruo
minma_curama
loic425
rabbitmagician1
bryan
samanthasiow
rocio
bkeepers
addyosmani
zenorocha
malarkey
marcduiker
garrettdimon
eileencodes
rmw
jonrohan