CodeZine(コードジン)

特集ページ一覧

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

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

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

 UIをコンポーネント化(画面部品化)して、再利用性を高められるのは、Reactの大きな特徴の1つです。この特徴を活かして、統一されたデザインを持ち、カスタマイズ性にも優れたUIライブラリが、数多く提供されています。本記事では、Googleが公開している「マテリアルデザイン」というガイドラインに従ってデザインされた、Material-UIというライブラリについて解説します。

目次

対象読者

  • 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)。

図1:Material Designのデザイン仕様のページ(公式ドキュメントより引用)
図1:Material Designのデザイン仕様のページ(公式ドキュメントより引用)

 Material Designは、Google社が自社のサービスに統一的なデザインを与えるために作成した、デザインのガイドラインであり、仕様書です。

 プログラマーも読みやすいように配慮されており、「こういった場合はマージンを16pxにして、こちらの場合では72pxにする」や「こういった部品を作る際は高さを56pxにする」といった具合で、定性的な基準よりも定量的な基準を重視した仕様書となっています。

 また、用意すべきUI部品(コンポーネント)の種類や名前、どのようなカスタマイズを実施すべきかといった項目についても言及されています(図2)。

図2:Material Designのコンポーネント仕様のページ(公式ドキュメントより引用)
図2:Material Designのコンポーネント仕様のページ(公式ドキュメントより引用)

 アプリやWebサービスを作っていく中で、多くの場合、必要になるUI部品が定義されています。なかなか面白いので、興味があれば眺めてみてください。

Material DesignをReactコンポーネントとして使う

 さて、Material Designには仕様が明確であるという特性があるため、これを多くのエンジニアがUIライブラリとして実装しました。Google公式のライブラリもあれば、サードパーティのものもあります。ブラウザ向けにCSSとして再現されたもののほかに、コンポーネントの形にまとめられたものもあります。

 ご多分に漏れず、React向けにもMaterial DesignのUI部品を定義した、Reactコンポーネント集がライブラリとして提供されています。それが今回解説するMaterial-UIです(図3)。

図3:Material-UI
図3:Material-UI

 Material-UIはMaterial-UI社によってメンテナンスされており、React向けのMaterial Designライブラリとして老舗の1つとなっています。


  • 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