フロントエンド技術を学ぼう 2-23.ReactとReduxについて学ぶ-もじゃげくらぶ

Front-end Developer Handbook 2017を教科書にフロントエンド周りの技術を習得する連載。

第33回はPart II: Learning Front-End Devから、23項のLearn React & Reduxを紹介します。

ReactとReduxについて学ぶの説明です。

ReactとReduxについて学ぶ

ここではフロントエンドのフレームワークを学びましょう。今回学ぶReact&Redux以外ですと、Angular, Vue.js, Riot.jsなどが2017年現在有名です。なぜReactを学ぶかですが、フロントエンドアーキテクチャを学んだ際に、2016年でjQueryに次いで使用されているということがわかりました。また、Facebookが提供しているため開発&サポートが長く続くであろうこと、大規模サイトの構築にも耐えられること、などが挙げられます。

その他のフレームワークがReact&Reduxに比べて見劣りするわけではありません。小規模サイトを作るのであればVue.jsの方が適していることもありますし、SPAからデスクトップアプリケーションまで、なんでも一つのフレームワークで管理したいのであればAngularが良いかもしれません。ここで重要なのは1つフロントエンドフレームワークについて学ぶということです。

React

Reactとは、FacebookがOSSとして公開している、UIのパーツを作るためのライブラリです。

M-V-CのViewの一部の機能を提供するライブラリなので、Angularとも併用できます。以下、Reactを導入した際のメリットです。

パフォーマンスが良い。(仮想DOM)
規模が大きくなっても管理しやすい。

JSX

ReactはJSX(Facebook独自JavaScriptシンタックスシュガー)を使用します。そのままではブラウザは解釈出来ないため、Babelによるコンパイルが必要になります。サーバ側でコンパイルする方法以外でも、CDN経由でReact.jsもBabel-coreも取得する事ができます。

<script src="https://fb.me/react-15.2.0.js"></script>
<script src="https://fb.me/react-dom-15.2.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>

また、JSXを使用しない方法もあります。

Virtual DOM

Reactでは直接DOM要素を操作することなくWebページの生成を行います。仮想DOMと呼ばれるDOMの設計図を作成し、それをもって本物のDOMを構築します。Reactが行っていることは、

[JSONデータ] + [関数によって書かれたコンポーネント] = 仮想DOM(JSオブジェクト) -> DOMに反映

です。このコンポーネントとデータを分けられることは管理のし易さにつながり、仮想DOMからDOMへ反映する時はデータに差分が生じたところのみなので早いということになります。

参照元 : Reactを使うとなぜjQueryが要らなくなるのか

コンポーネント指向

コンポーネントとは、構造/見た目/振る舞いをセットにして定義することを指します。つまりHTML/CSS/JavaScriptを3つセットで1つにします。これは今までHTML/CSS/JavaScriptを別々に記述し、出来上がるDOMもしくは画面イメージを想像/確認しながら開発していたのに対し、画面に表示したいパーツ(コンポーネント)を一つずつ作成し、組み合わせることを可能にしました。

それ以外にもこのコンポーネント指向で開発することの素晴らしいところは、シンプルだということです。例えば一つの<input type="button">のコンポーネントが定義されていたとして、クライアントデバイスやユーザによって見た目や振る舞いを追加する必要が出てきた場合、このコンポーネントの条件分岐を増やし、CSSやJavaScriptを引数で渡せばいいだけです。コンポーネント自体の纏まりは崩れません。これをjQueryで行おうとすると、より広範囲のコードの書き直しをするか、スパゲッティコードを生むかになるでしょう。