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

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

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

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

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

Reactとは？

opengraph.png

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>

にする場合には、通常「

  • bar
  • 」を足せばよい、という考え方に行き着きます。

    • すなわち、「document.createElement('li')」して「ul.appendChild(li)」する、というのが通常のDOM操作です。
    Reactでは、「
  • bar
    • 」という差分に関して自動的に処理を行ってくれます。

    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を使ったほうが早い場合もあります。