Zenn
🤹‍♂️

Radix UIがよさそう

2021/09/13に公開
React
radix
tech

Chakraは詰め込みすぎだけど、tailwindのheadlessuiは貧弱すぎ、、という中でまさに欲しかったものが出てきたので簡単に紹介。

https://www.radix-ui.com/

2023/01/26更新：
本記事は書かれてから時間が経っており、自分の認識が変わった部分もあるのでアップデートを記載しました。

Radix is 何

Radix（読み方:レイディックス）は、次世代のheadless uiコンポーネントです。headlessというのはstyleがあたっていないということで、UIを「見た目」と「振る舞い」に分けた時、「見た目」が取り除かれているようなイメージです。似た既存ライブラリだとtailwindのheadlessuiが近いですが、より完成度や網羅性が高い印象です。

radix-ui配下には、メインのコンポーネント群であるPrimitives、カラーシステムを提供するColors、Icon群を提供するIconsがあります。

コードを見てみましょう。

// Popover.tsx
import { styled } from '@stitches/react';
import * as PopoverPrimitive from '@radix-ui/react-popover';

export const Popover = PopoverPrimitive.Root;
export const PopoverTrigger = PopoverPrimitive.Trigger;
export const PopoverContent = styled(PopoverPrimitive.Content, {
  // your styles
});

radixのprimitiveなコンポーネントをimportし、styleをつけて再exportすれば自前のコンポーネントができるので、それをデザインシステムとして使いましょうといった雰囲気です。

// App.tsx
import {
  Popover,
  PopoverTrigger,
  PopoverContent,
} from 'your-components/Popover';

function App() {
  return (
    <Popover>
      <PopoverTrigger>...</PopoverTrigger>
      <PopoverContent>...</PopoverContent>
    </Popover>
  );
}

上記はStichesを使っていますが、radixは特定のstylingライブラリに依存していないので、styled-components, emotion, tailwind, twin.macroでも何でもOKです。

import * as DialogPrimitive from '@radix-ui/react-dialog'
import tw from 'twin.macro'

const StyledOverlay = tw(
  DialogPrimitive.Overlay
)`bg-black-a9 fixed inset-0`

// 以下略

tailwind with twin.macroだとこんな感じで全く問題なく動きます。

Radixが解決するもの

最近はa11yへの注目もあって以前になくコンポーネントに求められる品質が高まっており、コンポーネントを最新のスタンダードに合わせてアプリケーションエンジニアが適切に抽象化するのは難しいです。例えばツールチップコンポーネントは、ポジショニングやz-indexなど解決すべき問題が多く、丁寧に作り込むには工数も知識も必要です。

ですが、我々はもっとアプリケーションの本質的な機能開発に集中するべきです。ツールチップのポジショニングについて、エンジニアとデザイナが様々なパターンを議論する価値はほとんどありません。

Radixは、そのようなコンポーネントのスタンダードな振る舞いを提供してくれます。特定のstylingライブラリに依存しないprimitiveなコンポーネントなので、あとは自分の好きなライブラリを使ってスタイルを当てるだけで高品質なコンポーネントを作ることができます。

デザインシステムをゼロから作るのは難しい

一時はデザインシステムがバズワードとして盛り上がり、日本国内でも各社デザインシステムを作っていた時期がありましたが、作るのもメンテするのもよほどな体制が無い限り難しいというのが正直な結論だと思います。Chakra-UIが支持されたのも、一周回って高度に洗練された既存ライブラリに乗ったほうが良いよね、というところかと思います。

Chakra uiとの違い

Chakraも志向は似ていますが、Chakraは特定のstylingライブラリへの依存（emotion）、独自のatomic css的な拡張構文、デフォルトのスタイリング等が組み込まれており、ややtoo muchな感があります。

自分でStylingをするのも面倒という場合はChakraを、Stylingは自分で自由にやりたい場合はRadixがおすすめです。

メンテナンス体制について

これは持論ですが、OSSはぱっと見の出来よりも、ちゃんとしたメンテナンス体制があって将来性があるのか、他のライブラリに簡単にリプレイスされないか等が大事だと思っています。また、抽象度やアプリケーションへの影響度が高ければ高いほど重要です。

そういった観点から見ると、radixは

  • modulz社のメインプロダクト（not サイドプロダウト）
  • full-time contributor2名

の2点からも信頼が置けそうです。

まとめ

UIデザインは、デザイン観点でもエンジニア観点でもかなり成熟してきていて、既になにもないところからすべてのプリミティブなデザイン仕様を作っていく時代は終わったように感じます。Radixはそんな時代背景から必然的に生まれた感があり、今後に期待したいと思います。

Discussion