timeout - タイムアウト設定

timeoutオペレーターは、指定した時間内にObservableから値が発行されない場合にエラーを投げるオペレーターです。
APIリクエストやユーザー操作の応答待ちなど、リアクティブな処理でよく用いられます。

🔰 基本構文・動作

タイムアウトにかからなければ通常通り動作し、一定時間を超えるとエラーが発生します。

import { of } from 'rxjs';
import { delay, timeout, catchError } from 'rxjs/operators';

of('response')
  .pipe(
    delay(500), // 👈 1500に指定すると、`タイムアウトエラー: fallback`と出力される
    timeout(1000),
    catchError((err) => of('タイムアウトエラー: fallback', err))
  )
  .subscribe(console.log);
// 出力:
// response

この例では delay(500) により500ms後に値が発行され、timeout(1000) の条件を満たしているため、正常に 'response' が表示されます。

delay(1200)と指定すると、以下のようにタイムアウトエラーが出力される。

タイムアウトエラー: fallback
TimeoutErrorImpl {stack: 'Error\n    at _super (http://localhost:5174/node_mo…s/.vite/deps/chunk-RF6VPQMH.js?v=f6400bce:583:26)', message: 'Timeout has occurred', name: 'TimeoutError', info: {…}}

💡 典型的な活用例

次の例では、ストリームが遅延して値を発行しない場合にタイムアウトを発生させるパターンと、正常に発行するパターンの両方を示しています。

import { interval, of } from 'rxjs';
import { timeout, catchError, take } from 'rxjs/operators';

const slow$ = interval(1500).pipe(take(3));
const fast$ = interval(500).pipe(take(3));

fast$
  .pipe(
    timeout(1000),
    catchError((err) => of('fallback: timeout occurred'))
  )
  .subscribe(console.log);

slow$
  .pipe(
    timeout(1000),
    catchError((err) => of('fallback: timeout triggered'))
  )
  .subscribe(console.log);
// 出力:
// 0
// 1
// fallback: timeout triggered
// 2

🧪 実践コード例（UI付き）

import { interval, of } from 'rxjs';
import { timeout, catchError, take } from 'rxjs/operators';

// 出力表示エリア
const timeoutOutput = document.createElement('div');
timeoutOutput.innerHTML = '<h3>timeout の例:</h3>';
document.body.appendChild(timeoutOutput);

// タイムアウトの成功例
const normalStream$ = interval(500).pipe(take(5));

const timeoutSuccess = document.createElement('div');
timeoutSuccess.innerHTML = '<h4>正常なストリーム (タイムアウトなし):</h4>';
timeoutOutput.appendChild(timeoutSuccess);

normalStream$
  .pipe(
    timeout(1000),
    catchError((err) => {
      const errorMsg = document.createElement('div');
      errorMsg.textContent = `エラー: ${err.message}`;
      errorMsg.style.color = 'red';
      timeoutSuccess.appendChild(errorMsg);
      return of('エラー後のフォールバック値');
    })
  )
  .subscribe((val) => {
    const item = document.createElement('div');
    item.textContent = `値: ${val}`;
    timeoutSuccess.appendChild(item);
  });

// タイムアウトのエラー例
const slowStream$ = interval(1500).pipe(take(5));

const timeoutError = document.createElement('div');
timeoutError.innerHTML = '<h4>遅いストリーム (タイムアウト発生):</h4>';
timeoutOutput.appendChild(timeoutError);

slowStream$
  .pipe(
    timeout(1000),
    catchError((err) => {
      const errorMsg = document.createElement('div');
      errorMsg.textContent = `エラー: ${err.message}`;
      errorMsg.style.color = 'red';
      timeoutError.appendChild(errorMsg);
      return of('タイムアウト後のフォールバック値');
    })
  )
  .subscribe((val) => {
    const item = document.createElement('div');
    item.textContent = `値: ${val}`;
    timeoutError.appendChild(item);
  });

✅ まとめ

• timeoutは一定時間内に発行がなければエラーを出す制御演算子
• ネットワークAPIやUI操作待ちのタイムアウト処理に有効
• catchErrorと組み合わせることでフォールバック動作を指定できる