150以上のコンポーネントを揃えたReact Suiteで、管理画面開発の手数を減らす

はじめに

社内向けの管理画面やダッシュボードを作るとき、DatePickerやTreePicker、編集可能なTableなど、地味に実装コストがかさむコンポーネントに頭を悩ませたことはないでしょうか。デザインシステムを一から整備する余裕はないけれど、見た目も使い勝手もそれなりに整った画面は作りたい。そんな悩みに応えてくれるのが、今回紹介する「React Suite」です。

とはいえ、読むより触った方が早いと思います。Button・DatePicker・SelectPickerを組み合わせた検索フォームが、その場で操作できる形で置いてあるので、先に挙動を見たい方はこちらからどうぞ。

＞＞＞まずはサンプルを確認＜＜＜

React Suiteとは

React Suiteは「A suite of React components, designed for enterprise system products」を掲げる、業務システム向けのReactコンポーネントライブラリです。GitHubスター数は8.7kを超え、MITライセンスで公開されています。TypeScriptで書かれており、Next.js・Create React App・Viteなど主要なビルドツールに対応しているため、既存プロジェクトへの導入もスムーズです。

主な特徴

圧倒的なコンポーネント数 - Button・Form・DatePicker・TreePicker・編集可能なTableなど150以上のコンポーネントを標準搭載しており、業務システムでよく使う部品がひと通り揃っています
CSS変数ベースのテーマシステム - ダークモードやブランドカラーへの切り替えが、CSS変数を上書きするだけで完結します
国際化・アクセシビリティ対応 - 多言語対応に加えてWAI-ARIA標準に準拠しており、グローバル向けの業務システムでも安心して使えます
レスポンシブなグリッドシステム - 24列グリッドを備え、モバイルファーストなレイアウト調整が簡単に行えます

インストール

npm、Yarn、pnpmのいずれでもインストール可能です。

# npm
npm install rsuite

# yarn
yarn add rsuite

# pnpm
pnpm add rsuite

React Suiteのサンプルを動かす

説明を読み進める前に、実際に手を動かしてみましょう。下のサンプルはReact SuiteのButtonコンポーネントで見た目（appearance）を切り替えつつ、useToasterフックとNotificationコンポーネントを使って画面右上にトースト通知を出す最小構成です。

要点だけを抜き出すと、こんな形になります。

import { Button, useToaster, Notification } from 'rsuite'
import 'rsuite/dist/rsuite.css'

function App() {
  const toaster = useToaster()

  const handleClick = () => {
    toaster.push(
      <Notification type="success" header="送信完了" closable>
        フォームを送信しました
      </Notification>,
      { placement: 'topEnd' }
    )
  }

  return (
    <Button appearance="primary" onClick={handleClick}>
      送信する
    </Button>
  )
}

実際に編集できるサンプルが下です。上段のミニボタン（primary / default / ghost / link）を押すと、下にある本体のButtonのappearanceがその場で切り替わります。そのまま「送信する」を押すとloading状態を経て、useToaster().push()が画面右上にNotificationを表示します。

こうして触ってみると分かるとおり、Buttonのappearanceプロパティを変えるだけで見た目のトーンをがらりと変えられ、useToasterとNotificationを組み合わせれば非同期処理の完了をユーザーに知らせる導線も数行で書けます。次の「基本的な使い方」ではまずButton単体の使い方を、続く「実践的なユースケース」ではDatePicker・SelectPicker・Formを組み合わせたより実践的なパターンを見ていきます。

基本的な使い方

まずはButtonコンポーネントを表示するだけの最小構成です。CSSの読み込みを忘れると、コンポーネントは動作してもスタイルが当たらない状態になるので注意してください。

import { Button } from 'rsuite';
import 'rsuite/dist/rsuite.css';

function App() {
  return (
    <Button appearance="primary" onClick={() => alert('Hello, React Suite!')}>
      送信する
    </Button>
  );
}

export default App;

appearance プロパティで見た目を切り替えられます。primary のほかにも default や ghost、link などが用意されており、用途に応じて使い分けが可能です。

実践的なユースケース

日付・セレクトによる検索フォームを動かす

管理画面でよくある「日付を選んでデータを絞り込む」フォームを、React SuiteのDatePickerとSelectPickerを組み合わせて実装してみましょう。

import { useState } from 'react';
import { DatePicker, SelectPicker, Button, Form } from 'rsuite';
import 'rsuite/dist/rsuite.css';

const statusOptions = [
  { label: '公開中', value: 'published' },
  { label: '下書き', value: 'draft' },
  { label: 'アーカイブ', value: 'archived' },
];

function SearchForm() {
  const [date, setDate] = useState<Date | null>(null);
  const [status, setStatus] = useState<string | null>(null);

  const handleSearch = () => {
    console.log({ date, status });
  };

  return (
    <Form layout="inline">
      <Form.Group>
        <Form.ControlLabel>公開日</Form.ControlLabel>
        <DatePicker value={date} onChange={setDate} placeholder="日付を選択" />
      </Form.Group>

      <Form.Group>
        <Form.ControlLabel>ステータス</Form.ControlLabel>
        <SelectPicker
          data={statusOptions}
          value={status}
          onChange={setStatus}
          placeholder="ステータスを選択"
        />
      </Form.Group>

      <Button appearance="primary" onClick={handleSearch}>
        検索
      </Button>
    </Form>
  );
}

export default SearchForm;

このように、日付選択・セレクトボックス・フォームレイアウトを個別に自作せずとも、宣言的に組み合わせるだけで検索フォームが完成します。さらにTableコンポーネントと組み合わせれば、検索結果を一覧表示するダッシュボードもすぐに構築できます。

実際にDatePickerとSelectPickerを操作して検索結果が反映される様子を見てみましょう。「検索」を押すと、その時点で選んでいる日付とステータスが画面下に表示されます。

DatePickerで日付を選ばずに「検索」を押すと「未指定」と表示され、SelectPickerのステータスを選び直すたびに検索結果側のラベルも即座に切り替わります。statusOptionsの配列に項目を追加すれば、そのままセレクトの選択肢を増やせます。

フォームバリデーションのサンプルを動かす

ユーザー登録フォームのように「入力値が不正な間はボタンを押させたくない」場面では、React SuiteのForm・Form.Group・Inputを組み合わせ、onChangeで受け取った値をその場で検証するのが手軽です。

import { Form, Input, Button } from 'rsuite'

function App() {
  const [email, setEmail] = useState('')
  const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)

  return (
    <Form fluid>
      <Form.Group>
        <Form.ControlLabel>メールアドレス</Form.ControlLabel>
        <Input value={email} onChange={setEmail} />
        <Form.HelpText>{isValid ? '有効な形式です' : 'メール形式で入力してください'}</Form.HelpText>
      </Form.Group>
      <Button appearance="primary" disabled={!isValid}>登録</Button>
    </Form>
  )
}

実際に「メールアドレス」欄を書き換えながら、リアルタイムでボタンの状態が変わる様子を確認してみましょう。InputのonChangeはイベントではなく値そのものを受け取れるため、正規表現で判定した結果をそのままForm.HelpTextとButtonのdisabledに反映しています。

「メールアドレス」欄から@を消したり空にしたりすると、Form.HelpTextが赤字のエラーメッセージに変わり、Buttonもdisabledで押せなくなります。taro@example.comのように@と.を含む形式に戻せば、緑の「有効な形式です」に戻り、ボタンも再び押せる状態になります。正規表現の部分を書き換えれば、ドメイン制限などの独自ルールにもそのまま応用できます。