UI 開発における ヘッドレス UI ライブラリの重要性とデザインシステムへの取り入れ方

昨今の Web 開発における UI はますます複雑化し、アクセシビリティの重要性が高まっています。ブラウザの標準機能だけでは実現できない複雑な UI を実装する際、アクセシビリティに関する誤った実装が原因で、ユーザー体験を損なう可能性があります。ヘッドレス UI ライブラリは、あらかじめアクセシビリティに配慮されたコンポーネントを提供することで、開発者がこれらの問題に悩まされることなく、高品質な UI を構築できるようになります。本セッションでは、ヘッドレス UI ライブラリを活用し、デザインシステムの一部として、アクセシブルでカスタマイズ可能な UI を構築する方法を紹介します。

Transcript

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