Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Agenda • ࣗݾ঺հ • ݸਓతͳ 2018 ೥ळݱࡏͷٕज़౤ࢿঢ়گ • Nuxt.jsʹ͍ͭͯͷϦβϧτ • αʔόʔϨεʹ͍ͭͯͷϦβϧτ • BET͢Δٕज़ͷͪΐͬͱมΘͬͨج४ • ͳΜͷͨΊʹٕज़ʹBET͢Δͷ͔ • ʮ1.5าઌʯͰੜ׆͠ଓ͚Δ͜ͱ

Slide 3

Slide 3 text

Profile

Slide 4

Slide 4 text

About • Ֆ୩୓ຏ(@potato4d) • ϑϦʔϥϯεΤϯδχΞ(԰߸: ElevenBack)͕ຊۀ • ϑϩϯτΤϯυ(React, Vue&Nuxt), όοΫΤϯυ(PHP, Node) • Πϯϑϥ͸Ϋϥ΢υ(AWS)ݶఆͰαʔόʔϨεपΓ΋ • ৬຿ྖҬ • ੥ෛ։ൃɾ४ҕ೚։ൃ • ܦݧऀ޲͚ITڭҭɾٕज़ϥΠλʔɾࣥචۀɾߨԋͳͲ • ۀ຿ҕୗઌ → Increments, ALIS ͳͲ

Slide 5

Slide 5 text

About • Ֆ୩୓ຏ(@potato4d) • ՝֎׆ಈ • Vue.js ೔ຊޠυΩϡϝϯτ ίΞϝϯςφ • Vue.js / Nuxt.js ೔ຊޠυΩϡϝϯτ ίΞϝϯςφ ʔ ʔ ʔ ʔ

Slide 6

Slide 6 text

About Ϋϥ΢υ αʔόʔαΠυ ϑϩϯτΤϯυ 0UIFST 4FSWJDF8PSLFS "OHVMBS 3FBDUKT 7VFKT/VYUKT 0UIFST 3VCZ 1)1 αʔόʔϨε

Slide 7

Slide 7 text

About https://www.amazon.co.jp/dp/4863542569/

Slide 8

Slide 8 text

About ͳਓͷ 2018

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

2018೥ͷ Nuxt.js • ࡢ೥Նʹݱ৔΁ͷॳ౤ೖʹ੒ޭ • 20Ҏ্ͷϓϩδΣΫτͰ࣮ફ • ίΞʹগ͚ͩ͠ߩݙɺυΩϡϝϯτϝϯςφ • WebͰͷ৘ใൃ৴ • HTMLExperts.jpدߘ, Qiitaهࣄ౤ߘ • ࢴഔମ • ಉਓɾ঎ۀͰҰ࡭

Slide 11

Slide 11 text

2018೥ͷ Nuxt.js • Qiita Vue/Nuxt λά೔ຊҰ • ͞Βʹ͜͜Ұ೥Ͱ౤ߘ਺໿ೋഒʹ • Ҋ͕݅΄΅શͯ Vue.js → Nuxt.js • ਺ഒύϑΥʔϚϯε͕ग़ΔͷͰফԽޮ཰૿ • ઐ༻ͷ୯ஶग़൛ • OSSతߩݙྔ΋૿Ճ • ઐ໳෼໺ͱͯ͠ͷ࿐ग़ػձͷ૿Ճ

Slide 12

Slide 12 text

2018೥ͷ Nuxt.js

Slide 13

Slide 13 text

2018೥ͷαʔόʔϨε • ͪ͜Β΋ݱ৔Ͱͷ౤ೖ͸ࡢ೥Նʙ • Web αʔϏεόοΫΤϯυɺιγϟήΩϟ ϯϖʔϯαΠτ API ͳͲ • ٕज़ • AWS / GCP&Firebase functions Λར༻ • ۀ຿ҕୗઌͷͻͱͭʮALISʯ͸ Nuxt.js on Lambda & Serverless Python

Slide 14

Slide 14 text

2018೥ͷαʔόʔϨε • ҎԼͷจ຺Ͱׂͱ࿩͕ • Nuxt + Firebase • Serverless Universal Application • ϕʔγοΫͳαʔόʔϨε͸ී௨ʹࢀೖ͕ ஗͔ͬͨ • ͦͷ෼৽نͷͭ·Έ৯͍͸࠷༏ઌ

Slide 15

Slide 15 text

࢒Γ3ϲ݄͸झຯʹׂ͖͍ͨ • ʮͰ͖Δ͜ͱ͕޿͕Βͳ͍΋ͷ͸΍Βͳ͍ʯΛج४ͰਐΊΔ • Firebase ͸ FireStore Tokyo ͕དྷΔͱ for Web ͕όέͦ͏ • ΋ͬͱ΍͓͖͍ͬͯͨ • ࠷ۙ୯७ʹڵຯຊҐͰ Dart/Flutter Λ৮͍ͬͯΔ • ͬͪ͜͸݁ߏલ͔Β͋Δ͚ͲͦΖͦΖsuffixͱΕΔ͠೔ຊޠ ৘ใগͳ͍͠Ͱ৭ʑ༡΂ͦ͏

Slide 16

Slide 16 text

About օ͞ΜͲΜͳײ͡Ͱ͔͢

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

ʮ1.5าઌʯ

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

ʮ͜Εདྷͦ͏ʯͷ࢓૊Έ • ࠓͷ··࢓ࣄΛ͍ͯͯ͠΋૬ରతʹՁ஋͸Լ͕Δ • ৗʹগͣͭ͠Ͱ΋ྑ͍͔ΒલʹਐΈ͍ͨ • ͱ͸͍͑େ୾ʹ଩Λ੾Γ͗ͯ͢΋࣌୅͕͍ͭͯ͜ͳ͍ • ஌ݟ͸݂ͱͳΓ೑ͱͳΔ͕ɺཧෆਚͳఔͷതଧ • ࠓͷ࢓ࣄ΋΋ͪΖΜָ͍ͨ͠ ࠓ͋Δཁૉ (+ͦͷ࠷લઢ) + ͍ۙະདྷͷ՝୊ কདྷBETͨ͘͠ͳΔ =

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

1.5า͸ʮΘ͔Γ΍͍͢ʯ

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

૯ׅ

Slide 50

Slide 50 text

૯ׅ • ݸਓత౤ࢿঢ়گ • Nuxt.js ͱαʔόʔϨεΛத৺ʹਾ͑ͯ׆ಈΛਐΊ͍ͯͨ • ੒Ռ͸ྑ͘ɺશମతͳମݧ(Developer ExperienceؚΉ)΋ • ࠓ೥ͷ࢒Γ3ϲ݄ʹ͍ͭͯ • Ҿ͖ଓ͖ Nuxt.js ͱαʔόʔϨεͷ༷ࢠݟɻαʔόʔϨε͸ ৽ن੡඼΍ϓϨΠϠʔͷࢀೖʹ஫໨

Slide 51

Slide 51 text

૯ׅ • ٕज़౤ࢿج४ • ΍Βͳ͍ͱ͍͚ͳ͍͜ͱɺ७ਮʹ΍Γ͍ͨ͜ͱʹ͍ͭͯ͸΍ Ε͹͍͍ • ͦΕҎ֎ʹ͍ͭͯ͸શମͷۭؾײΛݟ͍ͯ͘ͱྑ͍ • ͦͷࡍ͸ɺϚδϣϦςΟ͔Βݟͯʮ਌͠Έ΍͍͢ʯͱʮະདྷ ײʯΛཱ͍྆ͯ͠Δ͔Λҙࣝ͢Δͱԁ׈

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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