リアクティブプログラミングとMVVMパターンについて

2014/10/31 @taketin

免責事項

「リアクティブプログラミング」に興味を持って軽い気持ちで調べ始めましたが、想像以上に奥が深い概念であった為、理解不十分なところがあります。そのため、嘘を言ってる可能性もあります。

また、今回は概念の説明になりますのでふんわりしたお話になります。

あらかじめご了承ください。

FRP (FunctionalReactiveProgramming)

FRP (Functional Reactive Programming)

・最近よく聞く

FRP (Functional Reactive Programming)

・最近よく聞く

・フロントエンド開発者は特に知っといた方が良さそう

FRP とは・リアルタイムイベントを適切に扱うためのプログラミングパラダイム

FRP とは・リアルタイムイベントを適切に扱うためのプログラミングパラダイム

・非同期データストリームを用いるプログラミングであり、「時間とともに変化する値」と「振る舞い」同士の関係性を記述する

FRP とは・リアルタイムイベントを適切に扱うためのプログラミングパラダイム

・非同期データストリームを用いるプログラミングであり、「時間とともに変化する値」と「振る舞い」同士の関係性を記述する

・リアクティブプログラミング http://www.reactivemanifesto.org/ に関数

型言語の特徴を加えたものが FRP。1997年に 　Functional Reactive Animation http://conal.net/papers/icfp97/ として提唱されたらしい。

リアルタイムイベントを適切に扱うためのプログラミングパラダイム

リアルタイムイベントを適切に扱うためのプログラミングパラダイム

・非FRPの世界発生するイベントに対して実行する命令を書く。

リアルタイムイベントを適切に扱うためのプログラミングパラダイム

・非FRPの世界発生するイベントに対して実行する命令を書く。

・FRP の世界入力と出力の関係性を定義する。

リアルタイムイベントを適切に扱うためのプログラミングパラダイム

・非FRPの世界

var a = 1;

var b = a + 1;

a = 10;

console.log(b) // => 2

リアルタイムイベントを適切に扱うためのプログラミングパラダイム

・非FRPの世界

var a = 1;

var b = a + 1;

a = 10;

console.log(b) // => 2

・FRPの世界

var a = 1;

var b = a + 1;

a = 10;

console.log(b) // => 11

リアルタイムイベントを適切に扱うためのプログラミングパラダイム

・非FRPの世界

var a = 1;

var b = a + 1;

a = 10;

console.log(b) // => 2

・FRPの世界

var a = 1;

var b = a + 1;

a = 10;

console.log(b) // => 11

FRPは「時間とともに変化する値」を扱う。b = a + 1 の「関係性」を保持する。

リアルタイムイベントを適切に扱うためのプログラミングパラダイム

・非FRPの世界

var a = 1;

var b = a + 1;

a = 10;

console.log(b) // => 2

・FRPの世界

var a = 1;

var b = a + 1;

a = 10;

console.log(b) // => 11

FRPは「時間とともに変化する値」を扱う。b = a + 1 の「関係性」を保持する。

Excel で A1セルに =B2+C3と書くと、A1セルの内容はB2とC3が加算されて、動

的に書き換えられるような動きのイメージ。

リアルタイムイベントを適切に扱うためのプログラミングパラダイム

・非FRPの世界

$("#select").change(function(val){ console.log(val.currentTarget.value);});

// selectbox で値が “foo” を選択した

> foo

// selectbox で値が “bar” を選択した

> bar

・FRPの世界

var select = $("#select").asEventStream("change");select.onValue(function(val) { console.log(val.currentTarget.value)});

// selectbox で値が “foo” をチェックした

> foo

// selectbox で値が “bar” をチェックした

> bar

リアルタイムイベントを適切に扱うためのプログラミングパラダイム

・非FRPの世界

$("#select").change(function(val){ console.log(val.currentTarget.value);});

・FRPの世界

var select = $("#select").asEventStream("change");select.onValue(function(val) { console.log(val.currentTarget.value)});

これまでは入力が変化したという出来事（イベント）に対応する処理をプログラムで記述していた。これに対して、リアクティブ・プログラミングでは、入力と出力の関係性を定義しておけば自動的に処理が行われる。

リアルタイムイベントを適切に扱うためのプログラミングパラダイム

・非FRPの世界

