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
280
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.2k
Other Decks in Technology
See All in Technology
今!ソフトウェアエンジニアがハードウェアに手を出すには
mackee
11
4.6k
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
170
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3k
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
6
760
ChatGPTとPlantUML/Mermaidによるソフトウェア設計
gowhich501
1
130
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
370
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
210
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
1
360
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
160
オブザーバビリティが広げる AIOps の世界 / The World of AIOps Expanded by Observability
aoto
PRO
0
350
バッチ処理で悩むバックエンドエンジニアに捧げるAWS Glue入門
diggymo
3
190
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
220
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Gamification - CAS2011
davidbonilla
81
5.4k
It's Worth the Effort
3n
187
28k
Being A Developer After 40
akosma
90
590k
Producing Creativity
orderedlist
PRO
347
40k
Practical Orchestrator
shlominoach
190
11k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
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/ ご応募お待ちしております