0Pricing
Angular Academy · レッスン

Observableとサブスクリプション

Observableストリームを作成して購読します。

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

Observableとは

Observableは、時間の経過に伴って値を流す遅延評価のストリームです。subscribeするまで何も実行されません。値を0個以上発行した後、完了するかエラーになります。

RxJSは、HTTP、イベント、タイマーなどの非同期処理を扱うためにAngularが提供しているリアクティブライブラリです。

Observableの作成

Observableのコンストラクターはsubscriber関数を受け取ります。next()で値を発行し、complete()で完了し、error()で失敗を通知します。

import { Observable } from 'rxjs';

const numbers$ = new Observable<number>(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  subscriber.complete();
});

購読

購読を開始すると実行が始まります。next、error、completeのハンドラーを持つobserverを渡します。

numbers$.subscribe({
  next: v => console.log('value', v),
  error: err => console.error(err),
  complete: () => console.log('done')
});
// value 1, value 2, value 3, done

Observableは遅延評価される

subscriber関数はsubscribe()が呼び出されるまで実行されません。購読するたびに、新しく独立した実行が開始されます（cold observable）。

const tick$ = new Observable(s => {
  console.log('executing');
  s.next(Date.now());
});
// "executing" is NOT logged until subscribe() runs

作成ヘルパー：ofとfrom

コンストラクターを使うことはほとんどありません。ofやfromなどのヘルパーを使うと、Observableをすばやく作成できます。

import { of, from } from 'rxjs';

of(10, 20, 30).subscribe(v => console.log(v)); // 10 20 30
from([1, 2, 3]).subscribe(v => console.log(v)); // 1 2 3
from(fetch('/api')).subscribe(res => console.log(res));

intervalとtimerの作成関数

intervalは一定のスケジュールで増加する数値を発行し、timerは待機してから値を発行します。

import { interval, timer } from 'rxjs';

interval(1000).subscribe(n => console.log('tick', n));
// 0, 1, 2, ... every second

timer(2000).subscribe(() => console.log('after 2s'));

HttpClientはObservableを返す

Angularでは、HttpClientのメソッドはObservableを返します。リクエストは購読したときにだけ実行されます。

import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

const http = inject(HttpClient);
http.get('/api/users').subscribe(users => console.log(users));

Subscriptionオブジェクト

subscribe()はSubscriptionを返します。unsubscribe()を呼び出すと、値の受け取りを停止してリソースを解放できます。

import { interval } from 'rxjs';

const sub = interval(1000).subscribe(n => console.log(n));
// later
sub.unsubscribe(); // stops the stream

完了と購読解除の違い

Observableがcomplete()またはerror()になると、自動的に後処理されます。無限ストリーム（intervalやDOMイベントなど）では、自分で購読を解除する必要があります。

Observerの省略記法

値だけを扱う場合は、単一の関数を渡せます。その関数がnextハンドラーになります。

of(1, 2, 3).subscribe(v => console.log(v));
// equivalent to { next: v => console.log(v) }

HotとCold（概要）

Cold Observableは購読時に値の生成を開始し、購読者ごとに個別の実行を行います（HTTP、of、intervalなど）。Hot Observableは購読者の有無にかかわらず値を生成し、その値を共有します（次にSubjectsを扱います）。

理解度チェック

Observableについての理解度を確認しましょう。

まとめ：ObservableとSubscription

Observableは、subscribe()で有効化する遅延評価のストリームです。

  • nextで値を発行し、completeで完了し、errorで失敗を通知します。
  • HttpClientのメソッドはObservableを返し、購読時に実行されます。
  • メモリリークを防ぐため、無限ストリームの購読は解除します。

次はSubjectsとBehaviorSubjectです。

よくある質問

「Observableとサブスクリプション」レッスンは無料ですか？

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

「Observableとサブスクリプション」で何を学びますか？

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

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

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

「Observableとサブスクリプション」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. Observableとサブスクリプション
  2. SubjectとBehaviorSubject
  3. 購読解除とメモリリーク
  4. asyncパイプ
← Angular Academyに戻る