Vue.js v-tokyo Meetup #23 で「Vue.js × Capacitor活用事例」について発表しました

イベント概要

2025年6月13日、LIXILの東京オフィスで開催されたVue.js v-tokyo Meetup #23で、「Vue.js × Capacitor活用事例」について発表する機会をいただきました。

発表内容：Vue.js × CapacitorでWebからモバイルへ

モバイル開発における課題

モバイルアプリ開発において、以下のような課題に直面していました：

• 遅いビルド時間
• プラグインのメンテナンスコスト
• 既存のVue.jsの知識を活かせない

なぜCapacitorを選んだのか

これらの課題を解決するために、Capacitorを採用しました。主な理由は以下の通りです：

高速なビルド ネイティブビルドと比較して、開発サイクルが大幅に短縮されました。

Apache Cordovaとの互換性 既存のCordovaプラグインをそのまま使用できるため、移行がスムーズでした。

Live Update機能 アプリストアの審査を待たずに、WebベースのコンテンツをOTAで更新できます。

ネイティブなWeb技術との統合 Vue.jsで書いたコードをそのままモバイルアプリとして動かせるため、学習コストが低く抑えられました。

実際の活用事例

Webアプリケーションとして開発していたVue.jsプロジェクトを、Capacitorを使ってiOS/Androidアプリとして展開しました。コードベースの大部分を共有しながら、プラットフォーム固有の機能にもアクセスできる柔軟性が大きなメリットでした。

イベントについて

当日は他にも、Anthony FuさんによるVue SFCのWeb Components変換や、katashinさんによるCSSスプリングアニメーションなど、興味深い発表が多数ありました。Vue.jsコミュニティの熱量を感じられる素晴らしいイベントでした。