CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2021/08/17 11:00

 UIをコンポーネント化(画面部品化)して、再利用性を高められるのは、Reactの大きな特徴のひとつです。この特長を活かして、統一されたデザインを持ち、カスタマイズ性にも優れたUIライブラリが、数多く提供されています。今回は、前回に引き続きMaterial-UIについて解説します。かゆいところに手が届く便利なコンポーネントを見ていきましょう。

目次

対象読者

  • JavaScriptとWeb開発の基礎に理解がある方
  • Reactを用いたJavaScriptアプリケーション開発の経験者

前提環境

 筆者の検証環境は以下の通りです。

  • macOS Big Sur 11.4
  • Node.js 16.2.0/npm 7.13.0
  • React 17.0.2
  • react-scripts 4.0.3
  • Material-UI 4.11.4

まだまだ広大なMaterial-UIの世界

 前回も確認した通り、Material-UIの公式ドキュメントを見ると、7つのジャンルのコンポーネントがあります。

  • Layout:レイアウトのためのコンポーネント
  • Inputs:入力のためのコンポーネント
  • Navigation:ナビゲーションに関するコンポーネント
  • Surfaces:任意のコンポーネントを載せるためのコンポーネント
  • Feedback:フィードバックのためのコンポーネント
  • Data Display:データ表示のためのコンポーネント
  • Utils:各種の便利なコンポーネント

 前回は初めの3つ、Layout、Inputs、Navigationについて解説しました。今回は、後半のSurface、Feedback、Data Display、Utilsを確認していきましょう。

任意のコンポーネントを載せるためのコンポーネント

 まずは、地味ながら利用シーンが多い、任意のコンポーネントを載せるためのコンポーネントです(表1)。

表1:他のコンポーネントを載せるためのコンポーネント
コンポーネント 概要
App Bar ヘッダーを表示する。
Paper 浮かび具合を調整できる「紙」を表示する。
Card カスタマイズ可能なカードを表示する。
Accordion 開閉するUIを表示する。

 Material Designは、「紙とインク」といった私たちもよく知る物体(マテリアル)の振る舞いを模倣して作られたデザイン仕様です。前回解説したボタンなども「インクで染められた紙」というモチーフで作られています。Paperコンポーネントはこのデザイン仕様の中で最小の構成要素です。自作のコンポーネントでも、Paperの中に画像などを表示すれば、おのずと「Material Designらしさ」が出ることでしょう。App Bar、Card、Accordionは、ただのPaperよりも少しだけ情報を見やすくカスタマイズしたものになります。

 Material-UIのもっとも基本的なコンポーネントということで、Paperの挙動を確認してみましょう。Paperは「ちょっと浮いている紙」なので、浮かび具合(elevation)を属性として指定できます(リスト1)。

[リスト1]Paper
<Paper elevation={0}>elevation: 0</Paper>
<Paper>elevation: default</Paper>
<Paper elevation={3}>elevation: 3</Paper>

 リスト1のJSXを実際に表示すると、図1のようになります。

図1:Paperはelevationで浮かび具合が変わる
図1:Paperはelevationで浮かび具合が変わる

 elevationが大きいほど浮かび上がって影が大きくなり、elevationがゼロだと背景とくっついて影がない状態になります。elevationを指定しない場合のデフォルト値はelevation={1}です。

 Paperにできることはほとんどこれだけで、このままではあまり役に立たないようにも見えますね。しかし、Material-UIのコンポーネントの多くは、このPaperをカスタマイズしたり、内部のコンテンツ(children)を充実させたりする形で作られています。もしMaterial-UIに用意されていないコンポーネントを自作したくなった場合には、Paperを使ってみるといいかもしれません。

フィードバックのためのコンポーネント

 続いて、フィードバックのためのコンポーネントです(表2)。

表2:フィードバックのためのコンポーネント
コンポーネント 概要
Progress 回転やゲージの形で読み込み中のUIを表示する。
Dialog ダイアログを表示する。
Snackbar 下からポップアップするメッセージを表示する。
Backdrop 画面全体を暗くした領域を提供する。

 ユーザーが操作(送信ボタンのクリックなど)を行ったときに、その処理の結果をすぐに返せないことがあります。それは「処理しているからちょっと待ってて」というケースかもしれませんし、処理を実行する前に「注意点があるけど本当にやる?」という問いかけが必要なケースかもしれません。何にせよ、ユーザーの操作に対して、アプリケーションはなんらかの反応を返す必要があります。そんなときに役立つのが、このフィードバックのためのコンポーネントです。

 Material-UIのProgressは何種類かありますが、よく使うのは、円形で回転するCircularProgressと、横棒がアニメーションするLinearProgressでしょうか(リスト2)。

[リスト2]Progress
{/* 回転する */}
<CircularProgress />
{/* 横棒がアニメーションする */}
<LinearProgress />
{/* 進捗を指定できる */}
<LinearProgress variant="determinate" value={60} />{/* (1) */}

 基本的には設置するだけで使えますが、LinearProgressは(1)のようにvariant="determinate"属性を指定することで、進捗を直接指定できます。value属性に0から100までの数値を入力すると、その割合まで色が付きます。実際にリスト2のコードを動かしてみると、図2のようになります。

図2:各種Progress
図2:各種Progress

 一番下の横棒にはvalue={60}を指定してあるので、60%の進捗率を表示していますね。もし進捗率がわかる場合にはユーザーにも見せてあげたほうが親切なので、useStateなどで管理している進捗率の値を value属性に当てはめるとよいでしょう。

 もう一つ、 使い方を覚えると便利なものとして、Snackbarについても解説しておきましょう。Snackbarは、送信処理の完了時などにしたからポップアップしてくるUIです。リスト3のように利用します。

[リスト3]Snackbar
const SnackbarSample = () => {
  const [ show, setShow ] = useState(false);

  const handleButtonClick = () => {
    setShow(true);
  };

  const handleClose = () => {
    setShow(false); // (5)
  };

  return (
    <div>
      <Button onClick={handleButtonClick} variant="contained">
        Snackbarを表示する
      </Button>
      <Snackbar
        open={show}{/* (1) */}
        autoHideDuration={6000}{/* (3) */}
        onClose={handleClose}{/* (4) */}
        message="処理が完了しました!"{/* (2) */}
      />
    </div>
  )
};

 Snackbarは(1)のopen属性がtrueの間だけ(2)のmessage属性に設定したテキストを表示します。ですが、ポップアップというからには、わざわざ消さなくても一定時間が経ったら消えてほしいですよね。そのために用意されている属性が、(3)のautoHideDuration属性です。ミリ秒で時間を設定すると、表示してからその時間の経過後に、(4)のonCloseに登録されたコールバックを呼び出します。コールバックの中で(5)のように、open属性へfalseを渡せるような状態変更を行うことで、Snackbarを自動で閉じる挙動が実現できるのです。リスト3を実際に動かしてみると、図3のようになります。

図3:Snackbarが表示された
図3:Snackbarが表示された

 ボタンを押すと、画面下からメッセージがポップアップしてきます。ユーザーに一時的なメッセージを伝えたいときに便利なので、ぜひ活用しましょう。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

あなたにオススメ

著者プロフィール

  • WINGSプロジェクト 中川幸哉(ナカガワユキヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

バックナンバー

連載:現場で役立つ! React向けライブラリ詳説
All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5