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

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

www.mojage.club

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

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

Sponsored Link

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で行おうとすると、より広範囲のコードの書き直しをするか、スパゲッティコードを生むかになるでしょう。

Image source: React.js Introduction For People Who Know Just Enough jQuery To Get By

実践

Tutorial: Intro To React(チュートリアル:Reactの紹介)を読みながら、○×ゲームを作成してみましょう。

See the Pen Tic Tac Toe by Dan Abramov (@gaearon) on CodePen.

Source : Tutorial: Intro To React

その他資料

Redux

Reduxは、一箇所で状態管理を行うためのフレームワークです。
ReduxはReactだけでなく、AngularやEjQuery、JavaScriptなどと一緒に利用することができます。ReactはUIをstateの関数として扱うので相性が良いです。 以下の3原則を掲げています。

  • Single Store(Store=ステートを管理する場所)
  • immutableなState
  • 副作用のないReducer(現在のstateとactionを受けて新しいstateを返すだけ)

Redux Tutorials(Reduxチュートリアル)

redux-saga

redux-sagaは「タスク」をReduxアプリケーション上で実現するためのライブラリです。 この「タスク」には非同期処理を実現する手法も含まれています。

redux-sagaのREADME_ja.md

その他資料

補足

あなたがReactをうまく扱える様になれば、PreactまたはInferno、あるいはその両方を検討するかもしれません。Reduxをマスターしたときは、MobXを試してみたり、独自の小さなカスタムReduxをゼロから実装するようにしてみてください。