blog.kzhrk.com

GitHub Logo

v-tokyo 20 に参加した

2024 年 5 月 28 日に東銀座の PLAID さんで開催された v-tokyo 20 に参加してきた。
v-tokyo は Vue.js 日本ユーザーグループが不定期（3 ヶ月に 1 回？）に開催している Vue の Meetup イベントだ。
頭がフレッシュなうちに参加レポートを残す。

headless な UI ライブラリを選択する

会場スポンサーの PLAID さんのセッション。

Headless UI ライブラリの説明からはじまって、Vue 向けの Headless UI ライブラリの Radix Vue を使って社内で Vue 版のデザインシステムを作成しているという話だった。

PLAID さんの社内には Sour というデザインシステムがあって、それの Vue 版を Radix Vue で実装しているらしい。
Sour のことは検索してもあまりアウトプットされていなかったので PLAID さんにはブログで Sour についてアウトプットしてもらいたいなあなどと思った。

Sour のことがアウトプットされているブログを見つけたけど実態があまりわかっていない。

@plaidev/sour-react というネームスペースでプライベートで開発されている React の UI ライブラリをベースに Vue 版をつくっているということだろうか。
スタイルが Vue と React で 2 重管理にならない工夫とかしているのか気になった。

Vue で使える Headless UI は Headless UI と Radix Vue があるが、両者を比較すると Radix Vue の方が提供機能が多いというのが技術選定の決め手になったというのも有益な情報だった。

What is Vue.js? Hmm… It’s just language lol

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

chibivue を開発しているうぶげさんの LT。
16 進数の値をどうにかするのがプログラム言語だという低レイヤーの話から、アセンブリをはじめとした言語ってなんで必要なんだっけ？　と展開して、開発者がよりよい体験を求めるものが言語であると定義すれば Vue.js も一種の言語なのではないかという提言は興味深かった。

ちょっとしたリアクティブユーティリティのご紹介

スライド: https://docs.google.com/presentation/d/1uYjxkjN-aPPMkpTftaM-QUQr0OE9XJv2EOwQniurC0c/edit#slide=id.p

親コンポーネントから子コンポーネントに props として渡した値をリアクティブにするときの注意点と、その解決策に関するお話。

const props = defineProps({
	foo: {
		type: Object,
		default: () => ({}),
	},
});
const localFoo = ref({ ...props.foo });

と書いたときに親コンポーネントで更新された props.foo がリアクティブにならない問題は Vue を書いているときに度々直面する問題だ。
対策としては、

watch(
	() => props.foo,
	() => {
		localFoo.value = props.foo;
	},
	{ deep: true }
);

と Vue の watch を実装することになる。実際に自分もこの手のコードはよく記述する。

  • props を ref にする
  • props を watch する

という 2 つを処理してくれる forkRef を用意して処理を簡易化していた。頻繁に記述しがちな処理なので util 関数的なものを用意するのはよいアプローチだと思う。

LT 後の質問時間に kazupon さんからコンポーネントの外側で watch をするとメモリーリークするおそれがあるから effectScope を使った方がよいというアドバイスも有益だった。

vuejs/language-tools を知っていますか？

スライド: https://tsukuha.github.io/v_tokyo20/1?timestamp=2024-05-28-17-00

vuejs/language-tools がどのように開発者の DX に貢献しているかというお話。

vue-tsc で型チェックをする以外でも、普段の Vue の開発において言語サーバーとして vuejs/language-tools が如何に活躍しているかというのが丁寧に説明されていた。
IDE の裏側で動いている言語サーバーによって Vue の開発体験がよくなっている話は説明されないと気づきにくいのでそこを言語化しているのがよかった。

Nuxt Server と$fetch を組み合わせた TypeScript 開発体験

スライド: https://speakerdeck.com/kspace/nuxt-serverto-fetchwo-zu-mihe-wasetatypescriptkai-fa-ti-yan

TypeScript で Nuxt Server と $fetch を使って API を型補完を効かせていい感じに実装するというお話。

これを書いているブログも Nuxt Server を使って SSG をしていたりするが、Nuxt Server という名称を認識していなかったので、ああこれがそうなのかと再認識した。
ブログではマークダウンファイルを node:fs で取得して一覧化する GET API しか作っていないので test.get.ts のようなファイル名でメソッド名を縛れることを知ることができた。

Nitro の config で（experimental ではあるが）OpenAPI のドキュメントを書き出せるオプションがあるのも知らなかった。

Nuxt DevTools 101

スライド: https://speakerdeck.com/nozomuikuta/nuxt-devtools-101

Nuxt v3.9.0 から利用可能になった Nuxt DevTools の紹介。

Nuxt 3 は開発者体験がよいが、その体験のよさは Nuxt 3 の高度な抽象度によるものであり、抽象度が高いものは理解が難しいという説明は非常に腑に落ちる話だった。
抽象度が高い技術は魔法と変わらない（理解ができない）ので、その魔法を解くためのツールとして Nuxt DevTools が提供されているという説明もよかった。

Nuxt DevTools はインストールされている Plugins の一覧化できたり、コンポーネントの依存関係の可視化できたり、立ち上げている Nuxt の画面からコンポーネントを選択して VSCode を開いたり、設定されている環境変数が一覧ができたり、vue-router や emits のタイムラインが見れたり、他にも様々な機能がある。

すでに v1 系として stable リリースされているが、微妙に動作不良を起こしていたり UI がイケていなかったりする。しかし、開発を補助してくれる十分な機能を提供してくれているので Nuxt v3.9+ であれば有効化して Nuxt 3 の魔法を解くツールとして活用してきたい。

懇親会

昨年の Vue Fes Japan 2023 でスポンサーセッションをしたときにご対応いただいた日本 Vue.js のスタッフの方に挨拶できたのが非常によかった。

他にも Vue でアクセシビリティを頑張りたいけどどうしたらいいかわからないと話していただいた方に「a11y の eslint plugin を導入して新規コンポーネントに lint を効かせるところからはじめるのが良さそう」と話したら甚く感謝された。こういう話を雑にできるのがオフラインイベントのいいところだ。

久しぶりに v-tokyo に参加したけど、次回もまた参加したいと思えるイベントだった。