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
mattsuu
August 23, 2024
Technology
5
6.3k
5分で分かる React Aria の 良いところ・これからなところ
フロントエンドカンファレンス北海道2024 (2024/08/24) でのスポンサー LT 資料
https://fortee.jp/frontend-conf-hokkaido-2024
mattsuu
August 23, 2024
Tweet
Share
More Decks by mattsuu
See All by mattsuu
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
270
React Aria で実現する次世代のアクセシビリティ
ryo_manba
5
2.7k
アクセシブルなインクリメンタルサーチを作ってみた
ryo_manba
2
480
Next.js の fetch 拡張とキャッシュ機構の違いを理解する
ryo_manba
6
1.6k
React Spectrum Libraries によるアクセシブルなUIの構築
ryo_manba
0
4.1k
Other Decks in Technology
See All in Technology
データ基盤の管理者からGoogle Cloud全体の管理者になっていた話
zozotech
PRO
0
370
Claude Codeが働くAI中心の業務システム構築の挑戦―AIエージェント中心の働き方を目指して
os1ma
9
1.6k
【Λ(らむだ)】最近のアプデ情報 / RPALT20250729
lambda
0
230
AIに目を奪われすぎて、周りの困っている人間が見えなくなっていませんか?
cap120
1
440
バクラクによるコーポレート業務の自動運転 #BetAIDay
layerx
PRO
1
870
大規模イベントに向けた ABEMA アーキテクチャの遍歴 ~ Platform Strategy 詳細解説 ~
nagapad
0
190
AI時代の経営、Bet AI Vision #BetAIDay
layerx
PRO
1
1.8k
AIのグローバルトレンド 2025 / ai global trend 2025
kyonmm
PRO
1
120
AIエージェントを現場で使う / 2025.08.07 著者陣に聞く!現場で活用するためのAIエージェント実践入門(Findyランチセッション)
smiyawaki0820
6
740
S3 Glacier のデータを Athena からクエリしようとしたらどうなるのか/try-to-query-s3-glacier-from-athena
emiki
0
190
MCP認可の現在地と自律型エージェント対応に向けた課題 / MCP Authorization Today and Challenges to Support Autonomous Agents
yokawasa
5
1.9k
LIFF CLIとngrokを使ったLIFF/LINEミニアプリのお手軽実機確認
diggymo
0
240
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
73
5k
Six Lessons from altMBA
skipperchong
28
3.9k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Statistics for Hackers
jakevdp
799
220k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.7k
Become a Pro
speakerdeck
PRO
29
5.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Designing Experiences People Love
moore
142
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Building Adaptive Systems
keathley
43
2.7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
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/ ご応募お待ちしております