AngularコンポーネントにおいてどのようにObservableを購読すべきなのかについて学びます。単純なsubscribeからはじめ、段階的にAsyncパイプを使ったリアクティブなパターンの使い方へステップアップしていきます。Angularのコンポーネントの基本とRxJSの基本を習得したら、次に学ぶのは実際にどうやってObservableとコンポーネントを組み合わせるかというプラクティスです。うまくObservableを利用することで、ユーザーインタラクションとリアクティブに協調するコンポーネントを簡単に実装できるようになるでしょう。最初に解説する方法は明示的な購読です。これはObservableの使い方の中でもっとも基本的で単純な方法です。これは公式チュートリアルの中でも、HeroServiceから値を取得するために学んだはずです。これはBehaviorSubjectを持つ単純なAngularのサービスです。Observableとして外部に公開します。AppComponentには新たな値を流すためのボタンを用意します。ここをスタートとして改めて学んでいきましょう。DataServiceの値を表示するためのコンポーネントを作成します。クラスは、次のように記述します。使って表示しています。メソッドに渡されたコールバック関数で行われています。メソッドはコンストラクタ内で呼び出してはいけません。Angularのコンポーネントインスタンスが作成されるタイミングと、実際にコンポーネントがビューに配置されるタイミングは一致しません。後のタイミングで呼び出しましょう。メソッドを使う方法はシンプルに見えますが注意点があります。述べたように、購読解除をしなければコンポーネントが破棄されたあとにメモリリークが発生します。メソッドを呼ぶ方法をまず最初に思いつくでしょう。オブジェクトを保持する必要があります。Observableが複数になると、煩雑なコードになってしまうのが欠点であり、購読解除忘れも発生しがちです。説明したとおり、Observableが完了するとその時点ですべての購読が自動的に解除されます。それを利用して、購読を開始する前の段階で、自動的に完了するように仕込んでおくことで購読解除忘れを防ぐことができます。オペレーターを追加します。オペレータは、引数に指定したObservableに値が流れたときに、オペレーターが適用されたObservableを強制的に完了します。オペレーターを追加するだけです。}}Asyncパイプを使うここまで明示的な購読をどのようにうまく書くかについて解説しましたが、そもそも明示的に購読しなければ、購読解除について考える必要もありません。明示的な購読は最低限に留めましょう。Asyncパイプは必需品です。いう名前で次のように作成します。}}びっくりするほどコードがスッキリしました。購読や購読解除に関するコードはなくなりました。フィールドに変更しています。Asyncパイプを適用しています。Asyncパイプが肩代わりしているからです。Asyncパイプが適用されたObservableは、そのコンポーネントのライフサイクルに合わせて自動的に購読・購読解除がおこなわれます。これにより、開発者は面倒なRxJSのお作法から解放され、ビジネスロジックだけに集中できます。代入する際にオペレーターを追加するだけでいいのです。初期化をコンストラクタで完結できることです。待たなくてもよいのです。Asyncパイプは、コンポーネントの初期化時にフィールドとして存在する、無限なObservableにのみ使われるべきです。ユーザーインタラクションなどによって後から発生するHTTPリクエストのような有限のObservableは、Asyncパイプを使うのに適していません。Asyncパイプを適用してしまうことです。次のようなテンプレートを書いてしまうと、同じObservableを2度購読することになります。影響はありませんが、購読の数が増えるのはメモリ使用量が上昇し、本来不要な変更検知処理も実行されるので、パフォーマンスに悪影響があります。Asyncパイプの処理タイミングが別なので、2つのデータバインディングの解決が常に完全に同時であることは保証されません。Asyncパイプを使ったテンプレートのブロック化です。同期的に扱えるようになります。}}</div></ng-container>はじめは難しいテンプレートに感じるかもしれませんが、構成要素を順番に紐解いていくことで理解できるはずです。タグはAngularのテンプレート内でだけ使える特殊なタグです。このタグはテンプレート内で任意の範囲をブロック化するために使いますが、実際にDOMへレンダリングされるときには除去されます。ような構造ディレクティブを使うときに、テンプレート内の階層構造をうまく表現するためのタグとしてよく用いられる擬似的なタグです。渡された式の評価結果を、テンプレート内で新しい変数に代入する機能です。渡されるタイミングで、値を変数化できるのです。}}</ng-container>しかしこのテンプレートには問題があります。評価はfalseとなるため、内側のブロック全体が表示されなくなります。構文を使う必要があります。構文でカバーすることもできますが、テンプレートが肥大化しがちです。falseになってしまうことです。Observableのデータを描画できます。いうテンプレート式です。