2025/03/28 (金) に開催された「Vue.js v-tokyo Meetup #22」に参加しました。

この記事では、当日のセッション内容を中心にレポートします。登壇者の方々が共有してくださったスライドやYouTube動画のリンクも掲載しているので、ぜひチェックしてみてください。

v-tokyoは、Vue.js日本ユーザーグループが主催するミートアップです。今回のテーマは「alien-signals v1 リリース記念！リアクティビティ特集！」と題し、Vue.jsだけでなく、他のフロントエンドフレームワークも含めたリアクティビティ特集でした。

オープニングでは、 Vue.js日本ユーザーグループ代表のkazuponさんより、今回のミートアップの概要の説明がありました。また、Vue Fes Japan 2025の開催とウェブサイトローンチのアナウンスもあり、会場が大変盛り上がりました！

コンポーネントテストの最適化：Chromaticからの移行とコスト削減の実践

最初のセッションは、会場スポンサーであるユニークビジョン株式会社のYappiiさんより「コンポーネントテストの最適化：Chromaticからの移行とコスト削減の実践」のタイトルで発表がありました。

コンポーネントテストのChromaticからStorybook test addonへの移行について、実際のプロジェクト運用での課題と解決策を、技術的な実装ポイントを交えながら紹介されました。

MGReにおけるVue.js

次のスポットスポンサーセッションでは、メグリ株式会社の蔵下さんから「MGReにおけるVue.js」のタイトルで発表でした。

同社のプロダクトMGRe（メグリ）では、CMSをVue.jsで実装しており、その中から「スタンプカード」「アイテムカテゴリー」「カセットレイアウト」の機能について紹介されました。

リアクティブシステムの変遷から理解するalien-signals

続いてメインセッションの前半パートは、株式会社Schooの大山奥人（yamanoku）さんによる発表でした。

リアクティブシステムの概念について、図を交えながらわかりやすく解説されており、以降のセッションの内容を理解するための基礎知識を知ることができました。また、フロントエンドにおけるリアクティブシステムの歴史についても触れられ、alien-signalsの位置づけについても理解できました。Vue.jsでは、次のバージョンであるv3.6から、alien-signalsの仕組みを取り入れたリアクティビティシステムが導入されるとのことでした。詳しい内容については、以下のスライドとZennの記事に共有していただいています。

スライド：

Zenn：

Vue Reactivity 0:present

続いてメインセッションの後半は、vuejs、vuejs-jpのメンバーであるubugeeeiさんによる発表でした。

Vue.jsの誕生から現在に至るまで、約10年にわたるリアクティビティの進化を振り返る内容でした。Vue.jsは元々Seedという名前のプロジェクトからスタートしたそうです。そこから、各バージョンにおけるVue.jsのリアクティビティシステムについて、詳しく解説されていました。セッションの最後にはVue.jsの未来についても触れられ、Vapor Modeが重要なトピックになるということでした。Vapor Modeの詳細については、ubugeeeiさんが執筆したZennの記事もぜひご覧ください。高速な発表も注目ポイントですのでぜひYouTube動画もご確認ください！

スライド：https://ubugeeei.github.io/v-tokyo-22/1

Zenn：

Angular Signalsのいま

休憩を挟んで次のセッションは、Google Developers Expert、Angular日本ユーザー会代表のlacolacoさんによる、Angularのリアクティビティに関する発表でした。

AngularのリアクティビティAPIであるSignalsについて、「Primitive APIs」「Component Authoring APIs」「Signal-based Framework APIs」に分けて詳細に解説されていました。また、Googleの非公開フレームワークであるWizについても、Angularとの関係性を交えて解説され、YouTubeなど実際のプロダクトでの利用ケースについても紹介されました。

スライド：

Preact、HooksとSignalsの両立

続いてのセッションは、株式会社ZOZOのssssotaさんによる、Preactのリアクティビティに関する発表でした。

PreactはReact互換を謳う軽量な仮想DOMライブラリで、React HooksだけでなくSignalsによる状態管理が別パッケージとして提供されているとのことです。このHooksとSignalsが共存する仕組みについて、その特徴を交えながら解説していただきました。発表後の質問コーナーではSignalsの制約について質問が上がり、そちらもとても興味深かったです。

スライド：

Svelte5 リアクティビティ概説

最後のセッションは、Svelteコアチームのbaseballyamaさんによる、Svelteのリアクティビティに関する発表でした。

Svelte 5では、Signalsの具体実装としてrunesというAPIでリアクティブを実現しているとのことです。runesの基本的な記法の解説に加えて、Svelteファイルがコンパイルされた後のJavaScriptファイルにおけるリアクティビティについても、データ構造や処理の流れが詳細に解説されました。ここまで詳細な内容を知る機会はなかなかなく、とても貴重なセッションだと感じました。

スライド：

おわりに

以上、今回のミートアップのレポートでした。

1時間半があっという間に過ぎた、とても濃密な時間でした。各フレームワークにおけるリアクティブシステムについて理解の深まる、とても有意義な勉強会となりました。リアクティビティの大枠の部分は共通する部分がありつつ、各フレームワークでの特徴がしっかりと反映されているのだと感じました。

YouTube動画や公式のnoteも公開されていますので、今回参加できなかった方もぜひご覧になってください！

YouTube：

公式note：