9/9のCombGigでのReactive Extensionの紹介スライドです

1. プレゼン
AT
Combgig

2. 自己紹介

4. @designpatterngf
右下に表示しておくよ

5. @designpatterngf
今日のテーマは

6. @designpatterngf
Reactive
Extensions

7. @designpatterngf
略して
Rx

8. @designpatterngf
いろんな言語に対応

9. @designpatterngf
流行ってるらしい

10. @designpatterngf
Qiitaで
調べてみよう!

11. @designpatterngf
「プロバイダを購読することで監
視することにより、プロバイダか
ら状態の通知を受け取ることによっ
て構成されるオブザーバパターン」
いまさら聞けないReactive Extensions

12. @designpatterngf
「Rxは時間軸をシーケンスと見
なして関数を適用していく関数指
向なライブラリである」
こわくないReactive Extensions超入門

13. @designpatterngf
わかる訳がない

14. @designpatterngf
そこで！

15. @designpatterngf
まあ多少分かりやすく説明
します(弱気)

16. @designpatterngf

17. @designpatterngf
ここでは
RxRuby
で説明します

18. @designpatterngf
まずは配列の操作

19. @designpatterngf
素のRuby

20. @designpatterngf
Rx

21. @designpatterngf

22. @designpatterngf
どうやら…
[1,2,3]
↓
Observable([1,2,3])
.each
↓
.subscribe

23. @designpatterngf
次は配列の加工

24. @designpatterngf

25. @designpatterngf

26. @designpatterngf

27. @designpatterngf
Demo A

28. @designpatterngf
マーブル
ダイアグラム

29. @designpatterngf

30. @designpatterngf
select

31. @designpatterngf
Rxには配列操作用の
メソッドがある
どうやら…
らしい…

32. @designpatterngf
Rxはただの配列操作
ライブラリ？
No.

33. @designpatterngf
[ ]
finity
infinity

34. @designpatterngf
川
Stream

35. @designpatterngf

36. @designpatterngf
一秒ごとに流れてくる、川

37. @designpatterngf

38. @designpatterngf

39. @designpatterngf

40. @designpatterngf
Demo b

41. @designpatterngf
川 の作り方

42. @designpatterngf
Rxには配列とストリーム
を操作する機能がある
どうやら…
らしい…

43. @designpatterngf
流しそうめん

44. @designpatterngf
流しそうめんの、 川

45. @designpatterngf
Demo c

46. @designpatterngf
まずいそうめん が
混じってる…

47. @designpatterngf

48. @designpatterngf
Demo d

49. @designpatterngf
Rxは配列とストリームを操作
でき、それらには同じ操作が
適用できる
どうやら…
らしい…

50. @designpatterngf
よくよく考えると、
ストリーム
配列

51. @designpatterngf
Rxはストリーム
操作ができる
どうやら…
らしい…

52. @designpatterngf
🍣

53. @designpatterngf

54. @designpatterngf
寿司も、流しそうめんも
食べたい！！

55. @designpatterngf
二つの 川 を繋げる！

56. @designpatterngf

57. @designpatterngf
DEMO e

58. @designpatterngf

59. @designpatterngf
他にもたくさん!

60. @designpatterngf
Streamを分割

61. @designpatterngf
Streamをバッファ

62. @designpatterngf
最初の2個だけ

63. @designpatterngf
Rxはストリームに対して
フィルタをかけたり
ストリーム同士を繋げたり
多彩な操作ができる
どうやら…
らしい!

64. @designpatterngf
実際には、どんな所で
使われてる？

65. @designpatterngf
TwitterのStream

66. @designpatterngf
ダブルクリック判定

67. @designpatterngf
これに対して、
ダブルクリック判定

68. @designpatterngf
クリックされたら、タイマーを開始
時間内にクリックが来たならダブルクリック
そうでないなら、タイマーをリセット
ダブルクリックの要件

69. @designpatterngf
なかなか複雑そう?

70. @designpatterngf
Rxなら簡単に!

71. @designpatterngf

72. @designpatterngf
buffer(0.3秒)

73. @designpatterngf
DEMO f

74. @designpatterngf
Rxの素晴らしさは分かって
いただけたと思います

75. @designpatterngf
オブジェクト指向
関数型指向
と並ぶ
一つのパラダイム

76. @designpatterngf
特にアプリ開発、Web開発
では常識と成りつつある

77. @designpatterngf
ぜひ使っていきましょう！

78. @designpatterngf
ご清聴ありがとう
ございました