こんにちは。本日は、Reactで開発した画面を一気におしゃれにするCSSフレームワークである、「Material-UI」を使ってみようと思います。
Contents
Material UIとは？
公式ページによると、「世界で最も有名なReactのUIフレームワーク」と書いてあります。
Google Trendで調べてみると、2013年後半頃から右肩上がりで検索数が増えてきているようです。現在進行形で人気になっているフレームワークのようです。
Material UIはGoogleが提唱した「マテリアルデザイン」の考え方に沿ったUIデザインのフレームワークになっており、これを利用すると、簡単にマテリアルデザインに準拠したUIレイアウトを作ることができます。
Material UIの導入方法
Material UIはnpmから１行でインストールが完了します。
前提として、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/
ボタン
チェックボックス
日付ピッカー
*こちらは、追加でライブラリのインストールが必要になります。
Switchボタン
カート
などなど・・。ここで説明するよりも公式ドキュメントの説明とサンプルがとても充実しているので、あとは自分が欲しいコンポーネントがあるかは公式ドキュメントから確認してみてください！
以上、UIフレームワークMaterial UIを使う方法とサンプルのご紹介でした！
最後までご覧いただきありがとうございました。
[番外編] もっとReact.jsを学ぶには・・・
React.jsをもっと学びたい方、以下におすすめの学習コンテンツをまとめましたので、よろしければご活用いただければと思います！
土台のJavaScript/TypeScriptに不安がある方は、こちらもまとめましたので、ご参考になりましたら幸いです。
（Wikipediaより）
Googleのページで、思想や定義の詳細を確認することができます。
https://material.io/design