Speaker

従来はJavaScriptライブラリに頼っていたUIの一部が、今は生のHTMLとCSSで書けるようになってきました。新しいHTMLとCSSを使うことで、少ないコードでシンプルに書ける場面が増えています。本セッションでは、次の機能を紹介します。

・dialog、popover、カスタマイズ可能なselect、CSSカルーセル

・command / commandfor属性

・@starting-style、transition-behavior: allow-discrete

・sibling-index()、attr()

・target-current疑似クラス

・アンカーポジショニング

・スクロール駆動アニメーション

JavaScriptで自前実装すると、アクセシビリティー、連打防止、フォーカス管理、開閉中の状態など、ケアすべきことが多くなります。ブラウザ標準の機能を使うことで、こうした処理の一部をHTML/CSSに任せられることが利点です。

■題材を選んだ理由

筆者は、ICS MEDIAというオウンドメディアでウェブの最新機能を取り上げ、解説記事を公開してきました。記事用のオリジナルデモを作るなかで、昔（2018年頃）はVue.jsの<TransitionGroup>などで四苦八苦していたモーダルUIの開発が、今はdialog要素、command属性、@starting-styleなどで素直に書けることに驚きました。この体験が、本セッションの出発点です。

■具体例

ハンバーガーメニューを題材とし、dialog要素を中心とした実装方法を紹介します。

https://ics.media/entry/260527/

よく見かけるUIでも、新しい技術が複合的に役立つことを解説します。

■参加者が持ち帰れる知見

・最新HTML/CSSで作れるUIの範囲

・JavaScriptを書かずに済む部分、書くべき部分の見極め

・Vue.jsやReactなどの状態管理と組み合わせるときの注意点