【Reactアプリ開発】CSSフレームワーク Material UIの導入

こんにちは。本日は、Reactで開発した画面を一気におしゃれにするCSSフレームワークである、「Material-UI」を使ってみようと思います。

Material UIとは?

Material UI

公式ページによると、「世界で最も有名なReactのUIフレームワーク」と書いてあります。

Google Trendで調べてみると、2013年後半頃から右肩上がりで検索数が増えてきているようです。現在進行形で人気になっているフレームワークのようです。

Google Trendの傾向

Material UIはGoogleが提唱した「マテリアルデザイン」の考え方に沿ったUIデザインのフレームワークになっており、これを利用すると、簡単にマテリアルデザインに準拠したUIレイアウトを作ることができます。

マテリアルデザインとは

(Wikipediaより)

  • Googleが提唱したデザインシステムの一種、およびそれを実現する開発技法やデザイン・試みの総称
  • 2014年6月にGoogle I/0 Conferenceで新しいユーザエクスペリエンス設計体系として発表された

Googleのページで、思想や定義の詳細を確認することができます。

https://material.io/design

Google Material Design公式ページ

Material UIの導入方法

Material UIはnpmから1行でインストールが完了します。

前提として、reactは使える環境になっていることとします。

プロジェクトフォルダ配下で以下を実行します。

npm install --save material-ui

以上で完了です!笑

Material UIを使ったコンポーネントの実装例

それでは、Material UIを使ってどのような画面・コンポーネントが作れるか、サンプルをご紹介していきます。

こちら、Material UIの公式ページにソースコードと共に実装が紹介されているので、一瞬で実装できてしまいます。

実装方法の基本

Material UIは、基本的に以下のような実装で利用することができます。

とても直感的で簡単です!

## 使いたいコンポーネントをimport(Gridコンポーネントの例)
import Grid from '@material-ui/core/Grid';

## 実装
<Grid ...オプション...>表示名</Grid>

それでは、以下では、Material UIであらかじめ用意されているコンポーネントや画面のテンプレートの一例をご紹介します。これをみるだけでも、欲しかったあのレイアウトがすぐに手に入れられることがわかるかと思います!

画面のテンプレート

Material UIのページには、Materialコンポーネントを組み合わせた画面のテンプレートがいくつか用意されているので、ログイン画面、ダッシュボード画面などの土台を手軽に構築することができます。これは超便利!

ソースコードも下の画面からコピー可能です。

https://material-ui.com/getting-started/templates/

Material UI Template

ボタン

チェックボックス

日付ピッカー

*こちらは、追加でライブラリのインストールが必要になります。

Switchボタン

カート

などなど・・。ここで説明するよりも公式ドキュメントの説明とサンプルがとても充実しているので、あとは自分が欲しいコンポーネントがあるかは公式ドキュメントから確認してみてください!

以上、UIフレームワークMaterial UIを使う方法とサンプルのご紹介でした!

最後までご覧いただきありがとうございました。

[番外編] もっとReact.jsを学ぶには・・・

React.jsをもっと学びたい方、以下におすすめの学習コンテンツをまとめましたので、よろしければご活用いただければと思います!

土台のJavaScript/TypeScriptに不安がある方は、こちらもまとめましたので、ご参考になりましたら幸いです。

この記事を気に入っていただけたらシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。

ABOUT US

Yuu113
初めまして。Yuu113と申します。 兵庫県出身、東京でシステムエンジニアをしております。現在は主にデータ分析、機械学習を活用してビジネスモデリングに取り組んでいます。日々学んだことや経験したことを整理していきたいと思い、ブログを始めました。旅行、カメラ、IT技術、江戸文化が大好きですので、これらについても記事にしていきたいと思っています。