Reactを触ってみた経緯

ReactのJSXについて凄く恥ずかしい誤解をしていた事に今週の月曜に気が付いた。

えっ、ReactのJSXってDeNAのJSXじゃなくてJavascript XMLって意味だったの…（今更）
— 野生の男 (@yasei_no_otoko) December 15, 2014

のでメインで使っているCoffeeScriptでReactを初体験してみることにした。

環境構築

npmコマンドでCoffeeScript用のReact/JSXトランスレータをインストール

npm install -g coffee-react

/Users/yasei_no_otoko/.nodebrew/node/v0.10.34/bin/cjsx -> /Users/yasei_no_otoko/.nodebrew/node/v0.10.34/lib/node_modules/coffee-react/bin/cjsx
coffee-react@2.1.2 /Users/yasei_no_otoko/.nodebrew/node/v0.10.34/lib/node_modules/coffee-react
├── coffee-react-transform@2.1.0
├── coffee-script@1.8.0 (mkdirp@0.3.5)
└── mkdirp@0.5.0 (minimist@0.0.8)

cjsxコマンドを実行して動いていれば成功。
CoffeeScriptのコンパイルオプションがそのまま使える。

Usage: cjsx [options] path/to/script.cjsx -- [args]

If called without options, `cjsx` will run your script.

  -b, --bare         compile without a top-level function wrapper
  -c, --compile      compile to JavaScript and save as .js files
  -e, --eval         pass a string from the command line as input
  -h, --help         display this help message
  -j, --join         concatenate the source CoffeeScript before compiling
  -m, --map          generate source map and save as .map files
  -n, --nodes        print out the parse tree that the parser produces
      --nodejs       pass options directly to the "node" binary
      --no-header    suppress the "Generated by" header
  -o, --output       set the output directory for compiled JavaScript
  -p, --print        print out the compiled JavaScript
  -s, --stdio        listen for and compile scripts over stdio
  -l, --literate     treat stdio as literate style coffee-script
  -t, --tokens       print out the tokens that the lexer/rewriter produce
  -v, --version      display the version number
  -w, --watch        watch scripts for changes and rerun commands

実際に書いてみる

Sublime Textユーザーの場合は公式のReactJSパッケージにCoffeeScript JSX用のシンタックスハイライトとスニペットも含まれているので便利。vimプラグインも。

reactjs/sublime-react(パッケージリスト上ではReactJS表記)
mtscout6/vim-cjsx

試しにReact公式チュートリアルのコードをCoffeeに置き換えて実際に動くか確かめてみる。

index.html

<!-- template.html -->
<html>
  <head>
    <title>Hello React</title>
    <script src="http://fb.me/react-0.12.2.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
    <script src="js/tutorial.js"></script>
  </head>
  <body>
    <div id="content"></div>
  </body>
</html>

tutorial.cjsx

# tutorial1.cjsx
CommentBox = React.createClass
  render: ->
    <div className="commentBox">
      Hello, world! I am a CommentBox.
    </div>

window.onload = ->
  React.render(
    <CommentBox />,
    document.getElementById('content')
  );

cjsxコマンドを実行してjsに変換

cjsx -c tutorial.cjsx

tutorial.js

// Generated by CoffeeScript 1.8.0
(function() {
  var CommentBox;

  CommentBox = React.createClass({
    render: function() {
      return React.createElement("div", {
        "className": "commentBox"
      }, "Hello, world! I am a CommentBox.");
    }
  });

  window.onload = function() {
    return React.render(React.createElement(CommentBox, null), document.getElementById('content'));
  };

}).call(this);

あとはブラウザ上で実行して「Hello, world! I am a CommentBox.」と表示されるのを確認出来ればCoffeeScript JSXのインストール・動作確認は完了。
CoffeeScriptで自由にReactを書くことが出来る。

ReactをCoffeeScriptで使ってみた感想

上記の他にもNode.js、Rails/spckets向けのサーバーサイドやbrowserify、gulpなどのCJSX拡張が既にあるため、CoffeeScriptユーザーはすぐにでもReactJSを使ってVirtual DOMの世界に踏み出すことができる。
また、CoffeeScriptの特徴としてJavaScriptライブラリはそのまま使えるため@koronさんが紹介されたRactive.jsや、Mercuryなど他のVirtual DOM対応フレームワークを使うことも可能なので、近いうちにこれらも試したいと思う。この他にもCoffeeScriptネイティブで開発されているReactive.coffeeも存在している。

Virtual DOMのようにソフトウェア実装が黎明期の概念ではどのフレームワークが最適解ということも無いので、Reactを中心に色々と試して行きたいと思う。

CoffeeScriptでReactJS環境を構築したメモ

Reactを触ってみた経緯

環境構築

実際に書いてみる

ReactをCoffeeScriptで使ってみた感想