[Vue.js & Ionic] Ionic Vue が正式発表された件

Ionic Vue について

ついにこの日が来ました。
現地時間の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

こちらの対話形式のコマンドを実行した場合、以下のキャプチャのように色々聞いてくれるので、こっちの方がとっつきやすいかもしれません。
ionic start を対話形式で実行した場合。フレームワーク選択
↑フレームワーク選択。今回は迷わずVueを選択しました。

名前を選択する画面
↑プロジェクト名を決めてね、と聞いて来ます

初期テンプレートの選択
↑初期UIを決めたら、プロジェクト作成がはじまります!

それでは ionic serve を実行!

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デザイナーの方にもぜひおすすめです!!