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に置き換えて実際に動くか確かめてみる。
<!-- 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>
# 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
// 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を中心に色々と試して行きたいと思う。