初心者でも分かる!React.js~入門編~

thumb004

React.jsとは

 
Facebookが提供しているJavascriptライブラリです。
React.jsは2014年に、アメリカのYahoo!Mailなど大手が採用し、注目されるようになりました。
 
提供元のFacebookはもちろん、InstagramやAirbnbなど多くの採用事例があります。
React.jsは、公式サイトで下記の3つのメリットを提唱しています。
 

  1. JUST THE UI
  2. VIRTUAL DOM
  3. DATA FLOW

 

1.JUST THE UI

 
MVCでいうVIEWを担当し、UIを構成します。
javascriptコードにHTMLタグのような記述ができ、jQueryと共存も可能なんです。
React.jsは、コンポーネントとよばれる機能で表示部分を構成してきます。
 

MVCとは

MVC(Model View Controller モデル・ビュー・コントローラ)は、ユーザーインタフェースをもつアプリケーションソフトウェアを実装するためのデザインパターンである。
アプリケーションソフトウェアの内部データを、ユーザーが直接参照・編集する情報から分離する。そのためにアプリケーションソフトウェアを以下の3つの部分に分割する。
model: アプリケーションデータ、ビジネスルール、ロジック、関数
view: グラフや図などの任意の情報表現
controller: 入力を受け取りmodelとviewへの命令に変換する
引用:Wikipedia

 
MVCはフレームワークや、使用する場所によって意味合いが少し異なってきます。
なので、どちらかというと「考え方」に近いと思っています。
UIを持つアプリやソフトウェア、もちろんWebにも当てはまりますが、これらを構築していくときにMVCという考え方を用いて、最適化していきます。
 
ほかにもMVPやMVVMという概念もあります。
 

MVPとは

Model View Presenter(モデル・ビュー・プレゼンテーター)。
パッシブビュー(Passive View)と監視コントローラ(Supervising Controller)の2つに分かれます。
パッシブビュー(Passive View)は、PresenterがViewへの参照を持ち、Modelが変更されたらViewを更新します。
監視コントローラ(Supervising Controller)はViewがModelのデータ情報を監視し、Modelの状態に応じて表示を変更します。

 

MVVMとは

Model View ViewModel(モデル・ビュー・ビューモデル)は、独自のGUI(グラフィカルユーザーインターフェース)を持つアプリケーションソフトウェアを、以下に述べるようなModel-View-ViewModelの3つの部分に分割して設計・実装するソフトウェアアーキテクチャパターンである。
MVC(Model-View-Controller)の派生パターンであり、特にPresentation Modelパターンを直接の祖先に持つ。
MVVMを考慮してアプリケーションを開発する目的は、他のMVC系のパターンと同様にアプリケーションの「プレゼンテーションとドメインを分離」する事で、アプリケーション開発における保守性・開発生産性に寄与する事である。
引用:Wikipedia

 
MVCとの違いはcontrollerがなく、ViewModelが代役を果たします。
ViewModelは、Viewを描画する状態の保持と、Modelへ伝達する役割を担っています。
AngularJSやVue.jsなどが、有名なMVVMのプラットフォームですね。
 

2.VIRTUAL DOM

 
通常は、DOMが状態を持っているので、DOMの変更などはDOMツリーを再構築する必要があります。
そうすると変更するたびに再構築しなければいけないので、負荷がかかってしまい速度的に問題がありました。
 
React.jsは、この問題をVirtual DOM(仮想DOM)というシステムで解決しました。
 
Virtual DOMは、javascriptのオブジェクトとしてDOMツリーを構築するメソッドを使います。
DOMを変更する際に、そのオブジェクトの差分更新を行い、実際のDOMに反映するのでレンダリングの負荷が大幅に軽減しました。
 

3.DATA FLOW

 
React.js(Facebook)が提唱しているデータフローに、Fluxというものがあります。
 

Fluxとは

FluxはMVCと同様に、UIを持つアプリやソフトウェアを実装するためのアーキテクチャ、つまり設計手法のひとつです。
MVCと違うところは、データが一方通行であること。
ACTIONからDISPATCHERへ、DISPATCHERからSTOREへ、STOREからVIEWへ。
流れが一方通行であると、問題の早期発見や、認識の相違などが生まれにくいです。
 
ACTION:ユーザーのアクションを受けて、データを構築
DISPATCHER:データを運ぶ
STORE:データを保持
VIEW:データを表示
 
以上のように、ACTIONからVIEWへ一方通行で流れていくイメージがFluxのフローです。
また、VIEWはユーザーのアクションをトリガーに、ACTIONをへつなげることができます。
 

さいごに

 
React.jsは、DOMとコードが離れることがないので管理しやすく、また再利用もとても簡単です。
そしてなんといっても、提供元のFacebookがこれを実際に利用しているので、なんだか熱意を感じるんですよね:)
React.jsを普及させるために、ドキュメントやチュートリアルもしっかりとしていて、こういうところにもFacebookの想いが感じられます(笑)
 
ドキュメントには丁寧に実装例に合わせてサンプルコードがあるので、初めてコードを組む方もかなりスムーズに実装できるかと思います。
チュートリアルに関しては日本語にローカライズされているので、至れり尽くせりです:)
 
それでも、React.jsは特殊な記述の仕方をするので、ちょっと頭がこんがらがります。
次回は、React.jsの導入方法と、React.jsの組み方のコツ、React.jsを実際に実装したときにつまづいて解決したコードを紹介していきたいと思います。