1. Reactive Programming
たけうち ひでゆき

2. Imperative Programming
b=1
c=2
a=b+c
b = 10
print(a) // 3が出力
• aは代入された時点の値を保持する

3. Reactive Programming
b=1
c=2
a=b+c
b = 10
print(a) // 12が出力
• 右辺の値が変わると左辺に伝播される
– いつ伝播されるかは実装による

4. 何が嬉しいか
• 出力を簡潔に定義できる
– myLabel.text = 10 + 2 * time
• timeが変化する毎にmyLabelのテキストが変化する
– myLabel.text = “yes” . keyDown Space <|> “no”
• スペースキーを押しているときは”yes”を表示、それ以外は”no”を表
示
• 状態・イベントを意識しなくてすむ
– 左辺とはなにかと右辺で定義する

5. どういう所で使われているか
• Spread Sheet (Excel)
• Robotics
• Simulation
• User Interface
• Flex
• JavaFX (ScalaFX)

6. Excel

7. Flex
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
width="400" height="90">
<s:layout>
<s:HorizontalLayout horizontalAlign="center" verticalAlign="middle"/>
</s:layout>
<s:TextInput id="lhs" width="100" fontSize="48"/>
<s:Label fontSize="48" text="+"/>
<s:TextInput id="rhs" width="100" fontSize="48"/>
<s:Label fontSize="48" text="="/>
<s:Label fontSize="48" text="{parseInt(lhs.text) + parseInt(rhs.text)}"/>
</s:Application>

8. 少し突っ込んだ話し
• データフローのグラフが作られる（こともある）
– c=a+b
– e=c*d
a
c
e b
d

9. まとめ
• Wicketのプログラミングでもデータの流れをプログラム
するということを意識しよう
– Modelはデータの流れを記述するための機構