$("#select").change(function(val){ console.log(val.currentTarget.value);});

・FRPの世界

var select = $("#select").asEventStream("change");select.onValue(function(val) { console.log(val.currentTarget.value)});

これまでは入力が変化したという出来事（イベント）に対応する処理をプログラムで記述していた。これに対して、リアクティブ・プログラミングでは、入力と出力の関係性を定義しておけば自動的に処理が行われる。

イベント駆動の命令型 定義宣言型

非同期データストリームを用いるプログラミングであり、「時間とともに変化する値」と「振る舞い」同士の関係性を記述する

非同期データストリームを用いるプログラミングであり、「時間とともに変化する値」と「振る舞い」同士の関係性を記述する

・定義を宣言する対象 == 時間とともに変化する値

非同期データストリームを用いるプログラミングであり、「時間とともに変化する値」と「振る舞い」同士の関係性を記述する

・定義を宣言する対象 == 時間とともに変化する値

ex) textField : 文字の入力と共に内容が変わる

button : クリックして on, off が変わる

非同期データストリームを用いるプログラミングであり、「時間とともに変化する値」と「振る舞い」同士の関係性を記述する

・定義を宣言する対象 == 時間とともに変化する値

ex) textField : 文字の入力と共に内容が変わる

button : クリックして on, off が変わる

FRP では、これらの「時間とともに変化する値」を

「ストリーム」と呼ばれる第1級オブジェクトとして扱えるようにする事で、定義宣言型のプログラミングを行える様にした。

非同期データストリームを用いるプログラミングであり、「時間とともに変化する値」と「振る舞い」同士の関係性を記述する

・振る舞い

非同期データストリームを用いるプログラミングであり、「時間とともに変化する値」と「振る舞い」同士の関係性を記述する

・振る舞い

ex) 入力値 : 1, 2, 3, 4 振る舞い : 入力された値を倍にする -> 2, 4, 6, 8 振る舞い : 4 の倍数だけ返す -> 4, 8

非同期データストリームを用いるプログラミングであり、「時間とともに変化する値」と「振る舞い」同士の関係性を記述する

・振る舞い

ex) 入力値 : 1, 2, 3, 4 振る舞い : 入力された値を倍にする -> 2, 4, 6, 8 振る舞い : 4 の倍数だけ返す -> 4, 8

この振る舞い１つ１つがストリームとして扱える。

非同期データストリームを用いるプログラミングであり、「時間とともに変化する値」と「振る舞い」同士の関係性を記述する

・振る舞い

ex) 入力値 : 1, 2, 3, 4 振る舞い : 入力された値を2倍にする -> 2, 4, 6, 8 ∟ 振る舞い : 4 の倍数だけ返す -> 4, 8 ∟ 振る舞い：5 以上だけ返す -> 6, 8

この振る舞い１つ１つがストリームとして扱える。

ストリームをベースに振る舞いを重ねていく事ができる。

Reactive programmingとは...

・時間や外部入力と共に変化する値や計算を、命令的に記述す

るのではなく、宣言的に定義する。

Reactive programmingとは...

・時間や外部入力と共に変化する値や計算を、命令的に記述す

るのではなく、宣言的に定義する。

・入力と出力の関係性を定義しておけば自動的に更新処理が

行われる為、データバインディング機構の実装に適している。

Reactive programmingとは...

・時間や外部入力と共に変化する値や計算を、命令的に記述す

るのではなく、宣言的に定義する。

・入力と出力の関係性を定義しておけば自動的に更新処理が

行われる為、データバインディング機構の実装に適している。

・MVVM パターンの実装に使われている。

MVVM (Model View ViewModel)

MVVM (Model View ViewModel)

・2005年、Microsoft の WPF や Silverlight 発祥 のアーキテクチャ via: http://ja.wikipedia.org/wiki/Model_View_ViewModel

・主に GUI アプリケーションで採用。

MVVM (Model View ViewModel)

・2005年、Microsoft の WPF や Silverlight 発祥 のアーキテクチャ via: http://ja.wikipedia.org/wiki/Model_View_ViewModel

・主に GUI アプリケーションで採用。

・ViewはViewModelに依存し、ViewModelはModelに依存。逆方向の依存は無い。

image: http://www.atmarkit.co.jp/fdotnet/chushin/greatblogentry_02/greatblogentry_02_01.html

