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
CSS Linter の現在地 2025年のベストプラクティスを探る
ryo_manba
11
3.4k
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
320
React Aria で実現する次世代のアクセシビリティ
ryo_manba
5
2.8k
アクセシブルなインクリメンタルサーチを作ってみた
ryo_manba
2
510
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
新規事業におけるGORM+SQLx併用アーキテクチャ
hacomono
PRO
0
280
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
930
ニッポンの人に知ってもらいたいGISスポット
sakaik
0
150
Introduction to Bill One Development Engineer
sansan33
PRO
0
300
OAuthからOIDCへ ― 認可の仕組みが認証に拡張されるまで
yamatai1212
0
120
AgentCon Accra: Ctrl + Alt + Assist: AI Agents Edition
bethany
0
110
JAZUG 15周年記念 × JAT「AI Agent開発者必見:"今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
shisyu_gaku
1
160
Findy Team+ QAチーム これからのチャレンジ!
findy_eventslides
0
200
Railsの話をしよう
yahonda
0
140
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
140
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
720
AWS IoT 超入門 2025
hattori
0
340
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
8
910
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Making Projects Easy
brettharned
120
6.4k
Building Applications with DynamoDB
mza
96
6.7k
Raft: Consensus for Rubyists
vanstee
140
7.1k
The Invisible Side of Design
smashingmag
302
51k
Unsuck your backbone
ammeep
671
58k
BBQ
matthewcrist
89
9.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/ ご応募お待ちしております