かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

TypeScript JSXでMaterial UIを試してみた

material-uiというものがあるというのを聞きました。

www.material-ui.com

Reactでマテリアルデザインを再現するのにいい感じみたいですね。

プロジェクト作成

Visual StudioでTypeScriptのプロジェクトを作ります。 プロジェクトをPowerShellで開いてnpm initを打ち込んでとりあえずEnter連打してpackage.jsonを作ります。

以下のコマンドをうちこんで、必要なファイルを取り込みます。

npm install react react-dom material-ui react-tap-event-plugin --save
tsd install react react-dom material-ui

typingsフォルダをすべてのファイルを表示状態にしてプロジェクトに取り込んでおきます。package.jsonもついでに。

TypeScript ビルドをTSXを応答、モジュールシステムのCommonJSにしておきます。

ビルドイベントでビルド前にこれを

cd $(ProjectDir)
npm install

ビルド後にこれを

cd $(ProjectDir)
browserify scripts\init.js -o bundle-init.js
browserify scripts\app.js -o bundle.js

scripts/init.jsとscripts/app.tsxを作って下準備完成。

めんどい下準備

なんかiOS対策っぽいのしないといけないちっく。init.jsに以下のスクリプトを書いておきます。

var injectTapEventPlugin = require('react-tap-event-plugin');

// Needed for onTouchTap
// Can go away when react 1.0 release
// Check this repo:
// https://github.com/zilverline/react-tap-event-plugin
injectTapEventPlugin();

お試し

デモサイトにコントロールごとに使い方が書いてあるので、それを見て写経します。

www.material-ui.com

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {AppBar, FlatButton, Dialog} from 'material-ui';

interface AppState {
    isDialogOpen: boolean;
}

class App extends React.Component<{}, AppState> {
    constructor(prop: {}) {
        super(prop);
        this.state = { isDialogOpen: false } as AppState;
    }

    private handleClick() {
        this.setState({
            isDialogOpen: true
        } as AppState);
    }

    private handleCloseClick() {
        this.setState({
            isDialogOpen: false
        } as AppState);
    }

    render() {
        return <div>
                <AppBar
                    title='マテリアルUIサンプル'
                    iconElementRight={<FlatButton label='ダイアログ' onClick={this.handleClick.bind(this) } />} />
                <div style={{ margin: '200px 0 0 0', textAlign: 'center'}}>
                    <h1>ダイアログ使ってみた</h1>
                    <Dialog
                        modal={true}
                        title='Sample dialog'
                        actions={[<FlatButton label='閉じる' onClick={this.handleCloseClick.bind(this) } />]}
                        open={this.state.isDialogOpen}>
                        <p>ダイアログを出してみた</p>
                    </Dialog>
                </div>
            </div>;
    }
}

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

実行するとこんな感じに。

f:id:okazuki:20151229131425p:plain

f:id:okazuki:20151229131432p:plain

ソースコード

GitHubにあげておきました。

github.com