対象読者
- JavaScriptとWeb開発の基礎に理解がある方
- Reactを用いたJavaScriptアプリケーション開発の経験者
前提環境
筆者の検証環境は以下の通りです。
- macOS Big Sur 11.2.3
- Node.js 15.14.0／npm 7.7.6
- React 17.0.2
- react-scripts 4.0.3
- Material-UI 4.11.3
CSSでレイアウトや装飾をゼロから実装するのは大変
ブラウザ向けアプリケーション開発の多くの現場で、Reactは欠かせない存在となっています。しかし、Reactは万能なわけではありません。Reactのライブラリとしての本分は次の2点です。
- あるまとまりのUIをコンポーネントとして管理できる
- コンポーネントツリーを書き換える際に差分だけを更新できる
これらの中に「美しいUIを提供する」という責務は含まれていません。Reactそのものはスタイルにあまり興味がないので、美しいUIを持ったコンポーネントを作ろう思ったら、自分でCSSを書くことになります。こういった部分は通常のHTML+CSSの世界と大きくは変わりませんね。
さて、自分で<div>や<span>や<input>を装飾していくのも楽しいですが、そこまでオリジナリティを必要としない場面も多いはずです。こういった課題を解決するためのツールとして、デザインのガイドラインを公開してくれている企業や個人のデザイナーの方々がいます。それぞれのガイドラインに沿って自身のアプリを組み立てることで、まとまりのある、美しいアプリを作り上げることができるでしょう。
Material Design
本記事では、ガイドラインの1つとして、Material Design（マテリアルデザイン）について扱います（図1）。
Material Designは、Google社が自社のサービスに統一的なデザインを与えるために作成した、デザインのガイドラインであり、仕様書です。
プログラマーも読みやすいように配慮されており、「こういった場合はマージンを16pxにして、こちらの場合では72pxにする」や「こういった部品を作る際は高さを56pxにする」といった具合で、定性的な基準よりも定量的な基準を重視した仕様書となっています。
また、用意すべきUI部品（コンポーネント）の種類や名前、どのようなカスタマイズを実施すべきかといった項目についても言及されています（図2）。
アプリやWebサービスを作っていく中で、多くの場合、必要になるUI部品が定義されています。なかなか面白いので、興味があれば眺めてみてください。
Material DesignをReactコンポーネントとして使う
さて、Material Designには仕様が明確であるという特性があるため、これを多くのエンジニアがUIライブラリとして実装しました。Google公式のライブラリもあれば、サードパーティのものもあります。ブラウザ向けにCSSとして再現されたもののほかに、コンポーネントの形にまとめられたものもあります。
ご多分に漏れず、React向けにもMaterial DesignのUI部品を定義した、Reactコンポーネント集がライブラリとして提供されています。それが今回解説するMaterial-UIです（図3）。
Material-UIはMaterial-UI社によってメンテナンスされており、React向けのMaterial Designライブラリとして老舗の1つとなっています。
