Reactive Programming

たけうち ひでゆき

Imperative Programming

b = 1

c = 2

a = b + c

b = 10

print(a) // 3が出力

• aは代入された時点の値を保持する

Reactive Programming

b = 1

c = 2

a = b + c

b = 10

print(a) // 12が出力

• 右辺の値が変わると左辺に伝播される– いつ伝播されるかは実装による

何が嬉しいか

• 出力を簡潔に定義できる– myLabel.text = 10 + 2 * time

• timeが変化する毎にmyLabelのテキストが変化する

– myLabel.text = “yes” . keyDown Space <|> “no”

• スペースキーを押しているときは”yes”を表示、それ以外は”no”を表示

• 状態・イベントを意識しなくてすむ– 左辺とはなにかと右辺で定義する

どういう所で使われているか

• Spread Sheet (Excel)

• Robotics

• Simulation

• User Interface

• Flex

• JavaFX (ScalaFX)

Excel

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>

少し突っ込んだ話し

• データフローのグラフが作られる（こともある）– c = a + b

– e = c * d

e

c

d

a

b

まとめ

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