TIPSCORDINGDESIGNPROGRAMMINGTOOLSCONTACTPROGRAMMING2016.5.10初心者でも分かる!React.js~入門編~React.jsとはFacebookが提供しているJavascriptライブラリです。React.jsは2014年に、アメリカのYahoo!Mailなど大手が採用し、注目されるようになりました。提供元のFacebookはもちろん、InstagramやAirbnbなど多くの採用事例があります。React.jsは、公式サイトで下記の3つのメリットを提唱しています。UIMVCでいうVIEWを担当し、UIを構成します。javascriptコードにHTMLタグのような記述ができ、jQueryと共存も可能なんです。React.jsは、コンポーネントとよばれる機能で表示部分を構成してきます。モデル・ビュー・コントローラ)は、ユーザーインタフェースをもつアプリケーションソフトウェアを実装するためのデザインパターンである。アプリケーションソフトウェアの内部データを、ユーザーが直接参照・編集する情報から分離する。そのためにアプリケーションソフトウェアを以下の3つの部分に分割する。入力を受け取りmodelとviewへの命令に変換する引用:WikipediaMVCはフレームワークや、使用する場所によって意味合いが少し異なってきます。どちらかというと「考え方」に近いと思っています。UIを持つアプリやソフトウェア、もちろんWebにも当てはまりますが、これらを構築していくときにMVCという考え方を用いて、最適化していきます。ほかにもMVPやMVVMという概念もあります。Presenter(モデル・ビュー・プレゼンテーター)。Controller)の2つに分かれます。View)は、PresenterがViewへの参照を持ち、Modelが変更されたらViewを更新します。Controller)はViewがModelのデータ情報を監視し、Modelの状態に応じて表示を変更します。ViewModel(モデル・ビュー・ビューモデル)は、独自のGUI(グラフィカルユーザーインターフェース)を持つアプリケーションソフトウェアを、以下に述べるようなModel-View-ViewModelの3つの部分に分割して設計・実装するソフトウェアアーキテクチャパターンである。Modelパターンを直接の祖先に持つ。引用:WikipediaMVCとの違いはcontrollerがなく、ViewModelが代役を果たします。ViewModelは、Viewを描画する状態の保持と、Modelへ伝達する役割を担っています。AngularJSやVue.jsなどが、有名なMVVMのプラットフォームですね。DOM通常は、DOMが状態を持っているので、DOMの変更などはDOMツリーを再構築する必要があります。すると変更するたびに再構築しなければいけないので、負荷がかかってしまい速度的に問題がありました。DOM(仮想DOM)というシステムで解決しました。DOMは、javascriptのオブジェクトとしてDOMツリーを構築するメソッドを使います。DOMを変更する際に、そのオブジェクトの差分更新を行い、実際のDOMに反映するのでレンダリングの負荷が大幅に軽減しました。FLOWReact.js(Facebook)が提唱しているデータフローに、Fluxというものがあります。FluxとはFluxはMVCと同様に、UIを持つアプリやソフトウェアを実装するためのアーキテクチャ、つまり設計手法のひとつです。MVCと違うところは、データが一方通行であること。ACTIONからDISPATCHERへ、DISPATCHERからSTOREへ、STOREからVIEWへ。流れが一方通行であると、問題の早期発見や、認識の相違などが生まれにくいです。以上のように、ACTIONからVIEWへ一方通行で流れていくイメージがFluxのフローです。VIEWはユーザーのアクションをトリガーに、ACTIONをへつなげることができます。さいごにReact.jsは、DOMとコードが離れることがないので管理しやすく、また再利用もとても簡単です。なんといっても、提供元のFacebookがこれを実際に利用しているので、なんだか熱意を感じるんですよね:)React.jsを普及させるために、ドキュメントやチュートリアルもしっかりとしていて、こういうところにもFacebookの想いが感じられます(笑)ドキュメントには丁寧に実装例に合わせてサンプルコードがあるので、初めてコードを組む方もかなりスムーズに実装できるかと思います。チュートリアルに関しては日本語にローカライズされているので、至れり尽くせりです:)それでも、React.jsは特殊な記述の仕方をするので、ちょっと頭がこんがらがります。次回は、React.jsの導入方法と、React.jsの組み方のコツ、React.jsを実際に実装したときにつまづいて解決したコードを紹介していきたいと思います。