“IT 勉強会スタンプラリー”で行く、全国コミュニティ探訪 第5回

変数をなくしてみよう

　たとえば以下のコードを考える場合（行頭の数字は行数、“:=”は代入、“*”は掛け算を表す）、

1	b := 1;  2	a := b * 10;  3	b := 2;

　一般的な命令型プログラミング（Imperative Programming）では a の値は2行目でも3行目でも 10 と変わらない。

　一方、リアクティブプログラミングでは値の変化に反応（reactive）し、前もってそれに関連付けられたほかの値も自動的に更新される。つまり、先の例で言えば、2行目の a は 10 だが、3行目では 20 となる。お馴染みの表計算ソフト「Microsoft Excel」では、セルの値が変化すると、関連するセルの値も自動的に再計算され、新しい値へと更新されるが、それとよく似ている。

　この“反応”の仕組みを実装するのはかなり手間がかかるが、Rxはそれを“オブザーバーパターン”（プログラミング設計における“型”の一種）で実装しており、比較的容易に扱うことができる。

　ハンズオンで最初に出された課題「ボタンを押すとカウントアップされる処理を記述しなさい」は、そのメリットが体験できるようになっている。この課題を普通に解くと、以下のようなコードになるだろう。

namespace PhoneApp1  {      public partial class MainPage : PhoneApplicationPage      {          // コンストラクター          public MainPage()          {              InitializeComponent();          }            private int count = 0; // 値をメンバー変数へ保存    	// メソッド：ボタンが押されたら……（）          private void button1_Click(object sender, RoutedEventArgs e)          {  	    // 変数に1を足してボタンのテキストとして表示              button1.Content = ++count;          }      }  }

ボタンを押すとカウントアップされる処理を記述

　さらに以下のようにラムダ式を利用して記述すれば、クラスのメンバー変数とメソッドを使わないで記述できるだろう。

namespace PhoneApp1  {      public partial class MainPage : PhoneApplicationPage      {          // コンストラクター          public MainPage()          {              InitializeComponent();                int count = 0;              button1.Click += (sender, e) => button1.Content = ++count;          }      }  }

　C#の記述としては、ごくごく一般的なものだ。これをさらにRxを利用して記述すれば、“count”という変数すら消すことができる。

namespace PhoneApp1  {      using Microsoft.Phone.Reactive;        public partial class MainPage : PhoneApplicationPage      {          // コンストラクター          public MainPage()          {              InitializeComponent();                Observable.FromEvent<RoutedEventArgs>(button1, "Click")                  .Scan(0, (x, y) => ++x)                  .Subscribe(x => button1.Content = x);          }      }  }

　かえって長くなってしまったが、すべての処理がたった1つの文で書けてしまった。Rxでは、このように“状態”を外部の変数へ保存せずにすむ。「ボタンをクリックするという操作」全体をデータの配列とみなし、それを加工するメソッドをどんどん繋げて処理を施していくイメージだ。コードは長くなるが1つにまとまっているので、変数やメソッドを飛び飛びに参照するより処理の意味がつかみやすくなっている。

　最後のほうは少し難しくなったが、理解が遅れている人のフォローをしながらゆっくりステップバイステップで丁寧に教えてもらえるので、それほどハードルが高いとは感じなかった。わからないことがあればその場で質問して疑問を解消することもできる。

ステップバイステップで丁寧に解説

わからないことがあればその場で質問

イベントの合成

　Rxが優れている点は、これだけではない。.NET Framework 3.5で追加された機能“LINQ”と組み合わせることでいくつもの“反応”をデータソースとして扱い、クエリ関数によって合成やフィルタリングなどが容易に行えるのも大きなメリットと言える。

rectangle（矩形）をドラッグ＆ドロップで移動させるサンプル

　2つ目の課題「Rxでドラッグ＆ドロップを実装する」は、その例。ドラッグ＆ドロップでオブジェクトを移動させる処理を記述するには、以下の3つのイベントを横断して処理する必要がある。

• MouseLeftButtonDown：マウスの左ボタンが押し下げられた
• MouseMove：マウスを移動中である
• MouseLeftButtonUp：マウスの左ボタンが上がった

　さらに、状態を保存する2つの変数が必要になる。

• ドラッグ＆ドロップ中かどうか（マウスの左ボタンが押し下げられているかどうか）
• マウスカーソルの位置情報を管理

　しかし、Rxならば変数が消せる上、3つのイベントを1つの“ドラッグ＆ドロップイベント”に束ねて1つの文で記述することができる。

namespace DragDrop  {      using Microsoft.Phone.Reactive;        public partial class MainPage : PhoneApplicationPage      {          // コンストラクター          public MainPage()          {              InitializeComponent();                rectangle1.MouseDownAsObservable()                  .Select(e => { rectangle1.CaptureMouse(); return e; })                  .SelectMany(e => rectangle1.MouseMoveAsObservable())                  .TakeUntil(rectangle1.MouseUpAsObservable().Select(e => { rectangle1.ReleaseMouseCapture(); return e; }))                  .Scan((e1, e2) =>                      {                          var dY = e2.GetPosition(null).Y - e1.GetPosition(null).Y;                          var dX = e2.GetPosition(null).X - e1.GetPosition(null).X;                            this.rectangle1.SetValue(Canvas.TopProperty, (double)rectangle1.GetValue(Canvas.TopProperty) + dY);                          this.rectangle1.SetValue(Canvas.LeftProperty, (double)rectangle1.GetValue(Canvas.LeftProperty) + dX);                            return e2;                      })                  .Repeat()                  .Subscribe();          }  }

　一見目が回りそうになるコードで、正直なところ、筆者もこのすべてを理解しているわけではない。何も参照せずにすらすら書くことなど不可能だ。しかし、実際にタイプしてコードを入力すると、おぼろげながら何がどのような役割を果たしているのかがわかってくるような気がする。

Rxで“ATND”のデータを取得。同じ勉強会に参加したことのあるユーザーとその回数を表示する

　RxはこのようなGUI操作のほかにも、Web APIの利用などへ応用することが可能。サーバーとのやり取りをイベントの流れ（シーケンス）とみなせば、先ほどのドラッグ＆ドロップの例のように記述できるわけだ。最後にはyone氏が“ATND”のAPIを利用してデータを取得するサンプルを解説してくれた。

　Rxはもともと非同期プログラミングのための追加ライブラリとして開発されたが、C#そのものに非同期プログラミンを容易にする言語拡張が加えられ（async/awaitキーワード）、その地位は若干低下している。しかし、イベントの合成などといったRxならでは機能は魅力的。従来の馴染みのあるプログラミングスタイルから抜け出すことには苦痛が伴うが、その見返りは非常に大きいと感じられた。