RxJS：From演算子

投稿日: 2022-04-20 2022-04-20

Rx from 演算子は、反復可能なデータをオブザーバブルに変換するために使用されます。これは、監視可能なシーケンスで渡され共有されるデータのタイプを正規化したい場合、または関数が監視可能なデータを受信して処理することを期待している場合に特に役立ちます。元のデータ型では通常は使用できないRxJS演算子を使用する場合の別の使用法。

from を使用してオブザーバブルに変換できる反復可能な型の例は、配列、マップ、セット、promise、DOMノード、およびジェネレーター関数です。以下に、これらのタイプのいくつかの例を示します。

配列

ほとんどの場合、 from 演算子は、配列をオブザーバブルに変換するために使用されます。

let myArr = ['🐦', '😺', '🐕', '🐊'];

Rx.Observable
  .from(myArr)
  .filter(x => x !== '🐦')
  .map(x => `Hello ${x}!`)
  .subscribe(console.log);

  // Hello 😺!
  // Hello 🐕!
  // Hello 🐊!

同期vs非同期

デフォルトでは、from演算子は同期オブザーバブルを返します。

let myArr = ['😺', '🐕', '🐊'];

console.log('Before');
Rx.Observable
  .from(myArr)
  .map(x => `Hello ${x}!`)
  .subscribe(console.log);
console.log('After');

// Before
// Hello 😺!
// Hello 🐕!
// Hello 🐊!
// After

ただし、必要に応じて、非同期スケジューラを使用して非同期にすることができます。

let myArr = ['😺', '🐕', '🐊'];

console.log('Before');
Rx.Observable
  .from(myArr, Rx.Scheduler.async)
  .map(x => `Hello ${x}!`)
  .subscribe(console.log);
console.log('After');

// Before
// After
// Hello 😺!
// Hello 🐕!
// Hello 🐊!

ジェネレーター機能

ジェネレーター関数は反復可能なタイプであるため、from演算子を使用してオブザーバブルに変換することもできます。簡単な例を次に示します。

function* generateUnique() {
  let num = 0;
  while (true) {
    yield num++;
  }
}

Rx.Observable.from(generateUnique())
  .take(3)
  .subscribe(console.log);

  // 0
  // 1
  // 2

ここでは、 take 演算子を使用して、指定された数の値の後にオブザーバブルを完成させます。それ以外の場合は、無限のオブザーバブルを作成し、サブスクライブ時にページをクラッシュさせます。

また、zip演算子を使用して複数のオブザーバブルの値を組み合わせるもう少し複雑な例を次に示します。

function* generateName() {
  yield 'Cat';
  yield 'Dog';
  yield 'Bird';
  return;
}

function* generateEmoji() {
  yield '😺';
  yield '🐕';
  yield '🐦';
  return;
}

function* generateSound() {
  yield 'Meow';
  yield 'Woof';
  yield 'Tweet';
  return;
}

const names = Rx.Observable.from(generateName());
const emojis = Rx.Observable.from(generateEmoji());
const sounds = Rx.Observable.from(generateSound());

const combined = Rx.Observable.zip(names, emojis, sounds, (name, emoji, sound) => {
  return `The ${name} ${emoji} goes ${sound.toUpperCase()}`;
})
.subscribe(console.log);

// The Cat 😺 goes MEOW
// The Dog 🐕 goes WOOF
// The Bird 🐦 goes TWEET

spawn 演算子は、ジェネレーターとオブザーバブルを組み合わせるためにも使用されますが、この演算子は現在RxJS5+では使用できないことに注意してください。

約束

Promiseは、オブザーバブルに簡単に変換することもできます。オブザーバブルは非同期で、解決または拒否された値をラップします。

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello');
  }, 2000);
});

Rx.Observable
  .from(myPromise)
  .subscribe(x => console.log(x, ' World!'));

// Hello World! (after 2 seconds)

DOMノード

これは、3つのDOMノードのコレクションがオブザーバブルに変換され、textContentのみを抽出するようにマッピングされる簡単な例です。

<h2>Hey,</h2>
<h2>Hello</h2>
<h2>Alligator!</h2>


<script>
  const h2s = document.querySelectorAll('h2');

  Rx.Observable.from(h2s)
    .map(h2 => h2.textContent)
    .subscribe(console.log);

    // Hey,
    // Hello
    // Alligator!
</script>

文字列についての一言

文字列は繰り返し処理できるため、 from 演算子を使用できますが、文字列内のすべての文字は個別の値になります。

Rx.Observable
  .from('Hi!')
  .subscribe(console.log);

  // H
  // i
  // !

代わりに、文字列を単一の値として変換するには、of演算子を使用する必要があります。

Rx.Observable
  .of('Hi!')
  .subscribe(console.log);

  // Hi!

getdocs

13036