【Angular】unsubscribeしてメモリリークを防ぐ方法!

当ページのリンクには広告が含まれています。
【Angular】unsubscribeしてメモリリークを防ぐ方法
この記事で解決できる悩み
いずみ

こんな悩みを解決できる記事を書きました!

僕は現役フリーランスエンジニア(歴年)で、資格は個保有しています。

Angularでunsubscribeする方法を知りたい」とお考えではありませんか?

AngularではObservableのsubscribeを頻繁に使いますが、subscribeはunsubscribeしないとメモリリークが発生する可能性があります。

いずみ

subscribeを実行したら、明示的にunsubscribeしてあげる必要があります。

意外と忘れがちなので、これを機に覚えちゃいましょう。

本記事では、Angularでunsubscribeする方法について分かりやすく解説します。

本記事を読めば、Angularでunsubscribeする方法が理解できるので早速見ていきましょう。

いずみ

すぐ読み終わるので、ぜひ参考にしてくださいね♪

執筆者/監修者
  • フリーランスエンジニア(保有資格個)
  • ブログ・アフィリエイト歴5年
  • ブランドせどりで月利50万円⇨脱サラ
  • 投資歴5年(仮想通貨・FXが得意)
  • Twitterフォロワー約2,000人
  • 運営者情報はこちら
いずみです
目次

【Angular】unsubscribeする方法

早速ですが、Angularでunsubscribeする方法を解説します。

private subscriptions = new Subscription();

ngOnInit() {
  this.subscriptions.add(
    this.hoge$.subscribe(
      () => {}
    )
  );
}

ngOnDestroy() {
  this.subscriptions.unsubscribe();
}

上記のように「ngOnDestroy」でunsubscribeするのが一般的です。

各subscribeはadd関数で追加すればコードもシンプルになります。

いずみ

ngOnDestroyはコンポーネントが破棄されたタイミングで呼び出されます。

ngOnDestroyでunsubscribeする」のをルールにしておけばコードも統一されると思います。

よくある質問

他にunsubscribeする方法はありますか?

take」を使う方法や「Asyncパイプ」を使う方法があります。

unsubscribeする方法はいくつかあるので、プロジェクト内でルールを決めておくと良いでしょう。

まとめ

今回は、Angularでunsubscribeする方法について解説しました。

以下が本記事のまとめになります。

まとめ
  • unsubscribeはngOnDestroyで行うのが一般的。
  • unsubscribe以外に「take」を使う方法や「Asyncパイプ」を使う方法がある。
まとめ♪
  • おすすめ本
¥4,070 (2023/07/23 15:56時点 | Amazon調べ)
\楽天ポイント4倍セール!/
楽天市場

Angularの勉強なら「」が分かりやすくておすすめですよ♪

いずみ

最後までお読みいただき、ありがとうございました!

  • クソおすすめ本
¥4,480 (2024/06/01 23:28時点 | Amazon調べ)
\楽天ポイント4倍セール!/
楽天市場
いずみ

海外のエンジニアがどういった思考で働いているかが理解できます。

海外に行く気はないけど海外エンジニアの動向が気になる雑魚エンジニアにおすすめです(本当におすすめな本しか紹介しないのでご安心を)。

【Angular】unsubscribeしてメモリリークを防ぐ方法

この記事が気に入ったら
フォローしてね!

シェアしてね!
  • URLをコピーしました!
目次