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/ ご応募お待ちしております