かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

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