(速報版) 卒論を終えたM1が Vue Fes Japan 2026 にお邪魔した話

TL;DR

• 去年に続いて、学生支援制度で Vue Fes Japan 2026 に参加しました
• デザインプロセスにおける AI と人間の役割分担についての発表が2つあって、思想の違いを感じました
• ハンズオンで Vue の reactivity を自分で組んだら、昔の自分の実装を思い出して辛くなりました

昨年初めてのテックカンファレンスとして Vue Fes Japan 2025 にお邪魔し、今年は2回目の参加です。

聴講メモ (むっちゃ簡単に...)

デザインを開発する ～Vueで実現するデザインプロセス改善～: 竹井啓さん

LLM がデザインを大量に生成できるようになったが、この棲み分けとして、ルールにできるもの(コンポーネント、ガイド、design tokens)は自動化し、ブランドとの整合性や気持ちよさは人間が判断する、という分け方について語られていました。プロトタイプにピンを打って指摘する仕組みを作っていたところ、Claude の Artifact で代わりが効くようになった、という話もあって後発品に食われるケースもあるのだな...と思っていました。

実は自分も、当日に使うタイムテーブルと会場地図のページを AI と作っていました(マイタイムテーブル機能を活用したうえで)。表示したい情報や操作や動線は一定プロンプトに入れつつ、アニメーションの細かい動きや地図のズームインなどの実装・表現手法については AI に任せて、あとは自分で善し悪しを判断するというやり口をとっていました。人間が判断する側を残す、という分け方は意外と共通するのだなと思います。

契約で守るコンパウンドプロダクトのデザインシステム: 山口祐司さん

UI の部品を建物にたとえた6段階(room、furniture、partition、equipment、structure、decor)に分け、下の段から上の段への import については dependency-cruiser でエラーにする、というお話でした。 UIや機能の実装について、依存の方向をlinterで制限するやり口については心当たりがあって -- 某社のインターンシップで学んだ、atom などの下層を上層に依存させない作り方や、Clean Architecture の依存の向きと同じ考え方を教わったなと思い出していました。この考え方を UI にもそのまま当てはめてやる考えが合理的だなと観じていました。

ハンズオンで reactivity を組む

ハンズオンでは、createApp から仮想 DOM、そして Proxy を使った reactivity までを自分で組みました。簡易な実装ではありますが、プロパティに読み出しがある場合には読み出し元を記録し、書き込みがある場合には、事前に登録された処理(onChange や getter のような考え方)を呼び直す仕組みです。

むかし、一切のライブラリを使わない js で、それこそ Proxy なんて知らんという時期に時間割アプリを作っていた経験があります。この時間割の編集画面で「教科」を変更する操作ができますが、ユーザーがこの操作をしたら画面のDOMを吹っ飛ばしながら localStorage にもこの時間割データを保存したいという要件を考えていました。過去は Reactivity という考えもなにも知らなかったので、教科の class に setter 的なものを付けて、その setter の中でDOMを吹っ飛ばす処理とlocalStorageに保存する処理を直接呼んでいました。画面上は正しく動きますが、副作用が大きすぎて好ましくない実装だったと今は思います。

一方 Vue はこの「変更があったらどの処理を行うか？」を記録しており (targetMapper)、ユーザーが更新処理を setter に入れ込む必要すらありません。DOM への影響範囲を小さくしながら API を再利用しやすくしていて、クリーンな実装がなされているのだなと思いました。

速報終わり

詳しい話は別途書いていきます。しばしお待ちを... (どうしてもblogを TSKaigi Sendai 2026 前に出したかったので...)

今年も学生支援制度にお世話になりました。Vue Fes の運営の皆さん、スポンサーの皆さん、会場で話してくれた皆さん、ありがとうございました！