フロントよわよわエンジニアがVue.js触ってみた

Transcript

1. ϑϩϯτΑΘΑΘΤϯδχΞ ͕Vue.jsΛ৮ͬͯΈͨ
2. Agenda ▰ Introductio n ▰ ϑϩϯτॳֶऀͱͯ͠ ▰ ࡞ͬͨ΋ͷͷ঺հ ▰ Vue.js࢖ͬͯΈͯ ▰ ࠓޙ΍ͬͯΈ͍ͨ͜ͱ ▰ ͓·͚ 2
3. Introduction ▰ Mutao (@mutao_net ) ▰ αʔόʔαΠυΤϯδχΞ ▰ ϑϩϯτΑΘΑΘΤϯδχΞ ▰ Java/Perl/Golan g ▰ झຯͰPHPͱVue.js৮ͬͯ·͢ɻ ׂͱงғؾͰ΍ͬͯ·͢Թ͔͍໨Ͱ͝ཡ͍ͩ͘͞ 3
4. ϑϩϯτॳֶऀͱͯ͠ ▰ ϑϩϯτΤϯυ͸ϊʔλονͰ͖ͨ ▰ ࢼ͠ʹ΍ͬͯΈΔ͔ͱ;ͱࢥ͏ɻ ▰ ΍ΔͳΒɺΠέͯΔΞϓϦ͕࡞Γ͔ͨͬͨ ▰ ࠓΛͱ͖Ί͘Vue.jsΛֶशͯ͠ΈΔ͜ͱʹ ▰ ·ͣ͸γϯϓϧͳΞϓϦέʔγϣϯ࡞੒ʂ 4
5. ࡞ͬͨ΋ͷ Cocktai l https://mutao-cocktail.herokuapp.com/ 5
7. Vue.js࢖ͬͯΈͯ ࡶײ ΋͏ͪΐͬͱৄ͘͠ 7
8. ࡶײ ▰ ͳΜ͔ద౰ʹ΍ͬͯͨΒͰ͖ͨ ▰ ϑϩϯτॳֶऀʹ༏͍͠ˍ͓͠ΌΕ ▰ ίϯϙʔωϯτϥΠϒϥϦͷଘࡏ ▰ Element-ui,Bulm a ▰ ϨεϙϯγϒରԠͷBulma͕͓͢͢Ί ▰ σόοά͠΍͍͢ ▰ Vue.js devtoo l ▰ ద౰ͳAPIΛݟ͚͙ͭͯ͢ʹ։ൃͰ͖Δ 8
9. ΋͏ͪΐͬͱৄ͘͠ ▰ Vue-cli(webpack)ͷଘࡏ ▰ ਽ܗ࡞੒πʔϧ ▰ ಺෦తʹcli-serviceͱ͍͏ϥΠϒϥϦΛ࢖ͬͯΔ ▰ webpackΛϥοϓ͍ͯ͠Δ ▰ vue-loader͕vueίϯϙʔωϯτΛJavaScriptʹม׵͢Δ ▰ ։ൃ࣌ͷϗοτϦϩʔυΛఏڙͯ͠Δͷ΋vue-loader 9
10. ΋͏ͪΐͬͱৄ͘͠ (٧·ͬͨͱ͜Ζ) ▰ Mounted ͱ create d ▰ APIΞΫηε࣌ʹͲͪΒͷϥΠϑαΠΫϧϑοΫΛ࢖͏͔໎ͬͨ ▰ ཁ͸DOMߏங͕׬͍ྃͯ͠Δ͔Ͳ͏͔ͷҧ͍ͩͬͨ ▰ σʔλΛऔಘ͢Δ͚ͩͳΒcreated͕ૣ͍ ▰ DOMͷૢ࡞ͳͲ͕ඞཁͳ৔߹͸mountedͰ΍Δ ▰ jQueryͷॲཧ͕Ҿ͖ͣͬͯΔ࣌ͱ͔ 10
11. ΍ͬͯΈ͍ͨ͜ͱ 11 Laravu e Nuxt.j s vue.ts
12. LaraVue ▰ LaraVue(Laravel + Vue.js ) ▰ LaravelͷެࣜυΩϡϝϯτʹ΋VueΛ ಋೖ͢Δखॱ͕ॻ͔ΕͯΔ ▰ ษڧձ΋͋ΔΈ͍ͨ ▰ LaraVueษڧձ 12
13. Nuxt.js ▰ VueͷϑϨʔϜϫʔΫ ▰ αʔόʔαΠυϨϯμϦϯάରԠ ▰ Ұॠνϥͬͱ͢Δͷʹ݁ߏΠϥΠϥ͞ ͤΒΕͨ ▰ ഑৴ઃఆͳͲ͕͋ΓɺखΛग़͢ͷʹԯ ߷ʹͳͬͯΔɻ 13
14. Vue.ts ▰ ECMAͷ··Ͱॻ͔͘TypeScriptͰ ॻ͔͘೰Ή࣌͸ऴΘͬͨʢΒ͍͠ʣ ▰ ͦΖͦΖTypeScriptΛษڧ͠ͳ͍ͱ ·͍͔ͣͳ͊ͱ͍͏ҙࣝ 14
15. ͓·͚ ▰ 10000छྨҎ্ͷAPIʹΞΫηεͰ͖Δ 15 ▰ ΈΜͳେ޷͖Lin e ▰ ͙͢ʹLineBotΛ࡞ΕͪΌ͏ Line Messaging API
16. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