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

フロントエンドカンファレンス北海道2024 (2024/08/24) でのスポンサー LT 資料
https://fortee.jp/frontend-conf-hokkaido-2024

Transcript

1. 5分で分かる React Aria の 良いところ・これからなところ まっつー / @ryo_manba 2024/08/24 フロントエンドカンファレンス北海道 サイボウズ スポンサーLT
2. 自己紹介 まっつー • サイボウズ フロントエンドエンジニア • NextUI チームメンバー • React Aria コントリビューター • 𝕏: @ryo_manba • GitHub: @ryo-manba
3. React Aria とは • Adobe が提供する Headless UI ライブラリ • モバイルデバイスや支援技術の振る舞いもサポート
4. React Aria の活用事例 • Apple の iCloud で一部使用されている • デジタル庁のデザインコンポーネントで、React Aria が 推奨されている（他に Radix UI など） • サイボウズでも導入経験あり https://blog.cybozu.io/entry/2024/05/22/090000
5. React Aria の良いところ
6. React Aria の良いところ：アクセシビリティ対応 • W3C の ARIA Authoring Practices Guide (APG) に従っ て、セマンティクスと振る舞いをサポート • macOS, Windows, iOS, Android などのデバイスと複数 のスクリーンリーダーによるテストを実施
7. コンテキストを利用して柔軟 に機能追加できる React Aria の良いところ：拡張性に優れている
8. • hooks を使用して独自の を DOM 構造を定義可能 • より高度なカスタマイズが行 える React Aria の良いところ：拡張性に優れている
9. React Aria の良いところ：マルチデバイスサポート • マウス、タッチ、キーボードなどの操作に最適化 • タッチデバイス ◦ ホバーのスタイルを適用させない ◦ インタラクティブな要素を長押しても、選択モードに入らせない • キーボード ◦ タブキーや矢印キーでの移動をサポート ◦ オーバーレイ要素のフォーカスをその中に留める
10. • 企業プロジェクトとしての 安定性がある • メンバーが issue にコメント を返してくれる • PR レビューは素早く、 フレンドリーな人が多い React Aria の良いところ：安定した開発
11. React Aria のこれからなところ
12. React Aria のこれからなところ：IME 対応 IME 入力中に Combobox のポップオーバーが開閉を繰り返 す挙動の改善が検討されている
13. React Aria のこれからなところ：未実装の対応 • 高品質を維持するため、新規コンポーネントの実装には 時間がかかることがある • GitHub Projects で進行状況は確認できる
14. 宣伝
15. フロントエンドネタの共有会 Frontend Weekly 一週間にあったフロントエンドニュースを共有する会 社内で行った会の内容を Zenn で公開！ https://zenn.dev/topics/cybozufrontendweek チョットワカルように なるかも
16. サイボウズの採用情報 フロントエンドエンジニア & デザインテクノロジスト 募集しています！ https://cybozu.co.jp/recruit/entry/ ご応募お待ちしております