Tech FrontEnd

[React]MUIのコンポーネントを使用したUI作成(Button、Alert編)

投稿日:

はじめに

最近は仕事でReactを使用しており、コンポーネントに関してはほぼMUIを使用しているので、今回はMUIの代表的なコンポーネントの使い方やデザイン、私がどのように使用しているかの紹介をしたいと思います。

MUI

MUIとはReact用のコンポーネントライブラリで、マテリアルデザインをベースに開発されているオープンソースライブラリです。

https://mui.com/

Button

Buttonの実装

まずは基本中の基本であるButtonから行きたいと思います。MUIのButtonの形状を設定できるvariantは「text」「outlined」「contained」の3種類があります。

上記のコードを実行すると以下のように表示されます。

左から順に「text」「outlined」「contained」のButtonになります。

Buttonの使い分け

画面内の重要度に応じて強弱をつけるため、プライマリボタンと、セカンダリボタンを用意することがほとんどです
MUIで用意されている3種類のデザインの使い分けに関して、私は以下のように使い分けをしています。

  • contained
    • 重要度:強
    • 画面内で一番重要なボタンで使用する、最終的にユーザーに影響を与えるボタンに使用する。
  • outlined
    • 重要度:中
    • 画面内での変更がある操作や、遷移など画面内に複数配置するボタンに使用する。
  • text
    • 重要度:弱
    • 戻るボタンや、ダイアログのキャンセルなど、ユーザーに影響度が低いボタンに使用する。

不可逆な操作など、より強調したい時の使い方

データの削除など、不可逆な操作がある場合、ボタンのデザインに加えて色を変更することでより重要度を強調できます。
例えばデータの削除確認ダイアログなどは、以下のように色を赤に変更したButtonを使用しています。

Alert

Alertの実装

Alertはユーザーへ強調したい文言や、注意を引きたいときに使用するコンポーネントです。見た方が早いと思うので、先に画像を貼ります。

このように、アイコンと背景色付きのコンポーネントを表示できます。Alertのseverityに設定できるパラメータは4種類あり、上から「error」、「warning」、「info」、「success」になります。

サンプルコードは以下になります。

Alertの使い分け

Alertを使用するユースケースは以下のような形になると思います。

  • error
    • システムのエラーや、ユーザーが起こしたアクションが失敗した時の通知などに使用する。
  • warning
    • ユーザーに変化や、不可逆な場面でユーザーに通知したい重要事項がある際に使用する。
  • info
    • tipsなど補足説明や、軽いヘルプなどユーザーに通知があればより良い場面に使用する。
  • success
    • 保存など、ユーザーが起こしたアクションが成功した時の通知などに使用する。

私は主に「warning」のAlertを使用しており、他の3種類のAlertは使用していません。理由としては「error」だと赤背景に赤文字で目に痛すぎるかなと感じているのと、
「error」、「warning」の二つを使用すると結局「warning」の方はスルーされがちになってしまう懸念があるからです。

課金や退会など、注意事項を必ず読んでほしい、強調したい箇所に「warning」を使用するようにしています。

さいごに

MUIのコンポーネントはReactで開発していく上で必須のライブラリだと思っています。

しばらくはこちらの実装方法と、あくまでも私の使い方にはなりますが、実際の使用例や使い分けの考え方などを紹介できればと思います。

おすすめ書籍

TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発 Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発

blog-page_footer_336




blog-page_footer_336




-Tech, FrontEnd
-,

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

js

Reactを始める前に知っておきたいES2015/ES6の機能

1 はじめに2 ECMAScript – ES2015/ES6とは3 変数と定数とスコープ4 テンプレート文字列5 分割代入6 デフォルト引数7 残余引数(レストパラメータ)8 展開(スプ ...

react-icon

MUI Themeでカラー、シャドウ、フォントなどを設定する

1 はじめに2 Themeとは3 Themeのセットアップ4 Themeの設定方法4.1 Palette4.1.1 colorオブジェクト4.1.2 直接色を指定する4.2 Elevationのシャド ...

laravel logo

Inertia使ってみた②

1 はじめに2 フォームヘルパー2.1 ポイント2.2 他機能3 ローディング表示4 さいごに5 おすすめ書籍 はじめに 前回はInertiaの基本的な内容について書いてみました。今回はもう少し実践的 ...

react-icon

Vite 3を使ってみた

1 はじめに2 なぜViteは早いのか2.1 Native ESMの活用2.2 esbuildによる事前バンドル3 Viteのセットアップ3.1 Reactテンプレートでのセットアップ3.2 vite ...

react-icon

react-intl (Format.js) を使ってi18n対応

1 はじめに2 react-intlとは?3 react-intlの導入4 使い方4.1 IntlProviderの実装4.2 メッセージ定義4.3 <Foramatted*>コンポーネン ...

フォロー

blog-page_side_responsive

2023年7月
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。