Upgrade to Pro — share decks privately, control downloads, hide ads and more …

RxJSではじめるリアクティブプログラミング

 RxJSではじめるリアクティブプログラミング

Satoshi Watanabe

February 10, 2018
Tweet

More Decks by Satoshi Watanabe

Other Decks in Programming

Transcript

  1. RxJSではじめる
    リアクティブプログラミング
    Satoshi Watanabe(@sassy_watson)
    2018/2/10 プログラミング生放送勉強会

    View Slide

  2. このプレゼンの目的
    • 今日はRxJSとその背景となるリアクティブプログラミングのについて
    簡単に話します。

    View Slide

  3. アジェンダ
    • 自己紹介
    • リアクティブプログラミングとは
    • RxJSとは

    View Slide

  4. 自己紹介
    • 渡辺 悟史(わたなべ さとし)
    • twitter: @sassy_watson
    • 株式会社カケハシ所属
    • フロントエンド開発
    • モバイルアプリ開発(Android)

    View Slide

  5. 株式会社カケハシ
    • Musubiという薬局での服薬指導ツールを開発
    • フロントエンドはAngular
    • バックエンドは Python3
    • カケハシでは一緒に働ける仲間を募集しています!

    View Slide

  6. リアクティブプログラミングと
    RxJS

    View Slide

  7. リアクティブプログラミングとは
    • 「何か」に反応するプログラミング
    • 通知されてくるデータを受け取るたびに反応して処理をするプログラ
    ミング
    • 処理の流れを定義してあげて、データがきたらその定義された順番
    に処理していくイメージ

    View Slide

  8. Excelの例
    先に式を定義する
    セルに値を入れると計算される
    (セルに入力された値に反応する)

    View Slide

  9. 「何か」に反応=ストリーム
    • ストリームは通知されるデータの流れ
    • リアクティブプログラミングはこのストリームを処理していく

    View Slide

  10. Observerパターン

    View Slide

  11. Observerパターン
    • オブザーバーと呼ばれるオブジェクトをサブジェクトを監視するため
    に登録する
    • サブジェクトがイベントを発行するたびにオブザーバーがそのイベン
    トの処理を行う
    • リアクティブプログラミングは基本このパターン

    View Slide

  12. RxJSとは
    • JavaScriptでリアクティブプログラミングを行うためのライブラリ
    • RxはReactiveExtensionsの略
    Observable Observer
    data

    View Slide


  13. import { Observable } from 'rxjs';
    let value = 10;
    Observable.fromEvent(document, 'click')
    .subscribe(
    () => {
    //Success Callback
    value++;
    document.getElementById('ret').innerHTML = value.toString();
    },
    (error) => {
    // Error Callback
    console.error(error);
    },
    () => {
    console.log('complete');
    }
    )
    ObserverがSubscribe(購読)することにより
    データを受け取る
    データを受け取るコールバックは
    next/error/completeの3種類

    View Slide

  14. 2種類のObservable
    • Cold Observable
    • Subscribeするまでデータを流さない
    • Hot Observable
    • Subscribeに関係なくデータを流す

    View Slide

  15. Cold Observable
    • Subscribeするまでデータを流さない

    View Slide

  16. const ob$ = Observable.interval(1000)
    .take(5);
    setTimeout(() => {
    ob$.subscribe(
    (x) => {
    console.log(x);
    },
    (err) => {console.log(err)},
    () => {console.log('complete')}
    )
    }, 3000);
    0
    1
    2
    3
    4
    complete
    結果

    View Slide

  17. Hot Observable
    • Subscribeに関係なくデータを流す

    View Slide

  18. const ob2$ = Observable.interval(1000)
    .take(5)
    .publish(); //publishでHotなObservableを作る
    ob2$.connect(); //connectでデータを流し始める
    setTimeout(() => {
    ob2$.subscribe(
    (x) => {
    console.log(x);
    },
    (err) => {console.log(err)},
    () => {console.log('complete')}
    )
    }, 3000);
    2
    3
    4
    complete
    結果

    View Slide

  19. オペレータ
    • Observableが通知したデータをObserverに届くまでにデータを操作す
    るメソッド
    • Observableを生成する(メソッドチェーンが使える)

    View Slide


  20. Observable.from([1, 2, 3, 4, 5, 6])
    .filter(x => x % 2 == 0) // 2の倍数でfilter
    .map(x => x * 100) //100かける
    .subscribe(
    (x) => {
    console.log(x);
    },
    (error) => {
    // Error Callback
    console.error(error);
    },
    () => {
    console.log('complate');
    }
    );
    > 200
    > 400
    > 600
    > complate
    結果

    View Slide

  21. 例 二つの入力を入れるとbuttonがenableに
    なる

    View Slide

  22. const i1 = document.getElementById('input1');
    const i2 = document.getElementById('input2');
    const input1$ = Observable.fromEvent(i1, "input")
    .map((x) => {
    const target = x.target;
    return target.value !== '';
    });
    const input2$ = Observable.fromEvent(i2, "input")
    .map((x) => {
    const target = x.target;
    return target.value !== '';
    });
    Observable.combineLatest(input1$,input2$)
    .map(([a, b]) => a && b)
    .distinctUntilChanged()
    .subscribe((x) => {
    const button = document.getElementById('button');
    if (x) {
    button.removeAttribute('disabled');
    } else {
    button.setAttribute(‘disabled’, ‘’);
    }
    })

    View Slide

  23. Subject
    • Observableであり、Observerでもあるクラス
    • subscribeでnext/error/completeのイベントハンドラを登録できる
    • next()でイベントを起こす・error()でエラーを起こす

    View Slide

  24. const sub$ = new Subject();
    sub$.subscribe(
    (x) => {
    console.log(x);
    },
    (err) => {
    console.error(err);
    },
    () => {
    console.log('Complete');
    }
    )
    sub$.next(10); //10が表示
    sub$.next(20); //20が表示
    sub$.complete(); //complete

    View Slide

  25. 各種オペレータ(一部のみ)

    View Slide

  26. map
    • それぞれのデータに演算して加工する
    map (x => 10 * x)
    1 2 3
    10 20 30

    View Slide

  27. filter
    • trueが返ってきたものだけ値を使う
    filter (X => x > 10)
    2

    30
    0
    22 5 60 1
    30 22 60

    View Slide

  28. zip
    • 二つのストリームの値を結合する
    zip
    1 2 3 4 5
    A B C D
    1A 2B 3C 4D

    View Slide

  29. distinctUntilChanged
    • 値が変化するまで通知しない
    distinctUntilChanged
    1 2 3 4 4
    1 2 3 4
    1 2 2

    View Slide

  30. まとめ
    • JavaScriptでプログラミングをするときはRxJSを使ってみましょう!
    • Enjoy Reactive Programming!

    View Slide