2017年8月08日

トレンドなデザインをするなら、"Material-UI"に注目!

実装するときの参考に!Material-UI活用事例まとめ!

実装するときの参考に!Material-UI活用事例まとめ!

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

(1)Reduxでmaterial-ui使ってみる


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

『不動産屋のエンジニアリング日記』を運営しているGakuさんも、"Material-UI"の魅力に興味を持った1人で、そのためにReactを学び、念願の導入に踏み切ったんだとか。
日記の中の《Reduxでmaterial-ui使ってみる》という記事には、そのときの環境構築に関する備忘録が綴られています。
ファイル記述のデモもアップされているので、これから"Material-UI"を使う方はぜひ参考にしてみてくださいね!

また、Gakuさんの日記には、他にもテック系の記事が数多くエントリーしています。
デザインに関すること以外にも、あなたの気になる情報が載っているかもしれませんよ。
ぜひ一度訪問してみることをオススメします。

【参照元】
http://www.gakusmemo.com/?p=286
 

(2)Material-UIを使ったコードサンプルのメモ


デジタルマーケティングとITシステムの開発・運用・保守などを手がけている《Amelt.net, LLC.》のサイトには、ビジネスやプログラミング、起業に関する記事が掲載されています。
その中には、"Material-UI"の実装に関する記事もありました。

タイトルは《React.js:MaterialUIを使ったTextFieldのコードサンプルのメモ》
この記事を執筆したAmelt.net, LLC.の創業者である竹元國嘉さんは、Reactで開発中、”Material-UI”のコンポーネント利用でちょっとしたアクシデントに見舞われたそうです。

記事には、そのとき竹元さんが行った対処方法(コードサンプル)が紹介されています。

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

【参照元】
https://www.amelt.net/imc/programming/javascript-programming/4967/
 

(3)Material-UIを試している


プログラマやWebアクセス解析士というキャリアを経て、現在はセキュリティ関連事業に携わっているただただしさんは、フロントエンド開発の終盤で"Material-UI"を使ってみることにしたそうです。
しかし、導入前のテストとして、まずは既存のサービスに実装することにしました。

そのときの所感が『ただのにっき』の中に紹介されています。
記事のタイトルは、《Material-UIを試している》

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

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

「Material-UIの導入に迷っている」という方は、ぜひ上記の記事をチェックしてみてはいかがでしょう。
経験者の声は実装を検討する際の参考になることと思います。

【参照元】
http://sho.tdiary.net/20160709.html

役に立った/参考になったと思ったら、シェアをお願いします。

人気のスキルの求人・案件情報

レバテッククリエイター
おすすめコンテンツ

レバテッククリエイターはWeb・ゲーム業界に特化したデザイナー・クリエイター向けの求人・案件提案サービスです。