Movatterモバイル変換

この記事は、Vue.js連載の5本目です。

はじめに

こんにちは。山本竜玄です。

モバイルアプリ開発と聞いて、どのような技術を思い浮かべるでしょうか。iOSならSwift、AndroidならKotlinといったネイティブ開発や、FlutterやReact Nativeといったクロスプラットフォームフレームワークが主流です。実際、2025年のクロスプラットフォーム市場ではFlutterが42%、React Nativeが38%のシェアを占めています¹。

一方で、Vue.jsでもモバイルアプリ開発ができることをご存知でしょうか。Webフロントエンド開発で人気のVue.jsですが、モバイルアプリ開発のフレームワークも複数存在します。既存のVue.jsスキルを活かしてモバイルアプリを開発できるため、Vue.jsの経験者が多いチームでは選択肢となりえます。

本記事では、2025年秋時点でのVue.jsモバイルアプリ開発フレームワークの状況を整理します。プロダクション環境で使える安定したフレームワークから、トレンド技術まで、調べた内容を紹介します。

Vue.jsモバイル開発の全体像

クロスプラットフォーム開発市場は急成長しています。2025年の市場規模は124.5億ドルで、2032年には369.2億ドルに達する見込みです²。

この市場の中で、Vue.jsはWebフロントエンド開発の人気フレームワークとして、モバイル開発にも選択肢を提供しています。FlutterやReact Nativeと比較すると、Vue.jsモバイルフレームワークの市場シェアは小さいものの、既存のWeb開発者チームでの有識者が多い場合には、モバイルアプリ開発への敷居が低いことは大きなメリットです。

本記事では、Vue.jsでモバイルアプリを開発できるフレームワークを調査し、以下のように紹介しています。

主要フレームワーク（4つ）

これらは継続的にメンテナンスされており、GitHubでも活発な開発が確認できます。

中国市場向け（1つ）

uni-app

中国のDCloudが開発しており、WeChatなどのミニプログラムとネイティブアプリを同時展開できます。中国国内では900万人の開発者が利用しているらしいです³。

新技術（1つ）

Lynx + Vue

2025年3月にByteDanceが発表したフレームワークです。TikTokやCapCutの技術スタックから生まれました。Vue統合はプロトタイプ段階ですが、今後の動向は注目したいです。

メンテナンス終了（3つ）

これらは開発が停止してます。

主要フレームワーク

主要な4つのフレームワークを紹介します。これらはいずれもVue 3に対応しており、GitHubで継続的に開発されています。

Ionic Vue

Ionicは、Web技術でネイティブアプリを構築するフレームワークです。2013年にAngular向けにスタートし、現在はVue、React、Angularをサポートしています。

基本情報

最新バージョン: v8.7.6（2025年10月）
ライセンス: MIT
GitHub: 52,101スター（2025年10月時点）⁴
npm: 週間18,911ダウンロード⁵
公式サイト:https://ionicframework.com/docs/vue/overview

特徴

iOS、Android、Webの3プラットフォーム対応
Capacitorによるネイティブ機能アクセス
Vue 3とComposition API対応
Material DesignとiOSデザインの両対応
UIコンポーネントライブラリを提供

プロジェクト作成

Ionic CLIを使用することで、すぐに開発を開始できます。

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

Vue.jsとの違い

Ionic Vueは、通常のVue.jsプロジェクトにモバイルアプリ特有の機能を追加します。主な違いは以下の3点です。

1. IonicVueプラグインの追加（main.ts）

import { createApp }from'vue';
import {IonicVue }from'@ionic/vue';
importAppfrom'./App.vue';
import routerfrom'./router';

/* Core CSS required for Ionic components to work properly */
import'@ionic/vue/css/core.css';

/* Basic CSS for apps built with Ionic */
import'@ionic/vue/css/normalize.css';
import'@ionic/vue/css/structure.css';
import'@ionic/vue/css/typography.css';

/* Theme variables */
import'./theme/variables.css';

const app =createApp(App)
  .use(IonicVue)
  .use(router);

router.isReady().then(() => {
  app.mount('#app');
});

2. IonRouterOutletの使用（App.vue）

IonRouterOutletは、複数のページを同じアウトレット内にレンダリングし、ページ遷移アニメーションとライフサイクルを管理します。

<template>
<ion-app>
<ion-router-outlet />
</ion-app>
</template>

<scriptsetuplang="ts">
import {IonApp,IonRouterOutlet }from'@ionic/vue';
</script>

3. @ionic/vue-routerの使用（router/index.ts）

