javascript react プログラミング 開発ノウハウ

Reactで作ったサンプルにMaterial-UIを適用する

投稿日:

こんにちは、mabuiです。
これまでの記事ではReactで仮想通貨の情報を表示するサンプルを
一つづつ技術を取り入れて作ってきましたが、
最後にMaterial-UIのコンポーネントを取り入れて、
デザインを良くしたものにして開発を終了しようと思います。

 
 

動作イメージ

導入した画面がこちらです。
これまでのものと比べると、ヘッダーがついたり、
ボタンがリッチになったり、テーブル構造になったりと
かなりそれっぽいものになったと思います。

 
 

Material-UIとは?

Material-UIは、Goggleが提供している
Reactのコンポーネントをまとめたライブラリです。
マテリアルデザインに従った、おしゃれなUIパーツを
使用することができます。

 
 

最初にMaterial-UI導入すれば良かった、、

今回ボタン、テーブル、ヘッダーバーをMaterial-UIのものに
差し替えましたが、コンポーネントには
テーブルにはソートの機能など、
実装に必要なロジックがあらかじめ用意されているため、
自前で用意した処理が大幅に不要になりました、、、
今後開発をする時はまず外部のコンポーネントを使用するかどうかを
決定させてから進めたほうが効率がいいと思いました。

 
 

コード紹介

こちらは通貨一覧画面のコンポーネントクラスです。
TitleAppBarがタイトルバー、
ChangeCurrencyが通貨切り替えボタン、
CurrencyTableがテーブルのそれぞれのコンポーネントになっていて、
画面をそれぞれのUIパーツの組み合わせで構築する、
Reactの考え方に沿ったものになっています。

 

こちらは通貨切り替えボタンのコンポーネント実装、

 

こちらはテーブルのコンポーネント実装です。

 

実装したコードのgithubはこちらです。

 
 

サンプル作ってみて、振り返り

これまでサンプルを作る過程で、
React、Redux、redux-thunk、react-router-dom、Plotly.js、Material-UIの
理解を深めることができました。

フロントエンド側で非同期通信のapiコールを実装したことで、
サーバーサイドの実装なく動的なサンプルサービスを作ることができて、
JavaScriptでのサービス開発の理解も深まったと思います。

再利用性の高いパーツを組み合わせてサービスを作り上げていく、
Reactの考え方は個人的にも合理的で好きなので、
今後仕事での開発でも個人的なサービス開発でも活用していこうと思っています!

 

-javascript, react, プログラミング, 開発ノウハウ
-, , ,

Copyright© 仮想通貨始めました , 2018 All Rights Reserved Powered by STINGER.