デザインシステム間の主な違いは、スタイリング。それ以外は共通の部分が多いのに各社イチから自分で実装していて大変。特にアクセシビリティ、国際化、キーボード、マウス、タッチインタラクション対応などは難しい。そこを何とかするのが React Spectrum。
React Spectrum ではコンポーネントを次の 3 つに分類する。
- State Hooks
- インタラクティブなコンポーネントの状態を提供する
- View を一切考慮しない = DOM や React Native に依存しない
- テーマやデザインシステム固有のロジックも持たない
- React Stately の領域
- Behavior Hooks
- イベント処理、アクセシビリティ、国際化などを提供する
- プラットフォームの API（DOM や React Native）に依存する
- テーマやデザインシステム固有のロジックも持たない
- 主に React Aria や Internationalized の領域
- Component
- State と Behavior を用いて View を実装する
- Spectrum CSS や Spectrum Design が関係？
これら 3 つの要素を用いて作られたコンポーネントライブラリが React Spectrum
ただコンポーネントライブラリとして使いたい人は React Spectrum で良さそう。もしライブラリとしての React Spectrum に欲しい物が無い場合は、React Stately や React Aria を用いて自作する感じな気がする。
また会社でデザインシステムを作っている場合は、React Stately や React Aria などを使用することにより工数削減（脱車輪の再発明）できそう。
Getting Started を読んでみて...
「唯一の要件は、CSS の import」と書かれてあるが Next.js と使いにくそうで残念。素の React なら問題ないそう。TypeScript 対応はさすが。
Layout を読んでみて...
- レイアウトは基本的に Flex や Grid で一般的なライブラリと大差なし
- Flex や Grid はオブジェクトのシンタックスをサポート。下記のような記述でレスポンシブ対応が行える。
<Flex direction={{base: 'row', L: 'column'}} />- いくつかのコンポーネントは Slots の概念を利用し、コンポーネントを組み合わせて作る必要がある。Dialog, Picker, Menu などなど
Styling を読んでみて...
- Spectrum のデザインカスタマイズは推奨されない。ただしほとんどのコンポーネントは微調整可能。
- 内部コンポーネントスタイルはオーバーライド不可。コンポーネントが持つスタイリング系の props でなんとかするしか無い。
- スタイルプロパティは Spectrum の変数を使用するのがオススメ。自動的にデバイスなどの最適化を行ってくれる
- Spectrum に存在しないコンポーネントを構築する場合も Spectrum 変数を使うべき。例えば、色、枠のサイズ、パディングなどに統一性が出る。
- Spectrum カラーはダークモードに自動適応
- React Spectrum では className と style はサポートしないが、エスケープハッチとして UNSAFE_className と UNSAFE_style がある
Server Side Rendering を読んでみて...
- やはり Next.js との使用にはカオスな設定が必要
Provider を読んでみて...
- Theme や Color Scheme, Locales, Breakpoints などを変更できる
- 配下のコンポーネントに一括で props を定義できる
- 例が秀逸
全体的に高機能でめっちゃ使いやすい。
- ListView めっちゃ便利
- DatePicker 系良い。Range に Time もある！！
- Tabs の Collapse 良い！
- IllustratedMessage おもしろい