Material UIのv0.10.0が出ていたので見てみた

Material UIのv0.10.0が出たようです。

Material UI、v0.10.0が出てる。バージョンアップ早い。Breaking Changes書いてあるけど、最近使い始めた自分にはあまり影響なさそう / https://t.co/5QdgldMwuV

— Umi Uyura (@umi_uyura) July 10, 2015

またマイナーバージョンがひとつあがって、Breaking Changesがあるようですが、

• 消し忘れていたinput.jsxを削除したよ！
• Button系コンポーネントは <input type="submit"> をベースにしていたけど、 <button> ベースにしたよ！

という程度なので、該当するものを使っていたりカスタマイズしていたりしなければ、それほど影響がないような気もします。

そんなわけで、 リリースノート を眺めてみて、個人的に大きかった変更点について書いておきます。

SVGアイコンが同梱されるようになった

Material UIのSVGアイコン、事前に必要なものを個々にコンポーネント化しなきゃいけないみたいで面倒くさいなーと思ったら、masterブランチにはmaterial-design-iconsの.jsxが入っているっぽい。次回あたりからはrequireだけで使えるのかな。

— Umi Uyura (@umi_uyura) June 25, 2015

Material UIにはSVGアイコン取り扱うためにSvgIconコンポーネントが用意されているものの、アイコンの実体は、以下のように自分で用意する必要がありました。

/** action-home.jsx */
let React = require('react');
let mui = require('mui');
let SvgIcon = mui.SvgIcon;

let ActionHome = React.createClass({
  render: function() {
    return (
      <SvgIcon {...this.props}>
        <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path>
      </SvgIcon>
    );
  }
});

module.exports = ActionHome;

例： Material UI - Material Design React Components

独自のアイコンなどは仕方がないと思うのですが、Googleが公開しているMaterial Design用のアイコンなどは数が多い上に、使用頻度は高くなるので、用意されていても良いんじゃないかな―と思っていたのですが、今回からSVGアイコンについてはビルド済のものが同梱されるようになったようです。

ただ、ファイルサイズを抑えるためだと思いますが、通常の require('material-ui') したインスタンスには読み込まれていません。

以下のように、必要なアイコンをひとつひとつ require で読み込んで使うようです。

var FaceIcon = require('material-ui/lib/svg-icons/action/face')

React.render: function() {
  return (
    ...
    <FaceIcon />
    ...
  );
}

どんなアイコンがあるかは、 GoogleのMaterial Designのサイト を見ると良いでしょう。

読み込むときは material-ui/lib/svg-icons/＜カテゴリ＞/＜アイコン名＞ のように指定します。

スペースを含む名前はハイフンに置き換わっているようです。（ account balance は account-balance など）

また 3d rotation は three-d-rotation.js になっていたりするので、詳しくは node_modules/material-ui/lib/svg-icons フォルダ内を漁ってみると、見つかると思います。

これで、自前のアイコンリソースなどが何もないときでも、マテリアルデザインのアイコンが使えるので、ちょっとしたツールなどを作るときには重宝しそうです。

Tableコンポーネントの不具合が修正された

前バージョンのv0.9.2で追加されたTableコンポーネント、ちょうど作っていたツールに欲しかったので使ってみていたのですが、いくつか不具合にぶつかっていました。

umi-uyura.hatenablog.com

v0.10.0では、そのときに見つけていた以下の不具合が修正されていました。

• 行選択チェックボックスが消せない
• 行選択イベントが複数回発生する

特に、行選択チェックボックスが消せない方は、使い方によっては不要なパーツが表示されてしまう問題だったので、修正されて良かったです。

Material UI、非常に開発が活発なので、まだまだ進化していきそうですね。

これからのWebサイト設計の新しい教科書 CSSフレームワークでつくるマルチデバイス対応サイトの考え方と実装〈Bootstrap・コンテンツファースト・コンポーネント設計〉