React を使って何かを試すとき、 JSX を変換する必要があったり npm でインストールした JavaScript を1つにまとめたり色々とやることが多く、環境の構築が割りと面倒です。

React のビルド環境とサーバをひとまとめにした enclave という npm モジュールがあったので試してみます。

インストール

npm 3 で enclave だけインストールすれば(とりあえず)使えるみたいです。

$ npm install -D enclave

npm install を実行するとエントリーポイントやポート番号など色々聞かれるので答えていきます。答えた内容は enclave.js というファイルに記録されます。

Hello, World!

簡単な例を作ってみます。

// App.js

import React from 'react';
import { render } from 'react-dom';

class App extends React.Component {
    render() {
        return <div>
            {`Hello, enclave!`}
        </div>;
    }
}

render(<App name="World" />, document.querySelector('#app'));

これを読み込む index.html です。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>App</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

<script> タグは enclave が </body> の直前に挿入してくれるので書きません。最初 <body></body> を省略したら動きませんでした。

サーバの起動は npm start でできるように package.json"scripts" に仕込んでくれます。

$ npm start

これで先ほど入力したポート(デフォルトでは8080でした)を開くと表示が確認できます。

App.jsindex.html を用意しただけで表示確認ができました。

Live Reload

enclave は設定で Live Reload まで使えます。最初に live reload を on にするか聞かれた時に true と答えると有効になりました。 enclave.js の中身を直接編集すれば後からでも有効にできます。

サーバが起動した状態で JavaScript に変更があると自動でリロードしてくれます。

// App.js

import React from 'react';
import { render } from 'react-dom';

class App extends React.Component {
    render() {
        const { name = 'enclave' } = this.props;
        return <div>
            {`Hello, ${name}!`}
        </div>;
    }
}

render(<App name="World" />, document.querySelector('#app'));

さいごに

ちょっと React を試すために、自分で0からビルドの設定やサーバ、 live reload の設定をするのは結構大変なので enclave を使えばかなり手間を省けると思います。

さくっと React で書いたコードが試せるので React 関連のライブラリなどを気軽に試すことができそうです。実際のプロダクトでつかう感じではなさそうですが、使える場面は多いかもしれません。