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

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

# Ionicとは
以前、ionic/vueがα版だった時に一度[こちらの記事](https://qiita.com/chan_kaku/items/f8c0dd2a39ff6f67c65b)に記載しましたので是非ご覧になってください！

## 環境
- Mac OS mojave 10.14.4
- Node.js 8.11.3

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


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

## 始め方
前提としてvue-cliでプロジェクトを作ってあるところから始めます。
わからない方は[以前の記事](https://qiita.com/chan_kaku/items/f8c0dd2a39ff6f67c65b)をご覧ください。

### 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用にビルドすると以下のよう動きます！

<img width = 300 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259982/7f29428a-926c-9f34-2590-0f18a2770f03.gif">

### 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>
```

これだけでかっこいいフロートボタンを実装することができます
いかがその様子です
<img width = 300 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259982/07f2254a-1e40-67f0-0775-f13b12aa4084.gif">

#### 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>

```

以下がその見た目です

<img width="411" alt="スクリーンショット 0031-04-27 5.27.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259982/a03e4c1e-ae05-beda-b709-84bbe6552e94.png">

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

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