【MUI入門】ReactのMUIを使って綺麗なUIを作成してみよう!

【MUI入門】ReactのMUIを使って綺麗なUIを作成してみよう!

MUIを用いたUI開発をしたいものの、

・MUIの機能が分からない…。
・MUIの詳しい使い方が知りたい…。

という方も多いのではないでしょうか。そこでこの記事では、

・MUIの特徴やメリット、デメリット
・MUIの導入方法とコンポーネントを使ったUI開発のやり方

についてご紹介します。

MUI(Material UI)とは?

MUIとは、デザイナーやアプリ開発者向けに作られたUIコンポーネントのライブラリです。Webアプリ向けのライブラリであるReactを用いてUIを構築する際にMUIが利用できます。

基礎的なものから、カスタマイズ可能な高度なものまで、膨大なUI要素が備わっている点がMUIの特徴です。また、MUIには有料のReact向けテンプレートやツールもあるので、既に完成しているUIを微調整して、自分が作りたいアプリを開発できます。

UIパーツを簡単に実装できる

MUIには、Googleが提唱するマテリアルデザインの考え方で作られたUIパーツが用意されています。ボタンやテキストフィールドなど、洗練されたデザインのUIパーツを使うことが可能です。

Reactでは、いくつかのUIパーツを組み合わせて、まとまりとして利用できます。ボタンやチェックボックスなどの最小単位のWebパーツを用いてUIを構築できることが、ReactとMUIの強みです。

Reactの開発環境を構築する方法や、基本的な使い方については「初心者向け React入門!その特徴や導入・実装方法について解説」をご覧ください。

また、Webアプリケーションを開発するためのライブラリとして、ReactだけでなくVue.jsも人気です。ReactとVue.jsの違いについて知りたい方は、「ReactとVue.jsはどっちがいい?それぞれの特徴や違いを解説!」を参考にしてください。

\文字より動画で学びたいあなたへ/

Udemyで講座を探す >

MUIのメリット

MUIを活用すると、デザイン性の高いUIを構築できたり、コーディングの手間を減らせたりと複数のメリットが得られます。MUIの主なメリットは次の通りです。

デザインに一貫性が生まれる

ユーザーにとって使いやすいUIを作るためには、大前提としてデザインに一貫性を持たせることが重要です。MUIに含まれる統一されたUIコンポーネントを使用すると、デザインの一貫性を高め、ユーザーの操作ミスや手戻りを減らせます。

一貫したデザインのUIを通じてユーザーの利用体験を高め、信頼性やブランドロイヤリティを高められることがMUIのメリットです。

コードの記述量が減る

MUIで用意されているボタンやフォームなどを利用すると、UIに必要な機能をゼロからコーディングする必要がありません。ボタンのクリックやフォームへの入力などの基本的な機能は、UIコンポーネントを利用するだけで実装できます。

工数削減により開発業務を効率化しつつ、コードの記述量を減らして可読性を高められることがMUIのメリットです。

コードの記述量が減る

拡張性が高い

UIデザインの構築には、様々な工程が含まれます。また、一度構築したUIに新たな機能を追加するなどの拡張には多くの工数が必要ですが、MUIを利用すると、UIを簡単に拡張できます。MUIは、多くのReactコンポーネントを含むUIライブラリのため、必要に応じてコピー&ペーストでUIをカスタマイズすることが可能です。

MUIのデメリット

MUIは、便利なライブラリではあるものの、デメリットについても利用する前に把握しておくことが大切です。MUIのデメリットとして次のような項目が挙げられます。

デザインの自由度が下がる

予め決められたコンポーネントを利用するため、デザインの自由度が下がります。利用するフレームワークによっては、ある程度カスタマイズができるものの、ゼロからUI部品を作る場合と比較すると自由度が低いといえます。

また、使いやすいフレームワークは、多くのデザイナーや開発者に利用されています。そのため、既視感のあるUIデザインになりやすい事も留意しておきましょう。

ライブラリに依存する

MUIを用いて作成したUIの機能は、開発のために利用するフレームワークに依存します。プロダクトを長期的に運用していく場合に、技術的な制限が発生することも一般的です。

例えば、Vue.jsに依存しているUIに機能の追加や修正が生じた場合、Vue.js自体のアップデートに対応するまで時間がかかる可能性があります。MUIを利用する際は、フレームワークの仕様について吟味した上で開発を進めることが重要です。

Vue.jsについて詳しくは「【Vue.js入門】特徴や他のフレームワークとの比較などを紹介!」をご覧ください。

MUIの導入手順

MUIを利用する際には、Reactアプリを作成できる環境の構築と、MUIのインストールを行う必要があります。MUIを導入するまでの手順は次の通りです。

【利用した開発環境】

OS Windows 11 Home
ブラウザ Google Chrome
Node.js v 20.10.0
npm v 10.2.3
React v 11.11.3
MUI v 5.15.3

環境構築

MUIを利用する準備として、公式サイトからNode.jsをダウンロードし、インストールしましょう。

MUIの環境構築-公式サイトからNode.jsをダウンロード

コマンドプロンプトで「npm install」コマンドを実行すると、npmがインストールされます。「npm -v」と入力し、バージョンが表示されていればインストールは成功です。

