水谷の日記

いろいろ書きます

Observableを理解したい

なんとなくフロントのフレームワークを使っている自分を是正したいシリーズ

殴り書いてアウトプットすれば頭も心も整理される筈。

※RectiveXについてはほぼ書きません

Observableってなんですかい

Observableとはシンプルにいうと非同期処理に伴う「データの流れ」を表したものです。 この流れを読み取ったり、連結させたり、時間的に操ったりすることができます。

背景として非同期処理が行き交うこの世の中で、 裏で行なっている非同期処理をもっと操りたくね?と なにやってるかわかんねえからもっと宣言的にコードで書きたくね?と こんな思想で生まれたものであると解釈しています。

例えば、なにかのkeyを押すイベントによってObservableを生成し、それをsubscribeし読み取ることによってビューに反映させることができます。

※補足するとこのsubscribeは必要に応じてunsubscribeをしないとページ遷移してもずっと値を読み続けます。

大事なsubscribe

Observavleには多くのOperatorが存在していて公式ドキュメントによるといくつかのカテゴリに分類されるようです。

・Creating Observables

・Transforming Observables

・Filtering Observables

・Combining Observables

・Error Handling Operators

・Observable Utility Operatorsなどなど

既に書いた「subscribe」と「unsubscribe」はObservable Utility Operatorsに属してるみたいです。

様々なOperatorを使ってデータの流れの加工する。 そして最終的にsubscribeで読み取ることがObservableのメインの使い方みたいですね。

逆にsubscribeをしなければ一生、値が読み取られることはありません。

subscribeとっても大事。

引用

ReactiveX - Observable

ReactiveX - Operators

https://angular.io/guide/observables

追記

まじでReactiveXだったりObservablesは抽象的すぎてイメージが湧きづらい、、

フロントエンドの世界ってまじでやばいですね。 これで流行り廃りがあるんだもの。