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

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

<blockquote class="twitter-tweet" lang="en"><p>えっ、ReactのJSXってDeNAのJSXじゃなくてJavascript XMLって意味だったの…（今更）</p>&mdash; 野生の男 (@yasei_no_otoko) <a href="https://twitter.com/yasei_no_otoko/status/544408454354321408">December 15, 2014</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

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


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

```bash
npm install -g coffee-react
```


```shell-session
/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のコンパイルオプションがそのまま使える。

```shell-session
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表記)](https://github.com/reactjs/sublime-react/)
[mtscout6/vim-cjsx](https://github.com/mtscout6/vim-cjsx)

試しに[React公式チュートリアル](http://facebook.github.io/react/docs/tutorial.html)のコードをCoffeeに置き換えて実際に動くか確かめてみる。

```html: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>
```

```coffeescript: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に変換

```bash
cjsx -c tutorial.cjsx
```

```js: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さんが[紹介](http://www.kaoriya.net/blog/2014/12/13/)された[Ractive.js](http://www.ractivejs.org/)や、[Mercury](https://github.com/Raynos/mercury)など他のVirtual DOM対応フレームワークを使うことも可能なので、近いうちにこれらも試したいと思う。この他にもCoffeeScriptネイティブで開発されている[Reactive.coffee](http://yang.github.io/reactive-coffee/)も存在している。

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