(コロナにかかってしまって、投稿が遅れてしまいました。。。)
Vueアドベントカレンダー2022 の11日目です。
今年は会社以外のアドカレに参加したいと思い、普段触っている Vue で何か書けないかと思い、ふと数年前の登壇を思い出しました。
登壇を見た時は、まだまだだったような気がしますが、すでに v6 にまで上がっていて驚きましたw
というわけで、 Ionic を触ってみることにしました。
インストール
npm install -g @ionic/cli
ionic start myApp tabs --type vue
WEBアプリの起動
ionic serve
iOS アプリのビルド
1. Xcode のインストール
ビルドするには、 Xcode が必要です。
xcode-select --install
2. Capacitor もしくは Cordova のインストール
今回は、 Capacitor を使用した方法を紹介します。
brew install Capacitor
3. ビルドの実行
ionic cap add ios
ionic cap open ios
※再ビルドの場合は、 add ではなく copy を使う。
※実機 iPhone でのビルドでは署名の登録です。

たったこれだけでした。
簡単なアプリを作ってみた
ちょうど、息子が電車にハマっていたので、電車の図鑑+検索+クイズができるようなアプリを作ることにしました。
Vue3 に対応しており、非常に書きやすかったです。
内容は大したことないので、簡単なデモとリポジトリを貼るだけにします。
まとめ
普段使っているJSフレームワークで、スマホアプリも作れるようになっていることは非常に驚きました。
Flutter をちゃんと触ったことないですし、ネイティブアプリを作ったこともほぼないので、 Ionic がどれほど上記と覇権争いができるのか判断できませんが、ちょっとしたアプリを作りたい際にJSで作れるので、是非みなさんも興味があったら触ってみたらいかがでしょうか。