MUIの環境構築-コマンドの確認

Reactアプリを作成

「test-app」というディレクトリを作り、その中にReactアプリを作成します。「npx create-react-app test-app」コマンドを実行し、「test-app」ディレクトリが作られていれば成功です。

Reactアプリを作成-「npx create-react-app test-app」コマンドを実行
Reactアプリを作成-「test-app」ディレクトリの確認

コマンドプロンプトで「test-app」ディレクトリに移動してから、「npm start」コマンドを実行しましょう。

Reactアプリを作成-「npm start」コマンドを実行

ブラウザが起動し、Reactの画面が表示されていれば、Reactアプリが作成できています。

Reactアプリを作成-Reactの画面

MUIをインストール

「npm list –depth=0」のコマンドを実行し、Reactのバージョンを確認します。

MUIをインストール-「npm list --depth=0」コマンドを実行

次に、Material-UIをインストールするため「npm install @mui/material @emotion/react @emotion/styled @mui/icons-material」のコマンドを実行しましょう。

MUIをインストール-「npm install @mui/material @emotion/react @emotion/styled @mui/icons-material」コマンドを実行

ここまでの操作で、MUIを利用するための準備は完了です。

MUIのコンポーネントを使ってみよう!

MUIのインストールが完了すると、コンポーネントを利用してUIを作成できます。ここでは、基本的なコンポーネントであるアイコンやボタン、表の使い方を解説します。

アイコン(Icons)

MUIの公式サイトにあるアイコンのページにアクセスし、利用したいアイコンのスタイルを選びましょう。今回は「Home」というアイコンを例として解説します。

アイコン(Icons)-利用したいアイコンのスタイルを選択

アイコンをクリックし、上部にあるコードをコピーします。

アイコン(Icons)-上部にあるコードをコピー

コピーしたコードを、「test-app」の「src」ディレクトリ内にある「App.js」というファイルの上部に張り付けましょう。また、アイコンを表示するための「<HomeIcon />」のコードも追記します。

アイコン(Icons)-「App.js」にコードを貼り付け

コマンドプロンプトで「test-app」ディレクトリに移動し、「npm start」コマンドを実行しましょう。

アイコン(Icons)-「test-app」ディレクトリに移動し「npm start」コマンドを実行

ブラウザが起動し、画面上にホームアイコンが表示されていれば、操作は成功です。アイコンにクリック効果を付与すると、ボタンとして利用できます。「App.js」ファイルの上部に次のコードを追加し、アイコンのコードを<Button>と</Button>で囲みましょう。

アイコン(Icons)-「App.js」ファイルの上部にコードを追加

改めてファイルを実行すると、アイコンにボタン機能が追加され、クリックできるようになります。

アイコン(Icons)-ボタン表示を確認

ボタン(Button)

1つのボタンの文字色や背景色を設定する場合、<Button>に次のような形でstyleを設定する方法が簡単です。

ボタン(Button)-styleの設定
ボタン(Button)-ボタンの確認

複数のボタンを作成して共通のスタイルを適用したい場合は、class指定が便利です。次のようなコードで、ボタンに対してclassを設定し、文字色や背景色を反映できます。

ボタン(Button)-classを設定
ボタン(Button)-class設定の表示確認

ボタンにリンクを設定したい場合は、次のようにhref属性を追加しましょう。

表(Table)

最後に、MUIのTableコンポーネントを使った表の作り方を紹介します。MUIにはデフォルトで表を作成する機能が備わっているため、積極的に活用しましょう。表を作るためのサンプルコードは次の通りです。

<Table>にある「colSpan=”2”」という記述は、表のセルの幅を決めるpropsです。また、「headSticky」という記述はsticky propsと呼ばれ、テーブルのheaderを固定したい時に追加します。

このコードを実行すると、次のような画面が表示されます。

表(Table)-表示の確認

MUIで表を作るためのコンポーネントには、Table以外にDataGridと呼ばれるものもあります。DataGridを用いると、Tableよりも簡潔にコードを記述することが可能です。

DataGridを使用する場合は、コマンドプロンプトで「npm install @mui/x-data-grid」を実行し、必要なパッケージをインストールしましょう。

DataGridを使って表を作るサンプルコードは次の通りです。

コードを実行すると、先ほどと同様に表が作成されます。

表(Table)-DataGridを使って表の表示確認

MUIの導入方法や使い方を理解して、綺麗なUIを作成しよう!

MUIのコンポーネントを活用すると、Reactアプリケーションを効率的に作成することが可能です。ボタンやテキストフィールドなどの部品を用いて、デザイン性にも優れたUIを構築できます。

MUIを活用したwebアプリケーションの作成について詳しく学びたい方には、下記の講座がおすすめです。

Udemyおすすめ講座

FastAPI×Reactで作るwebアプリケーション

FastAPI×Reactで作るwebアプリケーション

4.6(13 件の評価)

113 人の受験生

作成者: Shunsuke Hata(Python,JavaScript,GO,swift)

バックエンドにPythonのFastAPI、フロントエンドにReactを使ったアプリケーションの構築方法を学びます。

\無料でプレビューをチェック!/

講座を見てみる

MUIを活用してアプリケーションを効率よく構築しましょう!