+
+この記事は、[Vue.js連載](/articles/20251016a/)の5本目です。
+
+## はじめに
+
+こんにちは。山本竜玄です。
+
+モバイルアプリ開発と聞いて、どのような技術を思い浮かべるでしょうか。iOSならSwift、AndroidならKotlinといったネイティブ開発や、FlutterやReact Nativeといったクロスプラットフォームフレームワークが主流です。実際、2025年のクロスプラットフォーム市場ではFlutterが42%、React Nativeが38%のシェアを占めています[^1]。
+
+一方で、Vue.jsでもモバイルアプリ開発ができることをご存知でしょうか。Webフロントエンド開発で人気のVue.jsですが、モバイルアプリ開発のフレームワークも複数存在します。既存のVue.jsスキルを活かしてモバイルアプリを開発できるため、Vue.jsの経験者が多いチームでは選択肢となりえます。
+
+本記事では、2025年秋時点でのVue.jsモバイルアプリ開発フレームワークの状況を整理します。プロダクション環境で使える安定したフレームワークから、トレンド技術まで、調べた内容を紹介します。
+
+## Vue.jsモバイル開発の全体像
+
+クロスプラットフォーム開発市場は急成長しています。2025年の市場規模は124.5億ドルで、2032年には369.2億ドルに達する見込みです[^2]。
+
+この市場の中で、Vue.jsはWebフロントエンド開発の人気フレームワークとして、モバイル開発にも選択肢を提供しています。FlutterやReact Nativeと比較すると、Vue.jsモバイルフレームワークの市場シェアは小さいものの、既存のWeb開発者チームでの有識者が多い場合には、モバイルアプリ開発への敷居が低いことは大きなメリットです。
+
+本記事では、Vue.jsでモバイルアプリを開発できるフレームワークを調査し、以下のように紹介しています。
+
+### 主要フレームワーク（4つ）
+
+- [Ionic Vue](https://ionicframework.com/docs/vue/overview)
+- [Capacitor](https://capacitorjs.com/) + Vue
+- [NativeScript-Vue](https://nativescript-vue.org/)
+- [Quasar Framework](https://quasar.dev/)
+
+これらは継続的にメンテナンスされており、GitHubでも活発な開発が確認できます。
+
+### 中国市場向け（1つ）
+
+- [uni-app](https://en.uniapp.dcloud.io/)
+
+中国のDCloudが開発しており、WeChatなどのミニプログラムとネイティブアプリを同時展開できます。中国国内では900万人の開発者が利用しているらしいです[^4]。
+
+### 新技術（1つ）
+
+- [Lynx](https://github.com/lynx-family/lynx) + Vue
+
+2025年3月にByteDanceが発表したフレームワークです。TikTokやCapCutの技術スタックから生まれました。Vue統合はプロトタイプ段階ですが、今後の動向は注目したいです。
+
+### メンテナンス終了（3つ）
+
+- [Weex](https://github.com/alibaba/weex)
+- [Vue Native](https://vue-native.io/)
+- [Onsen UI](https://onsen.io/vue/)
+
+これらは開発が停止してます。
+
+## 主要フレームワーク
+
+主要な4つのフレームワークを紹介します。これらはいずれもVue 3に対応しており、GitHubで継続的に開発されています。
+
+### Ionic Vue
+
+Ionicは、Web技術でネイティブアプリを構築するフレームワークです。2013年にAngular向けにスタートし、現在はVue、React、Angularをサポートしています。
+
+#### 基本情報
+
+- 最新バージョン: v8.7.6（2025年10月）
+- ライセンス: MIT
+- GitHub: 52,101スター（2025年10月時点）[^5]
+- npm: 週間18,911ダウンロード[^6]
+- 公式サイト: https://ionicframework.com/docs/vue/overview
+
+#### 特徴
+
+- iOS、Android、Webの3プラットフォーム対応
+- Capacitorによるネイティブ機能アクセス
+- Vue 3とComposition API対応
+- Material DesignとiOSデザインの両対応
+- UIコンポーネントライブラリを提供
+
+#### プロジェクト作成
+
+Ionic CLIを使用することで、すぐに開発を開始できます。
+
+```bash
+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）
+
+```ts
+import { createApp } from 'vue';
+import { IonicVue } from '@ionic/vue';
+import App from './App.vue';
+import router from './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`は、複数のページを同じアウトレット内にレンダリングし、ページ遷移アニメーションとライフサイクルを管理します。
+
+```html
+
+
+ Ready to create an app?
+
+ + Start with Ionic + UI Components +
+
+
+ ![撮影した写真]()
+
+
+```
+
+参考
+
+- [Capacitor Documentation](https://capacitorjs.com/docs)
+- [Using Capacitor with Vue](https://capacitorjs.com/solution/vue)
+- [Capacitor APIs](https://capacitorjs.com/docs/apis)
+
+### 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月時点）[^9]
+- npm: 週間2,338ダウンロード[^10]
+- 公式サイト: https://nativescript-vue.org/
+
+#### 特徴
+
+- iOS、Android対応
+- WebViewを使用しない真のネイティブUI
+- Vue 3完全対応（Options API、Composition API両対応）
+- JavaScriptから全てのネイティブAPIに直接アクセス可能
+- V8エンジンで実行される埋め込みJavaScript環境
+- TypeScript対応の改善とモダンなプラグインシステム
+
+#### プロジェクト作成
+
+NativeScript CLIを使用してプロジェクトを作成します。
+
+```bash
+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コンポーネントを直接使用します。以下はリスト表示の例です。
+
+```html
+
+ Quasar Framework
+ モバイルアプリ開発
+
+
+
+```
+
+このコードは、小さい画面では縦に並び、中サイズ画面では2列、大きい画面では3列で表示されます。
+
+参考:
+- [Quasar Framework](https://quasar.dev/)
+- [Quasar CLI](https://quasar.dev/start/quasar-cli)
+- [Developing Capacitor Apps](https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/introduction)
+- [Flex Grid](https://quasar.dev/layout/grid/introduction-to-flexbox)
+
+## uni-app - 中国市場向けフレームワーク
+
+### uni-app
+
+uni-appは、中国のDCloudが開発するクロスプラットフォームフレームワークです。ネイティブアプリに加えて、WeChatやAlipayなどのミニプログラム（小程序）に対応している点が最大の特徴です。
+
+#### 基本情報
+
+- 開発元: DCloud
+- ライセンス: Apache 2.0
+- GitHub: 40,300スター（2025年1月時点）[^13]
+- 開発者数: 900万人以上
+- 月間ユーザー数: 12億人のモバイルユーザー[^14]
+- 公式サイト: https://en.uniapp.dcloud.io/
+
+#### 特徴
+
+- iOS、Android、HarmonyOS Next対応
+- Web（レスポンシブ）対応
+- ミニプログラム対応（WeChat、Alipay、Baidu、Douyin、Larkなど）
+- Vue.js構文ベース
+- WeChatミニプログラムAPIとの互換性
+- 条件付きコンパイルによるプラットフォーム別対応
+- ネイティブレンダリング対応
+
+#### なぜ中国で人気なのか
+
+中国市場では、WeChatやAlipayなどのスーパーアプリ内で動作するミニプログラムが普及しています。uni-appは、ミニプログラムとネイティブアプリを単一コードベースで開発できるため、中国市場向けアプリ開発で広く採用されているようです。
+
+参考
+
+- [uni-app Official Website](https://en.uniapp.dcloud.io/)
+- [uni-app History](https://en.uniapp.dcloud.io/history.html)
+
+## Lynx + Vue
+
+### Lynx
+
+Lynxは、ByteDanceが2025年3月5日にオープンソース化したクロスプラットフォームフレームワークです。TikTokのSearch、Shop、Live機能や、TikTok Studioアプリの開発に使用されている実績があり、ByteDanceの技術スタックから生まれた注目のフレームワークです。
+
+#### 基本情報
+
+- 開発元: ByteDance
+- 発表日: 2025年3月5日
+- GitHub: 13,300スター（2025年10月時点）[^15]
+- 最新バージョン: 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）が使用されています[^16]。
+
+Vue.jsの創設者であるEvan Youは、Xでの投稿で以下のように述べ、Vue統合への支援を表明しています[^17]。
+
+https://x.com/youyuxi/status/1898663514581168173
+
+Lynx発表から、VueコミュニティのメンバーであるRahul Vashishthaがプロトタイプ開発を開始しました。2025年10月時点では、Vue統合はまだプロトタイプ段階であり、正式なリリースには至っていません。
+
+#### 2025年のロードマップ
+
+Lynxチームは2025年に5つの安定版リリースを計画しています[^18]。
+
+- 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）非対応（代わりに`
+ カード1
+
+
+ カード2
+
+
+ カード3
+
+