Vue Routerをベースにしつつ、モバイルアプリ特有のページ遷移アニメーションとナビゲーションスタックを実現します。タブは個別のナビゲーションスタックとして扱われます。

import { createRouter, createWebHistory }from'@ionic/vue-router';
import {RouteRecordRaw }from'vue-router';
importHomePagefrom'../views/HomePage.vue';

constroutes:Array<RouteRecordRaw> = [
  {
path:'/',
redirect:'/home',
  },
  {
path:'/home',
name:'Home',
component:HomePage,
  },
];

const router =createRouter({
history:createWebHistory(import.meta.env.BASE_URL),
  routes,
});

exportdefault router;

ページコンポーネントの例

ページコンポーネントはIonPageをルート要素として使用します。以下はQuickstartで生成されるHomePage.vueの例です。

<template>
<ion-page>
<ion-header:translucent="true">
<ion-toolbar>
<ion-title>Blank</ion-title>
</ion-toolbar>
</ion-header>
<ion-content:fullscreen="true">
<ion-headercollapse="condense">
<ion-toolbar>
<ion-titlesize="large">Blank</ion-title>
</ion-toolbar>
</ion-header>
<divid="container">
<strong>Ready to create an app?</strong>
<p>
          Start with Ionic
<atarget="_blank"rel="noopener noreferrer"href="https://ionicframework.com/docs/components"
            >UI Components</a
          >
</p>
</div>
</ion-content>
</ion-page>
</template>

<scriptsetuplang="ts">
import {IonContent,IonHeader,IonPage,IonTitle,IonToolbar }from'@ionic/vue';
</script>

collapse="condense"を使用すると、スクロール時に大きなタイトルが小さく折りたたまれるモバイル特有のUIを実現できます。

参考

Capacitor + Vue

Capacitorは、既存のWebアプリをモバイルアプリに変換するためのランタイムです。Ionic VueもCapacitorを使用していますが、Ionic Vueが専用UIコンポーネントライブラリとセットになっているのに対し、Capacitor単体では既存のVue.jsアプリをそのままモバイル化できる点が特徴です。

基本情報

最新バージョン: v7.4.3（2025年10月）
ライセンス: MIT
GitHub: 14,200スター（2025年10月時点）⁶
npm: 週間800,692ダウンロード⁷
公式サイト:https://capacitorjs.com/

特徴

iOS、Android、Web、PWA対応
既存のVue.jsアプリをそのままモバイル化可能
35以上の公式プラグイン（Camera、Geolocation、Filesystemなど）
Vite、Vue CLI、Nuxtなど主要ビルドツールに対応
ネイティブコードとの共存が可能

プロジェクトへの追加

既存のVue.jsプロジェクトにCapacitorを追加する手順です。

npm install @capacitor/core @capacitor/cli
npxcap init [name] [id] --web-dir=dist

ビルド後、プラットフォームを追加します。

npm run build
npm i @capacitor/ios @capacitor/android
npxcap add android
npxcap add ios

Vue.jsでのネイティブAPI呼び出し

CapacitorのAPIは、Vue.jsのコンポーネント内でJavaScriptの標準的な非同期関数として呼び出せます。以下はGeolocation APIの例です。

import {Geolocation }from'@capacitor/geolocation';

constgetCurrentPosition =async () => {
const position =awaitGeolocation.getCurrentPosition();
console.log('Current position:', position);
};

Camera APIを使った実装例です。

<scriptsetuplang="ts">
import { ref }from'vue';
import {Camera,CameraResultType }from'@capacitor/camera';

const imageUrl =ref('');

constcapturePhoto =async () => {
const photo =awaitCamera.getPhoto({
quality:90,
allowEditing:true,
resultType:CameraResultType.Uri
  });
  imageUrl.value = photo.webPath ||'';
};
</script>

<template>
<div>
<button @click="capturePhoto">写真を撮影</button>
<imgv-if="imageUrl":src="imageUrl"alt="撮影した写真" />
</div>
</template>

参考

NativeScript-Vue

NativeScript-Vueは、WebViewを使用せず、真のネイティブUIコンポーネントでアプリを構築するフレームワークです。Vueのテンプレートは、iOSではUILabel、Androidではandroid.widget.TextViewといったネイティブコンポーネントに直接レンダリングされます。

基本情報

最新バージョン: v3.0.2（2025年10月17日）
ライセンス: MIT
GitHub: 5,900スター（2025年10月時点）⁸
npm: 週間2,338ダウンロード⁹
公式サイト:https://nativescript-vue.org/

特徴

