Help us understand the problem. What is going on with this article?

MateriaUI-入門

More than 1 year has passed since last update.

初めに

 今回、学習コスト的に微妙にお高くついたMaterial-uiに関しての記事をまとめていきたいと思います。

暗黙ルールなどが多く個人的には面倒だなとおもいつつも

プロトタイプレベルで物を作成するのであれば結構な開発効率が得られるのではないかと思います。

実際に使用する方法も後日説明しますが最初に、基礎的な導入を解説していこうと思います。

目次

環境構築

マシンインストール

node.jsを持っていない場合はインストールを行う。

リンク

基本的にnpmを使用したReactありきの環境構築

create-react-app持っていない方はインストール

$ npm install --global create-react-app

インストールが完了したら下記のコマンドを実行する

その際【PROJECT名】は任意に書き換えること。

$ react-create-app 【PROJECT名】
$ cd 【PROJECT名】
# Material-uiをインストール
$ npm install @material-ui/core @material-ui/icons

コマンド一覧

基本的に何もする必要はないのですが、下記のコマンドを使用して開発を行っていきます。

command 効果
$ npm run start ブラウザ環境で、動作させ操作してみる。localhost:3000
$ npm run build webpackを用い、アップロード用にbuildを行う distにbuild済のものが入る
$ npm run test Jestを使用したテストを行える。 記事
$ npm run eject react-scriptsの中身を展開する(暗黙で入っているパッケージ郡を分解する)一度実行すると後戻りできません

setup直後のリポジトリの状態

Material-UIにおけるレイアウト(Layout)

フレームを作成する際に使用します。

  • グリッドデザイン
    • xs, sm, md, lg, xl と5つのブレークポイントが存在している。 [モバイルファースト]
    • 横幅は12
  • グリッドとグリッドの間隔を指定可能 spacing
    • 0 8 24 32 40 [dp]
  • item属性を付与することにより、要素とフレームを切り分けれる

Tips : CSSに当たる所のdisplay: flex;を拡張した感じのイメージ

Grid

import {Grid} from "@material-ui/core"
//...省略...
return (
  <Grid container spaacing={16} >
    <Grid item xs={4}>
      要素1
    </Grid>
    <Grid item xs={4}>
      要素2
    </Grid>
    <Grid item xs={4}>
      要素3
    </Grid>
  </Grid>
);

ブレークポイント

カッチリ作る時は覚えておくと良いポイント

属性名 効果 デバイスサンプル
xs 0px以上に適用 iPhone
sm 600px以上に適用 iPad(縦)
md 960px以上に適用 iPad(横) iPadPro(縦)
lg 1280px以上に適用 iPadPro(横)
xl 1920px以上に適用 一般的なディスプレイ

属性

よく使う属性

属性名 引数 効果
container bool flexコンテナとして動作
item bool flexアイテムとして動作
spacing enum itemコンポーネントの間隔をdpとして定義
alignContent enum CSSのalign-contentと同じ動作
alignItems enum CSSのalign-itemsと同じ動作
justify enum CSSのjustify-contentと同じ動作

Flexの効果に関しては非常にわかりやすい記事があるのでそちらを参照すると良いかもしれない。

CSS Flexboxのチートシートを作ったので配布します - Webクリエイターボックス様

Material-UIにおけるコンポーネント

もともとの意味として【構成要素・成分】といった意味があります。

MaterialUI的にいうのなら構成要素のほうがしっくりくるかと。

特徴としては

  • 部品を細分化したもの
    • 描画されるものが多数
  • プロパティを与えることによって様々な動作を行う
  • イベントのハンドリングを行える。

自分の中のさらなる分類

自分の頭の中での話なのですっ飛ばしてもらっても構いません

  • パネルタイプ(ダイアログやポップアップ的な動作)
  • バータイプ(いわゆるナビゲーションのようなもの)
  • チップタイプ(ボタンや、フォームアクション、丸いアイコンの自作など)

パネルタイプ

ポップアップメニュー、ダイアログなどといった通知や一時的にページを作りたい時の画面

Routingを必要としていない部分の要素でよく使われるもの

バータイプ

ナビゲーション的な部分を位置している。

Routingを必要としている部分の要素でよく使われているもの

チップタイプ

フォームや、SNSでよくみかける画像アイコンの部分。

Layoutやパネル、バーに入れ込む形で実装を行うモノ。

onClickやonChangeがよく使用され、そのステータスをバータイプやパネルタイプへの設定を反映させるために使用する。

その他

先程出したものとは違う形で、会員登録の際等によく使用される、次へ、次へという方式のものもありますが今は割愛します。

チップタイプ

Typography

文字をイイ感じに成型してくれます。

既存のh1等を使用しても問題ないと思いますが、Robotフォントを適用してくれているのでそこそこ使い勝手が良くなる

<Typography valiant="表示する種類" {...その他プロパティ}>
  内容
</Typography>

valiant属性

  • display4
  • display3
  • display2
  • display1
  • headline
  • title
  • subheading
  • body2
  • body1
  • caption
  • button

文字をそのまま記述する場合は何もなくて大丈夫です(いわゆるPタグ)

gutterBottm属性, paragraph属性

margin-bottomを付与させます。

※pragraphは段落という意味合いがあります。

noWrap属性

テキストが折り返さなくなります。

文字を制限したい場合など、何かと小回りが効く。

それは十一月よくその保留者というののためがしないず。
ひょろひょろ事実を助言心はもしその支配ますたまでで考えるているなをは約束知れうですば、全くには願いんないなない。

こちらが

それは十一月よくその保留者というののため...

と、確実に一行で表示されるようになるのでUIの崩れなどを制御することが可能です。

align属性

要素を指定の方向に寄せる。(基本は左寄せ)

  • inherit
  • left
  • center
  • right
  • justify (均等に分割されます日本のタイポグラフィでも使うことがしばしありますので片隅にでも。)
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away