5分で分かる React Aria の良いところ・これからなところ

5分で分かる React Aria の良いところ・これからなところまっつー / @ryo_manba 2024/08/24 フロントエンドカンファレンス北海道
サイボウズスポンサーLT

自己紹介まっつー • サイボウズフロントエンドエンジニア • NextUI チームメンバー • React
Aria コントリビューター • 𝕏: @ryo_manba • GitHub: @ryo-manba

React Aria とは • Adobe が提供する Headless UI ライブラリ •
モバイルデバイスや支援技術の振る舞いもサポート

React Aria の活用事例 • Apple の iCloud で一部使用されている • デジタル庁のデザインコンポーネントで、React
Aria が推奨されている（他に Radix UI など） • サイボウズでも導入経験あり https://blog.cybozu.io/entry/2024/05/22/090000

React Aria の良いところ

React Aria の良いところ：アクセシビリティ対応 • W3C の ARIA Authoring Practices Guide
(APG) に従って、セマンティクスと振る舞いをサポート • macOS, Windows, iOS, Android などのデバイスと複数のスクリーンリーダーによるテストを実施

コンテキストを利用して柔軟に機能追加できる React Aria の良いところ：拡張性に優れている

• hooks を使用して独自のを DOM 構造を定義可能 • より高度なカスタマイズが行える React
Aria の良いところ：拡張性に優れている

React Aria の良いところ：マルチデバイスサポート • マウス、タッチ、キーボードなどの操作に最適化 • タッチデバイス ◦ ホバーのスタイルを適用させない ◦
インタラクティブな要素を長押しても、選択モードに入らせない • キーボード ◦ タブキーや矢印キーでの移動をサポート ◦ オーバーレイ要素のフォーカスをその中に留める

• 企業プロジェクトとしての安定性がある • メンバーが issue にコメントを返してくれる • PR
レビューは素早く、フレンドリーな人が多い React Aria の良いところ：安定した開発

React Aria のこれからなところ

React Aria のこれからなところ：IME 対応 IME 入力中に Combobox のポップオーバーが開閉を繰り返す挙動の改善が検討されている

React Aria のこれからなところ：未実装の対応 • 高品質を維持するため、新規コンポーネントの実装には時間がかかることがある • GitHub Projects で進行状況は確認できる

宣伝

フロントエンドネタの共有会 Frontend Weekly 一週間にあったフロントエンドニュースを共有する会社内で行った会の内容を Zenn で公開！ https://zenn.dev/topics/cybozufrontendweek チョットワカルようになるかも

サイボウズの採用情報フロントエンドエンジニア & デザインテクノロジスト募集しています！ https://cybozu.co.jp/recruit/entry/ ご応募お待ちしております

5分で分かる React Aria の良いところ・これからなところ

5分で分かる React Aria の良いところ・これからなところ

mattsu-

More Decks by mattsu-

Other Decks in Technology

Featured

Transcript