読者です 読者をやめる 読者になる 読者になる

【GW】ES6、React、Flux、Reduxに触れてみた(1)

Flux JavaScript React ES6

GW中、ちょっと話題になってたES6、ReactやFlux、Reduxに触れてみました。

 

■ECMAScript2015(ES2015、ES6)

JavaScriptの中核仕様を抜き出して標準化したもの。

現在ブラウザで対応しているのはES5なので、ES6を使うには

トランスパイラで変換する必要がある(Babelとか)

 

■React

Facebook製のJavaScriptライブラリ。

UIを構築するためのライブラリである。(MVCのC)

他のライブラリとして

backbone.js

Angular.js

Vue.js

などがある。AngularやVueはMVVM(Model + View + ViewModel)系のライブラリである

Reactは規模が大きいサービスに適している。

小さめのアプリケーションや高速開発をするなら、VueやBackboneのほうが適しているかも。

 

Reactの特徴の一つとしてVirtual Dom(仮想DOM)がある。

DOMツリーを仮想的保持。

データ変更があった場合にオブジェクトの差分を計算して実際のDOMの再レンダリングを最小限にする。

また、JSXという独自シンタックスがある。

ユーザインタフェースの要素をコンポーネントとして分割して考える

 

・Reactの基本

コンポーネントの組み合わせを親子ツリーを意識して組み、Stateは親が管理し入力イベントは子から親へ更新されたStateの値はPropsをインタフェースに親から子へと伝搬させる。

データの流れは一方通行。

上位のコンポーネントが下位のkんポーネントに対してデータを流していく。

Reactivity(反応性、柔軟性)

 

Componentのrenderが行われるタイミングは

1. stateを更新

2. propsを外部から受け取る

 

stateはそれを仕様して描画を行うすべてのComponentの上位にならなければいけない。

 

・Reactを使うべき理由

今までの理想と現実と解決

理想

 ある構造体の入力に対して必ず一意なビューを生成したい。

現実

 jQuery,DOMを使って頑張る!

 データの状態からアプリを構築・・・難しい・・・

 DOMから特定の要素に対して自分でプログラムするのさ! jQuery万歳!!!

解決

 小さい単位でDOMを分割して管理するのがデータバインディング方式!

 AngularとかVueね。

 

Reactはこの解決アプローチを変えた!!

ユーザが記述するのは生のDOMではなく・・・・仮想のDOM!!

最初のレンダリングは普通。

与えられた仮想DOMに対して1対1に対応したDOMが生成される。

2回目以降は差分が計算されDOMの操作を内部的にやってくれる。

 

jQueryとの相性はあまりよくない。

直接DOMを触るケースは最悪。

仮想DOMと実際の構造がずれたらあかんですわ・・・

Reactを使うならDOMラッパーは使わずReactに絞る必要がある。

 

・Reactについてもう一度まとめる

React = ユーザインタフエース構築ようJavaScriptライブラリ。

ReactはViewだけを提供する

データ更新をStateで管理し、DOM操作をラップし(仮想DOMを通す)

最小限のパスで更新することができる。

コンポーネントという概念は

DOMに関連するビューのロジックは同じコンポーネントないで閉じることになる。

DOMがどこでいつ書き換えられるか保証できる。

 

・Reactの問題点

ツリーが深くなると子から親へのツリー階層をたどるのが面倒

状態管理は外部に任せたい・・・

JSXにHTMLを記述するスタイル・・・・

 

■参考書

 

WEB+DB PRESS Vol.87

WEB+DB PRESS Vol.87

 
WEB+DB PRESS Vol.86

WEB+DB PRESS Vol.86

 

 

 

次回は上記問題点を解決するFluxについて