Angular Academy · レッスン

フィルタリングオペレーター

Q: 「フィルタリングオペレーター」で何を学びますか？

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

filter、debounceTime、distinctUntilChangedでストリームを絞り込みます。

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

フィルタリング演算子の役割

フィルタリング演算子は、発行された値のうち通過させるものと破棄するもの、または値を許可する頻度を決めます。クリーンで効率的なストリームに欠かせません。

filter

filterは、predicateを満たす値だけを発行します。時間の経過に沿って動作するArray.filterのようなものです。

import { of, filter } from 'rxjs';

of(1, 2, 3, 4).pipe(
  filter(n => n % 2 === 0)
).subscribe(v => console.log(v)); // 2, 4

debounceTime

debounceTimeは値の発行が一時停止するのを待ってから、最新の値を発行します。頻繁に発生する入力イベントへの定番の対策です。

import { debounceTime } from 'rxjs';

searchInput$.pipe(
  debounceTime(300)
).subscribe(term => console.log('search', term));
// emits only after 300ms of silence

distinctUntilChanged

distinctUntilChangedは、直前の値と同じ値を破棄し、重複した処理を避けます。

import { of, distinctUntilChanged } from 'rxjs';

of('a', 'a', 'b', 'b', 'a').pipe(
  distinctUntilChanged()
).subscribe(v => console.log(v)); // a, b, a

検索での組み合わせ

標準的な検索パイプラインでは、リクエストを最小限にするために3つすべてを組み合わせます。

searchInput$.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  filter(term => term.length > 2),
  switchMap(term => this.http.get('/api?q=' + term))
).subscribe(results => console.log(results));

take

take(n)は最初のn個の値を発行した後、ストリームを完了させます。継続的に値を発行するソースから、一度だけ値を読み取る場合に便利です。

import { interval, take } from 'rxjs';

interval(1000).pipe(
  take(3)
).subscribe(v => console.log(v)); // 0, 1, 2 then complete

firstとlast

first()は最初の値（predicateに一致する値を指定することもできます）を発行してから完了します。last()は完了時に最後の値を発行します。

import { of, first, last } from 'rxjs';

of(1, 2, 3).pipe(first()).subscribe(v => console.log(v)); // 1
of(1, 2, 3).pipe(last()).subscribe(v => console.log(v));  // 3

takeWhileとskip

takeWhileは条件を満たしている間値を発行し、その後完了します。skip(n)は最初のn個の値を無視します。

import { of, takeWhile, skip } from 'rxjs';

of(1, 2, 3, 4, 1).pipe(takeWhile(n => n < 3))
  .subscribe(v => console.log(v)); // 1, 2
of(1, 2, 3).pipe(skip(1)).subscribe(v => console.log(v)); // 2, 3

throttleTimeとdebounceTimeの違い

throttleTimeは最初の値を発行した後、一定の期間ほかの値を無視します。スクロールのレート制限に適しています。debounceTimeは発行が止まるのを待つため、検索に適しています。両者は同じではありません。

キーを指定したdistinctUntilChanged

オブジェクトに対しては、comparatorまたはkey selectorを渡し、関連するフィールドに基づいて等価性を判定します。

source$.pipe(
  distinctUntilChanged((a, b) => a.id === b.id)
).subscribe(v => console.log(v));

フィルタリングが重要な理由

フィルタリングによって、不要なHTTP呼び出し、再レンダリング、計算を減らせます。適切にフィルタリングしたストリームなら、検索機能へのリクエストを数十回から数回にまで減らせることがあります。

クイックチェック

フィルタリング演算子についての理解度を確認しましょう。

振り返り：フィルタリング演算子

フィルタリング演算子は、値を通過させるかどうかと、その頻度を制御します。

filter：predicateに基づいて通過させます。
debounceTime：発行が止まるまで待ちます。
distinctUntilChanged：重複する値を破棄します。
take/first/skip：位置に基づいて制御します。

次は、結合演算子です。

よくある質問

「フィルタリングオペレーター」レッスンは無料ですか？

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

「フィルタリングオペレーター」で何を学びますか？

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

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

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

「フィルタリングオペレーター」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Angular Academyに戻る