RxSwiftでの実装練習の記録ノートとはじめの一歩
•
5 gefällt mir•2,346 views
potatotips #37での登壇資料になります。 RxSwiftの勉強を最近初めてみたのですが、その際に行なった学習方法や概念理解・サンプルの作成を通じて得られた知見や実装のポイント等をまとめました。 ※文法的な部分に関する解説よりこの部分がサンプルの読み進め等を行なっていく上でポイントになると思われる部分をピックアップしてみました。 あまりコードの話はありませんが、どこの部分から着手していかわからなかったり、実装の一連の流れ等の理解や整理にほんの少しでもお役に立てれば幸いです。 ★実装サンプルに関する詳細解説 ・RxSwiftでの実装練習の記録ノート（前編：Observerパターンの例とUITableViewの例） http://qiita.com/fumiyasac@github/items/90d1ebaa0cd8c4558d96 ・RxSwiftでの実装練習の記録ノート（後編：DriverパターンとAPIへの通信を伴うMVVM構成のサンプル例） http://qiita.com/fumiyasac@github/items/da762ea512484a8291a3 ★サンプルのリポジトリ https://github.com/fumiyasac/RxSwiftPracticeNote
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie RxSwiftでの実装練習の記録ノートとはじめの一歩
Ähnlich wie RxSwiftでの実装練習の記録ノートとはじめの一歩 (15)
Mehr von Fumiya Sakai
Mehr von Fumiya Sakai (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (11)
RxSwiftでの実装練習の記録ノートとはじめの一歩
- 10. ✦ Observerパターンの基本的な構文と使い方を押さえておく この書き方が良いのかは若干自信がないのですが、観測対象の定数に対して順繰りに値を加工・整形する。 挨拶文を作るプラクティスの実装ポイント //セグメントコントロールにおいて、値変化のイベントを観測対象にする let segmentedControlObservable: Observable<Int> = stateSegmentedControl.rx.value.asObservable() //セグメントコントロールの値変化を検知して、その状態に対応するenumの値を返す //(map)別の要素に変換する ※IntからStateへ変換 let stateObservable: Observable<State> = segmentedControlObservable.map { (selectedIndex: Int) -> State in return State(rawValue: selectedIndex)! } //enumの値変化を検知して、テキストフィールドが編集を受け付ける状態かを返す //(map)別の要素に変換する ※StateからBoolへ変換 let greetingTextFieldEnabledObservable: Observable<Bool> = stateObservable.map { (state: State) -> Bool in return state == .useTextField } //(bindTo)イベントのプロパティ接続をする ※bindToの引数内に表示対象のUIパーツを設定 //(DisposeBag)観測状態からの解放を行う greetingTextFieldEnabledObservable.bindTo(freeTextField.rx.isEnabled).addDisposableTo(disposeBag) 終端で観測状態の解除を行う この中で観測対象の定数に対して処理を行なう（SegmentControlの状態） ★それぞれの定数を.asObservable()で観測対象とし、その値に対して加工を行う この中で観測対象の定数に対して処理を行なう（入力モードの変換）
- 11. ✦ RxSwiftを用いることで下記のように書くことも可能 RxDatasourcesを使用して最終的にbindToでデータと紐づける(PresenterからのデータはすでにObservable) UITableViewのDataSource部分の実装ポイント //データソースを元にしてセルの生成を行う dataSource.configureCell = {_, tableView, indexPath, ramens in let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) cell.textLabel?.text = ramens.name cell.detailTextLabel?.text = ramens.taste cell.imageView?.image = ramens.image return cell } //作成したデータと表示するUITableViewをBindして表示する ramensData.ramens.bindTo(ramenTableView.rx.items(dataSource: dataSource)).addDisposableTo(disposeBag) //RxSwiftを利用してUITableViewDelegateを適用する ramenTableView.rx.setDelegate(self).addDisposableTo(disposeBag) //データソースの定義を元にセクションヘッダーを生成する ※動画サンプルと形式が違う部分 dataSource.titleForHeaderInSection = { (ds, section: Int) -> String in return ds[section].model } //データソースの定義 let dataSource = RxTableViewSectionedReloadDataSource<SectionModel<String, Ramen>>() //Presenter層から表示するラーメンデータの取得 let ramensData = RamenPresenter() ★DataSource部分はRxTableViewSectionedDataSource<SectionModelを活用して記述
- 12. ✦ UIとデータのバインドをして入力値変更に伴って表示も変更する APIとの通信が絡むようなUI関連の更新の際にはObservableだけだと面倒な考慮もDriver変換でし易くする。 ★後編のサンプルでの役割の構成のまとめ DriverパターンとMVVM構成の概要 View層 ViewModel層 Model層 ①テキストフィールドの入力を検知 ②入力された値を条件にAPIへリクエスト ③受取ったレスポンスをマッピングや整形④UIとのバインドを行うタイミングでDriverに変換 ・メインスレッドで観測状態にするのでUIの更新に関する考慮がすでにされている ・ObservableだけではErrorまたはCompletion時に処理の流れが途切れるのでそれを防止する Driverパターンのポイントやメリットをざっくりまとめ: 各種階層の役割まとめ: ・(View層) データとUIとのバインドしてデータの変化に応じた表示を行う ・(ViewModel層) View層でのUI変化の受け取りやレスポンスに対する値の変換処理等の中継 ・(Model層) MappingされたEntity群やAPI通信に関連するビジネスロジックがある