データ表示に関するコンポーネント
次は、データ表示に関するコンポーネントを見ていきます。表2の9種類があります。
| コンポーネント | 概要 |
|---|---|
| Badge | ステータスを表現するためのバッジを表示する。 |
| Close Button |
閉じるボタンを表示する。
|
| Code | ソースコードを表示する。 |
| Divider | 区切り線を表示する。 |
| Kbd | キーボードのキーを表すUIを表示する。 |
| List | ul/li要素のリストを表示する。 |
| Stat | 統計情報を表示する。 |
| Table | table要素のテーブルを表示する。 |
| Tag | タグを表示する。 |
TableやListは、ほとんどHTMLのtable要素やul/li要素と同じ内容なので割愛します。それ以外で主要なものを見ていきましょう（リスト4）。
// Badge <HStack spacing="3"> <Badge>営業中</Badge> <Badge colorScheme="green">成約</Badge> <Badge colorScheme="red">失注</Badge> </HStack> // Kbd <Box> コピーのショートカットは<Kbd>Ctrl</Kbd> + <Kbd>C</Kbd>です。 </Box>
Badgeはデータ項目に簡単なステータス表記を行いたい場合などに有用なUIです。図4のように状態を表す色付きテキストを付与しておくことで、情報の視認性を上げることができます。
Kbdは少し変わり種で、キーボードショートカットの説明を見やすくするためのコンポーネントです（図5）。
操作マニュアルなどを作る際に重宝するコンポーネントになりそうです。
フィードバックに関するコンポーネント
続いて、フィードバックに関するコンポーネントを見ていきましょう。表3の6種類があります。
| コンポーネント | 概要 |
|---|---|
| Alert |
お知らせを表示する。
|
| Circular Progress | 円状の進捗率UIを表示する。 |
| Progress | 棒状の進捗率UIを表示する。 |
| Skeleton | 仮置きのUIを表示する。 |
| Spinner |
読み込み中のUIを表示する。
|
| Toast | ポップアップを表示する。 |
特に重宝するのがSkeltonです。画面を表示する際にデータ読み込みで待ち時間が発生するのはよくあることですが、このときに本物のUIと近い形をした仮UIを置いておくことで、ユーザーはまっさらな画面で待たされるよりも少ないストレスで読み込みの完了を待てる傾向があるようです。画像などのコンテンツを置き換えるSkeleton、アイコンなどを置き換えるSkeletonCircle、テキストを置き換えるSkeletonTextなどが用意されています（リスト5）。
<Box p="6" boxShadow="lg" bg="white">
<SkeletonCircle size="10" />
<SkeletonText mt="4" noOfLines={4} spacing="4" />
</Box>
リスト5を実行すると、図6のようになります。
仮置きしたUIが明滅し、これからそこに何かが表示されそうなことを期待させてくれます。読み込み中に進捗バーを出しておくのもよいですが、コンテンツの種類によってはこういった仮UIを出しておくのもオシャレでいいかもしれません。
オーバーレイに関するコンポーネント
次はオーバーレイに関するコンポーネントです。画面にすでに表示されているUIの上に、覆いかぶさる形で表示されるUIがこのジャンルです。表4の6種類があります。
| コンポーネント | 概要 |
|---|---|
| Alert Dialog |
確認ダイアログを表示する。
|
| Drawer | サイドメニューを表示する。 |
| Menu | コンテキストメニューを表示する。 |
| Modal | 画面上にオーバーレイしたモーダル領域を表示する。 |
| Popover | 小さい吹き出し型のモーダルを任意の場所に表示する。 |
| Tooltip | マウスオーバーで現れるヒントを表示する。 |
この中でも特に汎用性が高く、頻出するのはModalです。通常の画面に表示すると冗長になってしまう詳細な情報を表示するときに使えるので、利用シーンは多くあります。Modalの基本的な使い方はリスト6のような形です。
function ButtonWithModal() {
const { isOpen, onOpen, onClose } = useDisclosure();
return (
<>
<Button onClick={onOpen}>情報を見る</Button>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>詳細情報</ModalHeader>
<ModalCloseButton />
<ModalBody>
じゅげむじゅげむごこうのすりきれ...
</ModalBody>
<ModalFooter>
<Button
colorScheme="blue"
mr={3}
onClick={onClose}
>
閉じる
</Button>
<Button variant="ghost">おぼえた</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
);
}
これを実行すると、まずは図7のようにボタンだけが表示されます。
これをクリックすると、図8のようにモーダルが表示されます。
モーダルはコンポーネントのどんなに深い階層に配置しても画面全体に覆いかぶさる形で表示されるため、基本的には表示するボタンの隣に定義しておくとよいでしょう。
