ionic/vueもβ版になったので触ってみた

#はじめに
どうも@chan_kakuです
今回はionic/vueがβ版になったということで実際に使ってみた感想など皆さんに伝えていければいいかなと思っております。
今回の内容はKyoto.js16で発表した内容となります。
スライドはこちらにございますので、よろしければご覧になってください

Ionicとは

以前、ionic/vueがα版だった時に一度こちらの記事に記載しましたので是非ご覧になってください！

環境

• Mac OS mojave 10.14.4
• Node.js 8.11.3

できるようになったこと

• Vue Routerが使えるようになった
• α版では使えなかったIonicのコンポーネントが使えるようになった

まだできないこと

• 双方向データバインディングのディレクティブであるv-modelが使えない
• Stack Navigationがまだ使えず、鋭意開発中である
• ネイティブのAPIがまだ使えない
  • こちらは今回ionic/vueをやってみようと思った１つの理由だったので個人的には残念でした

始め方

前提としてvue-cliでプロジェクトを作ってあるところから始めます。
わからない方は以前の記事をご覧ください。

Vue Routerを利用する

$ vue add router

こちらで利用することができます

VueのプロジェクトでIonicを使う

main.jsとrouter.jsを修正します

main.js

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')

router.js

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',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

router.jsについてですが、元々はVue Routerが使われてましたが、IonicにもRouterAPIが提供されており、IonicVueRouterはVueRouterでIonicのRouterAPIを利用するためのものらしいです。したがってこちらを利用するようにしましょう

capacitorを利用して、iOS用にビルドすると以下のよう動きます！

IonicのComponentを利用してみる

Ionicのコンポーネントも色々使えるようになったので、触ってみました

ion-fab

こちらはtwitterとかでよくみるフロートボタンのことです。
かっこいいフロートボタンも簡単に実装することができます

About.vue

<template>
      <ion-fab-button>Share</ion-fab-button> 
      <ion-fab-list side="top"> 
        <ion-fab-button>
          <ion-icon name="logo-facebook"></ion-icon>
        </ion-fab-button> 
        <ion-fab-button>
          <ion-icon name="logo-twitter"></ion-icon>
        </ion-fab-button> 
        <ion-fab-button>
          <ion-icon name="logo-youtube"></ion-icon>
        </ion-fab-button> 
      </ion-fab-list> 
        <ion-fab-list side="start"> 
          <ion-fab-button>
            <ion-icon name="logo-vimeo"></ion-icon>
          </ion-fab-button> 
        </ion-fab-list> 
    </ion-fab>
</template>

これだけでかっこいいフロートボタンを実装することができます
いかがその様子です

ion-card

これはいろんなcss-frameworkなどでもありますが、カード型のコンポーネントが簡単に実装できます

About.vue

<template>
     <ion-card>
         <img src="path/to/your/img">
         <ion-card-header>
             <ion-card-subtitle>name</ion-card-subtitle>
             <ion-card-title>chankaku</ion-card-title>
         </ion-card-header>
         <ion-card-content>
         I love beer.🍻🍻🍻
         </ion-card-content>
     </ion-card>
</template>

以下がその見た目です

こんなかんじでかっこいいカードコンポーネントを実装することできました

感想

AngularではIonic,ReactではReact Nativeのようにネイティブアプリケーションを作る定番のものがありますが、Vueにはこれといったものがまだない印象です。
今のところだと、PWAでGooglePlayStoreにて配信することができますし、TWAといった外側はネイティブだけど、中身はChromeを起動するといった技術もありますので、今現在においてVueではPWA,TWAでいいのではないかという風に感じました。
vue/ionicにおいてもネイティブのAPIが使えるようになったらまた変わってくるかもしれないので、正式なリリースバージョンが出るのが楽しみかもしれないですね！