Nuxt.jsで、Ionic v4 betaをつかってみる

ちょっと私事があって乗り遅れた感ありますが、Ionic v4 beta版がリリースされました。

※まだbeta版で、正式リリースはされておりません。正式リリースまでに仕様変更が行われる可能性は十分にありますので、ご留意ください。

で、せっかくIonic v4からはWeb Componentsベースとなり、すべてのJavaScriptフレームワーク・・・といいますか、No Framework環境も含めてIonicのUIコンポーネントを使えるようになりましたので、Nuxt.jsでの使い方をご紹介します。

なお、本記事はVue.js/Nuxt.jsを知っており、Node.jsなどはインストール済みの方を対象としております。
また、 https://github.com/rdlabo/ionic-nuxt.js でコミット履歴ふくめ公開しておりますので、不明点などありましたらこちらのレポジトリをご確認ください。

Nuxt.jsインストール

Nuxt.jsは、Vue CLIをつかって操作しますので、まずVue.jsをインストールします。

$ npm install -g vue-cli

実行後、私の環境では、

npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)

と出たのですが、この警告は「npm packageの名前が変更されてますよ」というものですので気にしなくて大丈夫です。

続いて、Vue CLIを使って、Nuxt.jsのスターターパッケージを展開し、npm iを実行します。 ionic-nuxt はフォルダ名となりますので、適宜変更するようにしてください。

$ vue init nuxt-community/starter-template ionic-nuxt && cd ionic-nuxt && npm i

途中で質問されますが、すべてEnterを押して進めてください。インストールが完了して、$ npm run dev で起動すると、以下のような画面がでてきます。

なお、エラーでるときは利用しようとしているポートがすでに利用中の可能性がありますので、 https://nuxtjs.org/faq/host-port/ を確認して利用するポート番号を別のものに変更ください。

Ionicを利用する（環境作成）

Ionic v4では `Not using Angular? Ionic can also be used directly from a CDN using a simple script include!` としていて、Angular以外のユースケースではCDNからの利用を推奨しているので、CDN経由に利用します。

Nuxt.jsの設定ファイルは nuxt.config.js にありますので、そこに以下を追記します。

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'ionic-nuxt',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ],
+   script: [
+     { src: 'https://unpkg.com/@ionic/core@latest/dist/ionic.js' }
+   ],
  },

scriptを追加することでCDN経由でIonicを取得します。
また、Nuxt.jsはServer Side Renderを行いますが、IonicはLazy LoadingでComponentsを取得するために、このままだとエラーがでます。そのため、 @skatejs/ssr を使ってエラーを抑制します。

$ npm i @skatejs/ssr

を入れたあと、 plugins/webcomponents.js を作成して、以下を記述します。

import Vue from 'vue'

// Render web components server-side
if(!process.browser) {
// Avoid HTMLElement is not defined on server-side
global.HTMLElement = () => {};
// Avoid customElements is not defined on server-side
global.customElements = { define: () => {} };
// Require skatejs/ssr/register only on server side
require('@skatejs/ssr/register')
}

// Vue must ignore custom components that aren't Vue Components
Vue.config.ignoredElements = [/^ion-/];

また、このpluginを読み込むために、nuxt.config.jsに以下を追記します。

    script: [
      { src: 'https://unpkg.com/@ionic/core@latest/dist/ionic.js' }
    ],
  },
+ plugins: ['~/plugins/webcomponents.js'],

これで準備完了です。

Ionicを利用する（実践）

では、実際にテンプレートでIonicのComponentsを使っていきましょう。まず、Ionicは位置計算などのためにbodyよりも下位階層をion-appでくくる必要があるので、layouts/default.vueを以下のように書き換えます。 （なぜか描画計算がうまくいかなかったので、ion-pageに高さ100%のCSSを追記します）

<template>
  <ion-app>
    <nuxt/>
  </ion-app>
</template>

<style>
  ion-page {
    height:100%;
  }
</style>

続いて、トップページを指定しているpages/index.vueを、すべて以下のように書き換えます。

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>
          Ionic Blank
        </ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      The world is your oyster.
      <p>If you get lost, the <a target="_blank" href="https://ionicframework.com/docs">docs</a> will be your guide.</p>
    </ion-content>
  </ion-page>
</template>

これで、Ionic v4のstarterテンプレートと同等のものができました。

試しに、ボタンをクリックしたらToastで通知が行われるUIを作成します。

pages/index.vueに、以下のように追記します。

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>
          Ionic Blank
        </ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      The world is your oyster.
      <p>If you get lost, the <a target="_blank" href="https://ionicframework.com/docs">docs</a> will be your guide.</p>

+     <ion-button @click="presentToast">start Toast</ion-button>
    </ion-content>
+   <ion-toast-controller></ion-toast-controller>
  </ion-page>
</template>

+ <script>
+ export default {
+   methods: {
+     async presentToast() {
+       const toastController = document.querySelector('ion-toast-controller');
+       await toastController.componentOnReady();
+
+       const toast = await toastController.create({
+         message: 'Your settings have been saved.',
+         duration: 200000
+       });
+       return await toast.present();
+     }
+   }
+ }
+ </script>

ion-buttonを追加し、@clickでクリックイベントを設定しています。また、空のion-toast-controllerを追加し、イベントが発生したらToastのDOMを生成できるようにします。

clockイベントは、methodとして登録しておきます。ion-toast-controllerをquerySelectorで取得し、そこにToastを描画します。

これで、Toastイベントを設定することができました。

実装してみての感想

v4はWebComponentsベースとなり「他のフレームワークでも使えるようになった」だけで「Angularと同等に使えるようになった」わけではなく、Ionic teamはAngularにおいてはより使いやすくなる`@ionic/angular`というラッパーを用意しておりますので、特段の理由がない限りはIonic v4を利用するのはAngular上で構築するのがおすすめになると思います。

ただ、例えば「アラートボタンだけを使いたい」「モバイル向けI/Fの一部を使いたい」などのニーズには柔軟に応えることができるようになったようにも感じます。

まだbeta版ですので正式リリースは先となりますが、ぜひ興味ある方はさわってみてください。

また、末尾となりますが、Consoleのエラー抑制で悩んでいるときに解決策を教えてくださった 果物リンさん（ https://twitter.com/FruitRiin ）ありがとうございました。

それでは、また。