CodeZine(コードジン)

特集ページ一覧

綺麗なコンポーネントを容易に導入できるMaterial-UIを紹介【前編】

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

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

Material-UIに用意されたコンポーネント

 本記事では、Material-UIが提供する、すべてのコンポーネントの使い方について解説することは、残念ながらできません。そこで、雰囲気をつかんでもらうために、コンポーネントの一覧を紹介します。数が膨大なので、公式ドキュメントで示されているジャンルごとに分けることにします。

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

 コンポーネントの一覧だけでもかなりの量になるので、Material-UIの解説は前後編にします。星がついているジャンルについては、次回、後編の記事で取り上げることにしますね。

レイアウトのためのコンポーネント

 まずは、レイアウト(配置)のためのコンポーネントです(表1)。

表1:他のコンポーネントをレイアウトするためのコンポーネント
コンポーネント 概要
Box コンポーネントを囲んだ領域を作る
Container 大きな画面の中で中央寄せのコンテンツ表示領域を作る
Grid グリッド状にレイアウトする
Grid List グリッド状のスクロール領域を作る
Hidden 画面サイズに応じて表示・非表示を切り替える

 画面内を1:2:1といった幅で区切ってちょうど収まるように伸び縮みする領域を用意するようなコンポーネントが用意されています。例えば、Boxを横方向に3つ並べて、それぞれ1:2:1の比率でwidthを指定すると、図4のような表示になります。

図4:1:2:1になった
図4:1:2:1になった

 Boxをはじめとしたレイアウトに関するコンポーネントでは、親コンポーネントの幅に対して割合に応じた幅を持つことができます。

入力のためのコンポーネント

 次に、入力のためのコンポーネントです(表2)。

表2:入力に関するコンポーネント
コンポーネント 概要
Button ボタンを表示する
Button Group 並んだボタンを表示する
Checkbox チェックボックスを表示する
Floating Action Button (右下の丸ボタン)を表示する
Date / Time 日時入力のUIを表示する
Radio ラジオボタンを表示する
Select ドロップダウン選択のUIを表示する
Slider スライダーを表示する
Switch スイッチを表示する
Text Field テキスト入力欄を表示する

 おなじみのボタンやチェックボックス、入力欄などが含まれています。内部的には<input>タグで作られているものも多く、アクセシビリティに配慮されています。

ナビゲーションに関するコンポーネント

 続いては、ナビゲーションに関するコンポーネントです(表3)。

表3:ナビゲーションに関するコンポーネント
コンポーネント 概要
Bottom Navigation 下タブメニューを表示するる
Breadcrumbs パンくずリストを表示する
Drawer ドロワー(サイドメニュー)を表示する
Link リンクテキストを表示する
Menu メニューを表示する
Stepper 手順の進行度を表すUIを表示する
Tabs タブを表示する

 Webサイトのグローバルメニューに使えそうなコンポーネントがいくつも用意されています。デスクトップでよく使われるドロワーや、モバイルアプリでよく見かけるようになったBottom Navigationなど、デバイスの種類を限定せずに使えるラインアップになっています。

Material-UIをセットアップする

 それでは、実際の使い方を見ていきましょう。Create React Appをベースに解説します。まずはライブラリをインストールしましょう。

[リスト1]Material-UIをインストールする
$ npm install @material-ui/core

 最低限の準備としては、これだけで完了です。早速、ボタンを配置してみましょう。

[リスト2]ボタンを表示
import Button from '@material-ui/core/Button';

function App() {
  return (
    <Button
      color="primary" // (2)
      variant="contained" // (3)
    >
      Hello World {/* (1) */}
    </Button>
  );
}

export default App;

 ボタンに表示するテキストは、(1)のように、コンポーネントの子として配置します。(2)では、ボタンの色にprimaryという指定をしています。Material Designはテーマカラーを設定する際に、primarysecondaryと呼ばれる2つの色を定義します(図5)。

図5:Material Designは2つの色を軸にカラーリングを決める(公式ドキュメントより抜粋)
図5:Material Designは2つの色を軸にカラーリングを決める(公式ドキュメントより抜粋)

 全体的にprimaryの色合いで統一感を出しつつ、アクセントとしてsecondaryの色を使う、といった具合で色を運用するのがMaterial Designの流儀です。(3)のvariantでは、ボタンの種別を設定しています。Material Designのボタンには「テキストのみ(text)」「塗りつぶし(contained)」「枠線つき(outlined)」という3つの表現方法があるので、どの表現にするかを指定する必要があるのです。ボタン1つをとっても、多くのノウハウが詰め込まれていますね。それでは、実際の操作を見てみましょう(図6)。

図6:ボタンを置いた様子
図6:ボタンを置いた様子

 期待通り、ボタンが表示されました。クリックしてみると、クリックした場所から波紋が広がるようなアニメーションが発生します。これは「紙にインクが落ちて浸透していく様子」を表現しています。特に指定しなくても、こういったアニメーションがついてくれるのはいいですね。


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

バックナンバー

連載:現場で役立つ! React向けライブラリ詳説

著者プロフィール

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

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

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

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

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5