Vue Native でアプリ開発

Vue Night #2 LT資料です。
Vue Native でアプリ開発しての感想。
ネイティブやろうと思ったきっかけとなったPWA開発の話。
Nuxt.js 2.4でリリースされた機能の紹介です。

Transcript

1. W@GVLVPLB 7VF
   /BUJWF
   ͰΞϓϦ։ൃ
2. ੢
   ෢࢙ גࣜձࣾEJ⒎FBTZ
 औక໾$50 !@UBLFTIJ@ 'JSFCBTF 7VF (PMBOH 3VCZ ($1 ϒϩοΫνΣʔϯ EPDLFS /VYU &MJYJS Թઘ ϥϯχϯά -5͓͡͞Μ ಡॻ ম೑͓͡͞Μ
3. NBLF
   EJ⒏DVMU
   UIJOHT
   FBTZ ੈքதͷzΉ͔͍ͣ͠zΛ؆୯ʹ
4. 7VF
   /BUJWFͰΞϓϦ։ൃ
5. ·ͣ࠷ॳʹɾɾɾ
6. ɾɾɾ͓קΊ͠·ͤΜɻɻ
7. XIZ
   7VF
   /BUJWF
9. 18"ͱ͸Կ͔ʁ 1
   SPHSFTTJWF
   8FC
 "
   QQT ωΠςΟϒΞϓϦͷΑ͏ʹಈ࡞͢Δ 8FCΞϓϦ
10. 18"ͰԿ͕Ͱ͖Δʁ ᶃΠϯετʔϧʢϗʔϜը໘ʹΞΠίϯઃஔʣՄೳ
11. 18"ͰԿ͕Ͱ͖Δʁ ᶄΦϑϥΠϯͰ΋ಈ࡞Մೳ wΦϑϥΠϯͰ΋ΞϓϦ͸ಈ࡞
    wαʔόʔͱͷ௨৴͸ෆՄ
    w௨৴࠶։࣌ʹαʔόʔૹ৴ड৴
12. 18"ͰԿ͕Ͱ͖Δʁ ᶅϓογϡ௨஌Մೳ wϓογϡ௨஌Մೳ
    wϢʔβʔ͝ͱʹݸผͷ௨஌΋Մೳ
    w௨஌͕දࣔ͞ΕΔ
    w௨஌ΛΫϦοΫͯ͠ΞϓϦىಈ ˞J04൛4BGBSJ͸ඇରԠ ࣌఺
13. 18"ͰԿ͕Ͱ͖Δʁ ᶆϖʔδͷදࣔ଎౓վળ
    
    4FSWJDF
    8PSLFS w4FSWJDF8PSLFS͕ϓϩΩγͷ໾ׂ
    w$BDIF͔Βߴ଎ʹදࣔ
    wόοΫάϥ΢ϯυͰ࠷৽ͷίϯςϯ πΛऔಘ͠Ωϟογϡ
    wΦϑϥΠϯͰಈ͘ͷ΋ಉ͡࢓૊Έ
    wϓογϡ௨஌Λड͚औΔ 4FSWJDF
    8PSLFS 18" $BDIF 8FC
14. /VYUKTͰ18"ରԠ $ yarn add @nuxtjs/pwa --save  !OVYUKTQXBΛΠϯετʔϧ modules: [ '@nuxtjs/dotenv', '@nuxtjs/pwa' ], manifest: { name: 'wacha', short_name: 'wacha', title: 'wacha', lang: 'ja', gcm_sender_id: '103953800507' //ݻఆ஋ },  OVYUDPOpHKTʹΞϓϦͷ৘ใΛ௥Ճ
15. 18"ͷࣄྫ 5XJUUFS
    -JUF wϒϥ΢β͔ΒϗʔϜը໘ʹΠϯετʔ ϧՄೳ
    wωΠςΟϒΞϓϦΑΓ΋ܰྔɻىಈ ͕଎͍ɻ
    wػೳ͸Ұ෦੍ݶ https://mobile.twitter.com
16. 18"࣮ࡍͲ͏ͳͷʁ w"OESPJEͰ͸ωΠςΟϒΞϓϦʹ͍ۙ͜ͱ͕Մೳ
    wJ04ͷ͔Β18"ରԠ
    wJ04Ͱ͸ϓογϡ௨஌ະରԠ
    wΞΠίϯͷόοδදࣔͰ͖ͳ͍
    wϒϥ΢βͷઃఆͰ௨஌0''ʹͰ͖Δ
    wݸਓతʹ͸ࠓޙʹେ͍ʹظ଴ʂʂ
17. 18"࣮ࡍͲ͏ͳͷʁ w"OESPJEͰ͸ωΠςΟϒΞϓϦʹ͍ۙ͜ͱ͕Մೳ
    wJ04ͷ͔Β18"ରԠ
    wJ04Ͱ͸ϓογϡ௨஌ະରԠ
    wΞΠίϯͷόοδදࣔͰ͖ͳ͍
    wϒϥ΢βͷઃఆͰ௨஌0''ʹͰ͖Δ
    wݸਓతʹ͸ࠓޙʹେ͍ʹظ଴ʂʂ
