Adobe Design System の React Spectrum を理解していく ~ Part 1 概要~

はじめに

React を使用したコンポーネントライブラリのコードリーディングをしたいなと思い、Adobe のデザインシステムに組み込まれている React Spectrum を読んでいるので、そのメモを残していく。

1 つの記事にまとめたかったが、コードを読むのに時間がかかるのと、かなり長くなるので分割して残していく。

React Spectrum の概要

本体は Spectrum であり、この思想を生かしたコンポーネントライブラリーとして、React Spectrum がある。

Spectrum の原則は「Rational」、「Human」、「Focused」の 3 つになっており、この原則どおり、アクセシビリティや i18n などを包括的にカバーするように React Spectrum もできている。

React 以外にも CSS だけ取り出してスタイルを当てれるように spectrum-css もある。

今回は React Spectrum の概要だけなぞって、次回からコードを読んだメモを残していく。

React Spectrum の設計

React Spectrum の GitHubにも概要は載っているのですが、React Spectrum の Getting Startedが記述されているほうではなく、別にあるReact Spectrum の Architecture などが記述されている方に詳しい設計論などがある。

React Spectrum は複数の Component で動作を再利用するために、要素 を 下記 3 つに分離している。
すべての Component が下記 3 つの要素構成で成り立っているわけではなく、Component の目的によって必要な要素を使用している。

State Hook

各プラットフォーム(Web,react-native)で状態を共有するためのもの。
テーマやデザインシステム固有のロジックはない、Component から props を受け取り、状態管理をするためのもの。
Component のコアロジックを実装し、Component の状態を読みとって更新するためのインターフェイスを返す。
すべでの Component で使用はしておらず、データ入力可能な Component やユーザーが視覚的に操作(e.g. expanding/collapsing)できる Component が持っている。

Behavior Hook

この hook は platform API (e.g. the DOM or react-native)に依存している。
テーマやデザインシステム固有のロジックはない。event handling,i18n,accessibility などを担う。

Component によってレンダリングされた要素に適用することができるプラットフォーム固有の props（e.g. DOM props）の 1 つまたは複数のセットを返す。
ARIA や event handler が含まれていて、event handler は State Hook 上のメソッドを呼び出す。

Behavior Hook はユーザーインタラクションがない Component でもアクセシビリティ対応のために持っている。
Behavior Hook を持たない Component は複数の Component を組み合わせるものだけ。

Component

テーマやデザインシステム固有のロジックを持ち、スタイルの適用も担う。(CSS,CSS-in-JS などさまざまな方法でできる)。
Component は State Hook と Behavior Hook を使用して、視覚的な要素を実装している。

Behavior Hook から返された props を使用し、セマンティクスやインタラクションを適用する。
State Hook から返された props を使用し、視覚的なレンダリングを調整する。
これにより必要に応じた要素を追加して、コンポーネントのレンダリングをコントロールできるようになっている。

設計を 3 のパッケージに分離

上記アーキテクチャの実装を 3 つの npm パッケージに分離して管理されている。
各コンポーネント内では、個々の機能が多くの hook に分割されていて、それらを組み合わせて必要な機能のみ使用して設計を実現している。

デザインシステム間での動作の再利用を可能な限り簡単にして、デザインのカスタマイズ性やコードの肥大化を回避することがこの PJ の全体目標だと記載がある。

React Stately

各コンポーネントの状態管理とコアロジックを実装している。
複雑なロジックを処理して、Web や react-native などで再利用できる。

詳細は React Stately の専用ドキュメントを参照

React Aria

WAI-ARIA Authoring Practices に従って、Web の動作とアクセシビリティを実装している。
フルスクリーンリーダー、キーボードナビゲーション、マウスとタッチ動作、日付と数値の書式設定、i18n 対応を実装している。

React Aria はレンダリングの実装や DOM 構造、スタイリング方法を担わないので、完全にカスタマイズ可能なことが最も重要。
React Aria hooks から返される props を DOM に反映するだけで、アクセシビリティ対応などを実現できる。

詳細は Why React Aria? と React Aria の専用ドキュメントを参照

React Spectrum

React Aria と React Stately を使用して、Adobe 固有のスタイルを実装している。
テーマ設定やダークモードなどをサポートしている。

Storybook で確認もできる。

おわりに

まずは React Spectrum の概要について書いたので、次は React Stately からコードを読んでいく。