今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React
本記事は、2015/2/21に行われたFrontrend Conferenceの「Introduction To React」の内容を紹介します。
当日の資料は以下にアップされていますので、こちらも参照してください。
Introduction To React // Speaker Deck
React.jsとは何か
React.jsはFacebook製のJavaScriptライブラリです。
http://facebook.github.io/react/
公式サイトに、「A JavaScript library for building user interfaces」とあるように、React.jsはUIを構築するためのライブラリです。フレームワークでなくあくまでUIを構築するだけのライブラリで、MVCでいうところのVのみの機能を提供します。
開発を行っているFacebookやInstagramはもちろん、YahooやAirbnbなど多くの採用事例があり、現在注目を集めているライブラリの一つです。
React.jsの特徴
React.jsの特徴を知るために、まずは他のライブラリやフレームワークの問題点について見ていきましょう。例えばTodo MVCのような、フォームを送信したらリストに項目が追加されるようなUIの実装を考えてみましょう。
jQuery
単純にjQueryだけで実装すると次のようになるでしょう。
|
1
2
3
4
5
6
7
8
9
|
// Submitされたら
$(‘form’).on(‘submit’, functino() {
// 要素作って
var $li = $(‘<li>’);
// …
// リストに追加
$(‘ul’).append($li);
});
|
しかし、これだとデータがDOMにしかないので、何か機能を追加しようとしたときに非常にやりづらいですし、テストも書きにくいコードになります。
Backbone.js
Backbone.jsを使うとこの問題をある程度解決することができます。Backbone.jsはデータは管理するModelと、表示を管理するViewに分け、さらにViewをコンポーネントごとに分けるという設計を提案します。例えば次のようになります。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var FormView = Backbone.View.extend({
onSubmit: function() {
// dataを作ってモデルに追加するだけ
this.collection.add(data)
}
});
var ListView = Backbone.View.extend({
initialize: function() {
// モデルが更新されたらリストを更新
this.collection.on(‘add’, this.render);
}
});
|
FormViewやListViewといった、UIの部品ごとに機能を分けていますが、このようなものをここではコンポーネントと呼ぶことにします。
Backbone.jsでデータやコンポーネントを分けて管理できるようになるとある程度の規模ではうまくいきますが、Viewの更新処理を手動で書かないといけない面倒さがあったり、ModelとView間のイベント管理が煩雑になるなど、規模が大きくなった時にスケールしづらいという問題があります。（Backbone.jsのラッパーライブラリであるMarionetteやChaplinといったものもありますが、本質的な問題は同じです）
Angular.js、Vue.js
Angular.js、Vue.jsなどに代表される、いわゆるMVVM系のライブラリの特徴はデータが変更されたら自動的に表示が変わる、という考え方です。
|
1
2
3
4
5
6
7
8
9
|
<form ng-submit=“onSubmit()”>
<input type=“text” ng-model=“text”>
</form>
<ul>
<li ng-repeat=“item in list”>
{{item.text}}
</li>
</ul>
|
|
1
2
3
4
5
|
// Controller
$scope.onSubmit = function() {
// データを更新したら勝手にViewが変わる
$scope.list.push(newItem);
};
|
このように、HTMLに描画されるデータを記述し、JavaScript側ではデータを更新するだけで自動的に表示が更新されます。しかし、これらのライブラリも、規模が大きくなってきた時に状態を管理するのが難しくなってきます。
React.js
jQueryやBackbone.js、Angular.jsは規模が大きくなったときに管理するのが難しくなる、と述べましたが、きちんと設計すれば管理しやすいアプリケーションにすることは可能でしょう。しかし、それらは元々そのような目的のためのライブラリではないので、規模が大きくなっても管理可能に設計するというのは簡単なことではありません。
続きは、以下よりどうぞ。
jQuery学習者がReactも学習してみてほしい理由
1. データバインディングが簡単になる
Reactが行えることは非常にシンプルで、APIもjQueryに比べれば数えるほどしかありません。
しかし、そのわずかなAPIで、これまで慣れ親しんできたjQueryの機能の大部分を超えるほどの威力があります。
Reactでは、設計と速度が両立する「仮想DOM」を採用しています。
HTML はツリー構造をしています。
そして、このツリー構造の差分(diff)を算出して、DOMに渡す作業を行えば、常に最小のコストで状態遷移を表現できるというのが「仮想DOM」の基本的な考え方です。
例えば、
<ul>
<li>foo</li>
</ul>
という HTML があり、
<ul>
<li>foo</li>
<li>bar</li>
</ul>
にする場合には、通常「<li>bar<li>」を足せばよい、という考え方に行き着きます。
すなわち、「document.createElement(‘li’)」して「ul.appendChild(li)」する、というのが通常のDOM操作です。
Reactでは、「<li>bar</li>」という差分に関して自動的に処理を行ってくれます。
Reactでの操作に慣れてくると、jQueryで行なっていた「DOMをこねくり回す操作」が非常にシンプルになります。
DOMを生成する計算処理は思っているより意外と多いので、ほとんどの場合DOMの差分を計算するほうが速く、結果的に速度も早くなります。
2. JSXがわかりやすい
Reactでは「JSX」と呼ばれる新しい記法を JavaScript に導入しています。
「要素や属性があって、子には テキスト ノードや別の要素があって」といった具合に、 JavaScript の構文だけを使って「DOMの設計図」を読み書きするのは大変だからです。
JSXは、言ってしまえば HTML と JavaScript を混在して書くことができるような記法です。
BabelやTypeScriptのような他のライブラリでもJSXをサポートしているので、これを機に学習してみるのもオススメです。
React.createElement(
"div",
{ title: "hi" },
"Hello ",
React.createElement("b", null, "World")
);
もしこれをJSONで書くとなると以下のようになります。
{ element: 'div', attributes: { title: 'hi' }, content: [ 'Hello ', { element: 'b', content: ['World'] } ] }
少々分かりにくいと感じるのではないでしょうか。
「 HTML と JavaScript は分離しましょう」というのは長い間「暗黙の了解」でしたが、それは HTML が主役で JavaScript がおまけだった時の話です。
現在ではほとんどのアプリケーションで、データがAPI経由でやりとりされ、あらゆるものが動的に構築されるようになると、 HTML は骨組みでしかなくなってしまいます。
一方、機能的に関連するタグと動作を、名前付きでまとめて短く記述できるReactの記述方法のほうが合理的だと言えます。
3. 規模が大きくなっても管理が簡単
Reactでは大規模なWebアプリケーションほど向いている、と言われています。
理由はいくつかありますが、DOM操作がたくさん発生するWebアプリケーションでは操作をシンプルにすることができ、コンポーネントを極力ステートレスにすることで、コンポーネントが管理しやすくなるということが挙げられます。
一方、DOM操作がほとんどない場合には、jQueryを使ったほうが早い場合もあります。
Reactの学習方法
それでは、Reactを基本的なことから学んでいくにはどのようにすればいいのでしょうか。
ここでは、オススメのホームページやスライドをピックアップしてご紹介していきます。
1. 公式サイト
https://facebook.github.io/react/
最新の情報が揃っているのは公式サイトです。
基本的なコードで実装できるチュートリアルなどが分かりやすくまとめられており、最新情報を ブログ で確認することもできます。
- チュートリアル：https://facebook.github.io/react/docs/tutorial.html
- 実装例：https://github.com/facebook/react/wiki/Examples
2. React チュートリアル 日本語版
http://mae.chab.in/archives/2943
Reactのチュートリアルの日本語翻訳を掲載しています。
日本語だけではなく翻訳元の英語も掲載しているので、Reactだけでなく英語の勉強にもなります。
3. 30分間React入門「いいねボタン」作成チュートリアル
Reactを使って Facebook の「いいねボタン」を実装するためのチュートリアルを紹介しています。
カーソルが乗ったときに色が変わったり、ボタンをクリックしていいねの数を増やしたり減らしたりする細かなギミックも学ぶことができます。
4. Reactってなんだ？
http://www.slideshare.net/katty0324/sirok-1-react
株式会社シロクの勉強会で紹介されたReactの紹介スライドです。
「Virtual DOMって結局何？」「JSXのコンパイル？」といった用語も、図解でわかりやすく解説してくれています。
5. 出来る限り短く説明するReact.js入門
http://qiita.com/rgbkids/items/8ec309d1bf5e203d2b19
各項目をできるだけ3行で説明するように心がけている、初心者向けのReactの解説記事です。
各分野がシンプルにまとめられているだけでなく、必要部分にはサンプルコードも掲載されています。
6. いま最も注目のライブラリ「React.js」でシングル ページ アプリケーションを作ってみよう！
https://codezine.jp/article/detail/8491
Reactを使ってToDo アプリ を作るチュートリアルです。
最終的にはタブを使って「未完了」「完了」を切り替えるような一歩進んだ実装を行っていきます。
7. Elemental UI
Reactベースの UI フレームワーク です。
ベースはReactですが、実装は HTML タグのようにコーディングしているので、Reactの知識は必要ありません。
React風の UI を作りたいときに役に経ちます。
まとめ
jQueryを習得すると、特にDOM操作に関して面倒な手続きを行わなければならないことがあります。
ReactはDOM操作がシンプルになるだけでなく、jQueryを使って UI 部分を作成していたフロントエンドエンジニアやWebデザイナーにとっても、扱いやすいライブラリといえます。
「appendTo()」や「removeClass()」などのjQuery的なDOM操作を書く必要がないからです。
一方、「 HTML が主役で動的な要素が少ないサイト」や「数時間でコーディングが終わるようなサイト」はReactよりもjQueryで書いたほうが効率がいいかもしれません。
HTML よりも JavaScript の役割の比重が大きいほうがReactのよさが活きてきます。
適材適所ではありますが、ぜひアプリケーションを作るときなどにReactを使ってみてください。
コメントはまだありません