MVVM (Model View ViewModel)・Model - ドメイン（問題領域）

・View - UIへの出力とUIからの入力

・ViewModel - ViewとModelの間の情報の伝達（Viewから受け取った入力を適

切な形に変換して渡す）と、Viewのための状態保持のみを役割とする要素。Viewとの

通信はデータバインディング機構のような仕組みを通じて行うのが前提。

MVVM (Model View ViewModel)ViewとViewModelの間の情報を開発者が手動で同期しなければならないようなプ

ラットフォームでは非常に開発者の負担が大きくなり、メリットが発揮しにくい。

そのためデータバインディング機構のような仕組みを持つプラットフォームか、既存の

プラットフォームにデータバインディング機構のような仕組みを拡張したプラットフォー

ムで採用されている。

MVVM (Model View ViewModel)

必要なもの

・宣言的な Viewテンプレート

・データバインディング機構

MVVM (Model View ViewModel)

ReactiveCocoa (Objective-C)

・FRPパラダイムを採用した言語内DSL。・GitHub社の人達をメインに開発。GitHubのMacアプリで採用されている。

・変更をシグナルと呼ばれるオブジェクトで表現し、別途用意する VM にプレゼンテーションロジックを書く事で、ViewController から View とロジックを分離する。

　※ ViewController は MVC の C では無い。MVVM の V 相当。

MVVM (Model View ViewModel)

ReactiveCocoa (Objective-C)

メリット

・テストの記述が容易になり、コードの再利用性が高まる。

MVVM (Model View ViewModel)

ReactiveCocoa (Objective-C)

メリット

・テストの記述が容易になり、コードの再利用性が高まる。

デメリット

・記述量が増える。

・DSL と FRP の学習コスト。

MVVM (Model View ViewModel)

ReactiveCocoa (Objective-C)

次期メジャーバージョン 3系で Swift 対応。

Swift 用ライブラリは他に https://github.com/ReactKit/ReactKit がある。

とりあえず試してみたい。

FRPについて調べてみた感想

・実装によって言葉の定義が曖昧な気がするので、大変混乱した。

ストリーム

シグナル

FRPについて調べてみた感想

・実装によって言葉の定義が曖昧な気がするので、大変混乱した。

ストリーム

シグナル

・関数型言語への関心が深まった。

参照透過性（関数の呼び出しをそのまま値に置き換えても全く同じ動作をする。関数に副作用が無い状態）

FRPについて調べてみた感想

・実装によって言葉の定義が曖昧な気がするので、大変混乱した。

ストリーム

シグナル

・関数型言語への関心が深まった。

参照透過性（関数の呼び出しをそのまま値に置き換えても全く同じ動作をする。関数に副作用が無い状態）

・実際にアプリケーション書きながらじゃないと理解が進まなそう。

LibraryFRP: Javascript・https://github.com/Reactive-Extensions/RxJS ・https://github.com/baconjs/bacon.js・https://github.com/facebook/reactMVVM: Javascript・https://github.com/knockout/knockout・https://github.com/jashkenas/backbone・https://github.com/angular/angular.js・https://github.com/ractivejs/ractive・https://github.com/yyx990803/vue

参考リンク・【翻訳】あなたが求めていたリアクティブプログラミング入門

http://ninjinkun.hatenablog.com/entry/introrxja・なぜリアクティブプログラミングは重要か。

http://d.hatena.ne.jp/pokarim/20101226・ストリーム表現とその変換

http://r7kamura.hatenablog.com/entry/2014/08/21/113654・FRPの話

http://maoe.hatenadiary.jp/entry/2012/12/24/011414・Webフロントエンドでリアクティブプログラミング

http://www.ediplex.com/blog/?p=830・ゆるやかな ReactiveCocoa の導入

https://speakerdeck.com/ninjinkun/yuruyakanareactivecocoafalsedao-ru・MVVM for iOS

https://speakerdeck.com/laiso/mvvm-for-ios・ReactiveCocoaでiOSでもMVVM

http://ios.caph.jp/articles/mvvm-using-reactivecocoa・AngularJSで始めるリアクティブプログラミング

http://zoetrope.hatenablog.jp/entry/2014/02/15/175040・Bacon.jsで眺めるFunctional reactive programming

http://gan.hatenablog.jp/entry/2013/11/10/152720