[{"data":1,"prerenderedAt":35},["ShallowReactive",2],{"post-v-tokyo-meetup-22":3},{"id":4,"createdAt":5,"updatedAt":6,"publishedAt":7,"revisedAt":6,"title":8,"body":9,"categories":10,"author":14,"thumbnail":27,"ogpImage":31},"v-tokyo-meetup-22","2025-03-28T09:24:19.690Z","2025-07-29T07:59:24.315Z","2025-04-02T02:23:58.172Z","Vue.js v-tokyo Meetup #22 参加レポート","\u003Cp>2025\u002F03\u002F28 (金) に開催された「Vue.js v-tokyo Meetup #22」に参加しました。\u003C\u002Fp>\u003Cp>この記事では、当日のセッション内容を中心にレポートします。登壇者の方々が共有してくださったスライドやYouTube動画のリンクも掲載しているので、ぜひチェックしてみてください。\u003C\u002Fp>\u003Cp>\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"padding-bottom: 40.9091%; padding-top: 120px;\">\u003Ca href=\"https:\u002F\u002Fvuejs-meetup.connpass.com\u002Fevent\u002F343338\u002F\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?url=https%3A%2F%2Fvuejs-meetup.connpass.com%2Fevent%2F343338%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cp>v-tokyoは、\u003Ca href=\"https:\u002F\u002Fvuejs-jp.org\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Vue.js日本ユーザーグループ\u003C\u002Fa>が主催するミートアップです。今回のテーマは「\u003Cstrong>alien-signals v1 リリース記念！リアクティビティ特集！\u003C\u002Fstrong>」と題し、Vue.jsだけでなく、他のフロントエンドフレームワークも含めたリアクティビティ特集でした。\u003C\u002Fp>\u003Cp>オープニングでは、 Vue.js日本ユーザーグループ代表の\u003Ca href=\"https:\u002F\u002Fx.com\u002Fkazu_pon\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">kazupon\u003C\u002Fa>さんより、今回のミートアップの概要の説明がありました。また、Vue Fes Japan 2025の開催とウェブサイトローンチのアナウンスもあり、会場が大変盛り上がりました！\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"padding-bottom: 52.5%; padding-top: 120px;\">\u003Ca href=\"https:\u002F\u002Fvuefes.jp\u002F2025\u002F2025\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?url=https%3A%2F%2Fvuefes.jp%2F2025%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Ch2 id=\"hef990a84a3\">コンポーネントテストの最適化：Chromaticからの移行とコスト削減の実践\u003C\u002Fh2>\u003Cp>最初のセッションは、会場スポンサーである\u003Ca href=\"https:\u002F\u002Fwww.uniquevision.co.jp\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">ユニークビジョン株式会社\u003C\u002Fa>のYappiiさんより「コンポーネントテストの最適化：Chromaticからの移行とコスト削減の実践」のタイトルで発表がありました。\u003C\u002Fp>\u003Cp>コンポーネントテストのChromaticからStorybook test addonへの移行について、実際のプロジェクト運用での課題と解決策を、技術的な実装ポイントを交えながら紹介されました。\u003C\u002Fp>\u003Ch2 id=\"h181e2b1291\">MGReにおけるVue.js\u003C\u002Fh2>\u003Cp>次のスポットスポンサーセッションでは、\u003Ca href=\"https:\u002F\u002Fmgre.co.jp\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">メグリ株式会社\u003C\u002Fa>の蔵下さんから「MGReにおけるVue.js」のタイトルで発表でした。\u003C\u002Fp>\u003Cp>同社のプロダクト\u003Ca href=\"https:\u002F\u002Fmgre.jp\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">MGRe（メグリ）\u003C\u002Fa>では、CMSをVue.jsで実装しており、その中から「スタンプカード」「アイテムカテゴリー」「カセットレイアウト」の機能について紹介されました。\u003C\u002Fp>\u003Ch2 id=\"h8eaf67bbf3\">リアクティブシステムの変遷から理解するalien-signals\u003C\u002Fh2>\u003Cp>続いてメインセッションの前半パートは、株式会社Schooの\u003Ca href=\"https:\u002F\u002Fx.com\u002Fyamanoku\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">大山奥人（yamanoku）\u003C\u002Fa>さんによる発表でした。\u003C\u002Fp>\u003Cp>リアクティブシステムの概念について、図を交えながらわかりやすく解説されており、以降のセッションの内容を理解するための基礎知識を知ることができました。また、フロントエンドにおけるリアクティブシステムの歴史についても触れられ、\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fstackblitz\u002Falien-signals\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">alien-signals\u003C\u002Fa>の位置づけについても理解できました。Vue.jsでは、次のバージョンであるv3.6から、alien-signalsの仕組みを取り入れたリアクティビティシステムが導入されるとのことでした。詳しい内容については、以下のスライドとZennの記事に共有していただいています。\u003C\u002Fp>\u003Cp>スライド：\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.1972%;\">\u003Ciframe src=\"https:\u002F\u002Fspeakerdeck.com\u002Fplayer\u002Fb7e38b97183e4566ac17cc90537cc759\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\">\u003C\u002Fiframe>\u003C\u002Fdiv>\u003Cp>Zenn：\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"padding-bottom: 52.5%; padding-top: 120px;\">\u003Ca href=\"https:\u002F\u002Fzenn.dev\u002Fcomm_vue_nuxt\u002Farticles\u002Fabout-alien-signals\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?url=https%3A%2F%2Fzenn.dev%2Fcomm_vue_nuxt%2Farticles%2Fabout-alien-signals&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Ch2 id=\"hfd36418e67\">Vue Reactivity 0:present\u003C\u002Fh2>\u003Cp>続いてメインセッションの後半は、\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fvuejs\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">vuejs\u003C\u002Fa>、\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fvuejs-jp\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">vuejs-jp\u003C\u002Fa>のメンバーである\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fubugeeei\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">ubugeeei\u003C\u002Fa>さんによる発表でした。\u003C\u002Fp>\u003Cp>Vue.jsの誕生から現在に至るまで、約10年にわたるリアクティビティの進化を振り返る内容でした。Vue.jsは元々Seedという名前のプロジェクトからスタートしたそうです。そこから、各バージョンにおけるVue.jsのリアクティビティシステムについて、詳しく解説されていました。セッションの最後にはVue.jsの未来についても触れられ、Vapor Modeが重要なトピックになるということでした。Vapor Modeの詳細については、ubugeeeiさんが執筆したZennの記事もぜひご覧ください。高速な発表も注目ポイントですのでぜひ\u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002Flive\u002FyM2Us-ZQHSE?si=-R25Azp95VAIQ1FY\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">YouTube動画\u003C\u002Fa>もご確認ください！\u003C\u002Fp>\u003Cp>スライド：\u003Ca href=\"https:\u002F\u002Fubugeeei.github.io\u002Fv-tokyo-22\u002F1\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">https:\u002F\u002Fubugeeei.github.io\u002Fv-tokyo-22\u002F1\u003C\u002Fa>\u003C\u002Fp>\u003Cp>Zenn：\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"padding-bottom: 52.5%; padding-top: 120px;\">\u003Ca href=\"https:\u002F\u002Fzenn.dev\u002Fcomm_vue_nuxt\u002Farticles\u002F3b264a4bf70662\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?url=https%3A%2F%2Fzenn.dev%2Fcomm_vue_nuxt%2Farticles%2F3b264a4bf70662&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Ch2 id=\"h51215752cc\">Angular Signalsのいま\u003C\u002Fh2>\u003Cp>休憩を挟んで次のセッションは、\u003Ca href=\"https:\u002F\u002Fdevelopers.google.com\u002Fcommunity\u002Fexperts?hl=ja\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Google Developers Expert\u003C\u002Fa>、\u003Ca href=\"https:\u002F\u002Fcommunity.angular.jp\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Angular日本ユーザー会\u003C\u002Fa>代表の\u003Ca href=\"https:\u002F\u002Flacolaco.net\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">lacolaco\u003C\u002Fa>さんによる、\u003Ca href=\"https:\u002F\u002Fangular.jp\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Angular\u003C\u002Fa>のリアクティビティに関する発表でした。\u003C\u002Fp>\u003Cp>AngularのリアクティビティAPIであるSignalsについて、「Primitive APIs」「Component Authoring APIs」「Signal-based Framework APIs」に分けて詳細に解説されていました。また、Googleの非公開フレームワークであるWizについても、Angularとの関係性を交えて解説され、YouTubeなど実際のプロダクトでの利用ケースについても紹介されました。\u003C\u002Fp>\u003Cp>スライド：\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%; padding-top: 30px;\">\u003Ciframe src=\"https:\u002F\u002Fdocs.google.com\u002Fpresentation\u002Fd\u002F1KHDb3hSdnkU2_ov5lXt-uYz9C33BGZgT1J5CB5AlsUY\u002Fembed\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\">\u003C\u002Fiframe>\u003C\u002Fdiv>\u003Ch2 id=\"h363b72c6a0\">Preact、HooksとSignalsの両立\u003C\u002Fh2>\u003Cp>続いてのセッションは、株式会社ZOZOの\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fssssota\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">ssssota\u003C\u002Fa>さんによる、\u003Ca href=\"https:\u002F\u002Fpreactjs.com\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Preact\u003C\u002Fa>のリアクティビティに関する発表でした。\u003C\u002Fp>\u003Cp>PreactはReact互換を謳う軽量な仮想DOMライブラリで、React HooksだけでなくSignalsによる状態管理が別パッケージとして提供されているとのことです。このHooksとSignalsが共存する仕組みについて、その特徴を交えながら解説していただきました。発表後の質問コーナーではSignalsの制約について質問が上がり、そちらもとても興味深かったです。\u003C\u002Fp>\u003Cp>スライド：\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.1972%;\">\u003Ciframe src=\"https:\u002F\u002Fspeakerdeck.com\u002Fplayer\u002F6364c0235b56480880e721520f6cc141\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\">\u003C\u002Fiframe>\u003C\u002Fdiv>\u003Ch2 id=\"h96428db0a3\">Svelte5 リアクティビティ概説\u003C\u002Fh2>\u003Cp>最後のセッションは、Svelteコアチームの\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fbaseballyama\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">baseballyama\u003C\u002Fa>さんによる、\u003Ca href=\"https:\u002F\u002Fsvelte.jp\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Svelte\u003C\u002Fa>のリアクティビティに関する発表でした。\u003C\u002Fp>\u003Cp>Svelte 5では、Signalsの具体実装としてrunesというAPIでリアクティブを実現しているとのことです。runesの基本的な記法の解説に加えて、Svelteファイルがコンパイルされた後のJavaScriptファイルにおけるリアクティビティについても、データ構造や処理の流れが詳細に解説されました。ここまで詳細な内容を知る機会はなかなかなく、とても貴重なセッションだと感じました。\u003C\u002Fp>\u003Cp>スライド：\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%; padding-top: 30px;\">\u003Ciframe src=\"https:\u002F\u002Fdocs.google.com\u002Fpresentation\u002Fd\u002F1aVJbI61RiA0fQJZJo4LDlU_FWvwNqII9WnbBL-SiJz8\u002Fembed\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\">\u003C\u002Fiframe>\u003C\u002Fdiv>\u003Ch2 id=\"h9be0c3393d\">おわりに\u003C\u002Fh2>\u003Cp>以上、今回のミートアップのレポートでした。\u003C\u002Fp>\u003Cp>1時間半があっという間に過ぎた、とても濃密な時間でした。各フレームワークにおけるリアクティブシステムについて理解の深まる、とても有意義な勉強会となりました。リアクティビティの大枠の部分は共通する部分がありつつ、各フレームワークでの特徴がしっかりと反映されているのだと感じました。\u003C\u002Fp>\u003Cp>YouTube動画や公式のnoteも公開されていますので、今回参加できなかった方もぜひご覧になってください！\u003C\u002Fp>\u003Cp>YouTube：\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\">\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FyM2Us-ZQHSE?rel=0\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\" allow=\"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share;\">\u003C\u002Fiframe>\u003C\u002Fdiv>\u003Cp>公式note：\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"padding-bottom: 52.3438%; padding-top: 120px;\">\u003Ca href=\"https:\u002F\u002Fnote.com\u002Fjayes\u002Fn\u002Fn79f587e5b0a0\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?url=https%3A%2F%2Fnote.com%2Fjayes%2Fn%2Fn79f587e5b0a0%3Fsub_rt%3Dshare_pb&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>",[11,12,13],"コミュニティ","フロントエンド","イベントレポート",[15],{"id":16,"createdAt":17,"updatedAt":18,"publishedAt":17,"revisedAt":19,"name":20,"job":21,"avatar":22,"profile":25,"xId":26,"githubId":26},"koyama","2024-02-14T00:43:53.323Z","2024-03-20T13:41:39.499Z","2024-03-15T13:16:51.910Z","小山 樹人","フロントエンドエンジニア",{"url":23,"height":24,"width":24},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F74ad15c43b6042fe899472eb640b7db8\u002Fkoyama_202310.jpg",512,"静岡県出身。大学卒業後、桑沢デザイン研究所の夜間部でグラフィックデザインを学ぶ。専門誌や教育系の出版物を中心に、約10年間DTP制作の仕事に携わる。Webのフロントエンド開発の分野に興味を持ち、2023年に世路庵に入社。\nデザインと開発の両面からものづくりに携わっていきたい。","yamageji",{"url":28,"height":29,"width":30},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F2dbe9de6255846879e883613d635df9c\u002Fv-tokyo-meetup-22.png",720,1280,{"fieldId":32,"type":33},"ogpImage",[34],"タイプ1（タイトルのみ）",1776401665104]