18. #BEHJOH
    "1*ొ৔༧ఆʁ
19. ΍ͬͺΓωΠςΟϒΞϓϦඞཁʁ
21. 3FBDU
    /BUJWFͷ"1*Λϥοϓ 7VF/BUJWFͱ͸ʁ 7VFKTͰωΠςΟϒΞϓϦΛߏங
22. 7VFKTͷ஌͕ࣝ׆༻Ͱ͖Δ
23. yarn global add expo-cli yarn global add vue-native-cli vue-native init chat-app WVFOBUJWFDMJͰߏங
24. WVFOBUJWFDMJͰߏங
25. WVFOBUJWFDMJͰߏஙʜͰ͖ͣ ࠷৽൛Ͱ͸μϝɾɾɾ
 
 ར༻͍ͯ͠ΔϥΠϒϥϦͷ
 όʔδϣϯམͱͯ͠ճආ
26. <template> <view class="container"> <text-input :style="{
 height: 40, width: 200,
 borderColor: 'gray', borderWidth: 1
 }" v-model="messageText" /> <button :on-press="saveMessage" title="Save" /> <text v-for="(message, index) in messages" :key="index">{{ message }}</text> </view> </template> αϯϓϧιʔε UFNQMBUF
27. <script> export default { data: function() { return { messageText: '', messages: [] } }, methods: { saveMessage: function() { this.messages.push(this.messageText) this.messageText = '' } } } </script> αϯϓϧιʔε TDSJQU
28. const state = { messages: [] } const getters = { messages: state => { return state.messages } } const actions = { addMessage ({ commit }, message) { commit('addMessage', message) } } const mutations = { addMessage (state, message) { state.messages.push(message) } } export default { state, getters, actions, mutations } 7VFY΋ར༻Մೳ
29. <script> import Store from './store'; export default { data: function() { return { messageText: '' } }, computed: { messages: function() { return Store.getters.messages } }, methods: { saveMessage: function() { Store.dispatch('addMessage', this.messageText) this.messageText = '' } } } </script> 7VFY΋ར༻Մೳ
30. <template> <app-navigation></app-navigation> </template> <script> import { StackNavigator } from "vue-native-router"; import HomeScreen from "./screens/HomeScreen.vue"; import MessagesScreen from "./screens/MessagesScreen.vue"; const AppNavigation = StackNavigator( { Home: HomeScreen, Messages: MessagesScreen, }, { initialRouteName: 'Home', } ); export default { components: { AppNavigation } } </script> 7VF/BUJWF3PVUFSͰը໘ભҠ "QQWVF
31. <template> <view class="container"> <text>{{ text }}</text> <button :on-press="goMessages" title="Go Messages" /> </view> </template> 7VF/BUJWF3PVUFSͰը໘ભҠ )PNFWVF
32. <script> export default { data: function() { return { text: 'Home' } }, props: { navigation: { type: Object } }, methods: { goMessages: function() { this.navigation.navigate("Messages") } } } </script> 7VF/BUJWF3PVUFSͰը໘ભҠ )PNFWVF
33. σόΠε΁ͷΞΫηε
34. σϞ
35. ɾɾɾ͓קΊ͠·ͤΜɻɻ
36. ͋Εɾɾʁ
37. ଞʹ͸ʁ
39. J04ͷ18"ରԠਐΜͰཉ͍͠ɾɾ
40. ɾɾɾ-5͓͡͞Μͱͯ͠ɺ
 ͜ΕͰऴΘ͍͍ͬͯͷ͔ʁ
41. /VYUKT
    
    ϦϦʔεʂʂ
42. ࠓޙͷϦϦʔεεέδϡʔϧ w̒ϲ݄͝ͱʹϝδϟʔόʔδϣϯΞοϓ༧ఆ
    w̐िؒ͝ͱʹϚΠφʔόʔδϣϯΞοϓ༧ఆ
43. 5ZQF4DSJQUରԠ OVYUUT
44. 4NBSU
    QSFGFUDIJOH ผϖʔδΛOVYUMJOLͰQSFGFUDIJOH
45. TUPSFͷ).3ରԠ TUPSF HFUUFST
    
    NVUBUJPOT
    
    BDUJPOT
    ͷ
 )PU
    .PEVMF
    3FQMBDFNFOU
46. EJ⒎FBTZͰ͸
    ҎԼͷΑ͏ͳਓࡒΛaେืूதʂʂ ϑϩϯτΤϯυΤϯδχΞ ᶃ ٕज़ྗͰੈքதͷΉ͔͍ͣ͠Λ؆୯ʹ͢Δ σβΠφʔɾϚʔΫΞοϓΤϯδχΞ ᶄ σβΠϯྗͰੈքதͷΉ͔͍ͣ͠Λ؆୯ʹ͢Δ ᶅ ୎ٿͷzΉ͔͍ͣ͠Λ؆୯ʹ͢Δ୎ٿ্ख͍ਓ ଧ౗ʂʂ/ʔϥϘɺ,ϥϏφςΫϊϩδʔ
47. ͳΜ͔εϯϚηϯɾɾɾ