おすすめ書籍はじめに最近は仕事でReactを使用しており、コンポーネントに関してはほぼMUIを使用しているので、今回はMUIの代表的なコンポーネントの使い方やデザイン、私がどのように使用しているかの紹介をしたいと思います。MUIMUIとはReact用のコンポーネントライブラリで、マテリアルデザインをベースに開発されているオープンソースライブラリです。https://mui.com/ButtonButtonの実装まずは基本中の基本であるButtonから行きたいと思います。MUIのButtonの形状を設定できるvariantは「text」「outlined」「contained」の3種類があります。variant="contained">Contained</Button></Stack>);}上記のコードを実行すると以下のように表示されます。左から順に「text」「outlined」「contained」のButtonになります。Buttonの使い分け画面内の重要度に応じて強弱をつけるため、プライマリボタンと、セカンダリボタンを用意することがほとんどですMUIで用意されている3種類のデザインの使い分けに関して、私は以下のように使い分けをしています。画面内で一番重要なボタンで使用する、最終的にユーザーに影響を与えるボタンに使用する。画面内での変更がある操作や、遷移など画面内に複数配置するボタンに使用する。戻るボタンや、ダイアログのキャンセルなど、ユーザーに影響度が低いボタンに使用する。不可逆な操作など、より強調したい時の使い方データの削除など、不可逆な操作がある場合、ボタンのデザインに加えて色を変更することでより重要度を強調できます。データの削除確認ダイアログなどは、以下のように色を赤に変更したButtonを使用しています。AlertAlertの実装Alertはユーザーへ強調したい文言や、注意を引きたいときに使用するコンポーネントです。見た方が早いと思うので、先に画像を貼ります。このように、アイコンと背景色付きのコンポーネントを表示できます。Alertのseverityに設定できるパラメータは4種類あり、上から「error」、「warning」、「info」、「success」になります。サンプルコードは以下になります。out!</Alert></Stack>);}Alertの使い分けAlertを使用するユースケースは以下のような形になると思います。errorシステムのエラーや、ユーザーが起こしたアクションが失敗した時の通知などに使用する。warningユーザーに変化や、不可逆な場面でユーザーに通知したい重要事項がある際に使用する。infotipsなど補足説明や、軽いヘルプなどユーザーに通知があればより良い場面に使用する。success保存など、ユーザーが起こしたアクションが成功した時の通知などに使用する。私は主に「warning」のAlertを使用しており、他の3種類のAlertは使用していません。「error」、「warning」の二つを使用すると結局「warning」の方はスルーされがちになってしまう懸念があるからです。課金や退会など、注意事項を必ず読んでほしい、強調したい箇所に「warning」を使用するようにしています。さいごにMUIのコンポーネントはReactで開発していく上で必須のライブラリだと思っています。こちらの実装方法と、あくまでも私の使い方にはなりますが、実際の使用例や使い分けの考え方などを紹介できればと思います。助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。コメントをキャンセルメールアドレスが公開されることはありません。名前メールサイト上に表示された文字を入力してください。私たちは無料アプリもリリースしています、ぜひご覧ください。下記のアイコンから無料でダウンロードできます。