![](https://traveler0401.com/wp-content/uploads/2022/11/izumi-200-150x150.png)
こんな悩みを解決できる記事を書きました!
僕は現役フリーランスエンジニア(歴8年)で、資格は13個保有しています。
「Angularでunsubscribeする方法を知りたい」とお考えではありませんか?
AngularではObservableのsubscribeを頻繁に使いますが、subscribeはunsubscribeしないとメモリリークが発生する可能性があります。
![](https://traveler0401.com/wp-content/uploads/2022/11/izumi-200-150x150.png)
![](https://traveler0401.com/wp-content/uploads/2022/11/izumi-200-150x150.png)
![](https://traveler0401.com/wp-content/uploads/2022/11/izumi-200-150x150.png)
subscribeを実行したら、明示的にunsubscribeしてあげる必要があります。
意外と忘れがちなので、これを機に覚えちゃいましょう。
本記事では、Angularでunsubscribeする方法について分かりやすく解説します。
![](https://traveler0401.com/wp-content/uploads/2023/12/angular-unsubscribe.jpg)
![](https://traveler0401.com/wp-content/uploads/2023/12/angular-unsubscribe.jpg)
本記事を読めば、Angularでunsubscribeする方法が理解できるので早速見ていきましょう。
![](https://traveler0401.com/wp-content/uploads/2022/11/izumi-200-150x150.png)
![](https://traveler0401.com/wp-content/uploads/2022/11/izumi-200-150x150.png)
![](https://traveler0401.com/wp-content/uploads/2022/11/izumi-200-150x150.png)
すぐ読み終わるので、ぜひ参考にしてくださいね♪
【Angular】unsubscribeする方法
早速ですが、Angularでunsubscribeする方法を解説します。
private subscriptions = new Subscription();
ngOnInit() {
this.subscriptions.add(
this.hoge$.subscribe(
() => {}
)
);
}
ngOnDestroy() {
this.subscriptions.unsubscribe();
}
上記のように「ngOnDestroy」でunsubscribeするのが一般的です。
各subscribeはadd関数で追加すればコードもシンプルになります。
![](https://traveler0401.com/wp-content/uploads/2022/11/izumi-200-150x150.png)
![](https://traveler0401.com/wp-content/uploads/2022/11/izumi-200-150x150.png)
![](https://traveler0401.com/wp-content/uploads/2022/11/izumi-200-150x150.png)
ngOnDestroyはコンポーネントが破棄されたタイミングで呼び出されます。
「ngOnDestroyでunsubscribeする」のをルールにしておけばコードも統一されると思います。
よくある質問
他にunsubscribeする方法はありますか?
「take」を使う方法や「Asyncパイプ」を使う方法があります。
unsubscribeする方法はいくつかあるので、プロジェクト内でルールを決めておくと良いでしょう。
まとめ
今回は、Angularでunsubscribeする方法について解説しました。
以下が本記事のまとめになります。
- おすすめ本
Angularの勉強なら「Angularアプリケーションプログラミング
![](https://traveler0401.com/wp-content/uploads/2022/11/izumi-200-150x150.png)
![](https://traveler0401.com/wp-content/uploads/2022/11/izumi-200-150x150.png)
![](https://traveler0401.com/wp-content/uploads/2022/11/izumi-200-150x150.png)
最後までお読みいただき、ありがとうございました!
- クソおすすめ本
![](https://traveler0401.com/wp-content/uploads/2022/11/izumi-200-150x150.png)
![](https://traveler0401.com/wp-content/uploads/2022/11/izumi-200-150x150.png)
![](https://traveler0401.com/wp-content/uploads/2022/11/izumi-200-150x150.png)
海外のエンジニアがどういった思考で働いているかが理解できます。
海外に行く気はないけど海外エンジニアの動向が気になる雑魚エンジニアにおすすめです(本当におすすめな本しか紹介しないのでご安心を)。