iOS、Android対応
WebViewを使用しない真のネイティブUI
Vue 3完全対応（Options API、Composition API両対応）
JavaScriptから全てのネイティブAPIに直接アクセス可能
V8エンジンで実行される埋め込みJavaScript環境
TypeScript対応の改善とモダンなプラグインシステム

プロジェクト作成

NativeScript CLIを使用してプロジェクトを作成します。

npm install -g nativescript
ns create myAwesomeApp --vue
cd myAwesomeApp
ns run ios
# または
ns run android

注: 2025年10月時点では--template @nativescript-vue/template-blank@latestの使用時にバージョン8.0.0が見つからない場合があります。その場合は--vueフラグを使用してください。

ネイティブUIコンポーネントの使用

NativeScript-Vueでは、Vueのテンプレート内でネイティブUIコンポーネントを直接使用します。以下はリスト表示の例です。

<template>
<Page>
<ActionBartitle="NativeFlix" />
<ListViewheight="100%"separatorColor="transparent"for="item in flicks">
<v-template>
<GridLayoutheight="280"rows="*, auto, auto"columns="*">
<Imagerow="0":src="item.image" />
<Labelrow="1":text="item.title" />
</GridLayout>
</v-template>
</ListView>
</Page>
</template>

<script>
exportdefault {
data() {
return {
flicks: [
        {id:1,title:'Movie 1',image:'~/assets/movie1.jpg' },
        {id:2,title:'Movie 2',image:'~/assets/movie2.jpg' },
      ]
    };
  }
};
</script>

ここで使用されているコンポーネントは以下の通りです。

ActionBar: ページヘッダー
ListView: スクロール可能なリスト
GridLayout: グリッドレイアウトコンテナ
Image: 画像表示
Label: テキストラベル

これらは全てネイティブUIコンポーネントとしてレンダリングされ、WebViewのオーバーヘッドがありません。

参考

Quasar Framework

Quasarは、単一コードベースで複数プラットフォームに展開できるVue.jsフレームワークです。Web、モバイル、デスクトップアプリを同時に開発できる点が特徴で、エンタープライズ向けのフルスタックソリューションを提供します。

基本情報

最新バージョン: v2.18.5（2025年10月）
ライセンス: MIT
GitHub: 26,800スター（2025年10月時点）¹⁰
npm: 週間156,502ダウンロード¹¹
公式サイト:https://quasar.dev/

特徴

Web、iOS、Android、デスクトップ（Electron）、ブラウザ拡張機能対応
70以上のMaterial Design準拠のUIコンポーネント
SSR、PWA、SPAに対応
Capacitor/Cordovaによるモバイルアプリ化
Vue 3とComposition API完全対応
Viteベースの高速開発環境
CLIツールによる統合開発体験

プロジェクト作成

Quasar CLIを使用することで、対話的にプロジェクトを作成できます。

npm create quasar
# または
yarn create quasar

対話形式で以下を選択します。

App with Quasar CLI
Quasar v2
Vite（推奨）またはWebpack

グローバルCLIをインストールすると、コマンドを直接実行できます。

npm install -g @quasar/cli
quasar dev
quasar build

補足: 対話形式を避けたい場合や、既存のVue 3プロジェクトにQuasarを追加する場合は、以下の手動セットアップも可能です。
# Vue 3プロジェクトを作成
npm create vue@latest my-app
cd my-app
npm install

# Quasarをインストール
npm install quasar @quasar/extras
npm install -D @quasar/vite-plugin sass

# vite.config.tsとmain.tsを設定（詳細は公式ドキュメント参照）

モバイルアプリ化

QuasarはCapacitorまたはCordovaを使用してモバイルアプリに変換します。Capacitorを使用する例です。

quasar mode add capacitor
quasar dev -m capacitor -T android
quasar dev -m capacitor -T ios

Capacitorモードでは、Webアプリとして開発したコードがそのままモバイルアプリになります。

コンポーネントの使用例

Quasarのコンポーネントは、自動インポートに対応しているため、設定なしで使用できます。以下はカードとボタンを使用した例です。

<template>
<q-pageclass="flex flex-center">
<q-cardclass="q-pa-md"style="min-width: 350px">
<q-card-section>
<divclass="text-h6">Quasar Framework</div>
<divclass="text-subtitle2">モバイルアプリ開発</div>
</q-card-section>

<q-card-section>
<q-input
v-model="text"
label="テキスト入力"
outlined
        />
</q-card-section>

<q-card-actionsalign="right">
<q-btn
label="送信"
color="primary"
          @click="onSubmit"
        />
</q-card-actions>
</q-card>
</q-page>
</template>

