React でマテリアルデザインを実装する Material UI を試してみる

f:id:syonx:20150329160432p:plain

Material-UI is a CSS framework and a set of React components that implement Google's Material Design specification.

制作事例

syonx.hatenablog.com

Introduction

f:id:syonx:20150329160931p:plain

f:id:syonx:20150329160939p:plain

f:id:syonx:20150329160946p:plain

入手

$ git clone https://github.com/callemall/material-ui.git

デモページも React 製

  • material-ui / docs をビルドしたものがデモページとして公開されている
  • デモページのソースを見てもそれはレンダリング結果
    • JSX変換 や Browserify を通した後のコンパイルされたコードなので複雑
  • コンパイル前のソースが手に入る
    • デモページを見ながら実際にどうコードを書けばいいかがわかる
  • jsxファイルを編集すれば自動的に再読み込みされる
    • 変更内容がどう作用するかわかる。例えば Buttons ページは↓
    • material-ui/docs/src/app/components/pages/components/buttons.jsx
$ cd material-ui
$ npm install
$ cd docs
$ npm install
$ npm start

開発用のひな形が用意されている

f:id:syonx:20150329165509p:plain

  • material-ui / example ディレクト
  • package.json
    • Browserify, Gulp, BrowserSync など。下に抜粋。
  • マテリアルデザイン用の Roboto フォントも使えるよ
    • www / index.html に記述されている
  • コードを書く箇所は src/app/components/main.jsx
  • スタイルは Less
$ cd material-ui/example
$ npm install
$ npm start

material-ui / example / package.json (抜粋)

  "devDependencies": {
    "browser-sync": "^1.8.1",
    "browserify": "^7.0.3",
    "gulp": "^3.8.10",
    "gulp-autoprefixer": "^2.0.0",
    "gulp-less": "^3.0.0",
    "gulp-notify": "^2.1.0",
    "gulp-sourcemaps": "^1.2.8",
    "gulp-util": "^3.0.1",
    "pretty-hrtime": "^0.2.2",
    "reactify": "^0.17.1",
    "require-dir": "^0.1.0",
    "underscore": "^1.7.0",
    "vinyl-source-stream": "^1.0.0",
    "watchify": "^2.2.1"
  },
  "dependencies": {
    "material-ui": "^0.7.0",
    "react": "^0.12.2",
    "react-tap-event-plugin": "^0.1.3"
  }

ご参考

umi-uyura.hatenablog.com

おわり

まだ React 自体の理解も深まっていないですが、今回の試みで得られた上記のひな形なんかはとても有用です。Material UI もコンポーネントなので、使いたくなったら require すればオッケーなんだろうなーといった感覚が得られました。開発の仕方もわかったし、今回はこの辺りでおわり。