Ajaxを劇的に簡単にするReact.js

　ここ数年、Javascript界隈でフレームワーク戦争が勃発してきました。クライアント開発の規模も年々大きくなり、jQueryだけでは複雑な画面遷移などを管理しきれなくなってきたのが原因だと思います。 　私も昨年までAngularとbackboneを試しましたが、サーバサイドをMVCにしているのに、クライアントでもMVCを作るMVCの2階建ては、やり過ぎなのではないかと思っていました。フレームワークそのもの覚えるまでにも一苦労というのも面倒に感じました。 2014年、海外でブームに火が付いたReact.js 　そんな中、2014年の後半からFacebook発のReact.jsの採用事例が聞こえてくるようになりました。AirBnBや米Yahoo! Mailなど大手がReact.jsを積極的に採用し出したので気になり、年末年始を使って色々調べてみることにしました。 Rails以来の衝撃 　色々試していくうちにReact.jsは劇的にラクな事に気がつきました。そして既存のJSフレームワークより遙かに分かりやすい。初めてRailsを見たときと同じぐらいの衝撃がありました。 　React.jsを一言でいうと「プログラムをAjax以前の構造に戻す」ことにあると思います。今までのフレームワークなどとパラダイムが大きく違うためちょっと理解するのに時間がかかりました。 なぜAjaxは難しいのか 　React.jsの説明の前に今のWebアプリ環境を考えてみます。 　Webアプリを作る場合には、PHPやRailsなどサーバ側でHTMLを生成してページ全体を遷移させる方法（サーバサイド生成）とAjaxを使う方法があります。同じ物を作るとしても、Ajaxの方が数段複雑です。 　なぜ、サーバサイド生成に比べてAjaxは難しいのか整理してみました。 DOMはどこからでも変更可能 DOMが状態を持っている DOMとコードが離れすぎ 　このような状態で画面の状態(DOM)を変えていくと、メンテナンスが非常に難しくなります。DOMはグローバル変数と同等なのに、競合なく書き換えるなんて不可能です。 サーバサイド生成はHTML作りっぱなし 　それに対して、サーバサイドではHTMLを生成するだけです。そのHTMLの一部分だけでも変えたければ、サーバにリクエストして画面全部のHTMLを生成し直してもらう必要があります。 　リンクを押したときに何が起こるのかも、hrefを見れば一目瞭然です。 サーバサイド生成と同じ仕組みをクライアントで 　React.jsでは、サーバサイド生成と同じ流れをクライアント側で行います。 　ロジック部分では、テンプレート変数にあたるstate(状態)を更新します。これを更新すると自動でrenderメソッドが呼ばれそこでHTMLを生成して表示します。 　具体的なコードはこのようになります。React.jsではJSXというJavascriptの中にHTMLをかける仕組みを提供しています。初めは気持ち悪いですが慣れですｗ JS Result Edit on /* ↑ Resultで実行結果が見られます */ /** @jsx React.DOM */ App = React.createClass({ /* stateの初期化 */ getInitialState: function() { return { switch1: true }; }, handleSwitch1: function() { this.setState({ switch1:... Read more »