ついにこの日が来ました。
現地時間の2020年10月15日、
Ionic公式サイトにて、Ionic Vue の正式バージョンのリリースが発表されました！
Announcing Ionic Vue

ここ最近は、Vue.js と firebase によるWebアプリを中心に制作しているケースが増えていまして、
「今年の秋に Ionic Vue の公式版が出るらしい」
という噂を耳にした時から、その発表をずっと心待ちにしていました。

2年前に初めて Ionic にふれた時は Angular & Typescript による開発方法しか手段がなく（また手元に情報も少なく）、
Webデザイナー出身の自分には、正直とてもとてもハードルが高いな…と感じた記憶があります。

「Vue.jsなら使えます」というWebデザイナーの方は一定数いらっしゃると思うので、
今回の Ionic Vue の正式リリースにより、Ionic ユーザーの間口がそれなりに広がりそうで楽しみです！

さっそく使ってみました

公式サイトの Ionic Vue クイックスタート に記載の通りの方法で、
さっそく ionic serve まで試してみました。

まずは、ionicコマンドが利用できるようにするために、以下を実行して Ionic CLI を導入します。

npm install -g @ionic/cli@latest

※もちろん、npmを使うということは、node.js の導入は済んでいる前提で読んでください。

Ionic CLI の導入が済んだら、次は
Ionicプロジェクトを作成します。

ionic start sampleApp tab --type vue

公式に記載の通り、上記のコードを使っても良いですし、
単純に以下のように書くことで、対話形式でのプロジェクト作成も可能です。

ionic start

こちらの対話形式のコマンドを実行した場合、以下のキャプチャのように色々聞いてくれるので、こっちの方がとっつきやすいかもしれません。

↑フレームワーク選択。今回は迷わずVueを選択しました。

↑プロジェクト名を決めてね、と聞いて来ます

↑初期UIを決めたら、プロジェクト作成がはじまります！

それでは ionic serve を実行！

ionic serve を実行して、
このように表示されたら成功です！

ファイル構成は Vue.js で制作をした事がある方ならおなじみの構成になってます！
とてもなじみがあって嬉しいですね！
おなじみの、router があって、viewsディレクトリ内に .vue ファイル（単一コンポーネント）が並んでいて…
という Vue.js のいつもの構成で、ionicを使った開発ができます。

ハマりやすそうな点など

以上の簡単な手順で Ionic Vue を試してみる事ができるのですが、
実は私が最初に実行した際は、以下のようなエラーを吐いて
ionic serve の実行が止まっていました。

Error: Cannot find module 'vue-loader-v16/package.json'

解決方法としては、まずエラーの指示通り素直に vue-loader-v16 をインストール。

npm install --save-dev vue-loader-v16

その後、npm自体のバージョンをアップデートする必要がありました。
この件については、
Githubのこのissueページ で
解決方法が言及されていました。

ページ中段、

Please use npm >= 6.9

の部分で、この通り npm のバージョンを最新にアップデートしたら、問題なく
ionic serve が通るようになりました。
必要な依存関係が揃っていなかった、という事が問題のようでした。

あとは、楽しむのみです！

あとは、Vue.js と一緒に動いてくれる Ionic に感動しつつ、制作を楽しむのみです！

↑この ionic serve 時の初期表示に
Explore UI Components と書いてある通り、
Ionic の魅力的なコンポーネントを試してみながら、
ぜひ「既存のWebスキルを無駄にする事なく、アプリ制作ができる」という事の素晴らしさを体験してみてください！

Vue.js を使った事のあるWebデザイナーの方にもぜひおすすめです！！