React Nativeのように、Vueでスマホアプリを作りたいな〜
Vueを普段使ってる人なら、一度は思ったことがあるのではないでしょうか。
一つのコードベースからiOS、Androidで動くアプリが出力される。夢がありますよね。
この記事では、 Vueの技術を使ってiOS、Androidアプリを作ってみた経験を書きました。
作ったアプリはこちらです。
iOS
Android
記事の最後に他にもVueを使って作ったアプリを紹介してます。
少し自己紹介
私はプライベートでNuxtで作ったWebアプリを運営しています。このWebアプリをスマホアプリ化したい。というのがこの記事の出発点です。
Webアプリ
普段のWebフロントエンド開発では Vue / Nuxt を使っています。仕事・プライベートの両方で使っており、Vueのコンポーネント設計や状態管理には慣れている状態です。
スマホアプリ開発の経験については、iOSは経験がありますが、Androidの経験はほぼない状態でした。
- iOS：Swiftでの業務経験あり
- Android：Kotlinの経験はなく、昔にJavaを少し触った程度
そのため、「スマホアプリ自体はまったくの未経験」というわけではありませんが、 Androidネイティブを一から学ぶよりも、既存のVue資産を活かしてアプリ化する現実的な選択肢を探していました。
Capacitorで作る
いくつか調べる中でたどり着いたのが Capacitor です。
Capacitorは、Vueを含むWebアプリをスマホアプリとして動かすための仕組みで、必要に応じて Ionic というUIフレームワークと組み合わせて使うこともできます。
Capacitorは、WebViewをベースにした、いわゆる「ガワアプリ」を作るためのツールです。
スマホアプリの中で、ローカルにホストしたWebサイトを表示する仕組みになっており、
そのWebサイト部分にVueで作ったアプリをそのまま組み込むことができます。
つまり、
- 画面やロジックはVue（Web）
- アプリとしての入れ物をCapacitorが用意する
という役割分担です。
実際に作ったアプリの構成
今回作ったスマホアプリは、既存のWebアプリをベース にしています。
新しくアプリ専用のUIやロジックを作る、というよりは、
「すでにあるVueアプリを、どうやってスマホアプリとして動かすか」
という考え方で構成しました。
全体の構成は以下のようになっています。
- フロントエンド：Vue
- アプリ化：Capacitor
- バックエンド・データ管理：Firebase（Web SDK）
Capacitorの中で、Vueで作ったWebアプリをそのまま読み込み、
iOS / Androidそれぞれのアプリとしてビルドしています。
データ管理について
データの保存には、iOSやAndroidのローカルDBは使わず、
Web版と同じくFirebaseのWeb SDKを使ってクラウド側に保存する構成にしました。
ローカルDBも考えたのですが、使おうとすると、
- iOS / Androidそれぞれの実装差分が出る
- ネイティブ側のコードを触る必要が増えそう
といった点が気になったのでやめました。
Webアプリと同じ感覚で実装できるFirebaseを使うことで、
スマホアプリでも Webと同じコード・設計のまま 開発を進めることができました。
おわりに
すでにVueで作ったWebアプリがある場合、Capacitorとの相性は良いと感じました。
実際にWeb、iOS、Androidで全く同じVueコンポーネントを使うことができています。
「まずはWebとして作り、あとからスマホアプリにしたい」
というケースでは、工数を削減できる可能性が高いと思いました。
他にも作ったので見てみてね
