ReactiveCocoaのゆるい紹介とメルカリでの活用事例

ReactiveCocoaのゆるい紹介と   メルカリでの活⽤用事例例 株式会社メルカリ   iOSエンジニア   ⼤大庭慎⼀一郎郎

⾃自⼰己紹介 ⼤大庭  慎⼀一郎郎  (ooba  /  bricklife)   株式会社メルカリ   2013年年4⽉月⼊入社   「メルカリ」iOS版を開発

メルカリとは？ いわゆる「フリマアプリ」   2013年年7⽉月  JP版リリース   2014年年8⽉月  US版リリース

はじめに 間違っていても怒怒らないで…！   ツッコミは⼤大歓迎です！   先⼈人たちによる偉⼤大なドキュメント からの引⽤用多め

ReactiveCocoaの   ゆるい紹介

ReactiveCocoaとは "ReactiveCocoa  (RAC)  is  a  Cocoa   framework  inspired  by  Functional   Reactive  Programming.  It  provides   APIs  for  composing  and  transforming   streams  of  values  over  time.”   https://github.com/ReactiveCocoa/ReactiveCocoa

• https://github.com/ReactiveCocoa/ReactiveCocoa

Functional  Reactive   Programming  (FRP)  とは?

FRPとは 「⾮非同期データストリームを⽤用いた プログラミング」などと説明される ことが多い

よくわかんない＼(^o^)／  

よくわからないので ReactiveCocoa  (RAC)  が提供する ものから追っていきたいと思います

RACが提供するもの 1. ストリームを⽣生成する⽅方法   2. ストリームを加⼯工する⽅方法   3. ストリームを監視する⽅方法   ＋便便利利なマクロ

ようするにRACは   ストリームを作ったり使ったり するライブラリ

これがストリームだ！ データ 時間 開始 エラー or 完了了 どちらかの発⽣生によって   ストリームが終わる

ストリームの⽣生成 RACはCocoaフレームワーク上の様々な ものをストリームに変えられる   例例：⽂文字列列、配列列、KVO、UIイベント、 ネットワーク通信、デリゲートメソッド 呼び出し、etc.

RACが提供するカテゴリ

配列列のストリーム化 [0,  1,  2,  3] 0 1 2 3

タップのストリーム化 タップ ダブルタップ タップ

テキスト⼊入⼒力力のストリーム化 A B C Delete A AB ABC AB

ネットワーク通信のストリーム化 リクエスト 受信中 受信完了 中身は レスポンス

https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

• https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

ストリームの加⼯工 ストリーム上のデータに対して  filter  した り  map  したり  merge  したり  zip  したり   reduce  したりできる   オペレータと呼ばれる   ここが関数型、すなわちFunctional！

filter http://neilpa.me/rac-marbles/#filter

• http://neilpa.me/rac-marbles/#map

map http://neilpa.me/rac-marbles/#map

• http://neilpa.me/rac-marbles/#map

merge http://neilpa.me/rac-marbles/#merge

• http://neilpa.me/rac-marbles/#merge

zip http://neilpa.me/rac-marbles/#zip

• http://neilpa.me/rac-marbles/#merge

reduce http://neilpa.me/rac-marbles/#reduce

• http://neilpa.me/rac-marbles/#reduce

例例：ダブルタップのストリーム https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

• https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

どんな加⼯工ができるか 「RAC  Marbles」やその元の「RxMarbles」を⾒見見る とオペレータの種類とその効果がインタラクティブに わかるのでオススメ   http://neilpa.me/rac-‐‑‒marbles/   http://rxmarbles.com/

• http://neilpa.me/rac-marbles/
• http://rxmarbles.com/

ストリームの監視 購読  (Subscribe)  という   ストリームに流流れてくるデータを順次処理理   配列列に戻す、UIへの表⽰示、プロパティの更更新、 画⾯面遷移、etc.