<scriptsetuplang="ts">
import { ref }from'vue';

const text =ref('');

constonSubmit = () => {
console.log('送信:', text.value);
};
</script>

レイアウトシステム

QuasarはFlexboxベースの12ポイントグリッドシステムを提供します。レスポンシブデザインに対応し、画面サイズに応じてレイアウトを自動調整できます。

<template>
<divclass="row">
<divclass="col-12 col-sm-6 col-md-4">
<q-card>カード1</q-card>
</div>
<divclass="col-12 col-sm-6 col-md-4">
<q-card>カード2</q-card>
</div>
<divclass="col-12 col-sm-6 col-md-4">
<q-card>カード3</q-card>
</div>
</div>
</template>

このコードは、小さい画面では縦に並び、中サイズ画面では2列、大きい画面では3列で表示されます。

参考:

uni-app - 中国市場向けフレームワーク

uni-app

uni-appは、中国のDCloudが開発するクロスプラットフォームフレームワークです。ネイティブアプリに加えて、WeChatやAlipayなどのミニプログラム（小程序）に対応している点が最大の特徴です。

基本情報

開発元: DCloud
ライセンス: Apache 2.0
GitHub: 40,300スター（2025年1月時点）¹²
開発者数: 900万人以上
月間ユーザー数: 12億人のモバイルユーザー¹³
公式サイト:https://en.uniapp.dcloud.io/

特徴

iOS、Android、HarmonyOS Next対応
Web（レスポンシブ）対応
ミニプログラム対応（WeChat、Alipay、Baidu、Douyin、Larkなど）
Vue.js構文ベース
WeChatミニプログラムAPIとの互換性
条件付きコンパイルによるプラットフォーム別対応
ネイティブレンダリング対応

なぜ中国で人気なのか

中国市場では、WeChatやAlipayなどのスーパーアプリ内で動作するミニプログラムが普及しています。uni-appは、ミニプログラムとネイティブアプリを単一コードベースで開発できるため、中国市場向けアプリ開発で広く採用されているようです。

参考

Lynx + Vue

Lynx

Lynxは、ByteDanceが2025年3月5日にオープンソース化したクロスプラットフォームフレームワークです。TikTokのSearch、Shop、Live機能や、TikTok Studioアプリの開発に使用されている実績があり、ByteDanceの技術スタックから生まれた注目のフレームワークです。

基本情報

開発元: ByteDance
発表日: 2025年3月5日
GitHub: 13,300スター（2025年10月時点）¹⁴
最新バージョン: v3.4.2（2025年10月9日）
コミット数: 2,104件
貢献者: 82人
公式サイト:https://lynxjs.org/

特徴

iOS、Android、Web対応（OpenHarmony、macOS、Windowsは開発中）
Rust製の高速レンダリングエンジン
デュアルスレッドアーキテクチャによる高性能
フレームワーク非依存設計（React、Vue、Svelteなどに対応）
PrimJS（QuickJSベース）によるJavaScript実行環境
初回フレーム描画の高速化（2〜4倍高速と報告）

Vue統合の状況

Lynxはフレームワーク非依存の設計で、現在はReactLynxが公式に提供されています。ByteDance社内では、Lynxの約半分のプロジェクトでReact以外のフレームワーク（VueやSvelte）が使用されています¹⁵。

Vue.jsの創設者であるEvan Youは、Xでの投稿で以下のように述べ、Vue統合への支援を表明しています¹⁶。

https://x.com/youyuxi/status/1898663514581168173

Lynx発表から、VueコミュニティのメンバーであるRahul Vashishthaがプロトタイプ開発を開始しました。2025年10月時点では、Vue統合はまだプロトタイプ段階であり、正式なリリースには至っていません。

2025年のロードマップ

Lynxチームは2025年に5つの安定版リリースを計画しています¹⁷。

v3.2（2025年4月）: リリース済み
v3.3（2025年6月）: リリース済み
v3.4（2025年10月）: リリース済み、OpenHarmonyサポート
v3.5（2025年10月）: macOS、Windowsサポート
v3.6（2025年12月）: 予定

機能面では、input要素、ViewPager、Swiper、SVGサポート、Canvas API、Lottieアニメーション、通知、位置情報などの追加が計画されています。

現状の制約

2025年10月時点で、Lynxには以下の制約があります。

エコシステムがまだ未成熟
サードパーティライブラリの不足
ドキュメントとチュートリアルが限定的
標準HTML要素（button、input）非対応（代わりに<view>,<text>,<image>などの独自要素を使用）
既存ネイティブアプリへの統合が前提（スタンドアロンビルド非対応）

