Angular Academy · レッスン

結合オペレーター

Q: 「結合オペレーター」で何を学びますか？

combineLatestとforkJoinでストリームを結合します。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

combineLatestとforkJoinでストリームを結合します。

「結合オペレーター」はCoddyKit上の無料Angular Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。

ストリームを結合する理由

実際のアプリでは、複数の非同期ソースを連携させます。たとえば、複数のHTTP呼び出し、フォームの値とフィルター、クリックと最新の状態などです。結合演算子は複数のobservableを1つにまとめます。

combineLatest

combineLatestは、すべてのソースが少なくとも1回発行した後、いずれかのソースが発行するたびに、各ソースの最新値を配列として発行します。

import { combineLatest } from 'rxjs';

combineLatest([name$, age$]).subscribe(
  ([name, age]) => console.log(name, age)
);
// re-emits whenever name$ OR age$ changes

combineLatestの使用例

派生したUIの状態に適しています。検索語とカテゴリーフィルターを組み合わせて、クエリを作成できます。

combineLatest([term$, category$]).pipe(
  switchMap(([term, cat]) =>
    this.http.get('/api?q=' + term + '&cat=' + cat))
).subscribe(results => console.log(results));

forkJoin

forkJoinはすべてのソースが完了するまで待ち、その後、それぞれの最後の値を1つの配列として発行します。RxJSにおけるPromise.allに相当します。

import { forkJoin } from 'rxjs';

forkJoin({
  user: this.http.get('/api/user'),
  posts: this.http.get('/api/posts')
}).subscribe(({ user, posts }) => {
  console.log(user, posts);
});

forkJoinの注意点

いずれかのソースが完了しない場合（intervalなど）や、完了前にエラーになった場合、forkJoinは何も発行しません。HTTPリクエストのような有限のソースに使用してください。

merge

mergeは複数のobservableを1つにフラット化し、どのソースから届いた値でも到着した順に発行します。値同士の対応付けは行いません。

import { merge } from 'rxjs';

merge(clicks$, keypresses$).subscribe(
  event => console.log('event', event)
);
// emits whenever either source emits

zip

zipはインデックスで値を対応付けます。各ソースの1番目、次に2番目というように発行します。次の値がすべてのソースからそろうまで待機します。

import { zip, of } from 'rxjs';

zip(of(1, 2, 3), of('a', 'b', 'c'))
  .subscribe(([n, l]) => console.log(n, l));
// [1,a], [2,b], [3,c]

startWith

startWithは初期値を先頭に追加します。すべてのソースが発行する前でもcombineLatestが発行できるようにする場合に便利です。

import { startWith } from 'rxjs';

combineLatest([
  term$.pipe(startWith('')),
  category$.pipe(startWith('all'))
]).subscribe(([t, c]) => console.log(t, c));

withLatestFrom

withLatestFromはソースが発行したときだけ、ほかのobservableの最新値を付加して発行します。主導するのはソースで、ほかは受動的に動作します。

import { withLatestFrom } from 'rxjs';

saveClick$.pipe(
  withLatestFrom(formValue$)
).subscribe(([_, form]) => this.save(form));

逐次ストリームのためのconcat

concatは各ソースを順番にsubscribeし、現在のソースが完了してから次へ進みます。ストリームを厳密に1つずつ順番に実行する必要がある場合に使用します。

import { concat, of } from 'rxjs';

concat(of(1, 2), of(3, 4))
  .subscribe(v => console.log(v));
// 1, 2, 3, 4 (second starts after first completes)

combineLatestとforkJoinとzipの違い

combineLatest：いずれかが発行するたびに、各ソースの最新値。
forkJoin：すべてが完了したときに1回だけ、各ソースの最後の値。
zip：インデックスで対応付け。
継続的な更新、一度だけの結合、厳密な対応付けのどれが必要かに応じて選択してください。

クイックチェック

結合演算子についての理解度を確認しましょう。

振り返り：結合演算子

結合演算子は複数のストリームを連携させます。

combineLatest：いずれかが発行するたびに、各ソースの最新値。
forkJoin：完了時に結合（Promise.allのような動作）。
merge：すべての発行を到着順に混在させます。
withLatestFrom：ソースを起点に、ほかの最新値をスナップショットとして取得します。

次は、エラーハンドリング演算子です。

よくある質問

「結合オペレーター」レッスンは無料ですか？

はい。「結合オペレーター」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。

「結合オペレーター」で何を学びますか？

combineLatestとforkJoinでストリームを結合します。ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Angular Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「結合オペレーター」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このAngular Academyレッスンでコードを書いて実行できますか？

はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Angular Academyに戻る