middlemanでReactを書く

JavascriptのライブラリといえばAngularJSとかvue.jsなどが流行っていますが 今回はさらなる流行の最先端Reactです。

というわけで書き始めようと思うのですが、書き方がいろいろあって一番簡単なのはCDNを使うことです。

<script src="http://fb.me/react-0.11.1.js"></script>
<script src="http://fb.me/JSXTransformer-0.11.1.js"></script>
<script type="text/jsx;harmony=true">

//ここに書ける

</script>

さすがにコレはリアルタイムでコンパイルしているので遅くなるみたいです。

普通こういったJavascriptライブラリを書くとなるとGulpを使うことになりますが ちょっと気持ちが萎える(Gulp好きじゃない)わりにいい感じにMiddlemanと協調するGulpfileを書けなかった(だからキライ)ので もうmiddlemanに処理させたいと思います。

というかいまMiddlemanで書いてるんだから、よしなに頑張ってくれ。

というわけでmiddleman-reactです。 公式のreactjs/react-railsにインスパイアされた(ていうかパクった)middleman拡張です。

Gemfile

gem "middleman-react"

config.rb

activate :react, harmony: true
after_configuration do
  sprockets.append_path File.dirname(::React::Source.bundled_path_for('react.js'))
end

source/javascripts/all.js

//= require react-with-addons
//= require_tree .

あとはjavascripts配下に.js.jsxファイルを追加していくといい感じに書けます。

簡単ですね。

HTMLのbodyの最後とかで下みたく書いたりとかすればいいんじゃないかと。

hoge.slim

#hogehoge
= javascript_include_tag "all"

ところでmiddleman-reactのharmonyオプションですが、もともと見当たらなかったので私が追加しました。

ES6やES7の構文がコンパイルできるようになります。

つまり下記が使えるようになります。実はあまり調べてませんが。

• es6-arrow-functions
• es6-object-concise-method
• es6-object-short-notation
• es6-classes
• es6-rest-params
• es6-templates
• es6-destructuring
• es7-spread-property

https://github.com/facebook/react/blob/master/vendor/fbtransform/visitors.js

アロー関数やテンプレートリテラルは便利なのでぜひお使いください。

所感

簡単に導入できるのはいいんですがやっぱりrequireが使いたくなってきますね。 superagentなんかはrequireできないと使えないです。

ここあたりのJavascriptライブラリのベストプラクティスが分からなくていつも困ってます。

今思っているのはGuardからwatchifyを呼び出すのが汎用的な解決なんじゃないかなってことです。試してないですが。