Reactで簡単にマテリアルデザインを実現できるライブラリ「Material-UI」を解説【後編】

現場で役立つ！ React向けライブラリ詳説 第5回

データ表示のためのコンポーネント

　それでは次に、データ表示のためのコンポーネントを見てみましょう（表3）。

表3：データ表示のためのコンポーネント

コンポーネント	概要
Avatar	顔写真やアイコンを表示する。
Badge	任意のビューの右上にバッジを表示する。
Chip	チップを表示する。
Divider	区切り線を表示する。
Icons	Material Designの公式アイコンを表示する。
List	リストを表示する。
Table	表を表示する。
Tooltip	マウスオーバーしたときに吹き出しを表示する。
Typography	テキストを表示する。

　アイコンや名前、表やテキストを表示するような、UIの最小要素を担うものばかりですね。

　例えばAvatarを使うと、ユーザーアイコンの表示を簡単に実装できます（リスト4）。

［リスト4］Avatar

<Avatar />{/* デフォルト */}
<Avatar src="/nkzn.png" />{/* 画像パスを指定 */}
<Avatar>YN</Avatar>{/* テキストを指定 */}

　上から順に、デフォルト表示、画像のパスを指定、イニシャルを表示、と使い分けています。リスト4を実行すると図4のようになります。

図4：Avatarでユーザーアイコンを実装する

　たったこれだけの実装で表示を使い分けられるのは楽ですね。もしここに「新着お知らせが4件あります」を表すバッジを付けたくなったら、外側にBadgeコンポーネントをかぶせることで実現できます（リスト5）。

［リスト5］Badge

<Badge badgeContent={'4'} color='primary'>{/* (1) */}
  <Avatar src="/nkzn.png" />
</Badge>

　（1）でbadgeContent属性に表示したいテキストを指定しました。リスト5を実行すると、図5のようになります。

図5：Badgeでコンポーネントにバッジを付ける

　どこかで見たことがある表示になりました。ユーザーアイコンにマウスオーバーしたときに、何かメッセージが出てくると親切かもしれません。そんなときには、吹き出しを表示するTooltipが便利です。Badgeと同様に、外側にかぶせる形で利用します（リスト6）。

［リスト6］Tooltip

<Tooltip title="新着メッセージが4件あります" arrow>{/* (1) */}
  <Badge badgeContent={'4'} color='primary'>
    <Avatar src="/nkzn.png" />
  </Badge>
</Tooltip>

　（1）でtitle属性に表示したいメッセージを指定しています。リスト6を実行すると、図6のようになります。

図6：マウスオーバーでメッセージが表示される

　マウスカーソルをアイコンの上にかぶせると、メッセージが出てきました。このように、組み合わせによってUIをリッチにしていけるのが、このジャンルのコンポーネントの魅力です。

各種の便利なコンポーネント

　最後に、各種の便利に使えるコンポーネント（ユーティリティ）です（表4）。

表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）。

［リスト7］ClickAwayListener

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）。

図7：外側をクリックすると緑になる

図8：内側をクリックすると赤になる

　自作のポップアップメニューを消すときなどに活躍しそうな機能ですね。

まとめ

　さて、ひと通り見てきましたが、本当に豊富なコンポーネントが用意されています。どんなことができるのか見ているだけでもワクワクするので、ぜひ公式ドキュメントを眺めてみてください。次回は、同じジャンルのUIコンポーネントライブラリとして、Chakra UIについて解説します。