0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

VueAdvent Calendar 2022

Day 11

Ionic Vue をちょっとだけ触ってみた

Posted at

(コロナにかかってしまって、投稿が遅れてしまいました。。。)

Vueアドベントカレンダー2022 の11日目です。

今年は会社以外のアドカレに参加したいと思い、普段触っている Vue で何か書けないかと思い、ふと数年前の登壇を思い出しました。

登壇を見た時は、まだまだだったような気がしますが、すでに v6 にまで上がっていて驚きましたw

というわけで、 Ionic を触ってみることにしました。

インストール

npm install -g @ionic/cli
ionic start myApp tabs --type vue

WEBアプリの起動

ionic serve

スクリーンショット 2022-12-11 19.09.46.png

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 に対応しており、非常に書きやすかったです。

内容は大したことないので、簡単なデモとリポジトリを貼るだけにします。

ionic-vue-train-book-demo-2.gif

まとめ

普段使っているJSフレームワークで、スマホアプリも作れるようになっていることは非常に驚きました。

Flutter をちゃんと触ったことないですし、ネイティブアプリを作ったこともほぼないので、 Ionic がどれほど上記と覇権争いができるのか判断できませんが、ちょっとしたアプリを作りたい際にJSで作れるので、是非みなさんも興味があったら触ってみたらいかがでしょうか。

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?