Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
それRxJSでできるよ
2016-10-13
at Meguro.es #6
自己紹介
ちきさん
(Tomohiro Noguchi)
Twitter/GitHub/Qiita: @ovrmrw
ただのSIer。
Angular Japan User Group(ng-japan)スタッフ。
$ npm install rxjs
Angular 2 を使うと
RxJSも学べます。
みなさん使いましょう。
アジェンダ
・配列をコンソール出力する →
・配列をmapする →
・配列をfilterする →
・配列をreduceする →
・遅延処理を書く →
・sleep処理を書く →
・Subjectについて
from, of, range
map
...
// output
1
2
3
配列をコンソール出力する
// output
1
2
3
RxJSの場合 (from)
Observableで始まってsubscribeで終わるというのがポイント。
RxJSの場合 (of, range)
// output
1
2
3
配列をmapする
// output
10
20
30
RxJSの場合 (map)
// output
10
20
30
よく使う!
配列をfilterする
// output
2
RxJSの場合 (filter)
// output
2
配列をreduceする
// output
6
RxJSの場合 (reduce)
// output
6
// output
1
3
6
RxJSの場合 (scan) よく使う!
遅延処理を書く
// output
/* waiting… */
1000ms
RxJSの場合 (delay)
// output
/* waiting… */
1000ms
※of(‘’)をof()にしてしまうとsubscribeまで到達しない。
sleep処理を書く
// output
/* waiting… */
2
※await … Promiseが解決するまでそこで待つ。(次に進まない)
// output
/* waiting… */
3
RxJSの場合 (toPromise) よく使う!
※Observableのままではawaitで受けられないためPromiseにする。
ここから先はSubjectの話
※SubjectはObservableを継承していくつか機能を足したもの。
頻繁に使う!
超簡単なSubjectのコード
// output
1
ちょっと難しいSubjectのコード
※途中にsubject.complete()が入っているのがミソ。
// output
1
2
3
(subject complete)
completeしているので
4 は出力されない!
GitHubリポジトリの
step7(zip operator)と
step8(combineLatest operator)は
もう少し難しいです。
https://github.com/ovrmrw/rxjs-basics-1
enjoy programming
with RxJS
Thanks
https://twitter.com/ovrmrw
それRxJSでできるよ
Upcoming SlideShare
Loading in …5
×

それRxJSでできるよ

3,732 views

Published on

at Meguro.es #6

Published in: Technology
  • Be the first to comment

それRxJSでできるよ

  1. 1. それRxJSでできるよ 2016-10-13 at Meguro.es #6
  2. 2. 自己紹介 ちきさん (Tomohiro Noguchi) Twitter/GitHub/Qiita: @ovrmrw ただのSIer。 Angular Japan User Group(ng-japan)スタッフ。
  3. 3. $ npm install rxjs
  4. 4. Angular 2 を使うと RxJSも学べます。 みなさん使いましょう。
  5. 5. アジェンダ ・配列をコンソール出力する → ・配列をmapする → ・配列をfilterする → ・配列をreduceする → ・遅延処理を書く → ・sleep処理を書く → ・Subjectについて from, of, range map filter reduce, scan delay toPromise https://github.com/ovrmrw/rxjs-basics-1
  6. 6. // output 1 2 3 配列をコンソール出力する
  7. 7. // output 1 2 3 RxJSの場合 (from) Observableで始まってsubscribeで終わるというのがポイント。
  8. 8. RxJSの場合 (of, range) // output 1 2 3
  9. 9. 配列をmapする // output 10 20 30
  10. 10. RxJSの場合 (map) // output 10 20 30 よく使う!
  11. 11. 配列をfilterする // output 2
  12. 12. RxJSの場合 (filter) // output 2
  13. 13. 配列をreduceする // output 6
  14. 14. RxJSの場合 (reduce) // output 6
  15. 15. // output 1 3 6 RxJSの場合 (scan) よく使う!
  16. 16. 遅延処理を書く // output /* waiting… */ 1000ms
  17. 17. RxJSの場合 (delay) // output /* waiting… */ 1000ms ※of(‘’)をof()にしてしまうとsubscribeまで到達しない。
  18. 18. sleep処理を書く // output /* waiting… */ 2 ※await … Promiseが解決するまでそこで待つ。(次に進まない)
  19. 19. // output /* waiting… */ 3 RxJSの場合 (toPromise) よく使う! ※Observableのままではawaitで受けられないためPromiseにする。
  20. 20. ここから先はSubjectの話 ※SubjectはObservableを継承していくつか機能を足したもの。 頻繁に使う!
  21. 21. 超簡単なSubjectのコード // output 1
  22. 22. ちょっと難しいSubjectのコード ※途中にsubject.complete()が入っているのがミソ。
  23. 23. // output 1 2 3 (subject complete) completeしているので 4 は出力されない!
  24. 24. GitHubリポジトリの step7(zip operator)と step8(combineLatest operator)は もう少し難しいです。 https://github.com/ovrmrw/rxjs-basics-1
  25. 25. enjoy programming with RxJS
  26. 26. Thanks https://twitter.com/ovrmrw

×