コドモンでソフトウェアエンジニアをしている、羽馬です。
2025年6月13日に開催された Vue.js v-tokyo Meetup #23 に登壇しました。
本記事では、当日の発表内容を交えて、Vue.js v-tokyo Meetup #23 の内容を振り返ります。
今回のテーマは「Vue.js の活用事例特集」ということで、Vue.js をどのように活用しているか、実際の事例に焦点を当てた回となりました。
イベント概要
- 日時: 2025年6月13日(金) 19:00 - 21:00
- 会場: 株式会社 LIXIL（東京都品川区、大崎ガーデンタワー24F）
私の発表：WebからモバイルへVue.js × Capacitor活用事例
私は LT 枠で「WebからモバイルへVue.js × Capacitor活用事例」というタイトルで発表させていただきました。
コドモンでは「子どもを取り巻く環境をテクノロジーの力でよりよいものに」というミッションのもと、保育・教育施設向けのICTサービスを提供しています。今回は、Vue.jsで構築されたWebアプリケーションをCapacitorを使ってモバイルアプリに展開した事例について紹介しました。
なぜCapacitorを選んだのか
モバイルアプリ開発において、私たちのチームは以下の課題に直面していました：
- ビルド速度の遅さ - 従来の開発環境では、ビルドに時間がかかり開発効率が低下
- プラグインのメンテナンス継続性 - 使用していたプラグインの更新が停滞し、将来的な不安
- Web技術の活用 - Vue.jsに精通したチームの強みを活かしたい
これらの課題を解決するため、複数のクロスプラットフォーム開発フレームワークを比較検討した結果、Capacitorを選定しました。
Capacitorの主な利点
- 高速なビルド - 従来と比較してビルド速度が大幅に改善
- Apache Cordovaとの高い互換性 - 既存資産の活用が可能
- Live Update機能 - アプリストアを介さない迅速なアップデート
- Web技術の完全活用 - HTML、CSS、JavaScriptでネイティブアプリを開発
実装のポイント
Vue.jsとCapacitorを組み合わせることで、Webアプリケーションの開発と同じ感覚でモバイルアプリを開発できました。ネイティブ機能も、Capacitorのプラグインを通じてシームレスに実装できました。
まとめ
Vue.js × Capacitorの組み合わせにより、Web技術に精通したチームがモバイルアプリ開発に取り組めるようになりました。これにより、開発効率の向上と、より迅速な機能提供が可能になりました。
スライド
発表資料はこちらからご覧いただけます
他の登壇者の発表
Nuxt3と踏み出す、大規模基幹システム刷新の第一歩（Hal氏 / LIXIL）
LIXILのHal氏より、大規模基幹システムの刷新プロジェクトについて発表がありました。
今年3月に入社され刷新チームに所属されているHal氏は、スキーマ駆動開発のアプローチを採用し、旧APIと新APIの差異を吸収する層を構築することで、現行の開発を止めることなく段階的な移行を実現している取り組みを紹介されました。
特に「現行開発を止めずに進めていく」という点は、実務で大規模システムを扱う上で非常に重要な観点だと感じました。
VueとWebComponentsで作るAgnostic UI（Anthony Fu氏）
Vue、Nuxt、ViteのコアチームメンバーでVitest、Slidev、VueUse、UnoCSSの作者でもあるAnthony Fu氏から、Vue SFCをWeb Componentsへ変換する手法と、tsdownやUnoCSSを活用したパッケージへのバンドルまでの流れについて発表がありました。
Studioのカラースタイルの作り方（海老江優太氏 / Studio）
Studioの海老江氏より、StudioのUIにカラースタイル機能を実装した際の技術的な工夫について発表がありました。
開発において特に重視されたのは、独自実装を避けてブラウザ標準に準拠すること。これにより、将来的なメンテナンスコストを削減し、より安定した機能を提供できるようになったそうです。
実装上の工夫として、スタイル名をスラッシュ（/）で区切ることで階層構造を表現し、グループ単位でのドラッグ&ドロップを可能にするなど、ユーザビリティを考慮した機能開発の苦労話も共有されました。
インタラクティブなICT教材の実装にDSLで立ち向かう（ナイトウコウスケ氏 / メイツ）
メイツのナイトウコウスケ氏から、教育現場で使用されるインタラクティブなICT教材をDSL（ドメイン固有言語）を活用して効率的に実装する取り組みについて発表がありました。
教材開発において多様な問題形式やインタラクションパターンに対応する必要がある中、DSLを導入することで、教材作成者が直感的に教材を定義できる仕組みを構築。Vue.jsの柔軟なコンポーネント設計と組み合わせることで、複雑な教材ロジックをシンプルに表現できるようになったとのことでした。
発表スライド：https://mates-system.github.io/v-tokyo-23/1
Vue.jsのためのCSSスプリングアニメーション実装（katashin氏）
katashin氏より、Vue.jsアプリケーションにおけるスプリングアニメーションの実装について発表がありました。
スプリングアニメーションは、物理的なバネの動きをシミュレートすることで、より自然で心地よいアニメーションを実現する手法。従来のイージング関数では表現しきれない、弾性のある動きを CSS で実装する方法が紹介されました。
Vue.jsのリアクティブシステムと組み合わせることで、データの変更に応じて滑らかなアニメーションを適用できる実装例も示され、UIの品質向上に役立つ実践的な内容でした。
Vue Vaporチームからのサプライズ
Vue Vapor開発チームのRizumu氏が来日されていて、3Dプリンターで作った各種ロゴを配ってくれました！素敵なプレゼントありがとうございました。
Gorgeous logo! Thank you so much ✨@OikawaRizumu pic.twitter.com/68SX9lWEBU
— Naoki Haba (@naohaba70) 2025年6月14日
まとめ
今回のVue.js v-tokyo Meetup #23は「Vue.jsの活用事例特集」というテーマで、各社がどのようにVue.jsを活用しているか、実践的な知見が多く共有される回となりました。
大規模システムの段階的な移行、フレームワーク非依存なコンポーネント開発、ユーザビリティを考慮したUI実装、DSLを活用した効率的な開発、そして心地よいアニメーション実装など、Vue.jsの柔軟性を活かした多様なアプローチが紹介されました。
特に印象的だったのは、それぞれの発表者が現場で直面した課題に対して、Vue.jsのエコシステムをうまく活用しながら実践的な解決策を見出している点でした。これらの事例は、同じような課題を抱える開発者にとって貴重な参考になると思います。
おわりに
Vue.js v-tokyo Meetup は毎回素晴らしい発表が聞ける貴重な機会です。今回も多くの学びがあり、Vue.jsコミュニティの活発さを改めて感じることができました。
次回のMeetupも楽しみにしています！