すべてを使ったコードの例例
[[[self.textField rac_textSignal] filter:^BOOL(NSString *value) {
return value.length > 0;
}] subscribeNext:^(NSString *value) {
NSLog(@“%@", value);
}];

-‐‑‒rac_̲textSignal

⼊入⼒力力⽂文字列列からストリームを⽣生成

-‐‑‒filter:

ストリームをfilterして空⽂文字列列が
含まれないように加⼯工

-‐‑‒subscribeNext:

ストリームを購読してログ出⼒力力

便便利利なマクロ RAC(self.label, text) = RACObserve(self, text); たったこれだけで  text  プロパティの変更更を ラベルに⾃自動反映できる！

ストリームを使ってできること リスト処理理   ⾮非同期イベント処理理   データバインディング   Promise   MVVM,  etc.

なにがうれしいか いろんな⾮非同期処理理を   「ストリームをどう扱うか」   という視点から「宣⾔言的」に記述できる

メルカリでの活⽤用事例例

RAC導⼊入の歴史 2014/8に  pod  ʻ‘ReactiveCocoaʼ’   最初に使ったのはUIAlertViewのRACサポート   徐々に適⽤用箇所を広げる   現在iOSエンジニア4⼈人全員がRACを使うように

読み込んだ記事 The  introduction  to  Reactive  Programming   you've  been  missing   https://gist.github.com/staltz/868e7e9bc2a7b8c1f754   【翻訳】あなたが求めていたリアクティブプログラミ ング⼊入⾨門   http://ninjinkun.hatenablog.com/entry/introrxja

• https://gist.github.com/staltz/868e7e9bc2a7b8c1f754
• http://ninjinkun.hatenablog.com/entry/introrxja

読み込んだ本 「Functional  Reactive  Programming  on  iOS」   https://leanpub.com/iosfrp/ 当時の表紙

• https://leanpub.com/iosfrp/

RACでやっていること リスト処理理   ⾮非同期イベント処理理   データバインディング   Promise   MVVM,  etc.

RACを使っている画⾯面 住所編集画⾯面   ⽀支払い⽅方法選択画⾯面   住所⼀一覧画⾯面   商品⼀一覧画⾯面   銀⾏行行情報編集画⾯面   購⼊入画⾯面   検索索条件選択画⾯面   検索索コーチマーク画⾯面   通知設定画⾯面   検索索サジェスト画⾯面

実際の画⾯面は   メルカリをダウンロードして   ⾒見見てください！！！ https://itunes.apple.com/jp/app/id667861049

• https://itunes.apple.com/jp/app/id667861049

データバインディングの例例 銀⾏行行情報編集画⾯面   RAC(self.accountNumberTextField, text) = RACObserve(self.viewModel, accountNumber); プロパティの変更更をテキストフィールドに⾃自動反映   検索索サジェスト画⾯面   RAC(self, inputText) = textField.rac_textSignal; テキストフィールドの変更更をプロパティに⾃自動反映

Promiseの例例 購⼊入画⾯面   RACSignal *timeoutSignal = [[RACSignal merge:@[ _btDataSignal, [RACSignal interval:kBTDataTimeout onScheduler:[RACScheduler mainThreadScheduler]], ]] take:1]; [RACSignal combineLatest:@[_buyAPISignal, timeoutSignal]] subscribeNext:^(RACTuple *tuple) { //... } error:^(NSError *error) { //... }]; タイムアウトを設けた失敗してもよい⾮非同期処理理と 購⼊入APIの完了了を両⽅方待つ

MVVMを導⼊入した画⾯面 住所編集画⾯面   ⽀支払い⽅方法選択画⾯面   住所⼀一覧画⾯面   商品⼀一覧画⾯面   銀⾏行行情報編集画⾯面   購⼊入画⾯面   検索索条件選択画⾯面   検索索コーチマーク画⾯面   通知設定画⾯面   検索索サジェスト画⾯面

MVVMとは Model  View  ViewModelというMVCの派⽣生パターン   https://ja.wikipedia.org/wiki/Model_̲View_̲ViewModel   ViewModelはViewを描画するための状態の保持と、 Viewから受け取った⼊入⼒力力を適切切な形に変換してModel に伝達する役⽬目   ViewModelはテストできる！

• https://ja.wikipedia.org/wiki/Model_View_ViewModel

応⽤用例例：インクリメンタルサーチ
検索索サジェスト画⾯面  
以下とほぼ同じ実装をしている  
[[[[[textField.rac_textSignal filter:^BOOL(NSString *text) {
return text.length > 0;
}] throttle:0.5] map:^(NSString *text) {
return [[APIClient sharedClient] fetchSearchResultWithQuery:text];
}] switchToLatest] subscribeNext:^(id JSON) {
NSLog(@"Search result: %@", JSON);
}];

http://qiita.com/ikesyo/items/e699eefe1d0985158420

個⼈人的にFRPが本領領発揮するケースの１つだと思う

• http://qiita.com/ikesyo/items/e699eefe1d0985158420

RAC導⼊入時の注意

導⼊入コストが⾼高い 概念念の理理解に時間がかかる   メルカリでは独学と知⾒見見のシェアでなんとかした   まずはデータバインディングかPromiseからはじめ るといいかも   ⼤大量量のオペレータを理理解する必要がある   関数型⾔言語をやっていればなんとかなるか…？

循環参照しやすい 便便利利マクロ@strongifyと@weakifyを駆使   「Implicit  retain  of  ʻ‘selfʼ’  within  blocks」をYesに   Instrumentsでメモリの利利⽤用状況をチェック   AllocateのMark  Generationが便便利利

最初は⼤大変だけど   慣れると楽になってきますよ！

ありがとうございました！ スライド内のURL以外に参考にしたURL   http://havelog.ayumusato.com/develop/javascript/e657-‐‑‒ reactive_̲programming_̲in_̲javascript.html   http://qiita.com/amay077/items/5e7cedb069a5a6ae0ae7   http://yohshiy.blog.fc2.com/blog-‐‑‒entry-‐‑‒215.html   http://www.slideshare.net/taketin/mvvm-‐‑‒40956834

• http://havelog.ayumusato.com/develop/javascript/e657-reactive_programming_in_javascript.html
• http://qiita.com/amay077/items/5e7cedb069a5a6ae0ae7
• http://yohshiy.blog.fc2.com/blog-entry-215.html
• http://www.slideshare.net/taketin/mvvm-40956834