ReactのUIコンポーネントMaterial-UIの機能を一挙ご紹介します！

Reactでのアプリケーション開発を学習中の方、ユーザとサービスとの接点となる画面のUIを作成するときに苦労されていませんか？

UIを使いやすく奇麗に実装することは、アプリケーションをユーザに使ってもらう上で大切です。

この記事では画面へのUI設置を簡単に行うことができるMaterial-UIのインストール方法と、実装できるコンポーネントを一挙にご紹介します。

Material-UIとは

Googleが公開しているガイドラインである「Mterial Design」をベースに開発されたUIコンポーネントライブラリです。

Reactのアプリケーションを開発するにあたり、複雑で奇麗なUIを簡単に実装することを可能とします。

特にMaterial-UI v5からはCSSを記述するためのライブラリにemotionがデフォルトで使用されるようになりました。

これによりv4よりも動的なスタイルに強くなり、ソースコードの量が少なくなり、さらに多くの機能を他のライブラリよりも洗練された状態で使うことができます。

v5からは基本となるコンポーネントであり無料で使用することができるMUI Coreの他、ややこしい実装に向けた有料のコンポーネントであるMUI Xが提供されています。

インストール方法

Reactが17.0.0以上、React DOMが17.0.0以上であることを確認した後、プロジェクトのディレクトリ直下で以下のコマンドを実行してください。

npm install @mui/material @emotion/react @emotion/styled

これでCSS-in-JSライブラリにemotionを使用する設定でインストールすることができます。

もしもCSS-in-JSライブラリをデフォルトのemotionからstyled-componentsに変更したい場合は以下のコマンドを実行します。

npm install @mui/material @mui/styled-engine-sc styled-components

Material-UIの主なコンポーネント

それでは、実装が可能なコンポーネントを解説していきます。

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

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

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

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

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

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

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

カラー調整の方法

Material-UIでは、テーマを使用することでスタイルを制御できます。

テーマを自作するときにはアプリケーションのイメージに合わせて、コンポーネントの色、表面の暗さ、影のレベル、透明度などを設定してください。

このようにしてテーマを作成することで、全体として統一感のあるデザインを表現できます。

それでは、実際にテーマを作成してみましょう。

ブランドカラーの調整

ブランドカラーを変更するにはテーマを構成するための変数のひとつであるpaletteオブジェクトを設定します。

paletteオブジェクトが持っているprimary、secondary、error、warning、info、sucessの値を独自の色にオーバーライドすると、アプリケーションのカラーを変更することができます。

カラーオブジェクトを使用

簡単にカラーをカスタマイズする方法としては、Material-UIから提供されているカラーをインポートする方法があります。

import { createTheme } from '@material-ui/core/styles';
import blue from '@material-ui/core/colors/blue';

const theme = createTheme({
  palette: {
    primary: blue,
  },
});

上のソースコードではprimaryの値にblueというカラーを割り当てています。

色を直接指定

カラーオブジェクトを使用するよりも、もっと細かく色を設定したい場合は色を直接設定することも可能です。

main、light、darkのキーに設定する方法と、contrastTextに設定する方法があります。

import { createTheme } from '@material-ui/core/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: '#ff4400',
    },
    secondary: {
      light: '#0066ff',
      main: '#0044ff',
      contrastText: '#ffcc00',
    },
    contrastThreshold: 3,
    tonalOffset: 0.2,
  },
});

この例では、primaryにはmainのキーに#ff4400、secondaryにはlightに#0066ff、mainに#0044ffを設定しています。

darkやlightのキーの設定を省略した場合、それぞれの値はtonalOffsetとmainの値から計算されます。

contrastTextを省略した場合はcontrastThresholdとmainの値からcontrastTextの値が計算されます。

フォントの調整

フォントを調整したい場合はテーマを構成する要素のひとつであるtypographyというオブジェクトを使用します。

フォントファミリーの設定

フォントファミリーを設定するためには、fontFamilyキーに対してフォントを指定します。

const theme = createTheme({
  typography: {
    fontFamily: [
      '-apple-system',
      'BlinkMacSystemFont',
      '"Segoe UI"',
      'Roboto',
      '"Helvetica Neue"',
      'Arial',
      'sans-serif',
      '"Apple Color Emoji"',
      '"Segoe UI Emoji"',
      '"Segoe UI Symbol"',
    ].join(','),
  },
});

フォントサイズの設定

フォントのサイズを設定することもできます。

Material-UIではtypographyオブジェクトのfontSizeプロパティに値を設定します。デフォルト値は14pxとなります。

const theme = createTheme({
  typography: {
    fontSize: 12,
  },
});

レイアウト・コンポーネント間の調整

CssBaseline

Material-UIはCssBaselineコンポーネントを提供しています。

これを使うことで、上品で一貫性のあるシンプルなベースラインを構築することができます。

Container

「レイアウトのためのコンポーネント」の項目でも触れたContainerコンポーネントは、コンテンツを左右(水平方向)に中央揃えをすることができるコンポーネントです。

レイアウトをする上で最も基本的な要素となります。