asyncパイプ
手動でクリーンアップせずにテンプレート内で購読します。
「asyncパイプ」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
asyncパイプの役割
asyncパイプは、テンプレート内でObservable（またはPromise）を購読し、最後に発行された値を表示します。また、コンポーネントが破棄されると自動的に購読を解除します。
基本的な使い方
テンプレートでObservableを直接バインドし、asyncを通します。
@Component({
template: '<p>{{ message$ | async }}</p>'
})
export class HelloComponent {
message$ = of('Hello from RxJS');
}asyncでオブジェクトを表示する
発行される値の型は問いません。jsonやdateなど、他のパイプと組み合わせることもできます。
user$ = this.http.get('/api/me');
// template:
// <pre>{{ user$ | async | json }}</pre>複数回の購読を避ける
asyncを使うたびに購読が作成されます。同じObservableに対して何度も使うと、HTTPリクエストが複数回実行されます。as構文を使って、一度だけ購読してください。
<!-- one subscription, reused as "user" -->
<div *ngIf="user$ | async as user">
<p>{{ user.name }}</p>
<p>{{ user.email }}</p>
</div>新しい制御フローを使う
現在のAngularでは、同じ一度だけ購読するパターンに@ifとasを使います。
@if (user$ | async; as user) {
<p>{{ user.name }}</p>
<p>{{ user.email }}</p>
}待機中はnull
最初の値が発行されるまで、asyncはnullを返します。読み込み状態を明示的に処理してください。
@if (data$ | async; as data) {
<list [items]="data" />
} @else {
<p>Loading...</p>
}手動で購読を解除する必要はない
このパイプは破棄時に自動的に購読を解除するため、メモリリークの原因になる問題の多くを防げます。テンプレートでObservableを扱う際にasyncパイプが推奨される理由です。
Observableを切り替える
バインドされたObservableの参照が変わると、asyncパイプは古いObservableの購読を解除し、新しいObservableを自動的に購読します。
search(term: string) {
this.results$ = this.http.get('/api/search?q=' + term);
// async pipe swaps subscriptions for you
}BehaviorSubjectとasyncパイプ
BehaviorSubjectを使うサービスとasyncパイプを組み合わせると、手動の購読コードなしで、すっきりしたリアクティブUIを構築できます。
// service: readonly count$ = this.subject.asObservable();
// template: <span>{{ count$ | async }}</span>asyncパイプとtoSignalの比較
どちらも購読を自動的に管理します。asyncパイプはテンプレート内で使い、toSignal()は値をsignalとしてコンポーネントコードに取り込みます。値が必要な場所に応じて選択してください。
import { toSignal } from '@angular/core/rxjs-interop';
user = toSignal(this.http.get('/api/me'));
// template: {{ user()?.name }}ベストプラクティスのまとめ
コンポーネントで手動購読するより、asyncパイプ（またはtoSignal）を優先してください。重複した購読を避けるにはasを使い、最初のnullや読み込み状態を必ず処理します。
理解度チェック
asyncパイプについての理解度を確認しましょう。
まとめ：Asyncパイプ
asyncパイプはテンプレート内で購読し、破棄時に後処理を行います。
as（@ifまたは*ngIfと併用）を使って、一度だけ購読します。- 最初の値が発行されるまではnullを返すため、読み込み状態を処理します。
- テンプレートでは手動購読よりもasyncパイプが推奨されます。
RxJS Fundamentalsを修了しました。
よくある質問
「asyncパイプ」レッスンは無料ですか？
はい。「asyncパイプ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「asyncパイプ」で何を学びますか？
手動でクリーンアップせずにテンプレート内で購読します。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「asyncパイプ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。