第1回
React Ariaとは
第一回目はReact Ariaとはどのようなものか、どのように役立てていけるのか、そのイメージを掴みます。独自実装では見落としがちなアクセシビリティ、ユーザビリティを担保しつつ、独自のスタイルを付与できます。
目次
シェア
React Ariaとは
Reactは多くのWebアプリケーションで利用されています。
Webアプリケーションは、UIコンポーネントの集まりによって構成されていますが、世の中にある制作会社の多くは、それぞれがWebアプリケーションを作るたびに、あるいはデザインシステムを構築するたびに、「車輪の再発明」のごとく、似た機能のUIをプロジェクトごとに作ります。
テキスト入力程度であれば、HTMLのinput要素にスタイルを適用すれば、自社のブランドにあった見た目のテキスト入力UIを作ることができます。一方で、もう少し複雑なUI（たとえば、コンボボックスなど）になるとそうは行きません。
あなたはこれまで何回、独自ドロップダウンUIを作ったことがありますか？
React Ariaは、ちょっと複雑なUIの素（もと）を提供してくれるライブラリ群です。HTMLのinput要素にスタイルを適用するかのように、React Ariaのコンポーネントにスタイルを適用することで自社のブランドにあったポップオーバー、コンボボックス、カレンダー入力などが作れるのです。
大きな画像React AriaはヘッドレスUIの一種です。似たようなライブラリとしては、Radix UIやHeadless UIなどがあります。React Ariaはそれらの比較対象となるであろうライブラリよりも、UIコンポーネントの種類が多く提供されています。
また、コンポーネント自体ではなく、自分で好きにReact Ariaのコンポーネントの「機能のみ」を取り出せる「機能Hooks」も提供しています。React AriaのHooksを使えば、React Aria相当の機能を、好きな構造のJSXに付与できます。
要件に応じて、お手軽なコンポーネントと、よりカスタマイズしやすいHooksを使い分けられるわけです。
アクセシビリティ、ユーザビリティの担保
React Ariaはその名前のとおり、アクセシビリティにも注力したライブラリです。React Ariaのコンポーネントは、「ARIA Authoring Practices Guide」に沿って適切なrole属性、aria属性やその他のHTML属性（disabledなど）やキーボード対応、フォーカス管理が自動で付与されます。
ですから、あなたがアクセシビリティに自信がなくてもReact Ariaはそれを補ってくれるわけです。また、勘違いによる「間違ったアクセシビリティ」も防げます。
React Ariaを使うことで、UIに合ったキーボード操作も自動付与されます。マウスや指など、ポインティングデバイスが使えないユーザーへの配慮はもちろんですが、画面操作にキーボード利用を好む上級者にもうれしい機能です。たとえば、「モーダルはescキーで閉じたい」「ドロップダウンリストは矢印キーで項目選択したい」というユーザーもケアできます。
また、React Ariaはフォーカスの管理もしてくれます。モーダルを開いているとき、タブキーを連続して押すとモーダルの外にフォーカスしてしまう、なんていう心配もありません。
そして、カスタマイズしやすく、コンポーネントの見た目はスタイルで自由に変えられます。
React Spectrumというライブラリ群
React Ariaの具体的な使い方に入る前に、その位置づけを知っておきましょう。React Ariaは、Adobeによって提供されているReact Spectrumライブラリ群を構成するうちの一つです。
「Spectrum」はAdobeのデザインシステムであり、React SpectrumはそのReact実装です。そこから、「Adobeのデザイン」を取り除いた状態のライブラリがReact Ariaというわけです。
大きな画像図をみるとわかるように、上層から次のような体系になっています。
- React Spectrum：Adobeのデザインシステムで利用する具体的なコンポーネント
- React Aria Components：応用して使える抽象的なコンポーネント
- React Aria（Behavior Hook）：ユーザー操作に関する機能に応じて、要素に適用される属性（
roleやariaなど）や値を提供。コンポーネントと状態をつなぐ役割を担う - React Stately（State Hook）：状態に関する機能のみを提供
ヘッドレスUIとして自分のプロジェクトで利用したい場合は、まずは、React Aria Componentsで提供されているコンポーネントを利用してみると良いでしょう。コンポーネントでは要件を満たせない場合にはHooksを利用することで、より柔軟なカスタマイズもできます。
「Adobe」というと、PhotoshopやIllustratorなどのアプリケーションで有名なベンダーですので、使用条件や費用が気になる人もいるかもしれませんが、その点は心配ありません。
大きな画像React Ariaは無料で使えるオープンソースのライブラリでありApache2.0ライセンスで公開されています。そして、ここまでの解説のとおり、高機能でカスタマイズもしやすいReact用UIライブラリです。
実際にReact Ariaを使ってみましょう。コンポーネントを使う例とHooksから組み立てる例をそれぞれ解説していきます。
補足：Apache2.0ライセンスの要約
Apach2.0ライセンスに馴染みのない方も多いと思うので、少し補足しておきます。このライセンスのポイントは、以下です。
- 無料で利用可
- 商用利用可
- 再配布可
- 改変可
- ライブラリに含まれる特許も利用可
- ライセンスを消してはいけない
- 変更を明示
- 無保証（MITライセンスと同様）
気になるのが「変更を明示」という項目だと思われます。元ソースコードに対して変更をした場合、コメントなどで変更の旨を残す必要があります。ただし、React Aria自体を変更しなければ気にする必要はありません。"react-aria"からexportされたコンポーネントにclassNameを付与するなど、普通に利用することは変更には該当しないため「変更を明示」する必要はありません。
ドキュメントを読み解く
React Aria Componentsをお手軽に利用をする準備として、今回はドキュメントの使い方を解説します。
React Ariaのドキュメントページの左ナビゲーションから「Components」を開くと、コンポーネントの一覧を確認できます。
大きな画像一覧の長さから、多種のコンポーネントが提供されていることがわかります。次回以降、React Aria Componentsを使って、「モーダル」と「数値入力」をそれぞれ作ってみる予定です。
React Ariaのコンポーネントを利用する際、コンポーネントの詳細ドキュメントは使い方や構造を知る上で役に立ちます。ドキュメントはつまり説明書です。ここではModalコンポーネントを例に、ドキュメントを流し読みするコツを解説します。
React Aria Componentsのドキュメントサイトの左ナビゲーションの下部からComponentsのトグルを開き、Modalの詳細ページに移動してみましょう。
Modal詳細ページでは該当のコンポーネントについてがまとめられています。
冒頭には、ソースコードへのリンクがありますので、「内部で何をしているんだろう、コードを見てみたい」と思った際に役に立ちます。
大きな画像ページ内のそれ以降の章には使い方例がコード付きで、いくつか示されています。求めている機能に近い例を探し、そのコードをコピーし、独自にCSSを割り当てるだけで使えます。
大きな画像使い方例の次には、コンポーネントが受け取れるPropsが一覧されています。これらの値を使って、機能をさらにカスタマイズできるわけです。
大きな画像Propsの章の次に、Stylingの章があり、そこではCSSによる見た目の付け方が解説されています。基本的には、コンポーネントのclassName値に任意のクラス名を入れて使えばいいのですが、状態に対するクラス名、アニメーションの管理のクラス名などは、この章を参考にすると良いでしょう。
大きな画像ページの終わりには、Hooksで組み立てたい場合へのリンクもありますが、これについては次回以降の記事で解説の予定です。
基本的には、どのコンポーネントの詳細ドキュメントも似た流れの構成で読み進めることになります。
ここまでのまとめ
今回はReact Ariaの概要と、Modalの機能を例に、ドキュメントの使い方を見ました。次回は、React Aria ComponentsのModalを使って「開閉状態を自分で管理できるモーダル」を実装してみます。
