Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ReactiveCocoaのゆるい紹介とメルカリでの活用事例
Search
Shinichiro Oba
August 11, 2015
Programming
3
3.7k
ReactiveCocoaのゆるい紹介とメルカリでの活用事例
Retty Tech Cafe第3回「スタートアップ×iOS開発」で発表した資料に加筆+修正をしたものです
https://atnd.org/events/67600
Shinichiro Oba
August 11, 2015
Tweet
Share
More Decks by Shinichiro Oba
See All by Shinichiro Oba
サーバサイドエンジニアと効率よく開発するためにやっていること
bricklife
8
2.1k
アッテ開発の技術:Swift と RxSwift
bricklife
19
17k
RxSwiftのobserveOnとsubscribeOnを理解する
bricklife
20
7.4k
Swift 2.0でRxSwift、ReactKit、ReactiveCocoaを使ってみた
bricklife
10
5k
Apple Pay対応のやりかた
bricklife
1
25k
iOS版グローバル対応の罠と技
bricklife
8
24k
Other Decks in Programming
See All in Programming
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
Deep Dive into ~/.claude/projects
hiragram
13
2.5k
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
160
Hack Claude Code with Claude Code
choplin
3
890
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
PipeCDのプラグイン化で目指すところ
warashi
1
270
GraphRAGの仕組みまるわかり
tosuri13
8
530
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
150
Is Xcode slowly dying out in 2025?
uetyo
1
260
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
110
AIともっと楽するE2Eテスト
myohei
0
330
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Music & Morning Musume
bryan
46
6.6k
4 Signs Your Business is Dying
shpigford
184
22k
Code Reviewing Like a Champion
maltzj
524
40k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
Practical Orchestrator
shlominoach
188
11k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Code Review Best Practice
trishagee
69
18k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
GraphQLとの向き合い方2022年版
quramy
49
14k
Transcript
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
Functional Reactive Programming (FRP) とは?
FRPとは 「⾮非同期データストリームを⽤用いた プログラミング」などと説明される ことが多い
よくわかんない\(^o^)/
よくわからないので ReactiveCocoa (RAC) が提供する ものから追っていきたいと思います
RACが提供するもの 1. ストリームを⽣生成する⽅方法 2. ストリームを加⼯工する⽅方法 3. ストリームを監視する⽅方法
+便便利利なマクロ
ようするにRACは ストリームを作ったり使ったり するライブラリ
これがストリームだ! 完了了 エラー データ 時間 どちらかの発⽣生によって ストリームが終わる 開始 or
ストリームの⽣生成 RACはCocoaフレームワーク上の様々な ものをストリームに変えられる 例例:⽂文字列列、配列列、KVO、UIイベント、 ネットワーク通信、デリゲートメソッド 呼び出し、etc.
RACが提供するカテゴリ
配列列のストリーム化 [0, 1, 2, 3]
タップのストリーム化 タップ ダブルタップ タップ
テキスト⼊入⼒力力のストリーム化 " "#$ "# "# A B C Delete
ネットワーク通信のストリーム化 ϦΫΤετ ड৴த ड৴ྃ த Ϩεϙϯε
IUUQTHJTUHJUIVCDPNTUBMU[FFCDBCDG
ストリームの加⼯工 ストリーム上のデータに対して filter した り map したり merge したり zip
したり reduce したりできる オペレータと呼ばれる ここが関数型、すなわちFunctional!
filter IUUQOFJMQBNFSBDNBSCMFTpMUFS
map IUUQOFJMQBNFSBDNBSCMFTNBQ
merge IUUQOFJMQBNFSBDNBSCMFTNFSHF
zip IUUQOFJMQBNFSBDNBSCMFT[JQ
reduce IUUQOFJMQBNFSBDNBSCMFTSFEVDF
例例:ダブルタップのストリーム IUUQTHJTUHJUIVCDPNTUBMU[FFCDBCDG
どんな加⼯工ができるか 「RAC Marbles」やその元の「RxMarbles」を⾒見見る とオペレータの種類とその効果がインタラクティブに わかるのでオススメ 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: ストリームを購読してログ出⼒力力
便便利利なマクロ たったこれだけで text プロパティの変更更を ラベルに⾃自動反映できる! RAC(self.label, text) = RACObserve(self, 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
読み込んだ本 「Functional Reactive Programming on iOS」 https://leanpub.com/iosfrp/ 当時の表紙
RACでやっていること リスト処理理 ⾮非同期イベント処理理 データバインディング Promise MVVM,
etc.
RACを使っている画⾯面 住所編集画⾯面 住所⼀一覧画⾯面 銀⾏行行情報編集画⾯面 検索索条件選択画⾯面 通知設定画⾯面
⽀支払い⽅方法選択画⾯面 商品⼀一覧画⾯面 購⼊入画⾯面 検索索コーチマーク画⾯面 検索索サジェスト画⾯面
実際の画⾯面は メルカリをダウンロードして ⾒見見てください!!! IUUQTJUVOFTBQQMFDPNKQBQQJE
データバインディングの例例 銀⾏行行情報編集画⾯面 プロパティの変更更をテキストフィールドに⾃自動反映 検索索サジェスト画⾯面 テキストフィールドの変更更をプロパティに⾃自動反映 RAC(self.accountNumberTextField, text)
= RACObserve(self.viewModel, accountNumber); RAC(self, inputText) = textField.rac_textSignal;
Promiseの例例 購⼊入画⾯面 タイムアウトを設けた失敗してもよい⾮非同期処理理と 購⼊入APIの完了了を両⽅方待つ RACSignal *timeoutSignal = [[RACSignal merge:@[
_btDataSignal, [RACSignal interval:kBTDataTimeout onScheduler:[RACScheduler mainThreadScheduler]], ]] take:1]; [RACSignal combineLatest:@[_buyAPISignal, timeoutSignal]] subscribeNext:^(RACTuple *tuple) { //... } error:^(NSError *error) { //... }];
MVVMを導⼊入した画⾯面 住所編集画⾯面 住所⼀一覧画⾯面 銀⾏行行情報編集画⾯面 検索索条件選択画⾯面 通知設定画⾯面
⽀支払い⽅方法選択画⾯面 商品⼀一覧画⾯面 購⼊入画⾯面 検索索コーチマーク画⾯面 検索索サジェスト画⾯面
MVVMとは Model View ViewModelというMVCの派⽣生パターン https://ja.wikipedia.org/wiki/Model_̲View_̲ViewModel ViewModelはViewを描画するための状態の保持と、 Viewから受け取った⼊入⼒力力を適切切な形に変換してModel に伝達する役⽬目
ViewModelはテストできる!
応⽤用例例:インクリメンタルサーチ 検索索サジェスト画⾯面 以下とほぼ同じ実装をしている http://qiita.com/ikesyo/items/e699eefe1d0985158420 個⼈人的にFRPが本領領発揮するケースの1つだと思う [[[[[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); }];
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