Vue SFCから見直す正しいHTMLの守り方

セッションの概要

VueのSFCにはtemplateブロックにてHTMLを記述できる構文が備わっていることは周知の事実だと思いますが、Vue.jsを使った開発をするときにどのように「HTMLの正しさ」を検証しているか皆さんは説明できますでしょうか？

VueのSFCにおけるtemplate内ではHTMLの要素間のネスト違反があっても、開発時に警告してきますが明確にコンパイルエラーにはなりません。HTMLの字句的・構文的ルールについても検出されますが、具体的なHTML要素の使い方に関しては関与していません。

本セッションでは、Vue SFCのtemplateブロックで書かれたHTMLの内容をコンパイラがどのように解釈しているかについてを仕組みから紐解き、DOMのコンパイラだけでは保てないHTMLの正しさについてをLinterといった静的解析エコシステム（ESLint、Markuplint、Biome、OxC、Vizeなど）たちによって今現在どのように守れるかについてを紹介します。

HTMLの仕様はLiving Standardとして今なお更新されています。そんなHTMLと正しく向き合いながら、Vue.jsで堅牢なマークアップとHTMLによるアクセシブルなアウトプットを実現できる知見を持ち帰れる内容を提供します。

発表の想定聴衆

Vue.js中級者以上向け

VueのコンパイラやSFCの内部の仕組みを知りたい方

HTMLにおけるLinterエコシステムの状況を知りたい人

HTMLをより正しく使っていきたい人

---

HTMLはWebフロントエンド開発でどのように扱われているのか

HTMLが生まれて37年ほど経っている

yamanoku.iconと同い年

誕生から今に至るまでHTMLは様々な形で活用されている

Webサイト

Webアプリケーション

SSRにおけるハイドレーション比較（正確にはDOM）

UIライブラリ

Vue.js、Svelte、RippleではHTMLを使って宣言的なUIを書くことができる

それぞれをDSLとして扱っている

React、SolidJS、PreactはJSXという形でHTMLのように表現している

どちらかというとXHTML？

OpenUI、Interopの取り組み

HTML Dayも紹介したいyamanoku.icon

Gemini.icon

Vueのコンパイラは優秀ですが、テンプレートは最終的にHyperscript（仮想DOM生成関数）に変換されるため、JavaScriptの関数としては『不正なネスト（例: p > div）』であってもエラーなく通ってしまいます。コンパイラや実行時のVue自身はHTMLのセマンティクスを制御・検証してくれません。だからこそ、ブラウザが意図せぬDOM修正を起こす前に、Linter等の静的解析ツールが『Vueの隙間』を埋め、HTMLの正しさを守る防波堤となる必要があるのです。

守るための機構たち

ハイドレーションミスマッチにおける警告

https://gyazo.com/aed1ec0ceed89abaef4378c49c88375e

ただしHTMLの正しさを保証するものではない（警告なので）

LinterはHTMLの違反をどのように守っているのか

Markuplint

eslint-plugin-vue, eslint-plugin-vuejs-accessibility

Vize

出力後の静的解析、バリデーション

まとめとしてのHTMLを正しく書くためにどうするのかの話

HTMLファーストであることのススメ

Alpine.js、htmxなどの存在