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.5k
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
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
160
CSS Linter の現在地 2025年のベストプラクティスを探る
ryo_manba
11
3.5k
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
330
React Aria で実現する次世代のアクセシビリティ
ryo_manba
5
2.9k
アクセシブルなインクリメンタルサーチを作ってみた
ryo_manba
2
510
Next.js の fetch 拡張とキャッシュ機構の違いを理解する
ryo_manba
6
1.7k
React Spectrum Libraries によるアクセシブルなUIの構築
ryo_manba
0
4.3k
Other Decks in Technology
See All in Technology
ソフトウェアエンジニアの生成AI活用と、これから
lycorptech_jp
PRO
0
900
様々なファイルシステム
sat
PRO
0
240
OpenTelemetry が拡げる Gemini CLI の可観測性
phaya72
2
2.2k
オブザーバビリティと育てた ID管理・認証認可基盤の歩み / The Journey of an ID Management, Authentication, and Authorization Platform Nurtured with Observability
kaminashi
1
620
ソースを読むプロセスの例
sat
PRO
15
9.9k
事業開発におけるDify活用事例
kentarofujii
5
1.4k
もう外には出ない。より快適なフルリモート環境を目指して
mottyzzz
13
10k
クラウドとリアルの融合により、製造業はどう変わるのか?〜クラスメソッドの製造業への取組と共に〜
hamadakoji
0
420
「最速」で Gemini CLI を使いこなそう! 〜Cloud Shell/Cloud Run の活用〜 / The Fastest Way to Master the Gemini CLI — with Cloud Shell and Cloud Run
aoto
PRO
1
170
あなたの知らない Linuxカーネル脆弱性の世界
recruitengineers
PRO
3
150
MCP ✖️ Apps SDKを触ってみた
hisuzuya
0
350
デザインとエンジニアリングの架け橋を目指す OPTiMのデザインシステム「nucleus」の軌跡と広げ方
optim
0
110
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
A designer walks into a library…
pauljervisheath
209
24k
Statistics for Hackers
jakevdp
799
220k
Embracing the Ebb and Flow
colly
88
4.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
The Cult of Friendly URLs
andyhume
79
6.6k
Designing for Performance
lara
610
69k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Measuring & Analyzing Core Web Vitals
bluesmoon
9
640
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
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/ ご応募お待ちしております