Angular Academy · レッスン

変換オペレーター

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

map、switchMap、mergeMap、concatMapを使います。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

map、switchMap、mergeMap、concatMapを使います。

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

オペレーターとは

オペレーターは、.pipe()内で組み合わせて使い、ストリームを変換する関数です。変換オペレーターは、発行された各値を変更したり、内部Observableをフラット化して出力にしたりします。

map

mapは、Array.mapと同じように、時間の経過に伴って発行される各値を変換します。

import { of, map } from 'rxjs';

of(1, 2, 3).pipe(
  map(n => n * 10)
).subscribe(v => console.log(v)); // 10, 20, 30

高階マッピングが必要な理由

各値が別のObservable（HTTP呼び出しなど）を発生させると、ObservableのObservableになります。フラット化オペレーター（switchMap、mergeMap、concatMap）は内部Observableを購読し、その値を発行します。

switchMap

switchMapは、新しい値が到着すると、以前の内部Observableをキャンセルします。入力中の検索に最適で、古いリクエストを破棄できます。

import { switchMap } from 'rxjs';

searchTerm$.pipe(
  switchMap(term => this.http.get('/api/search?q=' + term))
).subscribe(results => console.log(results));

mergeMap

mergeMap（別名flatMap）は、内部Observableを並行して実行し、すべての発行値をマージします。キャンセルは行われません。

import { mergeMap } from 'rxjs';

ids$.pipe(
  mergeMap(id => this.http.get('/api/item/' + id))
).subscribe(item => console.log(item));
// all requests run in parallel

concatMap

concatMapは内部Observableをキューに入れ、順番に1つずつ実行し、それぞれの完了を待ちます。順序が重要な場合に使用します。

import { concatMap } from 'rxjs';

saveQueue$.pipe(
  concatMap(payload => this.http.post('/api/save', payload))
).subscribe();
// requests run sequentially, in order

exhaustMap

exhaustMapは、内部Observableの実行中に新しい値を無視します。ボタンのクリックによる二重送信の防止に適しています。

import { exhaustMap } from 'rxjs';

submitClicks$.pipe(
  exhaustMap(() => this.http.post('/api/login', creds))
).subscribe();
// extra clicks ignored until request finishes

適切なフラット化オペレーターの選択

switchMap：以前の処理をキャンセル（検索）。
mergeMap：すべてを並行実行（独立した書き込み）。
concatMap：順序どおりに1つずつ実行（順次保存）。
exhaustMap：処理中は無視（ログインボタン）。

switchMapとキャンセル

switchMapは実行中の内部Observableをキャンセルするため、その下層にあるHTTPリクエストの購読も解除します。Angularではこれがリクエストの中止に変換され、帯域幅を節約できます。

mapとフラット化オペレーターの組み合わせ

フラット化した後にデータを取り出すため、mapを使うことがよくあります。

searchTerm$.pipe(
  switchMap(term => this.http.get('/api/search?q=' + term)),
  map(res => res.items)
).subscribe(items => console.log(items));

ネストしたsubscribeを避ける

subscribeの中でsubscribeを呼び出してはいけません。代わりにフラット化オペレーターを使ってください。パイプラインを宣言的に保ち、後処理も正しく行えます。

// BAD:
// outer$.subscribe(v => inner$(v).subscribe(...));
// GOOD:
// outer$.pipe(switchMap(v => inner$(v))).subscribe(...);

クイックチェック

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

振り返り：変換演算子

mapは値を変換し、フラット化演算子は内部のobservableを処理します。

switchMap：以前の処理をキャンセルします。
mergeMap：並列に処理します。
concatMap：順番どおりに逐次処理します。
exhaustMap：処理中は無視します。

次は、フィルタリング演算子です。

よくある質問

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

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

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

map、switchMap、mergeMap、concatMapを使います。ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

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

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

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

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

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

← Angular Academyに戻る