Slide 1
Slide 1 text
UI 開発におけるヘッドレス UI ライブラ
リの重要性とデザインシステムへの取り
入れ方
azukiazusa / JSConf JP 2024
Slide 2
Slide 2 text
自己紹介
● Web アプリケーションエンジニア
● Web フロントエンドが得意
● https://azukiazusa.dev
● 趣味
○ 読書
○ 麻雀
○ ポーカー
azukiazusa
Slide 3
Slide 3 text
UI 開発は難しい
Slide 4
Slide 4 text
UI 開発の難しさ
● ネイティブアプリのような UI が求められている
● ブラウザに組み込まれている UI は非常に少ない
○ `` のようにスタイリングが困難なことも
● 多くの UI は JavaScript を使用して、1 から作り直す必
要がある
● アクセシビリティのため、セマンティクスを失ってはな
らない
Slide 5
Slide 5 text
セマンティクスを保つ
● 1 から作られた UI の多くは `
` 要素で構築される
● `` 要素は button ロールを持っているため、支
援技術にこれはボタンでありクリック可能なことが伝わる
● `
` 要素はロールを持たないため、支援技術にどのよ
うな UI なのか伝わらない
○ WAI-ARIA による適切な意味付けとインタラクション
が必要
Slide 6
Slide 6 text
セマンティクスを保つ
ARIA Authoring Practices
Guide (APG) に UI コンポーネ
ントを実装する際に求められる
role や aria 属性、インタラク
ションが公開されている
Slide 7
Slide 7 text
例えば Tab UI なら
Slide 8
Slide 8 text
例えば Tab UI なら
● ← → キーでタブ間のフォーカスを移動できる
● コンテナ要素には `tablist` ロール
● タブには `tab` ロール
● タブのコンテンツには `tabpanel`
● タブとコンテンツは `aria-controls` で紐づける
● and more…
Slide 9
Slide 9 text
すでに多くの労力が求められていること
がわかるが...
Slide 10
Slide 10 text
無知の無知の問題
1 から UI を作り直す際に、そもそも適切な aria 属性や
インタラクションを実装することが必要な事自体に気が
付かないという問題
Slide 11
Slide 11 text
● 見た目上はタブだと認識できるし、マウスを使って操作
できる
○ これで十分に実装ができていると思ってしまう
● 間違えた role の使い方をしていても、ブラウザがエラー
を報告することない
無知の無知の問題
Slide 12
Slide 12 text
このような問題を解決するための
ヘッドレス UI ライブラリ
Slide 13
Slide 13 text
ヘッドレス UI ライブラリとは
スタイルを持たず
“振る舞い” のみを提供するライブラリ
Slide 14
Slide 14 text
ヘッドレス UI ライブラリ戦国時代
Slide 15
Slide 15 text
スタイルを持たない
React Aria の Menu コンポーネントの場合
ボタンをクリックするとメニュー項目が表
示され、キーボードの矢印キーで項目を
選択できる
Slide 16
Slide 16 text
スタイルを持たない
開発者の手でカスタマイズする
Slide 17
Slide 17 text
振る舞いとは
● クリック・ホバー・フォーカスといった低レベルなイベ
ントから、ボタンをクリックするとメニューが開くと
いった UI を組み合わせた動作まで
● ARIA Authoring Practices Guide (APG) に準拠したセマン
ティクスとキーボード操作
○ アクセシビリティを担保できる
Slide 18
Slide 18 text
ヘッドレス UI ライブラリのメリット
● 同一の UI コンポーネントを 1 から実装する車輪の再発明
を防げる
● プリミティブなパーツとしてヘッドレス UI ライブラリを
使うことで、最低限のアクセシビリティを担保できる
○ とりあえず使っておけば、無知の無知の問題を防げる
Slide 19
Slide 19 text
● React Aria
○ OSS としてコミュニティに共有し Web 全体の水準を高め
ようとしている
● Radix UI
○ 私たちの目標は、コミュニティがアクセシブルなデザイン
システムを構築するために使用できる、十分な資金のある
オープンソースコンポーネントライブラリを作成すること
です。
ヘッドレス UI ライブラリの目的とも一致
Slide 20
Slide 20 text
従来の UI ライブラリとの比較
● 従来の UI ライブラリはスタイリングされた状態で提供さ
れる
● 多くの場合、デザインシステムに合わせたスタイルが必
要になるので、そのまま使えることは少ない
Slide 21
Slide 21 text
従来の UI ライブラリとの比較
● スタイルをカスタマイズことに労力が割かれる
○ ライブラリの実装の詳細を知る必要がある
○ 気がつけば CSS が !important だらけになった経験な
ど...
● デザインの自由度が制約されることも
● ヘッドレス UI ライブラリはカスタマイズ性の高さが利点
で、用意に再利用できる
Slide 22
Slide 22 text
ヘッドレス UI ライブラリを
プロダクトに組み込む
Slide 23
Slide 23 text
コンポーネントライブラリの一部として使う
Slide 24
Slide 24 text
コンポーネントライブラリの一部として使う
● スタイルをカスタマイズされて使われることが前提
○ スタイルが提供されて、初めて誰にでも使いやすい状
態になる
○ 感覚として、HTML タグが拡張されたような感じ
● 統一された UI のデザインを提供する上でも重要
Slide 25
Slide 25 text
ライブラリではなく、
デザインシステムの利用者が
主導権を持てることが重要
Slide 26
Slide 26 text
React Aria のドキュメントでは、再利用可能なコンポーネ
ントの例が提供されている
Slide 27
Slide 27 text
スターターキットや shadcn/ui がコンポーネント設計の
参考になる
Slide 28
Slide 28 text
ドキュメンテーションが重要
● コンポーネントライブラリとしてラップして提供すると
いうことは、自分たちでメンテしていく必要もある
● ドキュメントやガイドラインが整備されていないと、コ
ンポーネントライブラリが浸透していかない
● ライブラリ自体のドキュメントを参照しても、見た目が
一致しないのでわかりづらい
Slide 29
Slide 29 text
● 近年の UI 開発では 1 から 実装する必要があり、アクセ
シビリティのことを考慮にいれると多大な労力がかかる
● ヘッドレス UI ライブラリは高機能なインタラクションを
提供し、Web 全体のアクセシビリティの水準を担保する
● ヘッドレス UI ライブラリをプロダクトに組み込む場合に
は、コンポーネントライブラリの一部として使用すると
良い
まとめ