データ表示のためのコンポーネント
それでは次に、データ表示のためのコンポーネントを見てみましょう（表3）。
| コンポーネント | 概要 |
|---|---|
| Avatar | 顔写真やアイコンを表示する。 |
| Badge |
任意のビューの右上にバッジを表示する。
|
| Chip | チップを表示する。 |
| Divider | 区切り線を表示する。 |
| Icons |
Material Designの公式アイコンを表示する。
|
| List | リストを表示する。 |
| Table | 表を表示する。 |
| Tooltip | マウスオーバーしたときに吹き出しを表示する。 |
| Typography |
テキストを表示する。
|
アイコンや名前、表やテキストを表示するような、UIの最小要素を担うものばかりですね。
例えばAvatarを使うと、ユーザーアイコンの表示を簡単に実装できます（リスト4）。
<Avatar />{/* デフォルト */}
<Avatar src="/nkzn.png" />{/* 画像パスを指定 */}
<Avatar>YN</Avatar>{/* テキストを指定 */}
上から順に、デフォルト表示、画像のパスを指定、イニシャルを表示、と使い分けています。リスト4を実行すると図4のようになります。
たったこれだけの実装で表示を使い分けられるのは楽ですね。もしここに「新着お知らせが4件あります」を表すバッジを付けたくなったら、外側にBadgeコンポーネントをかぶせることで実現できます（リスト5）。
<Badge badgeContent={'4'} color='primary'>{/* (1) */}
<Avatar src="/nkzn.png" />
</Badge>
（1）でbadgeContent属性に表示したいテキストを指定しました。リスト5を実行すると、図5のようになります。
どこかで見たことがある表示になりました。ユーザーアイコンにマウスオーバーしたときに、何かメッセージが出てくると親切かもしれません。そんなときには、吹き出しを表示するTooltipが便利です。Badgeと同様に、外側にかぶせる形で利用します（リスト6）。
<Tooltip title="新着メッセージが4件あります" arrow>{/* (1) */}
<Badge badgeContent={'4'} color='primary'>
<Avatar src="/nkzn.png" />
</Badge>
</Tooltip>
（1）でtitle属性に表示したいメッセージを指定しています。リスト6を実行すると、図6のようになります。
マウスカーソルをアイコンの上にかぶせると、メッセージが出てきました。このように、組み合わせによってUIをリッチにしていけるのが、このジャンルのコンポーネントの魅力です。
各種の便利なコンポーネント
最後に、各種の便利に使えるコンポーネント（ユーティリティ）です（表4）。
| コンポーネント | 概要 |
|---|---|
| Click Away Listener | 領域外のクリックを検知する。 |
| CSS Baseline | ブラウザ間のCSS差異をリセットする。 |
| Modal |
モーダルを表示する。
|
| No SSR | 区切り線を表示する。 |
| Popover | 吹き出しを表示する。 |
| Popper |
Popper.jsを利用して吹き出しを表示する。
|
| Portal | 子をDOMツリーの外側にレンダリングする。 |
| Textarea Autosize |
サイズが自動可変のテキスト領域を表示する。
|
| Transitions | 表示・非表示にアニメーションを付ける。 |
| useMediaQuery |
Media Queryを便利に扱うためのフック。
|
少し特殊なコンポーネントの集まりです。どれも変わり種ですが、面白い挙動をするものの代表として、ClickAwayListenerについて解説してみましょう。ClickAwayListenerコンポーネントは、「領域外をクリックした」ことを検知できるコンポーネントです。簡単なサンプルを用意しました（リスト7）。
const ClickAwayListenerSample = () => {
const [color, setColor] = useState('white'); // (2) 初期値は白
const handleClickAway = () => {
setColor('green'); // (3)
};
const handleInsideClick = () => {
setColor('red'); // (4)
};
return (
<ClickAwayListener onClickAway={handleClickAway}>
<div // (1)
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: 200,
height: 200,
backgroundColor: color // (2) 状態に応じて背景色が変わる
}}
onClick={handleInsideClick}
>
Click me!
</div>
</ClickAwayListener>
);
};
（1）のdivを囲む形で、ClickAwayListenerを配置しました。わかりやすさのために、（2）でuseStateを使って背景色を切り替えられるようにしてあります。divの外側をクリックすると（3）の処理が呼ばれて緑になり（図7）、内側をクリックすると（4）の処理が呼ばれて赤くなります（図8）。
自作のポップアップメニューを消すときなどに活躍しそうな機能ですね。
まとめ
さて、ひと通り見てきましたが、本当に豊富なコンポーネントが用意されています。どんなことができるのか見ているだけでもワクワクするので、ぜひ公式ドキュメントを眺めてみてください。次回は、同じジャンルのUIコンポーネントライブラリとして、Chakra UIについて解説します。
