SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

基礎からはじめるReact入門

React×Material-UIでモダンなUIを実装する

基礎からはじめるReact入門 第3回


  • X ポスト
  • このエントリーをはてなブックマークに追加

Material-UIを実装する

Material-UIの活用

 では、Material-UIを実装する方法を解説していきます。まずはチップとアバターというコンポーネントについて紹介します。チップは角丸の長方形のオブジェクト内に複数の要素を表現できるコンポーネント、アバターは人やものを丸いアイコンで表現するためのコンポーネントです。

 ここで紹介するサンプルでのチップとアバターの関係は、チップにアバターが内包されているというイメージです。下表(表1、表2)のチップとアバターのプロパティ一覧にも記載していますが、チップではonRequestDeleteにコールバックを設定することで削除アイコンを表示させ、ハンドルすることが可能です。アバターは単独で利用されるというよりもチップやリストアイテムといった他のコンポーネントと組み合わせて利用するケースのほうが多いと思います。

表1 チップの主なプロパティ
# プロパティ 説明
1 backgroundColor string 背景色を設定。
2 labelColor string ラベルの色を設定。
3 labelStyle object ラベルのスタイルを設定。
4 onRequestDelete function 削除ボタンクリック時のコールバックを設定。このプロパティが設定された場合に削除ボタンが表示される。
5 onTouchTap function 要素がタップされた時のコールバックを設定。
6 style object スタイルを指定。親要素のスタイルをオーバーライドする場合に利用。
表2 アバターの主なプロパティ
# プロパティ 説明
1 backgroundColor string 背景色を設定。アイコン画像には適用されない。
2 children node 子要素を設定。
3 icon element アバターにSvgIcon、またはFontIconというアイコンコンポーネントを設定。
4 color string アイコンの色を設定。
5 size number アバターのピクセル数を設定。
6 src string アバターに画像を設定。この値が設定される場合はimg要素として描画され、それ以外の場合はdiv要素として描画される。
7 style object スタイルを指定。親要素のスタイルをオーバーライドする場合に利用。

 リスト2と図4は、チップとアバターを利用したサンプルコードとその実行結果です。削除ボタンのクリック時とそれ以外の領域のクリック時に、それぞれhandleTouchDeleteとhandleTouchTapが実行されます。

リスト2 mui-chip-sample/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import ‘./index.css';

// (1)モジュールのインポート
import MuiThemeProvider from ‘material-ui/styles/MuiThemeProvider';
import Avatar from 'material-ui/Avatar';
import Chip from 'material-ui/Chip';
import injectTapEventPlugin from 'react-tap-event-plugin';

// (2)タッチイベントに必要なコード
//    http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();

const styles = {
  chip: {
    margin: 5,
  },
  wrapper: {
    display: 'flex',
    flexWrap: 'wrap',
  },
};

// (3)タップイベントのハンドラ
function handleTouchDelete() {
  alert('削除ボタンが押されました');
}

function handleTouchTap() {
  alert('チップが選択されました。');
}

// (4)Material-UIのコンポーネントの宣言
class MyChipSmaple extends React.Component {
  render() {
    return (
        <MuiThemeProvider>
      <div style={styles.wrapper}>
        <Chip
          onRequestDelete={handleTouchDelete}
          onTouchTap={handleTouchTap}
          style={styles.chip} >
          <Avatar size={32}>TS</Avatar>
          Taro Sakurai
        </Chip>

    [繰り返しのため省略]

        </MuiThemeProvider>
    );
  }
}

ReactDOM.render(
  <MyChipSmaple />,
  document.getElementById('root')
);

図4 実行結果
図4 実行結果

 実行結果の通り、Material-UIを利用すると今風のUIのウィジェットを簡単に表示することができます。(1)でモジュールを読み込み、(4)で宣言したコンポーネントをReactDOM.renderメソッドで描画することでMaterial-UIを利用しています。また、宣言したコンポーネント内でチップを呼び出し、同時にイベントハンドラの設定、およびコンテンツの表示を行っています。ここで言及すべきポイントは、Material-UIで提供されるコンポーネントを利用するためにテーマを適用する必要があるということです。(4)のように、MuiThemeProviderを最上位の階層としてチップやアバターのコンポーネントを呼び出すことにより、Material-UIのデザインがウィジェットに適用されます。(2)はインストール時にも触れましたが、タップイベント系取得に必要な設定で、アプリの最初に書くおまじないのようなものです。

MuiThemeProviderについて

 Material-UIで提供されるMuiThemeProviderをカスタマイズすることで、アプリ全体のデザインを変更することができます。標準で提供されているスタイルには、lightBaseTheme(デフォルト設定)とdarkBaseThemeがあります。darkBaseThemeを適用する場合は、以下のようなモジュールの読み込みとテーマ適用の設定を行います。

リスト3 darkBaseThemeスタイルとスタイルを適用するgetMuiThemeメソッドの読み込み
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
リスト4 コンポーネントの宣言、MuiThemeProviderへのテーマ適用
class MyButton extends React.Component {
  render() {
    return(
      <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>
        <RaisedButton label="MyButton" />
      </MuiThemeProvider>
    );
  }
}

 また、さらに細やかなスタイルの変更は、 muiThemeオブジェクトのプロパティの設定を個別にすることで実現できます。muiThemeオブジェクトには、コンポーネント間の間隔やフォント、要素のカラーといったさまざまな設定がされています。コンポーネント宣言時にカスタマイズしたテーマを適用することで、思い通りのデザインのアプリを作ることが可能です。カスタマイズ可能な項目は以下の表の通りです。

表3 muiThemeの主なプロパティ
# プロパティ 説明
1 spacing コンポーネント間の間隔を設定。
2 fontFamily デフォルトのフォントを設定。
3 palette ウィジェットやテキストの色を設定。
4 zIndex コンポーネントの重なりの順序を指定。
5 isRTL 文字が右から左に表示されるように指定。
6 App Bar、Avatar等 個別のコンポーネントのスタイルを指定。

 実装方法は、引数にJSONファイルとしてカスタマイズしたい項目をセットしてgetMuiThemeメソッドを呼び出し、戻り値のmuiThemeオブジェクトをMuiThemeProviderコンポーネント生成時のPropsとして設定します。

リスト5 MuiThemeProviderのカスタマイズ方法
// カスタマイズしたい項目の設定
const muiTheme = getMuiTheme({
  palette: {
    primary1Color: blue500,
  },
  RaisedButton: {
    width: 80,
  },
});

// PropsとしてmuiThemeオブジェクトを設定
const Main = () => (
  <MuiThemeProvider muiTheme={muiTheme}>
    <RaisedButton label="My Button” />
  </MuiThemeProvider>
);

まとめ

 今回は、Reactコンポーネントセットの一つである、Material-UIを紹介しました。他にもさまざまなコンポーネントが利用可能なので、ご自身に合ったものをぜひ探してみてください。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
基礎からはじめるReact入門連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 飯田 勝也(イイダ カツヤ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/10074 2017/04/14 21:50

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング