2025年6月13日（金）に開催された「Vue.js v-tokyo Meetup #23」に参加しました。

テーマは「Vue.jsの活用事例特集」。この記事では、当日セッションの内容をレポートします。各セッションのスライドも掲載していますので、ぜひご覧ください！

• 「Nuxt3と踏み出す、大規模基幹システム刷新の第一歩」
  株式会社LIXIL アプリケーションエキスパート Hal
• 「VueとWebComponentsで作るAgnostic UI」
  Vue、Nuxt、Viteコアチームメンバー Anthony Fu
• 「Studioのカラースタイルの作り方」
  Studio株式会社 フロントエンドエンジニア 海老江 優太
• 「インタラクティブな ICT 教材の実装に DSL で立ち向かう」
  株式会社メイツ フロントエンドエンジニア ナイトウコウスケ
• 「WebからモバイルへVue.js × Capacitor 活用事例」
  株式会社コドモン ソフトウェアエンジニア 羽馬 直樹
• 「Vue.js のための CSS スプリングアニメーション実装」
  フロントエンドエンジニア Katashin

Nuxt3と踏み出す、大規模基幹システム刷新の第一歩

まずは会場スポンサーである、株式会社LIXIL Halさんのセッションです。現行開発の継続と障害許容率という2つの課題に向けた取り組みが紹介されました。

アジャイル開発による段階的なリソース分割や、スキーマ駆動開発を軸にした柔軟なコミュニケーション体制を実践。リバースプロキシやDockerを用いた新旧環境の接続、nuxtjs/storybookによるコンポーネント管理も推進しました。

今後はデザインシステムや、新旧環境の整合性を担保できるテスト体制の構築など、その他多くの課題に取り組んでいくとのことです。

VueとWebComponentsで作るAgnostic UI

続いては、Vue、Nuxt、ViteコアチームメンバーであるAnthony Fuさんのセッション。Nuxt DevToolsのような埋め込みコンポーネントにおけるスタイルの隔離をテーマに登壇されました。

Vue.jsの<style scoped>が内部CSSの漏洩を防げる一方、外部スタイルの侵入を防げないという問題点を指摘し、その解決策としてWebComponentsの活用を提案。

Vue SFCとUnoCSSを組み合わせることで、スタイルの競合を回避しながら、快適な開発体験を得る方法について詳しく解説されました。

Studioのカラースタイルの作り方

次にStudio株式会社の海老江 優太さんのセッションです。Studioの「カラースタイル機能」の改善点と実装方法について紹介されました。

従来の「マイカラー機能」が抱えていた課題を踏まえて、色の命名や管理が可能に。さらに現在のカラースタイルの一括更新、プロジェクト全体で使用量が確認できる機能も加わり、デザインシステム用途にも適した仕様になっています。

実装面では、ユーザー主導の編集体験を重視しブラウザ標準のCSS Variablesを採用。AIとの協業も見据えた設計思想が語られました。

インタラクティブな ICT 教材の実装に DSL で立ち向かう

続いてのセッションは、株式会社メイツ所属のナイトウコウスケさんのお話です。学習塾向けICT教材の開発における課題と、それに対するDSL導入による解決策が紹介されました。

従来のCSV＋画像ベースの教材は、プレビューやバリデーションの手間がかかるなど非効率な面がありました。これを受けて、Markdownを拡張した独自DSL「ACDL」を導入。問題文・解答欄・ヒント・解説などを1ファイルで完結させ、マルチデバイス対応やプレビュー環境の整備による改善を実現しました。

WebからモバイルへVue.js × Capacitor 活用事例

次に、株式会社コドモンの羽馬 直樹さんによるLTです。

現在運用中の保育・教育施設向けウェブアプリケーションを事例に、Capacitorの活用方法を紹介。Capacitorの導入によって、ウェブ技術に精通したチームがモバイルアプリ開発に対応できる、実践的なアプローチが語られました。

Vue.js のための CSS スプリングアニメーション実装

最後は、KatashinさんのLTです。CSSスプリングアニメーションライブラリ@css-spring-animationの実装と開発過程で得られた知見を共有いただきました。

従来のJavaScript実装では、mass/stiffness/dampingといった直感的でないパラメーターが課題でした。これに対し、bounce　（弾む強さ）、duration（秒数）を用いた直感的な設定が提案されました。

このアプローチでは、CSSでの実現が可能であり、linear()関数を用いたハードウェアアクセラレーションの活用や、Vue.jsコンポーネントとしての利用方法も紹介されました。

会場の様子

当日は、じゃんけん大会によるプレゼント企画を行ったり、Vue VaporメンバーのRizumuさんが、さまざまな技術スタックのバッジを配布したりと、嬉しいサプライズに会場は盛り上がりを見せていました。

以上、「Vue.js v-tokyo Meetup #23」の参加レポートでした。

それぞれのセッションを通じて、実践事例や課題解決の工夫に触れられて、大変学びの多いイベントとなりました。

写真：Keigo Nakao（Vue.js日本ユーザーグループ）