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

    Reactの学習方法

    それでは、Reactを基本的なことから学んでいくにはどのようにすればいいのでしょうか。
    ここでは、オススメのホームページやスライドをピックアップしてご紹介していきます。

    1. 公式サイト

    1_official.jpeg
    https://facebook.github.io/react/

    最新の情報が揃っているのは公式サイトです。
    基本的なコードで実装できるチュートリアルなどが分かりやすくまとめられており、最新情報をブログで確認することもできます。

    2. React チュートリアル 日本語版

    2_tutorialjp.jpeg
    http://mae.chab.in/archives/2943

    Reactのチュートリアルの日本語翻訳を掲載しています。
    日本語だけではなく翻訳元の英語も掲載しているので、Reactだけでなく英語の勉強にもなります。

    3. 30分間React入門「いいねボタン」作成チュートリアル

    3_iine.jpg
    http://c16e.com/1510161700/

    Reactを使ってFacebookの「いいねボタン」を実装するためのチュートリアルを紹介しています。
    カーソルが乗ったときに色が変わったり、ボタンをクリックしていいねの数を増やしたり減らしたりする細かなギミックも学ぶことができます。

    4. Reactってなんだ？

    4_whatisreact.jpeg
    http://www.slideshare.net/katty0324/sirok-1-react

    株式会社シロクの勉強会で紹介されたReactの紹介スライドです。
    「Virtual DOMって結局何？」「JSXのコンパイル？」といった用語も、図解でわかりやすく解説してくれています。

    5. 出来る限り短く説明するReact.js入門

    5_shortreact.jpeg
    http://qiita.com/rgbkids/items/8ec309d1bf5e203d2b19

    各項目をできるだけ3行で説明するように心がけている、初心者向けのReactの解説記事です。
    各分野がシンプルにまとめられているだけでなく、必要部分にはサンプルコードも掲載されています。

    6. いま最も注目のライブラリ「React.js」でシングルページアプリケーションを作ってみよう！

    6_codezine.jpeg
    https://codezine.jp/article/detail/8491

    Reactを使ってToDoアプリを作るチュートリアルです。
    最終的にはタブを使って「未完了」「完了」を切り替えるような一歩進んだ実装を行っていきます。

    7. Elemental UI

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