Material-UI活用事例まとめ！使い方の参考に

Material-UIは、Reactベースのフレームワークの1つ。ユーザーの感覚に訴えるUIデザインを可能にしてくれるので、エンジニアに注目されているパッケージです。そこで今回は、Material-UIに興味を持つ方に向けて、参考になりそうな活用事例を紹介します。

目次

• Material-UIの環境構築
• Material-UIのトラブル対応コードサンプル
• Material-UIの実装テスト

Material-UIの環境構築

GoogleのMaterial Designが提供しているUIパーツをReactベースで使えるMaterial-UIは、3D空間を形成し、部質的な法則に則たデザインを可能にするフレームワーク。平面でありながら、ユーザーが直感的に操作できるようなデザインをするときに便利なので、Webデザイナーやプログラマーから支持されているパッケージの1つです。

こちらの記事には、Material-UIの環境構築に関する備忘録が綴られています。ファイル記述のデモもアップされているので、これからMaterial-UIを使う方はぜひ参考にしてみてくださいね！

参照元：Reduxでmaterial-ui使ってみる

Material-UIのトラブル対応コードサンプル

こちらの記事では、Reactでの開発中に、Material-UIのコンポーネント利用でちょっとしたアクシデントに見舞われたときの対処方法（コードサンプル）が紹介されています。

これからReactをベースにMaterial-UIの勉強を進めようという方、似たようなエラーで困っているという方は、ぜひ目を通してみてはいかがでしょう。

参照元：React.js:MaterialUIを使ったTextFieldのコードサンプルのメモ

Material-UIの実装テスト

こちらは、Material-UIの実装テストにGoogleのMaterial Design Liteを使用した記事。Tableの実装に大きな違いがあり、置き換えはスムーズではなかったとのこと。しかし、工夫することでデザイン性を向上させることができたそうです。

注目度の高いフレームワークも、実際のサービスに実装するときにはリスクが生じます。それをいかに解消するかは、経験やスキルがものをいうのかもしれませんね。

Material-UIの導入に迷っている方は、チェックしてみてください。経験者の声は実装を検討する際の参考になることと思います。

参照元：Material-UIを試している