Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
5分で分かる React Aria の 良いところ・これからなところ
Search
mattsu-
August 23, 2024
Technology
5
4.1k
5分で分かる React Aria の 良いところ・これからなところ
フロントエンドカンファレンス北海道2024 (2024/08/24) でのスポンサー LT 資料
https://fortee.jp/frontend-conf-hokkaido-2024
mattsu-
August 23, 2024
Tweet
Share
More Decks by mattsu-
See All by mattsu-
React Aria で実現する次世代のアクセシビリティ
ryo_manba
4
1k
アクセシブルなインクリメンタルサーチを作ってみた
ryo_manba
2
300
Next.js の fetch 拡張とキャッシュ機構の違いを理解する
ryo_manba
3
890
React Spectrum Libraries によるアクセシブルなUIの構築
ryo_manba
0
3k
Other Decks in Technology
See All in Technology
Swift Testingのconfirmationを コードリーディング/Dive into Swift Testing confirmation
laprasdrum
1
180
より快適なエラーログ監視を目指して
leveragestech
3
840
Envoy External AuthZとgRPC Extensionを利用した「頑張らない」Microservices認証認可基盤
andoshin11
0
210
忙しい人のためのLangGraph概要まとめ
__ymgc__
1
120
Oracle Exadata Database Service(Dedicated Infrastructure):サービス概要のご紹介
oracle4engineer
PRO
0
9.5k
Privacy Sandbox on Android / DroidKaigi 2024
7pairs
1
120
Monitor GraalVM Native Apps with OpenTelemetry
logico_jp
0
120
HolidayJp.jl を作りました
mrkn
0
120
contenteditableと向き合う
kikuchikakeru
2
250
Oracle Autonomous Database:サービス概要のご紹介
oracle4engineer
PRO
1
6.9k
FastConnect の冗長性
ocise
0
7.2k
なにもしてないのにNew Relicのデータ転送量が増えていたときに確認したこと
tk3fftk
2
150
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
Become a Pro
speakerdeck
PRO
22
4.9k
Debugging Ruby Performance
tmm1
72
12k
Designing with Data
zakiwarfel
98
5k
Building an army of robots
kneath
302
42k
The Pragmatic Product Professional
lauravandoore
31
6.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
28
1.6k
Teambox: Starting and Learning
jrom
131
8.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.5k
Ruby is Unlike a Banana
tanoku
96
11k
Making the Leap to Tech Lead
cromwellryan
128
8.8k
Transcript
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/ ご応募お待ちしております