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

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

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

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

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

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

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

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

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

Observerパターン

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

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

例 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の３種類

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

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

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 結果

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

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 結果

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

例 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 結果

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

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’, ‘’); } })

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

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

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

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

filter • trueが返ってきたものだけ値を使う filter (X => x > 10) 2 1¥ 30 0 22 5 60 1 30 22 60

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

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

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