1. Functional Reactive Programming はじめの一歩
∼ 配線プログラミング ∼
@rf0444

2. おしながき
• スプレッドシートの話
• 配線プログラミング

3. スプレッドシートの話

4. スプレッドシート？

5. スプレッドシート？
スプレッドシートでは当たり前の、ある機能のお話をします。

6. 一般的なプログラム
JavaScript

7. 一般的なプログラム
JavaScript

8. 4 になってほしいケース
• 値の変更があったら、関連する値も更新されて欲しい
• リアルタイムアプリケーション
• GUI

9. スプレッドシートの場合

10. スプレッドシートの場合

11. スプレッドシートの場合

12. スプレッドシートの場合

13. JavaScript での実装例
- イベント駆動
function onChange() {
var a = Number($("#val1").val());
var b = Number($("#val2").val());
var c = a + b;
$("#val3").text(c);
}
$("#val1").change(onChange);
$("#val2").change(onChange);

14. JavaScript での実装
• イベント駆動プログラミング
• 変化が起きたときに実行する「処理」を書いていく
• 手続き的アプローチ
• Any other approach?

15. 配線プログラミング

16. スプレッドシート と 配線 のイメージ
A1
B1
C1+

17. JavaScript での実装を考える
a
b
c+

18. Bacon.js
• JavaScript ライブラリ
• 配線プログラミング をサポート
• jQuery と連携できる
• 他の JavaScript フレームワークとも連携できる
• backbone.js との連携例あり

19. 配線をつくる
a
b
c+

20. 配線をつくる
a
b
c

21. 配線をつくる
a
b
c
Bus
Bus Bus
function Model() {
var me = this;
me.a = new Bacon.Bus();
me.b = new Bacon.Bus();
me.c = new Bacon.Bus();
}

22. 配線をつくる
a
b
c
function Model() {
var me = this;
me.a = new Bacon.Bus();
me.b = new Bacon.Bus();
me.c = new Bacon.Bus();
}

23. +
配線をつくる
a
b
c
function Model() {
var me = this;
me.a = new Bacon.Bus();
me.b = new Bacon.Bus();
me.c = new Bacon.Bus();
Bacon.combineWith(function(a, b) { return a + b; }, me.a, me.b)
}

24. 配線をつくる
+
a
b
c
function Model() {
var me = this;
me.a = new Bacon.Bus();
me.b = new Bacon.Bus();
me.c = new Bacon.Bus();
Bacon.combineWith(function(a, b) { return a + b; }, me.a, me.b).change()
}

25. 配線をつくる
+
a
b
c
function Model() {
var me = this;
me.a = new Bacon.Bus();
me.b = new Bacon.Bus();
me.c = new Bacon.Bus();
me.c.plug(
Bacon.combineWith(function(a, b) { return a + b; }, me.a, me.b).change()
);
}

26. 入力側をつなげる
+
a
b
c

27. 入力側をつなげる
+
a
b
c

28. 入力側をつなげる
a

29. 入力側をつなげる
busel
function InputView(el, bus) {
var me = this;
me.el = el;
}
a

30. 入力側をつなげる
function InputView(el, bus) {
var me = this;
me.el = el;
me.el.asEventStream("change")
}
a

31. 入力側をつなげる
(change event)
function InputView(el, bus) {
var me = this;
me.el = el;
me.el.asEventStream("change")
}
a

32. 入力側をつなげる
“1”
function InputView(el, bus) {
var me = this;
me.el = el;
me.el.asEventStream("change")
.map(function() { return me.el.val(); })
}
a

33. 入力側をつなげる
“1”初期値 ( “0” )
function InputView(el, bus) {
var me = this;
me.el = el;
me.el.asEventStream("change")
.map(function() { return me.el.val(); })
.merge(Bacon.once(me.el.val()))
}
a“1” “0”

34. 入力側をつなげる
“1”初期値 ( “0” )
function InputView(el, bus) {
var me = this;
me.el = el;
me.el.asEventStream("change")
.map(function() { return me.el.val(); })
.merge(Bacon.once(me.el.val()))
.map(Number)
}
a“1” “0” 1 0

35. 入力側をつなげる
a
function InputView(el, bus) {
var me = this;
me.el = el;
bus.plug(
me.el.asEventStream("change")
.map(function() { return me.el.val(); })
.merge(Bacon.once(me.el.val()))
.map(Number)
);
}
“1”初期値 ( “0” ) 1 0“1” “0”

36. 出力側をつなげる
+
a
b
c

37. 出力側をつなげる
+
a
b
c

38. 出力側をつなげる
c
function OutputView(el, bus) {
var me = this;
me.el = el;
}
bus
el

39. 出力側をつなげる
c
function OutputView(el, bus) {
var me = this;
me.el = el;
bus.assign(function(val) {
});
}
val

40. 出力側をつなげる
c
function OutputView(el, bus) {
var me = this;
me.el = el;
bus.assign(function(val) {
me.el.text(val);
});
}
val

41. 完成
var model = new Model();
new InputView($("#a"), model.a);
new InputView($("#b"), model.b);
new OutputView($("#c"), model.c);
a b c
model
+

42. 部品プログラミング
「他の言語を学んで自由になろう」(山本和彦, http://mew.org/~kazu/material/2013-lang.pdf) より引用

43. 部品プログラミング
「他の言語を学んで自由になろう」(山本和彦, http://mew.org/~kazu/material/2013-lang.pdf) より引用

44. 部品プログラミング との組み合わせ
model
view1
(editable)
view2

45. 設計例
View
Model
Storage
Ajax
request event for model
request to server response from server
response event for model

46. Functional Reactive Programming (FRP)
• 下の 2 つを関数でつないでいくことで、プログラムを書いていく方法
• 時間によって変化する値 (Behavior)
• 発生するイベントの列 (Event)
• GUI だけでなく、ログなどのリアルタイム解析でも利用されている
• 「配線プログラミング」は、実は FRP のこと

47. 利用ライブラリ
• Bacon.js
• https://github.com/raimohanska/
• Behavior → Property、Event → EventStream