【OnClickAsObservable】UniRxでボタンのクリック回数をテキストに表示する【SubscribeToText】

# はじめに

　この投稿では、ボタンのクリック回数をテキストに表示する処理をUniRxを使って実装します。またそれを通じて、UniRxがUIイベント用に提供しているいくつかのメソッドを紹介します。

# UniRxって？
　UniRxは[neuecc](https://github.com/neuecc)さんが、UnityでもReactiveExtensionsを使えるように移植したものです。またReactiveExtensionsと比べて、UnityのライフサイクルメソッドやUIイベント用機能拡張もされているます。[Asset Store](http://u3d.as/content/neuecc/uni-rx-reactive-extensions-for-unity/7tT)からでも[github](https://github.com/neuecc/UniRx)からでも入手できます。

　詳しくは、neueccさんの「[Reactive Programming by UniRx for Asynchronous & Event Processing](http://www.slideshare.net/neuecc/reactive-programming-by-unirxfor-asynchronous-event-processing)」や[toRisouP](https://twitter.com/toRisouP)さんの「[未来のプログラミング技術をUnityで -UniRx-](http://www.slideshare.net/torisoup/unity-unirx)」をご覧ください。

# UniRxを使ってボタンのクリック回数を数えてみる(もっとよくなるよ)

　それでは、UniRxを使ってボタンのクリック回数を数えてみます。

```
using UnityEngine;
using UnityEngine.UI;
using UniRx;

// 　この節のコードはもっと簡潔に書くことができます。
public class ButtonClickCount : MonoBehaviour
{
	[SerializeField] Button button;
	[SerializeField] Text text;

	void Awake ()
	{
		button.onClick.AsObservable ()
			.Select (_ => 1)
			.Scan (0, (element, acc) => element + acc)
			.Subscribe (count => text.text = count.ToString ())
			.AddTo(gameObject);
	}
}
```

　コメントも書きましたが、このコードはさらに簡潔にすることができます。ですが、ひとまずこのコードを見てきます。まずは次のコード片から。

```csharp:
button.onClick.AsObservable ()
```

　`button.onClick`は、Buttonクラスのプロパティです。onClickのクラスは[ButtonClickedEvent](http://docs.unity3d.com/ScriptReference/UI.Button.ButtonClickedEvent.html)です。ところでこの[ButtonClickedEvent](http://docs.unity3d.com/ScriptReference/UI.Button.ButtonClickedEvent.html)クラスには、AsObservableという名前のメソッドはありません。

　これはUniRxで拡張された機能・メソッドです。

　UniRxの[UnityEventExtensions](https://github.com/neuecc/UniRx/blob/master/Assets/UniRx/Scripts/UnityEngineBridge/UnityEventExtensions.cs)というクラスは、UnityEventやUnityEvent\<T\>の拡張メソッドとして[AsObservable](https://github.com/neuecc/UniRx/blob/master/Assets/UniRx/Scripts/UnityEngineBridge/UnityEventExtensions.cs#L13)メソッドを提供しています。[ButtonClickedEvent](http://docs.unity3d.com/ScriptReference/UI.Button.ButtonClickedEvent.html)クラスは、[UnityEvent](http://docs.unity3d.com/ScriptReference/Events.UnityEvent.html)のサブクラスなので、AsObservableというメソッドを呼べるようになりました。このAsObservableメソッドを用いることで、クリックなどUnityEventの発火をIObservable\<Unit\>で扱うことが可能になります。これによりRxのメソッドを使って処理を簡潔に記述することが可能です。


* [Select](http://qiita.com/RyotaMurohoshi/items/7e1509e03d8e3a1eae4f#select%E3%81%A7%E5%A4%89%E6%8F%9B%E3%81%99%E3%82%8B)
* [Scan](http://qiita.com/RyotaMurohoshi/items/7e1509e03d8e3a1eae4f#scan%E3%81%A7%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E5%9B%9E%E6%95%B0%E3%81%AE%E3%82%B9%E3%83%88%E3%83%AA%E3%83%BC%E3%83%A0%E3%81%AB)

　のふたつについては、「[【Unityでも】UniRxを使ってみた。マウスクリックの回数を数える【リアクティブプログラミング】](http://qiita.com/RyotaMurohoshi/items/7e1509e03d8e3a1eae4f)」という記事ですこし紹介しているのでみてください。

　AsObservableメソッドでクリックのストレームを生成し、それをSelectで1のストリームに変換、Scanで数値を累積させクリック回数のストリームを生成し、SubscribeメソッドでTextに数値を表示しています。

# UniRxを使ってボタンのクリック回数を数えてみる(簡潔になった！)

　UniRxには便利なメソッドが準備されていて、それを使うことでUIイベントを扱うコードをより簡潔に記述することが可能になります。まずは結果のコードを示します。

```csharp:
using UnityEngine;
using UnityEngine.UI;
using UniRx;

public class ButtonClickCount : MonoBehaviour
{
    [SerializeField]
    Button button;
    [SerializeField]
    Text text;

    void Awake()
    {
        button.OnClickAsObservable()
            .Select(_ => 1)
            .Scan(0, (element, acc) => element + acc)
            .SubscribeToText(text)
            .AddTo(gameObject);
    }
}
```

　変わったのは2点

* `button.OnClickAsObservable ()`
* `SubscribeToText (text)`

　です。これらは2つのメソッドは[UnityUIComponentExtensions](https://github.com/neuecc/UniRx/blob/master/Assets/UniRx/Scripts/UnityEngineBridge/UnityUIComponentExtensions.cs)クラスで定義された拡張メソッドです。


## Button.OnClickAsObservableメソッド

　[UnityUIComponentExtensions](https://github.com/neuecc/UniRx/blob/master/Assets/UniRx/Scripts/UnityEngineBridge/UnityUIComponentExtensions.cs)クラス内で、Buttonクラスの拡張メソッドとして、[OnClickAsObservable](https://github.com/neuecc/UniRx/blob/master/Assets/UniRx/Scripts/UnityEngineBridge/UnityUIComponentExtensions.cs#L33)が定義されています。実装を見てみると`button.onClick.AsObservable()`を内部で呼び出しています。

　UnityUIComponentExtensionsクラスではButtonクラス以外にも、SliderやToggle、ScrollRectに対して、IObservable\<T\>を生成するメソッドを拡張しています。ところでそれらに対してはButtonと異なり単純ではなく、現時点の値を初期値として流す処理を加えているので注意が必要です。


## IObservable\<T\>.SubscribeToTextメソッド


　[UnityUIComponentExtensions](https://github.com/neuecc/UniRx/blob/master/Assets/UniRx/Scripts/UnityEngineBridge/UnityUIComponentExtensions.cs)クラス内で、IObservable\<T\>クラスの拡張メソッドとして、[SubscribeToText](https://github.com/neuecc/UniRx/blob/master/Assets/UniRx/Scripts/UnityEngineBridge/UnityUIComponentExtensions.cs#L17)が定義されています。このメソッドはText型を引数にとります。IObservable\<T\>のストリームの要素が来るたびに、T型の要素をToStringした結果を引数としてとったTextに表示します。多分実装を見た方が早いです。([ここ](https://github.com/neuecc/UniRx/blob/master/Assets/UniRx/Scripts/UnityEngineBridge/UnityUIComponentExtensions.cs#L19))

　このほかにも、Text型とFunc\<T, string\>を引数にとる[オーバーロード](https://github.com/neuecc/UniRx/blob/master/Assets/UniRx/Scripts/UnityEngineBridge/UnityUIComponentExtensions.cs#L22)もあります。


# まとめ

　ボタンのクリック回数をテキストに表示する処理をUniRxを使って実装しました。またそれを通じて、UniRxがUIイベント用に提供しているいくつかのメソッドを紹介しました。それらを使うことでUIイベントの処理を簡潔に記述することが可能です。

　RxはRxJava、ReactiveExtensionsの記事を使って勉強することが可能ですが、これらの記事にはUniRxの特別のメソッドなどはもちろん記載されていません。Unity固有・UniRx固有のメソッドがあり、それを使うことで簡潔にできるということを理解しておくと便利だなと思いました。