Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本連載では、Webアプリケーションフレームワーク「Angular 2」の活用方法をサンプルとともに紹介しています。前回は、Angular 2のHTTPクライアント機能について説明しました。今回は、Angular 2コンポーネントの生成/破棄などのライフサイクルと、ライフサイクルに対応して実行されるライフサイクルフックについて説明します。

目次

はじめに

 Angular 2はGoogleとオープンソースコミュニティで開発されているJavaScriptフレームワークで、従来のAngularJS(AngularJS 1)の次期バージョンです。

 Angular 2で作成したWebページを構成するコンポーネントは、表示時に生成され、画面の入力や表示などで状態が変更されて、非表示時に破棄されるといったライフサイクルが定義されています。開発者は、ライフサイクルの変化ごとに呼び出されるメソッド(ライフサイクルフック)を実装して、ライフサイクルに対応した処理を実行できます。

 本記事では、Angular 2のライフサイクルとライフサイクルフックについて、サンプルを使って説明していきます。

対象読者

  • Angular 2をより深く使いこなしていきたい方
  • 最新のフレームワークを活用したい方
  • Angular 2が裏でどう動いているか気になる方

必要な環境

 Angular 2はJavaScriptのフレームワークですが、公式WebサイトのドキュメントやサンプルはTypeScript向けが先行して整備される場合が多く、本連載でもTypeScriptでコードを記述していきます。また、サンプルの実行にはNode.jsが必要になります。

 今回は以下の環境で動作を確認しています。

  • Windows 10 64bit版
    • Angular 2 2.4.0
    • Node.js v6.9.5 64bit版
    • Microsoft Edge 38.14393.0.0

 公式サイトのガイドでは、GitHubからダウンロードできるプロジェクトテンプレートで実装環境を作るよう案内されています。テンプレートを展開したフォルダで、Node.jsのコマンド「npm install」を実行して依存ライブラリをダウンロード後、「npm start」コマンドを実行すると、WebブラウザでWebページを表示できます。本記事のサンプルもこのテンプレートをもとに実装しています。

Angular 2のライフサイクル

 Angular 2のコンポーネントは、図1のようなライフサイクルで生成→変更→消滅します。

図1 公式ページ(https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html)に記載されているAngular 2のライフサイクル
図1 公式ページに記載されているAngular 2のライフサイクル

 ライフサイクルに対応するメソッド(ライフサイクルフック)が、表1のように定義されています。ライフサイクルフックは特定のタイミングや、別のライフサイクルフックの実行後に実行されます。

表1 Angular 2のライフサイクルフック
No. メソッド名 実行タイミング
1 ngOnChanges コンポーネントの入力プロパティ変更時
2 ngOnInit 生成時、No.1の実行後
3 ngDoCheck 変更を検知したとき、No.1または2の実行後
4 ngAfterContentInit 外部コンテンツ初期化時、No.3の実行後(1回だけ)
5 ngAfterContentChecked 外部コンテンツ変更時、No.3または4の実行後
6 ngAfterViewInit ビュー初期化時、No.5の実行後(1回だけ)
7 ngAfterViewChecked ビュー変更時、No.5または6の実行後
8 ngOnDestroy 破棄時

[用語説明]入力プロパティ、外部コンテンツ、ビュー

 No.1の「入力プロパティ」は、リスト1の[input1]のように、コンポーネントタグの属性で指定するプロパティです。コンポーネントでは、@Inputデコレーターで入力プロパティを参照できます。

リスト1 入力プロパティの例
<comp [input1]="input1Value"></comp>

 No.4、5の「外部コンテンツ」は、リスト2のpタグ要素のように、コンポーネントタグで囲まれた内容です。コンポーネントでは、<ng-content>タグで外部コンテンツを参照できます。

リスト2 外部コンテンツの例
<comp>
  <p>外部コンテンツ</p>
</comp>

 No.6、7の「ビュー」は、@Componentデコレーターのtemplate属性に指定したHTMLテンプレートで定義される、コンポーネントの画面表示です。

 ライフサイクル遷移をログ出力する図2のサンプル(001-all-hooks)で、実際にライフサイクルの様子を見てみます。

図2 ライフサイクルを実行するサンプル(001-all-hooks)
図2 ライフサイクルを実行するサンプル(001-all-hooks)

 図2のサンプルを実行すると、コンストラクターの実行後に表1のライフサイクルフックが順に実行され、図3のようにデバッグログ出力されます。

図3 図2のサンプル実行時のデバッグログ(001-all-hooks)
図3 図2のサンプル実行時のデバッグログ(001-all-hooks)

 図3では、まず外部プロパティが設定されることでngOnChangesが実行され、後続してngOnInit~ngAfterViewCheckedが実行されます(1)。次に、Angular 2が画面の変更を検知する処理を行うため、ngDoCheckと、後続するngAfterContentChecked、ngAfterViewCheckedが実行されます(2)。最後に、画面の「コンポーネントを破棄」ボタンを押すと、コンポーネントが破棄(画面から削除)されて、ngOnDestroyが実行されます(3)。

 ライフサイクルフックを実行するコンポーネントの実装はリスト3です。

リスト3 ライフサイクルフックの実装(001-all-hooks/app/lifecycle.component.ts)
import {
  Component, Input,
  OnChanges, OnInit, DoCheck,
  AfterContentInit, AfterContentChecked,
  AfterViewInit, AfterViewChecked,
  OnDestroy
 } from "@angular/core"; // インターフェースを参照...(1)
(略)
export class LifeCycleComponent implements
  OnChanges, OnInit, DoCheck,
  AfterContentInit, AfterContentChecked,
  AfterViewInit, AfterViewChecked,
  OnDestroy // インターフェースを設定...(2)
  {
  // コンストラクター ...(3)
  constructor() {
    console.debug("constructor");
  }
  // ライフサイクルフック ...(4)
  ngOnChanges() {
    console.debug("ngOnChanges");
  }
(以下、各ライフサイクルフックのメソッド)
}

 (1)で、ライフサイクルフックに対応するTypeScriptのインターフェースを参照して、(2)で設定します。(3)はコンストラクター、(4)以下が各ライフサイクルフックです。サンプルでは、ライフサイクルフック実行時に、名前をデバッグログに出力します。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

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

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

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

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

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

もっと読む

All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5