RxJS Ͱঢ়ଶΛ؅ཧ͢Δ Meguro.es #15 @ Drecom

ࣗݾ঺հ • ੢ాխത • @adwd118 (twitter) • @adwd (github) • ~2018/1 Bizreach • 2018/2~ Mercari/Merpay

RxJS

RxJS • ΠϕϯτɾඇಉظΛѻ͏ϥΠϒϥϦ • C#(ຊՈ), Java, Swift, JSͳͲͳͲͷ࣮૷͕͋Δ • ๛෋ͳAPIͰඇಉظΛ͔͋ͭ͑Δ • Angular͸RxJSΛ࢖͍ͬͯΔ

RxJSͷAPI • ͨ͘͞Μ͋ΔͷͰࠓճ࢖͏΍͚ͭͩ • Observable • Subject • BehaviorSubject • operators • map/filter/switchMap/debounceTime …

Observable • ඇಉظʹσʔλ͕ྲྀΕͯ͘ΔΦϒδΣΫτ • addEventListenerΈ͍ͨͳͷ • ஋͕Կճ΋དྷΔPromiseΈ͍ͨͳͷ

const obs1 = Rx.Observable.interval(1000); obs1.subscribe(count => console.log(‘count: ‘ + count)); // count: 1 // count: 2 // count: 3 const obs2 = Rx.Observable.fromEvent(document.body, ‘click') obs2.pipe( map(ev => ({ x: ev.clientX, y: ev.clientY })), filter(pos => pos.x > 400), ).subscribe(ev => console.log(ev)) // { x: 1000, y: 1000 } // { x: 1000, y: 200 } ͸ग़ྗ͞Εͳ͍ Observable

Subject • ஋Λྲྀ͢ϝιου΋ੜ͑ͯΔObservable • Subject#next

Subject const myEvent = new Subject(); myEvent.subscribe(ev => console.log(‘event: ‘ + ev)); myEvent.next(‘hi’) // event: hi myEvent.next(‘yo’) // event: yo

BehaviorSubject • ݱࡏͷ஋Λอ͍࣋ͯ͠ΔSubject • Subjectͱͷࠩҟ • BehaviorSubject#getValue() • BehaviorSubject.subscribeͨ͠ॠؒʹݱࡏ ͷ஋͕ྲྀΕͯ͘Δ

BehaviorSubject // ॳظ஋ΛίϯετϥΫλͷҾ਺ʹऔΔɹ const myTodos = new BehaviorSubject([]); myTodos.subscribe(todos => console.log(‘todos: ‘ + todos.length)); // todos: 0 // subscribeͨ͠ॠؒ஋͕ྲྀΕͯ͘Δ myTodos.next([ { id: 1, text: ‘do something’ } ]); // todos: 1

BehaviorSubject = Flux • BehaviorSubject͕΄΅Flux(Redux)Λ΍ͬͯ͘ΕΔ • BS#next => action • BS#subscribe => connect(react-redux) • combineLatest => combineReducers • (BehaviorSubject͡Όͳͯ͘Observableʹͳ Δ)

create-subscription • https://github.com/facebook/react/tree/ master/packages/create-subscription • reactνʔϜެࣜͷύοέʔδ • BehaviorSubjectΛσʔλιʔεͱ͢Δαϯϓ ϧ͕υΩϡϝϯτʹॻ͍ͯ͋Δ • Observableͷػӡʁ

create-subscription example import { createSubscription } from ‘create-subscription’; const BehaviorSubscription = createSubscription({ getCurrentValue: behaviorSubject => behaviorSubject.getValue(), subscribe: (behaviorSubject, callback) => { const subscription = behaviorSubject.subscribe(callback); return () => subscription.unsubscribe(); } }); {todos =>

examples

Todomvc const todos = new BehaviorSubject([]); const addTodo = text => { const current = todos.getValue(); todos.next([…current, { text, id: newId() }]); }; const filter = new BehaviorSubject(‘all’); // all, active, completed const filteredTodos = combineLatest(todos, filter) .pipe(map(v => switch(v.filter) { case ‘all’: return todos; case ‘active: return todos.filter(t => !t.completed); … }))

search w/ throttling const searchText = new BehaviorSubject(‘’); const searchResults = searchText.pipe( debounceTime(1000), switchMap(text => fetch(`/search?q=${text}`)) ) searchText.next(text)} />

αϯϓϧίʔυ • https://github.com/adwd/react-rxjs-todomvc • reduxjs/reduxͷtodomvc exampleΛϕʔε ʹͯ͠ஔ͖׵࣮͑ͨ૷

RxJSʹͯ͠Կ͕͍͍ͷ͔ • ๛෋ͳΦϖϨʔλͰReduxͷselector΍ɺmiddlewareΛ ͔ͭͬͯ΍ͬͯͨdebounceͱ͔͕؆୯ʹͰ͖Δ • Reduxͱൺ΂Δͱ • actionɺswitchจͱ͔ॻ͔ͳ͍͍ͯ͘ • MobXͱൺ΂Δͱ • ϚδοΫײ͕ͳ͍ʢRxJSʹϚδοΫײ͸ด͡ΒΕΔʣ

RxJSͷΑ͘ͳ͍ͱ͜ • ֶशίετ • APIׂ͕ͱେ͖͘มΘΔʁ(v5 -> v6)

BehaviorSubjectͰFluxͰ͖ͨ • ͋ͱ͸HoCͳΓͰBSɺؔ਺΁ͷࢀরΛίϯ ϙʔωϯτʹ༩͑ͯ΍Ε͹͍͍ • ୯७ʹexport constͰఆٛͯͦ͠ΕΛ௚઀ίϯ ϙʔωϯτ͔Βࢀর͢Δͷ΋Ͱ͖Δ

࢓ࣄͷϓϩδΣΫτʹ౤ೖத • Google Mapͷ্Ͱ͍Ζ͍Ζ͢ΔΞϓϦ • ϚοϓͷυϥοάʹԠͯ͡ൣғ಺ͷϞϊΛݕࡧ͢ΔAPIΛୟ ͘ • ݱࡏ஍Λnavigator.geolocation.watchPositionͰlistenͯ͠ ϓϩοτ͢Δ • ·ͩ·ͩվળ఺͸ͨ͘͞Μ͋Δ • ΍ͬͯΔ࠷தʹผϓϩδΣΫτʹҟಈ

·ͱΊ • ࢓ࣄͰRedux -> RxJSʹ͍ͯͨ͠ • ࣗ෼ͱͯ͠͸͘͢͝ྑ͘ͳͬͨ • Ҿ͖ܧ͍ͩΤϯδχΞ͕RxJS஌Βͳ͍৔߹… • GoogleͷAdWordsνʔϜ͕Flutter/AngularDartͰࣅͨΑ ͏ͳ͜ͱ(BLoC)΍ͬͯͨ • DartConf, Google I/O 2018ʹτʔΫ͕͋Δ

͓ΘΓ