Material-UIに用意されたコンポーネント
本記事では、Material-UIが提供する、すべてのコンポーネントの使い方について解説することは、残念ながらできません。そこで、雰囲気をつかんでもらうために、コンポーネントの一覧を紹介します。数が膨大なので、公式ドキュメントで示されているジャンルごとに分けることにします。
- Layout: レイアウトのためのコンポーネント
- Inputs: 入力のためのコンポーネント
- Navigation: ナビゲーションに関するコンポーネント
- Surfaces: 任意のコンポーネントを載せるためのコンポーネント（★）
- Feedback: フィードバックのためのコンポーネント（★）
- Data Display: データ表示のためのコンポーネント（★）
- Utils: 各種の便利なコンポーネント（★）
コンポーネントの一覧だけでもかなりの量になるので、Material-UIの解説は前後編にします。星がついているジャンルについては、次回、後編の記事で取り上げることにしますね。
レイアウトのためのコンポーネント
まずは、レイアウト（配置）のためのコンポーネントです（表1）。
| コンポーネント | 概要 |
|---|---|
| Box | コンポーネントを囲んだ領域を作る |
| Container | 大きな画面の中で中央寄せのコンテンツ表示領域を作る |
| Grid | グリッド状にレイアウトする |
| Grid List | グリッド状のスクロール領域を作る |
| Hidden | 画面サイズに応じて表示・非表示を切り替える |
画面内を1:2:1といった幅で区切ってちょうど収まるように伸び縮みする領域を用意するようなコンポーネントが用意されています。例えば、Boxを横方向に3つ並べて、それぞれ1:2:1の比率でwidthを指定すると、図4のような表示になります。
Boxをはじめとしたレイアウトに関するコンポーネントでは、親コンポーネントの幅に対して割合に応じた幅を持つことができます。
入力のためのコンポーネント
次に、入力のためのコンポーネントです（表2）。
| コンポーネント | 概要 |
|---|---|
| Button | ボタンを表示する |
| Button Group | 並んだボタンを表示する |
| Checkbox | チェックボックスを表示する |
| Floating Action Button | （右下の丸ボタン）を表示する |
| Date / Time | 日時入力のUIを表示する |
| Radio | ラジオボタンを表示する |
| Select | ドロップダウン選択のUIを表示する |
| Slider | スライダーを表示する |
| Switch | スイッチを表示する |
| Text Field | テキスト入力欄を表示する |
おなじみのボタンやチェックボックス、入力欄などが含まれています。内部的には<input>タグで作られているものも多く、アクセシビリティに配慮されています。
ナビゲーションに関するコンポーネント
続いては、ナビゲーションに関するコンポーネントです（表3）。
| コンポーネント | 概要 |
|---|---|
| Bottom Navigation | 下タブメニューを表示するる |
| Breadcrumbs | パンくずリストを表示する |
| Drawer | ドロワー（サイドメニュー）を表示する |
| Link | リンクテキストを表示する |
| Menu | メニューを表示する |
| Stepper | 手順の進行度を表すUIを表示する |
| Tabs | タブを表示する |
Webサイトのグローバルメニューに使えそうなコンポーネントがいくつも用意されています。デスクトップでよく使われるドロワーや、モバイルアプリでよく見かけるようになったBottom Navigationなど、デバイスの種類を限定せずに使えるラインアップになっています。
Material-UIをセットアップする
それでは、実際の使い方を見ていきましょう。Create React Appをベースに解説します。まずはライブラリをインストールしましょう。
$ npm install @material-ui/core
最低限の準備としては、これだけで完了です。早速、ボタンを配置してみましょう。
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はテーマカラーを設定する際に、primaryとsecondaryと呼ばれる2つの色を定義します（図5）。
全体的にprimaryの色合いで統一感を出しつつ、アクセントとしてsecondaryの色を使う、といった具合で色を運用するのがMaterial Designの流儀です。（3）のvariantでは、ボタンの種別を設定しています。Material Designのボタンには「テキストのみ（text）」「塗りつぶし（contained）」「枠線つき（outlined）」という3つの表現方法があるので、どの表現にするかを指定する必要があるのです。ボタン1つをとっても、多くのノウハウが詰め込まれていますね。それでは、実際の操作を見てみましょう（図6）。
期待通り、ボタンが表示されました。クリックしてみると、クリックした場所から波紋が広がるようなアニメーションが発生します。これは「紙にインクが落ちて浸透していく様子」を表現しています。特に指定しなくても、こういったアニメーションがついてくれるのはいいですね。
