[{"data":1,"prerenderedAt":37},["ShallowReactive",2],{"post-v-tokyo-meetup-23":3},{"id":4,"createdAt":5,"updatedAt":6,"publishedAt":7,"revisedAt":6,"title":8,"body":9,"categories":10,"author":14,"thumbnail":25,"ogpImage":29},"v-tokyo-meetup-23","2025-06-13T09:47:17.193Z","2025-07-29T07:48:42.680Z","2025-06-16T10:37:10.652Z","Vue.js v-tokyo Meetup #23 参加レポート","\u003Cp>2025年6月13日（金）に開催された「Vue.js v-tokyo Meetup #23」に参加しました。\u003C\u002Fp>\u003Cp>テーマは「\u003Cstrong>Vue.jsの活用事例特集\u003C\u002Fstrong>」。この記事では、当日セッションの内容をレポートします。各セッションのスライドも掲載していますので、ぜひご覧ください！\u003C\u002Fp>\u003Cul>\u003Cli>「Nuxt3と踏み出す、大規模基幹システム刷新の第一歩」\u003Cbr>株式会社LIXIL アプリケーションエキスパート Hal\u003C\u002Fli>\u003Cli>「VueとWebComponentsで作るAgnostic UI」\u003Cbr>Vue、Nuxt、Viteコアチームメンバー Anthony Fu\u003C\u002Fli>\u003Cli>「Studioのカラースタイルの作り方」\u003Cbr>Studio株式会社 フロントエンドエンジニア 海老江 優太\u003C\u002Fli>\u003Cli>「インタラクティブな ICT 教材の実装に DSL で立ち向かう」\u003Cbr>株式会社メイツ フロントエンドエンジニア ナイトウコウスケ\u003C\u002Fli>\u003Cli>「WebからモバイルへVue.js × Capacitor 活用事例」\u003Cbr>株式会社コドモン ソフトウェアエンジニア 羽馬 直樹\u003C\u002Fli>\u003Cli>「Vue.js のための CSS スプリングアニメーション実装」\u003Cbr>フロントエンドエンジニア Katashin\u003C\u002Fli>\u003C\u002Ful>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F19a553a9c8f94de5897ae0f57065f363\u002FNTTp8e5xU3Ndx6JUHPi3GnYG0jRhKQ0xm7e9mOS3A4EeJxFPc.jpg\" alt=\"\" width=\"1704\" height=\"959\">\u003C\u002Ffigure>\u003Ch2 id=\"h0b36bc5fdb\">Nuxt3と踏み出す、大規模基幹システム刷新の第一歩\u003C\u002Fh2>\u003Cp>まずは会場スポンサーである、株式会社LIXIL Halさんのセッションです。現行開発の継続と障害許容率という2つの課題に向けた取り組みが紹介されました。\u003C\u002Fp>\u003Cp>アジャイル開発による段階的なリソース分割や、スキーマ駆動開発を軸にした柔軟なコミュニケーション体制を実践。リバースプロキシやDockerを用いた新旧環境の接続、\u003Ccode>nuxtjs\u002Fstorybook\u003C\u002Fcode>によるコンポーネント管理も推進しました。\u003C\u002Fp>\u003Cp>今後はデザインシステムや、新旧環境の整合性を担保できるテスト体制の構築など、その他多くの課題に取り組んでいくとのことです。\u003C\u002Fp>\u003Ch2 id=\"h82ce30e50a\">VueとWebComponentsで作るAgnostic UI\u003C\u002Fh2>\u003Cp>続いては、Vue、Nuxt、ViteコアチームメンバーであるAnthony Fuさんのセッション。Nuxt DevToolsのような埋め込みコンポーネントにおけるスタイルの隔離をテーマに登壇されました。\u003C\u002Fp>\u003Cp>Vue.jsの\u003Ccode><style scoped>\u003C\u002Fcode>が内部CSSの漏洩を防げる一方、外部スタイルの侵入を防げないという問題点を指摘し、その解決策としてWebComponentsの活用を提案。\u003C\u002Fp>\u003Cp>Vue SFCとUnoCSSを組み合わせることで、スタイルの競合を回避しながら、快適な開発体験を得る方法について詳しく解説されました。\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Ftalks.antfu.me\u002F2025\u002Fv-tokyo\u002F1\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?url=https%3A%2F%2Ftalks.antfu.me%2F2025%2Fv-tokyo%2F1&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Ch2 id=\"h82b68c569b\">Studioのカラースタイルの作り方\u003C\u002Fh2>\u003Cp>次にStudio株式会社の海老江 優太さんのセッションです。Studioの「カラースタイル機能」の改善点と実装方法について紹介されました。\u003C\u002Fp>\u003Cp>従来の「マイカラー機能」が抱えていた課題を踏まえて、色の命名や管理が可能に。さらに現在のカラースタイルの一括更新、プロジェクト全体で使用量が確認できる機能も加わり、デザインシステム用途にも適した仕様になっています。\u003C\u002Fp>\u003Cp>実装面では、ユーザー主導の編集体験を重視しブラウザ標準のCSS Variablesを採用。AIとの協業も見据えた設計思想が語られました。\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 450px; position: relative;\">\u003Ciframe src=\"https:\u002F\u002Fembed.figma.com\u002Fdeck\u002FRH4Ne748Vg2DHtkQKjGwq5?embed-host=oembed&theme=light\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen>\u003C\u002Fiframe>\u003C\u002Fdiv>\u003Ch2 id=\"hbdd8df369d\">インタラクティブな ICT 教材の実装に DSL で立ち向かう\u003C\u002Fh2>\u003Cp>続いてのセッションは、株式会社メイツ所属のナイトウコウスケさんのお話です。学習塾向けICT教材の開発における課題と、それに対するDSL導入による解決策が紹介されました。\u003C\u002Fp>\u003Cp>従来のCSV＋画像ベースの教材は、プレビューやバリデーションの手間がかかるなど非効率な面がありました。これを受けて、Markdownを拡張した独自DSL「ACDL」を導入。問題文・解答欄・ヒント・解説などを1ファイルで完結させ、マルチデバイス対応やプレビュー環境の整備による改善を実現しました。\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fmates-system.github.io\u002Fv-tokyo-23\u002F\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fmates-system.github.io%2Fv-tokyo-23&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Ch2 id=\"hb93ffde349\">WebからモバイルへVue.js × Capacitor 活用事例\u003C\u002Fh2>\u003Cp>次に、株式会社コドモンの羽馬 直樹さんによるLTです。\u003C\u002Fp>\u003Cp>現在運用中の保育・教育施設向けウェブアプリケーションを事例に、Capacitorの活用方法を紹介。Capacitorの導入によって、ウェブ技術に精通したチームがモバイルアプリ開発に対応できる、実践的なアプローチが語られました。\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.1972%;\">\u003Ciframe src=\"https:\u002F\u002Fspeakerdeck.com\u002Fplayer\u002Fb5b9ae0d828b46f39dc0e742ce65e7ae\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\">\u003C\u002Fiframe>\u003C\u002Fdiv>\u003Ch2 id=\"h8ea5825cf2\">Vue.js のための CSS スプリングアニメーション実装\u003C\u002Fh2>\u003Cp>最後は、KatashinさんのLTです。CSSスプリングアニメーションライブラリ\u003Ccode>@css-spring-animation\u003C\u002Fcode>の実装と開発過程で得られた知見を共有いただきました。\u003C\u002Fp>\u003Cp>従来のJavaScript実装では、\u003Ccode>mass\u002Fstiffness\u002Fdamping\u003C\u002Fcode>といった直感的でないパラメーターが課題でした。これに対し、\u003Ccode>bounce\u003C\u002Fcode>　（弾む強さ）、\u003Ccode>duration\u003C\u002Fcode>（秒数）を用いた直感的な設定が提案されました。\u003C\u002Fp>\u003Cp>このアプローチでは、CSSでの実現が可能であり、\u003Ccode>linear()\u003C\u002Fcode>関数を用いたハードウェアアクセラレーションの活用や、Vue.jsコンポーネントとしての利用方法も紹介されました。\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fkatashin.info\u002Fslides\u002Fvue-spring-animation\u002F\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?url=https%3A%2F%2Fkatashin.info%2Fslides%2Fvue-spring-animation%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Chr>\u003Ch2 id=\"h6db8923773\">会場の様子\u003C\u002Fh2>\u003Cp>当日は、じゃんけん大会によるプレゼント企画を行ったり、Vue VaporメンバーのRizumuさんが、さまざまな技術スタックのバッジを配布したりと、嬉しいサプライズに会場は盛り上がりを見せていました。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F75ae274dd448428180f6d484ac47fdc9\u002FqJ1zXmdU8wALrKOXGiOEz9Dg7XG7od-K7zdDqeTpqe0eJxFPc.jpg\" alt=\"\" width=\"1704\" height=\"725\">\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F5ce2e4a30f824702a9d62ac196e6e829\u002Fh8kCq_9lLL8S1kmZCfkpgFjGjMkaZOANRGBGzEvqzEAeJxFPc.jpg\" alt=\"\" width=\"1707\" height=\"1138\">\u003C\u002Ffigure>\u003Chr>\u003Cp>以上、「Vue.js v-tokyo Meetup #23」の参加レポートでした。\u003C\u002Fp>\u003Cp>それぞれのセッションを通じて、実践事例や課題解決の工夫に触れられて、大変学びの多いイベントとなりました。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Ffb8a4280ef5344679f29473526d212c8\u002Fwkyw0eXOEOB-Zdk1rLN-nS2CJd1UGyMpEyhHGW_ZK0MeJxFPc.jpg\" alt=\"\" width=\"1704\" height=\"1136\">\u003C\u002Ffigure>\u003Cp>写真：Keigo Nakao（Vue.js日本ユーザーグループ）\u003C\u002Fp>",[11,12,13],"フロントエンド","コミュニティ","イベントレポート",[15],{"id":16,"createdAt":17,"updatedAt":18,"publishedAt":17,"revisedAt":18,"name":19,"job":20,"avatar":21,"profile":24},"ba-f_cmju","2024-02-21T00:20:24.175Z","2026-04-13T09:36:16.713Z","阿部 萌夏","フロントエンドエンジニア",{"url":22,"height":23,"width":23},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fe076105dcbbe460eaabb5bbc3f693621\u002Fabe.moeka.jpg",512,"北海道出身、2001年生まれ。専門学校を卒業後、フロントエンドエンジニアとして2023年世路庵に入社。2025年退職。",{"url":26,"height":27,"width":28},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F94b3c5e10ab44bf0a911c92b976e91f3\u002Fv-tokyo-meetup-23.png",720,1280,{"fieldId":30,"type":31,"image":33},"ogpImage",[32],"タイプ2（タイトル＋画像）",{"url":34,"height":35,"width":36},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F1b40bf12e72f418db2c92d1343c554a0\u002Fv-tokyo-meetup-23-ogp.png",630,1200,1776401660706]