外部データ取り込み色々テスト中４(RxJSを勉強中)
大分、煮詰まった気がしますが、糸口が無い訳では無いです。
Angularの公式サンプルのJSONP関係のサンプルでよく使われる'RXJS'と言うライブラリー、これの公式サイトがあったので見て見ました。
RXJS - Introduction
https://rxjs-dev.firebaseapp.com/guide/overview
英語のみのサイトのようですが、用語の説明等、判りやすく書いて有るように思えます。
(英語というか他の言語全般苦手なので思えるだけかも？）
日本語のサイトもありました。
Angular6 から始める RxJS6 入門
https://qiita.com/MasanobuAkiba/items/a5026bd37603cc29e9e7
記事の対象者が
・これから Angular を始める方
・Rx, RxJS についてイメージをなんとなくイメージをつかみたい方
との事で、これは良さそう？
サンプルコードのテストがてらRXJSに限らず判らない用語をまとめながらテストしていきます。
まず以下のサンプルコードを動かしました。
-----------------------------------------
private subscription: Subscription; //変数定義
ngOnInit() {
this.subscription = of('桃', 'ヤマメ').pipe(
filter(v => v === '桃'),
map(v => v + '缶')
).subscribe(console.log);
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
-----------------------------------------
上記コードを動かすために必要なimportは以下の通りです。
・import {Subscription, of} from 'rxjs';
・import {filter, map} from 'rxjs/operators'
この辺りは、Angularの日本語公式サイトの
RxJS ライブラリ
https://angular.jp/guide/rx-library
を見ました。
ついでと言ってはなんですが、そこの冒頭を見て、多少イメージが湧いてきました。
---------------------以下引用
RxJS は Observable 型の実装を提供します。
中略
ストリーム内の値を反復処理する
引用ここまで---------------------
Observable と言うのは、日本語に直すと"観測可能"という事ですので、『Angular6 から始める RxJS6 入門』のサイトにあるように、ストリーム(流れ)を見張ってあれこれ処理するためのライブラリーがRxJSのようですね。
もっとも上記のコードでは、まだObservable 型は出てきていないようですが・・・
使用している用語でわからないのは
・Subscription
・subscribe(対としてunsubscribe）
・of
・filter
・map
・(RxJSじゃないけど)pipe
・(用語じゃないけど)アロー関数式
あたりです。(つまりほぼ分からない)
それでも読み解いていくと、
・Subscriptionは名前的に”購読”
・('桃', 'ヤマメ')と言う配列に対して"桃"だけを選んで(filter)"缶"を付加(map?)、購読(subscribe)してconsole.log出力
・あれ？この例だと"this.subscription = "で変数セットする必要がない？
試すと、はい、変数セットの部分は不要でした。
また、配列に´桃´を複数入れてもconsole.logへの出力は一回。´桃´が無ければ当然出力0でした。
上げ足取りついでに、もう少し試してみます。
('桃', 'ヤマメ', '桃')と桃を追加して、さらにfilterをコメントにして動作しなくしました。
すると、コンソールには”桃缶”、”ヤマメ缶”、桃缶”と出力です。
上で"上記のコードでは、まだObservable 型は出てきていない"とか書きましたが、見ていくと"of"の戻り値が"Observable 型"のようです。
この辺りを調べると、良さそうなサイトがありました。
RxJSの基礎中の基礎
https://qiita.com/agajo/items/7942743a0130f7a0f30b
"Observableを作る"の項のCreateを使わないで作るが、それに相当しますね。
ちょっと(理解してないけど)賢くなってきた気が・・・
ついでにPipe関数の説明も良さげなサイトがありました。
Pipe関数の力
https://qiita.com/jlkiri/items/5aa539ee74be2cc99409
アロー関数式については…書き方覚えるしか無いですね（どうも性に合わない)
アロー関数式
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions
キリが良いのでここで投稿します。
