RxswiftのデモからRxswiftをざっくり学ぶ

#はじめに

※3行ほど追記
以下記事も書いたのでもしよかったらみて下さい！
↓
[[Rxswift] 基本、作成、変換、フィルタリング、組み合わせ、サンプルコード](https://qiita.com/sachiko-kame/items/f7d548ad4218d7a6c539)

よく分からなかったので簡単にデモを[usage](https://github.com/ReactiveX/RxSwift#usage)を動かして少し学ぼうと言うものです。
実際のものと成果物は違うのでそこはご了承ください。

[はじめに読むべき箇所](https://github.com/ReactiveX/RxSwift/blob/master/Documentation/GettingStarted.md)と思うところメモメモ＿φ(￣ー￣ )

あと、Rxswiftと同じようなもので[combine](https://developer.apple.com/documentation/combine)とかあるようなので、気になりますね！(｡･ω･｡)

#成果物と全体コード写真!

![rxsample.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133940/ef5c6bad-59c1-7150-ad3e-b9a8daaff495.gif)
<img width="487" alt="スクリーンショット 2020-04-25 18.35.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133940/ab868086-1c80-0883-8971-3f47ed72c577.png">
<img width="500" alt="スクリーンショット 2020-04-25 18.34.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133940/1c5f17d3-235b-74fb-d095-31f13026746e.png">

#コード

```ViewController.swift
import UIKit
import RxSwift
import RxCocoa

class ViewController: UIViewController {
    
    @IBOutlet weak var searchBar: UISearchBar!
    @IBOutlet weak var tableView: UITableView!
    let disposeBag = DisposeBag()
    
    override func viewDidLoad() {
        super.viewDidLoad()
       let searchResults = searchBar.rx.text.orEmpty
        .throttle(.milliseconds(300), scheduler: MainScheduler.instance)
        .distinctUntilChanged()
        .flatMapLatest { query -> Observable<[Repository]> in
            if query.isEmpty {
                return .just([])
            }
            return self.searchGitHub(query)
                .catchErrorJustReturn([])
        }
        .observeOn(MainScheduler.instance)
        
        searchResults
        .bind(to: tableView.rx.items(cellIdentifier: "cell")) {
            (index, repository: Repository, cell) in
            cell.textLabel?.text = repository.name
            cell.detailTextLabel?.text = repository.url
        }
        .disposed(by: disposeBag)
    }
    
    func searchGitHub(_ query:String) -> Observable<[Repository]> {
        let a = Repository(name:"sampleName:\(query)", url:"sampleUrl:\(query)")
        let strArray = [Repository](repeating: a, count: query.count)
        return Observable.create { observer in
            observer.on(.next(strArray))
            observer.on(.completed)
            return Disposables.create()
        }
    }
}

struct Repository {
    var name:String
    var url:String
    
    init(name:String, url:String) {
        self.name = name
        self.url = url
    }
}

```

#まず動かしてみての感想
とりあえず動いたよし！！
ふう〜〜〜〜ん(｡･ω･｡)

#今の時点で何が出来ているかの再確認
『UISearchBar』の入力に応じて『UITableView』が変更される。
**もう少し詳しく**:raising_hand:

『UISearchBar』に『あ』と入力すれば『UITableView』に1列追加される。
『UISearchBar』に『ああ』と入力すれば『UITableView』に2列追加される。
**もう少し詳しく**:raising_hand:

『UISearchBar』に『あ』と入力すれば『UITableView』に『sampleName:あ" url:"sampleUrl:あ』と書かれたものが1列追加される。
『UISearchBar』に『ああ』と入力すれば『UITableView』に『sampleName:ああ" url:"sampleUrl:ああ』と書かれたものが1列追加される。
**だからなんだ！**:raising_hand:

<font color=red>**データを更新するとUIが更新される接続部分ができる！**</font>
**もう少し！**:raising_hand:

<font color=red>**接続部分の記述が統一されていることでデータ変更やUIの調整部分のみを考えればいいようになるはず！**</font>
**だがその接続部分の理解が難しい！**:raising_hand:

<font color=red>**分かった時！分かり合えた時に素敵な未来が待っているさ！**</font>
**なるほど！**:ok_woman:

#分割して大まかに観察してみる

| <img width="330" alt="スクリーンショット 2020-04-25 19.36.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133940/8d7cd631-5326-f64e-9488-e6bebedfe80b.png">     | 
|:-----------------|

↑
<font color=royalblue>**入力部品から入力されたテキストを変更部分に繋げた定数を作成している。**</font>

| <img width="330" alt="スクリーンショット 2020-04-25 19.36.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133940/705dc9a2-3f65-9bc2-c63f-17e693b0633a.png">      | 
|:-----------------|

↑
<font color=mediumseagreen>**入力された値を変更している部分**</font>

| <img width="330" alt="スクリーンショット 2020-04-25 19.36.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133940/1994f403-a893-df84-0da7-64ed05ee35f6.png">       | 
|:-----------------|

↑
<font color=palevioletred>**もとの値から変更された値をUIにはめ込む作業部分**</font>


#学んだこと
また『お！』って思うことカキカキ＿φ(￣ー￣ )していくので暖かい目で優しい目で見守ってください。
いつも優しい皆様に感謝しています！✨

###とりあえず何をどうすればどう動くの？

『入力される部分』、『出力される部分』をしっかり繋げれば動くようです。

https://github.com/ReactiveX/RxSwift/blob/master/Documentation/Why.md
の参考コードを使って

```swift
@IBOutlet weak var sampleLabel: UILabel!
    
@IBOutlet weak var sampleTextField: UITextField!
@IBOutlet weak var sampleTextField2: UITextField!

let disposeBag = DisposeBag()

Observable.combineLatest(sampleTextField.rx.text.orEmpty, sampleTextField2.rx.text.orEmpty) { $0 + " " + $1 }
        .map { "Greetings, \($0)" }
        .bind(to: sampleLabel.rx.text)
        .disposed(by: disposeBag)

```

やはり上記のように、

**入力**(combineLatest…)、
**編集**({ $0 + " " + $1 }, .map { "Greetings, \($0)" })、
**出力**(bind)

の流れがあります。

**編集**部分はいずれかが記述されていれば動きます！

###『Observable』と『bind』をこうとらえた！

**Observable** …　入力、編集場所　[スタート]
**bind** …　出力場所、画面にセットなどする部分　[ゴール]

###何が重要？

部品の特徴、できることをしっかりとらえておくこと、あと応用部分。
ここら辺がある程度分かってくると使いこなせそうですね、、、


#最後に
こんなことも知っておいた方がいいよ！ここ間違っているよ！などあれば教えて頂けると嬉しいです！