Vue.jsに対応したIonicを触ってみる

Vue.jsに対応したIonicを触ってみる:

はじめに

IonicというWebとios、Android、Electron等のネイティブアプリを同じコードで作れるフレームワークのVue.js対応がα版ながら登場したらしいので、試してみました。
Ionicを使ったことがないので詳しくは知らないですが、ReactでいうところのReact Naviveみたいな感じですかね？

これまではangularにしか対応していなかったところ、Vue.jsに対応したということで話題に上がっているようです。

参考

Ionic、Vue.jsインテグレーションのαリリースを発表

https://www.infoq.com/jp/news/2018/12/ionic-vue-integration-alpha#.XBHW6TGs7yU.twitter

やってみる

まずはvue-cliでプロジェクトを作っていきます。

vue create ionic-project 
 
> Please pick a preset 
default 

プロジェクトに移動してionicのnpmモジュールをインストールします。

cd ionic-project 
npm install @ionic/vue @ionic/core 

プロジェクト内の余計なファイルを消して

rm src/assets/logo.png src/components/HelloWorld.vue 

main.jsにionicのモジュールを読み込む設定を追記します。

import Vue from 'vue' 
import App from './App.vue' 
 
Vue.config.productionTip = false 
 
import { Ionic } from '@ionic/vue'; 
Vue.use(Ionic); 
 
new Vue({ 
  render: h => h(App), 
}).$mount('#app') 

これでionicの機能をVueの中で使えるようになったはずです。

とりあえずボタンをクリックしたらモーダルが出るようにしてみましょう。
App.vueを以下のように書き換えます。

<template> 
  <ion-button shape="round" color="primary" fill="outline" @click="showModal">Show Modal</ion-button> 
</template> 
 
<script> 
export default { 
  name: 'app', 
  methods: { 
    async showModal() { 
      // ボタンがクリックされたらionicのモーダルを表示 
      const loading = await this.$ionic.loadingController.create({ 
        spinner: 'hide', 
        duration: 5000, 
        message: 'Please wait...', 
        translucent: true, 
        cssClass: 'custom-class custom-loading' 
      }); 
      loading.present(); 
    } 
  } 
} 
</script> 
 
<style> 
</style> 

動作するか見てみます。npm run serveをしてhttp://localhost:8080にアクセスしてみましょう。

とりあえずPCブラウザ上でのボタンの表示・動作が確認できました。

が、ローディングのモーダル内のアイコンが表示されていないです。CSSの設定が別途必要なんですかね？

とりあえずドキュメントもまだないですし、雰囲気だけ掴んだので先に進みます。

続いて、これをelectronでネイティブアプリ化してみます。ビルドにはionicのcliを使う必要があるらしいので、

npm install -g ionic 
ionic init 

としてみましたが、Project typeの選択肢にvueがありません！

ちょっと調べてみると公式GithubのissueのTODOにCreate Project Type等が挙がっていました。

こちらの記事のWhats Nextにも

While it may still be a bit early for @ionic/vue and there’s a lot more to test before we recommend it for production, we’re happy to roll this out to the community and open it up for your help.

なんで書かれていますし、冷静に考えればまだアルファ版でバージョンも0.0.1なのでとりあえずコンポーネントを動かせるようになったという段階のようですね。

終わりに

Vue.jsでネイティブアプリを構築するとなるとweexだったりvue-nativeなんかが候補として挙がることが有りましたが、今後はionicにも期待したいですね。