111
92

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ゼロからはじめるRxSwift(Swift4)

Last updated at Posted at 2018-09-07

はじめに

これはRxSwift初心者がその概要をざっくり理解し、とりあえずRxSwiftで動くものを作るまでの記録です:muscle:
易しい記事やサンプルを探すのに苦労したのでまとめておきます。
Rx系の言語を使ったことがなく、まずは簡単に雰囲気を知りたいという人を対象としています。
(同じことをやろうとした場合の所要時間は2-3時間程度です)

↓最後にこれを作ります!
rsSwift.gif

RxSwiftについて知る

以下の方法で調べました。

  1. 「RxSwift」で検索して出てきた記事10-20つくらいにざっと目を通す
  • 繰り返し出てくるワードは重要語句としてチェック
  • 聞き慣れないワードばかりだが、脳を慣れさせていくイメージで流し読む
  1. 初心者にもわかりやすそうな記事を5つくらいじっくり読む
  • 重要そうだけど分からないことは派生していくつか記事を読む

RxSwiftの概要

何度も出てきたワードたち

ストリーム

スクリーンショット 2018-09-07 14.19.41.png by [アッテ開発の技術:Swift と RxSwift - Speaker Deck](https://speakerdeck.com/bricklife/atutekai-fa-falseji-shu-swift-to-rxswift) この図が一番わかりやすかった!

Observable

スクリーンショット 2018-09-07 17.00.33.png by [オブザーバーパターンから始めるRxSwift入門](https://qiita.com/k5n/items/17f845a75cce6b737d1e) ストリームのマーブル図は、まさにこのObservableを表している。

オブザーバーパターン

デザインパターンの一種。下記記事の出だしの文章がわかりやすかった。
Rx入門 (2) - オブザーバーパターン - xin9le.net

よくある例としては「データが変更されたときにUIを更新する」などが当てはまります。このようなとき、「データがUIを知っていて、UIの更新メソッドをそのまま呼び出す」というのは極めて汎用性が低い設計です。データはUIに依存するべきではないからです。「オブジェクトがクラスに依存せずに他のオブジェクトに状態変化を通知するにはどうすればよいか」。この問題をスマートに解決するために考えられたデザインパターンがオブザーバーパターンです。

イベントの加工や合成

filter・map・merge・zip・reduceなど。

実際にRxSwiftを使ってみる

ここまででRxSwiftとは何かがだいたいわかったので、次は早速手を動かしていきます。
一番手っ取り早くRxSwiftを感じられそうな、テキストフィールドを変更するとラベルに自動反映されるという機能を作ってみます。
※この程度だとRxSwiftを使わなくても実装できますが、今回は簡単にRxSwiftを試してみたいということでこちらを作ります。

プロジェクトの作成

何でも大丈夫ですが、今回はRxSwiftSampleという名前で作ります。

CocoaPodsで導入

Carthageでも導入できるようですが、今回はCocoaPodsを使います。
RxSwiftとRxCocoaの両方をインストール!

target 'RxSwiftSample' do
  # Comment the next line if you're not using Swift and don't want to use dynamic frameworks
  use_frameworks!

  # Pods for RxSwiftSample
   pod 'RxSwift'
   pod 'RxCocoa'
end

画面を作る

ViewControllerにLabelとTextFieldそれぞれ1つずつ並べ、Outlet接続しておきます。
スクリーンショット 2018-09-07 17.29.46.png

RxSwiftを実装

コードはこちら↓。コピペしたら動きます。

import UIKit
import RxSwift
import RxCocoa


class ViewController: UIViewController {

    @IBOutlet weak var label: UILabel!
    @IBOutlet weak var textField: UITextField!
    
    let disposeBag = DisposeBag()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        textField.rx.text.orEmpty
        .bind(to: label.rx.text)  
        .disposed(by: disposeBag)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

コードの中身を上から見ていくとこんな感じ(だと思う)↓

  • DisposeBag():観測状態からの解放を行う際に使う
  • .orEmpty:受け取る値をStringに限定(String?からStringに変換)
  • .bind:受け取った値とUIパーツへの関連付けをする
  • .disposed:観測対象から除外する

これだけでTextFieldに入力した文字がLabelに自動反映されました:smile::tada:

さいごに

実際にコードを書いてみて、「スッキリ書けるな」というのを実感することができました。
今後はMVVMなども並行して学びつつ、もっと理解を深めていきたいと思います。
この記事がゼロから学ぶ人のお役に少しでも立てば嬉しい限りです。

参考にさせて頂いた記事(上に出てきてないもののみ)

111
92
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
111
92

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?