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.4k
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 の現在地 2025年のベストプラクティスを探る
ryo_manba
10
3.3k
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
310
React Aria で実現する次世代のアクセシビリティ
ryo_manba
5
2.8k
アクセシブルなインクリメンタルサーチを作ってみた
ryo_manba
2
500
Next.js の fetch 拡張とキャッシュ機構の違いを理解する
ryo_manba
6
1.7k
React Spectrum Libraries によるアクセシブルなUIの構築
ryo_manba
0
4.2k
Other Decks in Technology
See All in Technology
英語は話せません!それでも海外チームと信頼関係を作るため、対話を重ねた2ヶ月間のまなび
niioka_97
0
110
20250929_QaaS_vol20
mura_shin
0
110
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
140
extension 現場で使えるXcodeショートカット一覧
ktombow
0
210
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
520
組織観点からIAM Identity CenterとIAMの設計を考える
nrinetcom
PRO
1
170
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
3
330
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
flatt_security
7
1.8k
生成AIを活用したZennの取り組み事例
ryosukeigarashi
0
200
OCI Network Firewall 概要
oracle4engineer
PRO
1
7.8k
Function calling機能をPLaMo2に実装するには / PFN LLMセミナー
pfn
PRO
0
910
What is BigQuery?
aizack_harks
0
130
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Why Our Code Smells
bkeepers
PRO
339
57k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Building Applications with DynamoDB
mza
96
6.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Building Adaptive Systems
keathley
43
2.8k
The Language of Interfaces
destraynor
162
25k
Side Projects
sachag
455
43k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
It's Worth the Effort
3n
187
28k
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/ ご応募お待ちしております