Material-UI 使ってみたよ！

こんにちは。
メゾンマークでフロントエンドを担当している、k-taroです。

今回は最近趣味開発で使い始めたMaterial-UIについて導入から実装までを行います。
viewはもちろんReactです！

www.material-ui.com

Material-UIとはGoogleのMaterialデザインを実装できるReact用のviewコンポーネント群です。
今流行りのMaterialデザインをもとに作られており、さくっとviewを作りたい時には十分な量のコンポーネントが用意されています！

それでは使ってみましょう！

導入

まずはcreate-react-appでreactの導入と必要なモジュールをインストールします。

$ create-react-app sample
$ cd sample
$ npm i material-ui react-tap-event-plugin

これで導入は完了です

react-tap-event-plugin

Material UIの公式サイトにタッチ、タップ、クリックイベントを使うためにreact-tap-event-pluginを使ってくれよ！って書いてあるので、src/index.jsでこれらのイベントを使う準備をします。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import injectTapEventPlugin from 'react-tap-event-plugin';

// クリックイベントなどを使えるようにする
injectTapEventPlugin();

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

これで準備はOKです！

完成品

まずは完成ソースと画面キャプチャをご覧ください。

import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {open: false};
    this.handleOpen = this.handleOpen.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }

  handleOpen() {
    this.setState({open: true});
  }

  handleClose() {
    this.setState({open: false});
  }

  render() {
    const actions = [
      <FlatButton
        label="Cancel"
        primary={true}
        onTouchTap={this.handleClose}
      />,
      <FlatButton
        label="Submit"
        primary={true}
        keyboardFocused={true}
        onTouchTap={this.handleClose}
      />,
    ];

    return (
      <MuiThemeProvider>
        <div>
          <AppBar title="Title" />
          <RaisedButton label="Dialog" onTouchTap={this.handleOpen} />
          <Dialog
          title="Dialog With Actions"
          actions={actions}
          modal={false}
          open={this.state.open}
          onRequestClose={this.handleClose}
        >
          The actions in this window were passed in as an array of React objects.
        </Dialog>
        </div>
      </MuiThemeProvider>
    );
  }
}
export default App;

こちらが画面キャプチャです
Dialogボタンを押すとモーダルが起動します！ これだけの記述でデザインと動きが実装できるのはとてもありがたいです。。。

解説

先ほどのソースを解説します！

import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';

ここで使用するMaterial-UIのコンポーネントをimportしています。
ポイントはルートコンポーネントをMuiThemeProviderでラップすることで、Material UIのコンポーネントを使えるようにします。

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {open: false};
    this.handleOpen = this.handleOpen.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }

  handleOpen() {
    this.setState({open: true});
  }

  handleClose() {
    this.setState({open: false});
  }

ここでダイアログの開閉フラグと、イベントを定義しています。

render() {
  const actions = [
    <FlatButton
      label="Cancel"
      primary={true}
      onTouchTap={this.handleClose}
    />,
    <FlatButton
      label="Submit"
      primary={true}
      keyboardFocused={true}
      onTouchTap={this.handleClose}
    />,
  ];

  return (
    <MuiThemeProvider>
      <div>
        <AppBar title="Title" />
        <RaisedButton label="Dialog" onTouchTap={this.handleOpen} />
        <Dialog
        title="Dialog With Actions"
        actions={actions}
        modal={false}
        open={this.state.open}
        onRequestClose={this.handleClose}
      >
        The actions in this window were passed in as an array of React objects.
      </Dialog>
      </div>
    </MuiThemeProvider>
  );
}

ここで実際にMaterial-UIを使っています。
AppBarはヘッダーのコンポーネントで、titleに値を渡すことでヘッダー内にタイトルのように表示されます。
RaisedButtonコンポーネントをクリックするとstateが代わり、モーダルが開閉します。
Dialogコンポーネント内で、FlatButtonコンポーネントを使い、開閉ボタンを作っています。
また、onRequestCloseでモーダル外をクリックした際にもthis.handleCloseを発火させるようにしています。

公式サイトのComponentに詳しい使い方が乗っているので、興味のある方はみてみてください！

www.material-ui.com

まとめ

簡単ではありましたが、Material-UIの導入から実装を行いました
さくっとviewを作りたい時にはとても便利だと思うので、ぜひつかってみてください！