おじさんがIE8でReact.jsを使うために頑張った話

4年ぶり・・・！

今ははてなブログを使うべきなんでしょうか？まぁいいや、おじさんだから。


3年くらい前から開発は若い者に任せていたので、技術に疎くなっていたけど、React.jsが面白そうだったので社内の古いサービスを密かに改修して遊んでいます。

すると自然におじさんがこそこそ使っているWindows XP環境も少しトレンドになれた気がするので、世のおじさんたちもReact.jsで遊ぶといいと思う。


簡単に言えば、React.jsを使ったら、Node.js も入れることになったりして最近の技術（Webフロントサイド）を学ぶことができそうという話。だからおじさん以外は帰ってください。



1. React.jsで遊んでみる

React.js を使うとDOM操作がうまいことになる。
React.js は画面の部品をコンポーネントとして表現していて、Javascript内でクラスとして定義し、renderメソッドがうまいことDOMを更新してくれる。

コンポーネントの表示は、JSXという書式でHTMLっぽくスクリプト内に書くことができる。

と書いてもこれはHTMLタグではなく実はReactのコンポーネント。
classとかforなどそのまま書いてはいけない属性もある。
JSXで書いたものは最終的にJavascript書式にする必要があるのだが、JSXTransformer.js を読み込めば動的に変換してくれる。

チュートリアルのコード等を見て実際にいじってみる。面白い。

最初理解していなかったのは、renderで返すときはひとつの要素だけにするという点。
下記の例だと、

を書かずにinputとbuttonを返そうとしてもダメ。

var Hoge = React.createClass({
  render: function() {
    return (
      <div className="input-group">
        <input ..... />
        <button ..... />
      </div>
    );
  }
})

2. IE8で動かない?

おじさんが遊んでいるのはgrails1.xとかで動いている社内アプリ。
その時代ではIE8もサポートしていたから、こっそりバージョンアップする立場としてはIE8を切り捨てるわけにはいかない。苦情はないと思うけど「勝手にバージョンアップしたみたいだけどIE8で動かなくなってんじゃん笑」とか思われるのは屈辱。せっかくおじさんが使ってるPCにもIE8がいるので対応させようじゃないか。

React.jsはIE8をサポートしているとのこと。
だがページを開くと「オブジェクトがありません」とのスクリプトエラーが発生して動かない。

どうやらJSXTransformer.jsがIE8をサポートしていない？
と思ったが、よく読んだら React.js 含めて対応のさせ方が公式に書いてある。

http://facebook.github.io/react/docs/working-with-the-browser.html#polyfills-needed-to-support-older-browsers

なるほど。いまどきのライブラリはPolyfillsという概念で古いブラウザ対応するのか。賢すぎる。
こんなに賢くなってるなんて想像してなくて随分と遠回りをしてしまった。
（おじさんは製品マニュアルはよく読むくせに、こういうドキュメントを中々読まない。反省。）

更におじさんが知らない間に世界は変わっていて、bower とか npm とかでJavascriptをインストールできるというようなことが読み取れる。とりあえず後回しだ。

おじさんはgithubからソースコードを手動で入手して下記のように追記した。

<!DOCTYPE html>
<html>
  <head>
    <!--[if IE 8]>
    <script src="/js/lib/console-polyfill.js"></script>
    <script src="/js/lib/es5-shim.min.js"></script>
    <script src="/js/lib/es5-sham.min.js"></script>
    <script src="/js/lib/html5shiv.min.js"></script>
    <![endif]-->
    <script src="http://fb.me/react-0.12.2.js"></script>
    <script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
  </head>
  <body>
   ...

動くぞ！IE8でも普通に動くぞ！
（ちなみに詳しく調べてないが react-with-addons-0.12.2.js を使った場合、上記のやり方ではIE8で動作しなかった）

あと、このブログを下書きに放置してたわずかに1週間程度の間にバージョンが既に0.13.1になっていた。活発。



3. JSXをプリコンパイルするにはnpmでツールをインストールする

JSXTransfomerでいいだろ、って思ってたけど、それなりにアプリを作っていくと目に見えて遅い。

JSXのプリコンパイルは避けて通れなそうだ。

jsx コマンドでコンパイル。jsxコマンド使うには npm が必要。
npmはnode.jsのパッケージ管理。
なんでここでnode.jsがでてくるか。
node.jsをインストールして、PATH通して、npmのコンパイル・・・？
面倒そうだなぁ。

と思ってNode.js公式からWindows用インストーラをインストールしたら、そのまますぐnpmコマンドが使えるようになった。
何て楽ちんなんだ。遅れてきて良かった。

で、React.jsのGetting Startedにあるようにreact-toolをインストールして、jsxコマンド発動。

ファイル更新するたびにコンパイルしてくれるので、ミスってたらすぐ分かるし、動作確認もすぐできるし、いやぁ楽ちんですな。

よし、後は作るだけ！