エコシステムがまだ未成熟であり、開発チームは既存アプリへの段階的な統合を推奨しています。新規アプリをゼロから開発する用途には、エコシステムの成熟を待つことが推奨されます¹⁸。

ByteDanceの技術力と投資規模を考えると、Vue.jsとモバイルアプリの目線でもLynxの将来性は注目に値します。

メンテナンス終了したフレームワーク

かつて使われていたフレームワークですが、現在は開発が停止しています。新規プロジェクトでの採用は推奨しません。

Weex（開発終了）

Weexは、Alibabaが開発したクロスプラットフォームフレームワークで、VueとRaxの構文でモバイルアプリを構築できました。2016年にオープンソース化され、2017年からApache Incubatorプロジェクトとして開発されていましたが、2021年5月にApacheから引退し、開発が事実上停止しています¹⁹。

GitHub: 13,800スター（アーカイブ化）
最終コミット: 4年前（2021年頃）
現状: Apache incubator-weexリポジトリはアーカイブ化

Vue Native（非推奨）

Vue Nativeは、React Native上でVue.js構文を使用できるようにしたフレームワークです。Vue.jsのコードをReact Nativeコードに変換する仕組みでしたが、2021年11月に正式に非推奨化されました²⁰。

開発元: GeekyAnts
非推奨化: 2021年11月
理由: メンテナンス継続が困難

Onsen UI（限定的メンテナンス）

Onsen UIは、PWAとハイブリッドアプリ向けのUIフレームワークで、Vue、React、Angularのバインディングを提供しています。Web Componentsベースで設計されており、Cordovaと組み合わせて使用します²¹。

GitHub: OnsenUI/OnsenUI（最終コミット約1年前）
Vue 3対応: 公式ドキュメントあり
現状: 限定的なメンテナンス

メインリポジトリは2023〜2024年頃まで更新がありましたが、活発な開発は行われていません。

まとめ

本記事では、2025年秋時点でのVue.jsモバイルアプリ開発フレームワークの状況を調べて整理しました。

Vue.jsでのモバイルアプリ開発には、想像以上に豊富な選択肢があります。Ionic Vue、Capacitor、NativeScript-Vue、Quasarの4つの主要フレームワークは、いずれも継続的にメンテナンスされており、プロダクション環境での利用に適しています。中国市場向けにはuni-app、最近のトレンドや将来性としてはLynxという選択肢も存在します。

FlutterやReact Nativeと比較すると市場シェアは小さいものの、既存のVue.jsチームがモバイルアプリ開発に参入する際の敷居は低く、学習コストを抑えられる点が大きなメリットです。

2024〜2025年のVue.jsエコシステムの進化（Vue 3.5のメモリ削減とパフォーマンス改善、Vite 6.0のリリース、Nuxt 4の正式版）は、モバイルアプリ開発にも好影響を与えています。特にVue 3.5のメモリ使用量56%削減と配列操作の高速化は、リソース制約のあるモバイル環境で効果を発揮します。

Vue.jsモバイルアプリ開発の選択肢は今後も拡大していくでしょう。特にLynxのような新技術や、PWA/ハイブリッドアプローチの進化に注目です。

Movatterモバイル変換

Vue.jsでモバイルアプリ開発をするフレームワークたち(2025秋)

はじめに

Vue.jsモバイル開発の全体像

主要フレームワーク（4つ）

中国市場向け（1つ）

新技術（1つ）

メンテナンス終了（3つ）

主要フレームワーク

Ionic Vue

基本情報

特徴

プロジェクト作成

Vue.jsとの違い

1. IonicVueプラグインの追加（main.ts）

2. IonRouterOutletの使用（App.vue）

3. @ionic/vue-routerの使用（router/index.ts）

ページコンポーネントの例

Capacitor + Vue

基本情報

特徴

プロジェクトへの追加

Vue.jsでのネイティブAPI呼び出し

NativeScript-Vue

基本情報

特徴

プロジェクト作成

ネイティブUIコンポーネントの使用

Quasar Framework

基本情報

特徴

プロジェクト作成

モバイルアプリ化

コンポーネントの使用例

レイアウトシステム

uni-app - 中国市場向けフレームワーク

uni-app

基本情報

特徴

なぜ中国で人気なのか

Lynx + Vue

Lynx

基本情報

特徴

Vue統合の状況

2025年のロードマップ

現状の制約

メンテナンス終了したフレームワーク

Weex（開発終了）

Vue Native（非推奨）

Onsen UI（限定的メンテナンス）

まとめ

参考リソース

目次

カテゴリー