ionic/vueもβ版になったのでちゃんと触ってみた

ionic/vueが2019年4月にβ版がリリースされたということでα版との違いなどを調べてみました

Transcript

1. ionic/vueもβ版になったのでちゃんと触っ
   てみた

   2019/04/27 Kyoto.js #16
   chan_kaku
   

   View Slide

2. 自己紹介
   フリュー株式会社

   サーバーサイドエンジニア

   Vue歴約1年(v-kansai運営)

   ライブ、フェス、ベース、お酒

   特にビールが大好きだよ

   仕事

   趣味

   Twitter @chan_kakuz
   

   View Slide

3. 前回のKyoto.jsで、、、
   

   View Slide

4. https://speakerdeck.com/takumiz19/vuedeneiteibuapuriwozuo-ridao-su
   

   View Slide

5. 前回もvue/ionicの話をしたが、、、
   

   View Slide

6. 動機
   

   View Slide

7. 動機
   ● VueConf USAでionic/vueのβ版について発表された
   ● α版からどうなったのか気になった
   

   View Slide

8. β版でできるようになったこと
   ● Vue Routerがついに
   ● その他色々IonicのComponentsが使えるようになったっ
   ぽい(公式アナウンスはない)
   

   View Slide

9. β版でもできないこと
   ● The shorthand v-model binding is currently not supported
   a. 双方向バインディングのディレクティブであるv-modelが使えない
   ● Stack navigation for deep transitions is under heavy development at this
   time.
   a. 次のページで解説
   ● ネイティブのAPIが使えない
   a. これはまだAngularでしか使えない
   

   View Slide

10. stack navigator
    1 5
    4
    3
    2
    1
    2
    3
    4
    5
    screenが積み重なっている感じ
    

    View Slide

11. まずはrouterを使ってみる
    

    View Slide

12. routerを使う
    vue cliで作ったプロジェクト
    にrouterを追加
    

    View Slide

13. ionic追加
    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import Ionic from '@ionic/vue';
    import '@ionic/core/css/ionic.bundle.css';
    Vue.use(Ionic);
    Vue.config.productionTip = false;
    new Vue({
    router,
    render: h => h(App)
    }).$mount('#app')
    追加
    src/main.js
    

    View Slide

14. IonicVueRouterを追加 import Vue from 'vue'
    import Home from './views/Home.vue'
    import { IonicVueRouter } from '@ionic/vue';
    Vue.use(IonicVueRouter);
    export default new IonicVueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
    {
    path: '/',
    name: 'home',
    component: Home
    },
    {
    path: '/about',
    name: 'about',
    component: () =>
    import(/* webpackChunkName: "about" */ './views/About.vue')
    }
    ]
    });
    追加
    VueRouterを使いつつ、Ionic
    のRouterAPIを
    使うためのもの
    src/router.js
    

    View Slide

15. View Slide

16. いろんなComponentで遊んでみる
    

    View Slide

17. ion-fab
    Share
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    View Slide

18. View Slide

19. ion-card
    
    
    
    name
    chankaku
    
    
    I love beer.
    
    
    

    View Slide

20. ion-card
    

    View Slide

21. 感想
    ● GooglePlay StoreでもPWAでアプリを配信できるよ
    うになったし、iOSも12.2でPWAのOAuthがちゃんと
    使えるようになったので、PWAでいいのではと思った
    り
    ● 今のところ(2019/04現在)はVueでちゃんとしたプロ
    ダクトとしてネイティブアプリを作るのは辛いイメージ
    

    View Slide

22. まとめ
    ● IonicのRouterAPIを使うことができるようになった
    ● Ionic/VueでもIonicのComponentが結構使えるようになっ
    た
    

    View Slide