独自でUIComponentsを作るときStyleの共通化は意識が向きやすいのですが、状態やアクセシビリティ、Platform固有の判別などロジック部分も共通で作ることが求められるかと思います。
私はそのあたりはこれまでUIフレームワークに任せており、どう設計すれば良いのか悩んでしました。
Adobe のデザインシステム React Spectrum は、設計がとても汎用的に分解されており自分のComponentsの設計にも大きく刺激を受けたので紹介します。
Spectrum とは何か
AdobeがReact Spectrumというデザインシステムを作って公開してます。
名前からわかるようにReact専用で作られています。
React SpectrumはReact AriaとReact Statelyというライブラリーで構成されており、これら3つを合わせてReact Spectrum Library と呼びます。
今回主に紹介したいのはReact AriaとReact Statelyになります。
React Ariaとは
デザインシステムに利用可能な UI プリミティブを提供するReact Hooksのライブラリです。
多くの一般的な UI コンポーネントにアクセシビリティと動作を提供しており、レンダリングとは分離した設計になっています。つまり独自のデザインとスタイリングに集中できます。
アダプティブ インタラクションを実装して、マウス、タッチ、キーボード、スクリーン リーダーのサポートなどしており、様々なプラットフォームやデバイスの操作を高品質にします。
React Statelyとは
デザインシステムにクロスプラットフォームの状態管理を提供する React Hooks のライブラリです。
コンポーネントライブラリの基盤とコア ロジックを提供し、多くの一般的なコンポーネントの状態管理を実装します。コンポーネントのコア ロジックの多くを実装するメソッドを使用して、コンポーネントの状態を読み取り、更新するためのインターフェイスを返します。
クロスプラットフォームになるように設計されており、Web、react-native、またはその他のプラットフォームで動作しWeb では、React Ariaと組み合わせることができます。
React Spectrumとは
React AriaとReact Statelyで構築されたAdobeのデザインシステムです。
Componentsを初めデザインシステムに必要な設計が細かく紹介されているため学べることがとても多いです。
Spectrum, Adobe’s design system
React AriaとReact Statelyの違い
どちらもレンダリングには関与しないHook集になります。
React Ariaは、多くのコンポーネントの動作、アクセシビリティ、およびユーザー インタラクションを提供し、React Stately は状態管理を提供しますので多くの場合併用してComponentsを作ることになります。
React AriaとReact Statelyの何が良いのか
レンダリングの実装や DOM 構造、スタイリング方法を担わないが必要な挙動がHookとして提供されているため、独自のComponentsを作りやすく、要望に合わせたカスタマイズもできるという点に大きな魅力を感じます。
スタートアップ等の場合Chakra UIやBoosStrapなどUIフレームワークを採用してアプリケーションを作ることが多いかと思います。
しかし開発をしていくと独自のカスタマイズをしたくなったり、派生のComponentsを作りたくなったりとカスタマイズの欲求がどんどん溜まっていきます。
特にデザインシステムのようなスタイリングにルールを持たせたい場合はこういったすでにスタイリングや挙動が用意されて使いやすさを重要視したUI ライブラリーでは破綻しやすい傾向にあります。
React AriaとReact Statelyを使えば、最初のComponentsを作るのに時間はかかりますがその後のメンテナンスやカスタマイズがやりやすくなるので、デザインシステムを作るのに適した設計といえます。
Hook集が用意されていて助かる
Hook自体の設計を期待できるので公式ドキュメントからUIのカスタマイズやHookの使い方などを容易に学べるのが良かったです。
特にCalendarなどのDate系のUIを作るときにComponentとHookの組み合わせのサンプルがあり、思っていたよりも簡単に作ることができました。
Headless UI Libraryとは違うのか
デザインシステムを作る場合Headless UI Libraryを使う選択もあるかと思います。
React AriaとReact StatelyはHeadless UI Libraryに似てはいるのですが、Hook集であるためより低レイヤーな関数となっています。
そのためUI Libraryの設計に合わせる部分が少なく様々な組み合わせにも利用できるので、Headless UI Libraryと同じとは考えておらず併用するのが良いと考えています。
React Spectrumから学んだところ
Components集であるReact Spectrumを見ていて特によかったところは、ドキュメンテーションです。
Componentsの数が豊富なのと分類も分けられており命名周りの参考にしたいと思いました。
またProps周りの設計もしっかりしているので、0からComponentsを作る際に必要と思われるPropsの抜け漏れが減らせると感じています。
ドキュメントで一番良いなと思ったのは、****Design checklist****が公開されていることです。
Componentsは完成しないと公開してはいけないわけではないですし、Componentsの品質担保として何を基準にしているのかが明確になっており、Componentsの利用者に良い期待をもたせるように感じたのでぜひ真似したいと思っています。
最後に
React AriaとReact Statelyを使えばかなりリスクを抑えてComponents開発ができると感じています。
私の場合はRadix-UIもかなり気にってるので併用しての開発をしたいと思っていますが、自分のスキルでのハードルをReact Spectrum Libraryに助けられたのでホッとしています。
ただ使えるフレームワークが増えただけで、自分のスキルが上がったわけではないのでそこは謙虚にこれからもUIComponentsと向き合っていきたいと思っています。