ちょっと話題の記事

Ionic x Vueでモバイル向けWebアプリの爆速開発を始めよう！

諏訪 悠紀

2019.06.02

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Ionic x Vueでモバイル向けWebアプリを開発！

Ionicはクロスプラットフォームのモバイルアプリ向けフレームワークです。主にiOS/Android向けに、ワンソースコードでモバイルアプリを開発することができます。

Ionicは主にモバイルアプリ向けのオープンソースのUIツールキットのことを指しますが、IonicにはIonic Native（Cordovaを利用したネイティブサポート）、Studio（GUIソフトウェア）、Mobile DevOps（CI/CD）も含まれており Webフロントの技術（HTML/JS/CSS）を活用したモバイルアプリ開発の統合フレームワーク と言えます。

UIツールキットとしては、非常に綺麗なコンポーネントが用意されており、Webアプリの中にシンプルかつ簡単に用いることができます。

Ionicは2013年の登場から徐々にバージョンアップされており、現在は最新が「Ionic 4」となっています。以前までは Angular がベースとなっていましたが、Ionic 4ではReactのサポート、そして2019年4月にはVueサポートのBeta版がリリースされました。

Webアプリ開発のフレームワークの三巨頭と言えば、Angular、React、Vueな令和現代。その中でもVueは 学習コストが低く、シンプルに簡単に書ける という特長があります。

つまりIonicとVueを組み合わせることで モバイル向けWebアプリの開発がスピーディに行える というわけです。

そこで本記事ではIonicとVueの事始めとして、まずは動作するところまでを試してみました。

導入する

Yarnがインストールされている前提で進めます。まずはVue CLIをインストールします。

$ yarn global add @vue/cli

次に新しいプロジェクトを作りましょう。今回は ionic-vue-sample という名前にしました。

$ vue create ionic-vue-sample
$ cd ionic-vue-sample

次にRouterを以下のコマンドで追加します。RouterはIonicを使ってモバイルアプリ的な画面遷移を実現するために必要です。

$ vue add router

このコマンドを実行すると、Routerが追加されるだけではなく、作成済みのプロジェクトのソースコードがRouterを使ったものに変更されます。以下のような変更が行われます。

✔  Successfully invoked generator for plugin: core:router
   The following files have been updated / added:

     .gitignore
     README.md
     babel.config.js
     package.json
     public/favicon.ico
     public/index.html
     src/App.vue
     src/assets/logo.png
     src/components/HelloWorld.vue
     src/main.js
     src/router.js
     src/views/About.vue
     src/views/Home.vue
     yarn.lock

   You should review these changes with git diff and commit them.

Ionicをインストールします。

$ yarn add @ionic/vue

以上で、環境構築は完了です。

IonicプラグインをVueに導入する

このままでも起動はしますが、Ionicのコンポーネントはまだ使っていない形ですので、簡単にコンポーネントを使ってみます。

まずは src/main.js を以下のように書き換えます。Vue.use() にIonicのプラグインを渡しています。

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

src/views/Home.vue を以下のように書き換えます。

Home.vue

<template>
  <ion-app class="ion-page">
    <ion-header>
      <ion-toolbar>
        <ion-title>Hello World</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <h1>Welcome To @ionic/vue</h1>
      <img alt="Vue logo" src="../assets/logo.png">
    </ion-content>
  </ion-app>
</template>

<script>
export default {
  name: "home",
}
</script>

ここまでできたら yarn serve を実行してみましょう。

$ yarn serve
 DONE  Compiled successfully in 3535ms                                                                                                                                                                   01:50:48


  App running at:
  - Local:   http://localhost:8082/
  - Network: http://172.20.10.2:8082/

デフォルトでは http://localhost:8082/ で立ち上がります。以下のように、スマホアプリっぽいUIになっているはずです。

Vue Routerを使う

次にVue Routerをセットアップします。src/router.js を以下のように書き換えます。VueRouter を IonicVueRouter に変更しています。

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

次に src/App.vue を以下のように書き換えます。

App.vue

<template>
  <div id="app">
    <ion-app>
      <ion-vue-router />
    </ion-app>
  </div>
</template>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

IonicVueRouter では ion-vue-router が使えるようになります。これは、画面遷移時のトランジションなどをいい感じにレンダリングしてくれます。

次に Home.vue と About.vue の間で画面遷移ができるように、ボタンを追加します。

Home.vue

<template>
  <div class="ion-page">
    <ion-header>
      <ion-toolbar>
        <ion-title>About Page</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <h1>Welcome To @ionic/vue</h1>
      <img alt="Vue logo" src="../assets/logo.png" />
      <ion-button @click="onClick()" full>Go to About Page</ion-button>
    </ion-content>
  </div>
</template>

<script>
export default {
  name: "home",
  methods: {
    onClick () {
      this.$router.push('about')
    }
  }
}
</script>

About.vue

<template>
  <div class="about">
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button></ion-back-button>
        </ion-buttons>
        <ion-title>Hello World</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <h1>This is an about page</h1>
    </ion-content>
  </div>
</template>

これで終わりです。試してみると、スマホアプリのナビゲーションのような画面遷移ができるようになりました。

IonicのコンポーネントでVueアプリを開発！

Ionicの綺麗なコンポーネントとVueの持ち味である書きやすさの組み合わせはなかなか強力だと思います。またモバイルアプリはUIだけではなく画面遷移も意識する必要があるので、その辺りもVue Routerと組み合わせて簡単に実現できることが魅力的ですね。

簡単に試せるので、ぜひ試してみてください！

AWS