Umi Uyuraのブログ

プログラミング関連の作業ログ

NW.js上でReactを動かしてみた

NW.js React node-webkit Node.js

昨日NW.jsを触ってみたついでに、ツールの中身はReactを使ってみることにしました。

umi-uyura.hatenablog.com

今回作ろうとしているツールは、お客さんが提供しているAPIを叩いて、結果を自社で持っている別のデータと照合しながら表示するだけというものです。Node.jsベースのコマンドラインツールとしてはできているのですが、その業務をエンジニアではない人に引き継ぐにあたり、GUIツール化しようとしています。よって、ロジック自体はできあがっているので、それをNW.jsへ移植してReactでUIをつけようという算段です。

とは言え、まだきちんとReactも触れていないので、まずは初歩の初歩ということで、Hello World的なことをしてみました。

Hello, React!

まずは、前回NW.jsを動かした最小限のサンプルをベースにしつつ、 React公式のGetting Started を参考に、これまた最低限のReact on NW.jsを作ってみることにしました。

とりあえず、 $ npm init でpackage.jsonを生成。

main フィールドには index.html を指定しています。

{
  "name": "react-on-nwjs-sample",
  "version": "0.0.1",
  "description": "React on NW.js sample",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Umi Uyura",
  "license": "MIT"
}

次に、NW.jsとReactをnpmからインストール。

$ npm install nw react --save

そして、index.htmlを作成します。

<html>
  <head>
    <title>React on NW.js</title>
    <script src="node_modules/react/dist/react.js"></script>
    <script src="node_modules/react/dist/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/jsx">
      React.render(
        <h1>Hello, React!</h1>,
        document.getElementById('app')
      );
    </script>
  </body>
</html>

NW.jsの推奨？どおり、package.jsonの scripts フィールドに "start": "nw" を追加して、 $ npm start を実行。

f:id:umi-uyura:20150408222726p:plain

動きました。

実は最初、 <script> タグに type="text/jsx" を指定し忘れるという初歩的なミスを犯していたため、JSX部分でエラーが出ていたりしたのですが、ひとまず最初の一歩。

JSX transform

次に、JSXを事前にJavaScriptへ変換するパターンをやってみました。

npmからreact-toolsを入れると、JSXをJSに変換する jsx コマンドが使えるようになります。

$ npm install -g react-tools

変換前後のファイルを置くため、プロジェクト直下に src と build の2つのフォルダを作成。

さきほどのindex.htmlのJSX部分をapp.jsとして、 src フォルダに配置。紛らわしいので、ちょっとだけ文言を変更。

src/app.js

(function() {
  React.render(
    <h1>Hello, React and JSX!</h1>,
    document.getElementById('app')
  );
})();

そこで、

$ jsx --watch src/ build/

を実行すると、 build フォルダに変換後のapp.jsが作成されていました。

build/app.js

(function() {
  React.render(
    React.createElement("h1", null, "Hello, React and JSX!"),
    document.getElementById('app')
  );
})();

そこで、index.htmlを修正。

<html>
  <head>
    <title>React on NW.js</title>
    <script src="node_modules/react/dist/react.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script src="build/app.js"></script>
  </body>
</html>

動的なJSX変換が不要になったので、JSXTransformer.jsを呼び出していた <script> タグを削除し、変換後の build/app.js を読み込む <script> タグを追加して、$ npm startを実行。

f:id:umi-uyura:20150408222741p:plain

表示されました。

jsx コマンドの --watch オプションによって、 src フォルダ内のJavaScriptが監視されている状態なので、JSX側の.jsを編集してリロードすれば、その場で結果を反映させることもできます。

感想

とりあえず動かせそうなので、もう少し 公式のTutorial なども見つつ、ツール開発を進めていこうかと思います。

参考

入門 React ―コンポーネントベースのWebフロントエンド開発

入門 React ―コンポーネントベースのWebフロントエンド開発