jQuery学習者にReactも学習してほしい3つの理由と学習方法まとめ

jQueryの初版が登場して10年が経ちました。

jQueryの登場により、これまでJavaScriptで書いていた複雑なコードがよりシンプルになりました。CSS操作やDOM操作、Ajaxなどの拡張性も非常に便利なものでした。

時が経つにつれ、さまざまな特徴を持ったJavaScriptライブラリ・JavaScriptフレームワークが登場し、jQeuryに触れることなく大規模なアプリケーション開発をすることも珍しいことではなくなりました。

そうした中、昨今注目されているのがReact.js(React)です。

今回は、jQueryを学習した人に、Reactも学習してほしい理由とその学習方法についてまとめてみました。

Reactとは？

Reactとは、ユーザーインターフェイス(UI)を構築するためのオープンソースのJavaScriptライブラリです。
Facebookが開発の主導となっており、現在ではNetflixやAirbnbなどのホームページでもReactが活用されています。

Reactのよさが活きるのは、ボタンやテキストエリアなどがたくさんあり、入力した値を即座に反映できるようなWebアプリケーションなどです。

ReactはjQueryのようにアニメーション操作やAjaxなどが使える訳ではありませんが、これまでjQueryのプラグインなどを使ってUIを作成していた人には、jQueryに代わるものとして利用することができるでしょう。

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入門「いいねボタン」作成チュートリアル

http://c16e.com/1510161700/

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

http://elemental-ui.com

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を使ってみてください。