at Meguro.es #6

1. それRxJSでできるよ
2016-10-13
at Meguro.es #6

2. 自己紹介
ちきさん
(Tomohiro Noguchi)
Twitter/GitHub/Qiita: @ovrmrw
ただのSIer。
Angular Japan User Group(ng-japan)スタッフ。

3. $ npm install rxjs

4. Angular 2 を使うと
RxJSも学べます。
みなさん使いましょう。

5. アジェンダ
・配列をコンソール出力する →
・配列をmapする →
・配列をfilterする →
・配列をreduceする →
・遅延処理を書く →
・sleep処理を書く →
・Subjectについて
from, of, range
map
filter
reduce, scan
delay
toPromise
https://github.com/ovrmrw/rxjs-basics-1

7. // output
1
2
3
配列をコンソール出力する

8. // output
1
2
3
RxJSの場合 (from)
Observableで始まってsubscribeで終わるというのがポイント。

9. RxJSの場合 (of, range)
// output
1
2
3

10. 配列をmapする
// output
10
20
30

11. RxJSの場合 (map)
// output
10
20
30
よく使う！

12. 配列をfilterする
// output
2

13. RxJSの場合 (filter)
// output
2

14. 配列をreduceする
// output
6

15. RxJSの場合 (reduce)
// output
6

16. // output
1
3
6
RxJSの場合 (scan) よく使う！

17. 遅延処理を書く
// output
/* waiting… */
1000ms

18. RxJSの場合 (delay)
// output
/* waiting… */
1000ms
※of(‘’)をof()にしてしまうとsubscribeまで到達しない。

19. sleep処理を書く
// output
/* waiting… */
2
※await … Promiseが解決するまでそこで待つ。(次に進まない)

20. // output
/* waiting… */
3
RxJSの場合 (toPromise) よく使う！
※Observableのままではawaitで受けられないためPromiseにする。

21. ここから先はSubjectの話
※SubjectはObservableを継承していくつか機能を足したもの。
頻繁に使う！

22. 超簡単なSubjectのコード
// output
1

23. ちょっと難しいSubjectのコード
※途中にsubject.complete()が入っているのがミソ。

24. // output
1
2
3
(subject complete)
completeしているので
4 は出力されない！

25. GitHubリポジトリの
step7(zip operator)と
step8(combineLatest operator)は
もう少し難しいです。
https://github.com/ovrmrw/rxjs-basics-1

26. enjoy programming
with RxJS

27. Thanks
https://twitter.com/ovrmrw