SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

次世代Webアプリケーションフレームワーク「Angular」の活用

「Angular 2」コンポーネントのライフサイクルを知って使いこなす

次世代Webアプリケーションフレームワーク「Angular」の活用 第7回


入力プロパティ変更時のngOnChanges

 ngOnChangesライフサイクルフックは、コンポーネントの入力プロパティが変更されたときに呼び出されます。図4のサンプル(002-onchanges)で説明します。

図4 ngOnChangesの実行例(002-onchanges)
図4 ngOnChangesの実行例(002-onchanges)

 テキストボックス文字列を変更すると、入力プロパティの変更でngOnChangesが実行され、変更されたプロパティ名と変更前後の値がログ出力されます。

図5 図4のサンプル実行時のデバッグログ(002-onchanges)
図5 図4のサンプル実行時のデバッグログ(002-onchanges)

 コンポーネントの実装はリスト4のようになります。

リスト4 ngOnChangesの実行(002-onchanges/app/lifecycle.component.ts)
export class LifeCycleComponent implements OnChanges {
  // タグのinput1属性で指定するプロパティ ...(1)
  @Input() input1:string;
  // ライフサイクルフック ...(2)
  ngOnChanges(changes: SimpleChanges) {
    // 変更されたプロパティ名propNameごとに処理 ...(3)
    for (let propName in changes) {
      // 変更内容のSimpleChangeオブジェクトを取得
      let change : SimpleChange = changes[propName];
      // ログ出力
      console.debug("変更されたプロパティ名:" + propName);
      console.debug("変更前の値:" + change.previousValue);
      console.debug("変更後の値:" + change.currentValue);
    }
  }
}

 (1)の@Inputデコレーターで、コンポーネントタグの[input1]属性で指定された入力プロパティinput1を参照します。ngOnChangesの実装は(2)です。引数のSimpleChangesオブジェクトには、変更されたプロパティ名をキーとして、プロパティの変更前後の値が格納されたSimpleChangeオブジェクトが格納されます。(3)のforループで、プロパティ名と変更前後の値を取り出してログ出力します。

生成と破棄に対応するngOnInitとngOnDestory

 ngOnInitライフサイクルフックはコンポーネントの生成時に、ngOnDestroyライフサイクルフックは破棄時に、それぞれ実行されます。

 ngOnInitはngOnChangesより後に実行されるため、ngOnChangesより先に実行されるコンストラクターでは参照できない入力プロパティをngOnInitで参照できます。Angular 2のドキュメントでは、コンストラクターでは最低限の変数初期化を行い、通信などの重い処理はngOnInitで実行することを推奨しています。

 また、コンポーネント破棄時の後始末が必要な場合、ngOnDestroyに実装します。Angular 2のドキュメントでは、ngOnDestoryで行う処理の例として、Observableの購読解除(unsubscribe)やタイマー処理の停止、コールバック関数の解放が示されています。

変更検知ごとに実行されるngDoCheck

 ngDoCheckライフサイクルフックは、何らかの変更を検知した都度に実行されます。実装例を図6のサンプル(003-docheck)で説明します。

図6 ngDoCheckの実行例(003-docheck)
図6 ngDoCheckの実行例(003-docheck)

 このサンプルでは、画面上のテキストボックス値を変えるごとに、その内容をデバッグログに出力します。

図7 図6のサンプル実行時のデバッグログ(003-docheck)
図7 図6のサンプル実行時のデバッグログ(003-docheck)

 コンポーネントの実装はリスト5のようになります。

リスト5 ngDoCheckの実行(003-docheck/app/lifecycle.component.ts)
  // テキストボックスへの入力値 ...(1)
  input1:string="";
  input2:string="";
  // ライフサイクルフック ...(2)
  ngDoCheck() {
    console.debug("DoCheck:input1=" + this.input1);
    console.debug("DoCheck:input2=" + this.input2);
  }

 (1)の変数input1、input2には、双方向データバインディングによって、画面上のテキストボックスに入力された値が反映されます。ngDoCheckの実装は(2)で、変数input1とinput2の値をデバッグログに出力します。

次のページ
ビューの初期化と変更に対応するngAfterViewInit、ngAfterVieweChecked

この記事は参考になりましたか?

次世代Webアプリケーションフレームワーク「Angular」の活用連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/10046 2017/04/24 11:02

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー