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
5.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
React Aria で実現する次世代のアクセシビリティ
ryo_manba
5
2.2k
アクセシブルなインクリメンタルサーチを作ってみた
ryo_manba
2
390
Next.js の fetch 拡張とキャッシュ機構の違いを理解する
ryo_manba
5
1.2k
React Spectrum Libraries によるアクセシブルなUIの構築
ryo_manba
0
3.6k
Other Decks in Technology
See All in Technology
サーバーなしでWordPress運用、できますよ。
sogaoh
PRO
0
170
I could be Wrong!! - Learning from Agile Experts
kawaguti
PRO
8
2.5k
プロダクト組織で取り組むアドベントカレンダー/Advent Calendar in Product Teams
mixplace
0
660
スケールし続ける事業とサービスを支える組織とアーキテクチャの生き残り戦略 / The survival strategy for Money Forward’s engineering.
moneyforward
0
240
ソフトウェア開発における「パーフェクトな意思決定」/Perfect Decision-Making in Software Development
yayoi_dd
2
2.7k
深層学習と3Dキャプチャ・3Dモデル生成(土木学会応用力学委員会 応用数理・AIセミナー)
pfn
PRO
0
410
C++26 エラー性動作
faithandbrave
2
880
開発生産性向上! 育成を「改善」と捉えるエンジニア育成戦略
shoota
2
830
DevFest 2024 Incheon / Songdo - Compose UI 조합 심화
wisemuji
0
250
20241125 - AI 繪圖實戰魔法工作坊 @ 實踐大學
dpys
1
440
The future we create with our own MVV
matsukurou
0
1.5k
12 Days of OpenAIから読み解く、生成AI 2025年のトレンド
shunsukeono_am
0
1k
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
51
7.3k
VelocityConf: Rendering Performance Case Studies
addyosmani
327
24k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Code Review Best Practice
trishagee
65
17k
Statistics for Hackers
jakevdp
797
220k
Optimizing for Happiness
mojombo
376
70k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
550
Side Projects
sachag
452
42k
The Cult of Friendly URLs
andyhume
78
6.1k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Designing Experiences People Love
moore
139
23k
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/ ご応募お待ちしております