新しいブラウザ機能とReactの必要性

最近のブラウザ機能の進歩は目覚ましく、Reactを使わなくても、あるいはほとんどJavaScriptを書かなくても多機能なUIが作りやすくなっています。重厚なJavaScriptを使わなくても、ブラウザの機能だけで優れたUIが作れます¹。加えてReactのUIライブラリを使用するとライブラリのバージョン更新が必要になりますが、ネイティブなブラウザ機能を使用する場合はその心配もありません。

HotwireでUIを作る際は最新のブラウザ機能に注目し、使えるものは積極的に活用することを強くお勧めします。最新のブラウザ機能が利用できると書くコードが減り、かつ高い保守性が得られます。

以下では特に有用なものをいくつかピックアップしました。

<dialog>

<dialog>でモーダルや確認ダイアログを簡単に作れます。背景の操作禁止やフォーカスまわりもブラウザが面倒を見てくれます。::backdropでオーバーレイもスタイルできるため、昔よりはるかに少ないコードで実用的なモーダルが組めます。

<details> / <summary>

<details> / <summary>でアコーディオンUIを標準HTMLだけで作れます。<details name="...">でアコーディオンの排他制御までできます。

popover

popover属性でメニューやオーバレイが作れます。ドロップダウンメニュー、ヘルプ吹き出し、簡易メニューのようなUIはpopoverで扱いやすくなりました。Escや外側クリックで閉じるような「light dismiss」も標準で備わっていて、divを絶対配置して自前制御する必要が減ります。またpopovertargetでトリガーとポップオーバーをHTMLだけで結びつけられます。

View Transitions API

View Transitions APIで画面遷移や状態変化のアニメーションが作れます。一覧から詳細へ、タブ切り替え、並び替え、SPA/MPA間の遷移などを、少ない実装で滑らかに見せられます。

CSS Anchor Positioning

CSS Anchor Positioningでツールチップやメニューの位置合わせが楽になりました。ボタンに対してツールチップをくっつける、入力欄に対して補助UIを追従させる、といった処理は昔から地味に大変でした。新しいAnchor Positioningを使うと、要素同士を関連づけて位置決めしやすくなり、オーバーフロー時の逃がし方までCSSで扱えるようになってきています。

Client-side validation

HTML標準のClient-side validationはrequired、type="email"、minlength、patternなどを付けるだけで、多くの入力チェックをブラウザ標準で任せられます。Constraint Validation APIを使えば、checkValidity()やreportValidity()、setCustomValidity()で振る舞いも拡張できるため、バリデーションライブラリなしでも十分に組めます。また擬似CSSのuser-valid user-invalidにより、UI/UX的に最適なタイミングでエラーを表示できます。

:has()

:has()で親要素や周辺要素の状態をCSSだけで扱いやすくなリマした。

Scroll-driven Animations

Scroll-driven Animationsでスクロール連動UIをCSS主体で書けるようになりました。スクロール進捗バー、読み進めに応じたアニメーション、要素が見えてきたタイミングでの演出などを、JavaScriptのスクロール監視より自然に書けるようになってきました。

content-visibility

content-visibilityで重い画面を軽くしやすくなりました。長いリストや下の方にある重いセクションを、必要になるまで描画コストを抑えて扱えます。JavaScriptの仮想リストや細かい最適化に頼らなくても、初期表示を速くしやすくなっています。

:open, :popover-open

:openや:popover-openなどの状態セレクタが便利です。開いているdetails、表示中のpopover、開いているselectなどに対してCSSを当てやすくなりました。JavaScriptでclassを付け外ししなくても、UIの状態をそのまま見た目に反映しやすくなっています。