Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

ロジックを画面から分離できる「Angular 2」のサービスと依存性注入

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

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

 本連載では、Webアプリケーションフレームワーク「Angular 2」の活用方法をサンプルとともに紹介しています。今回は前回記事で説明しきれなかったモジュール定義方法を説明した後、独立した処理の実装をコンポーネントに後から追加できるAngular 2の「サービス」と「依存性注入(Dependency Injection)」機能について、利用法を紹介します。

目次

はじめに

 Angular 2はGoogleとオープンソースコミュニティで開発されているJavaScriptフレームワークで、従来のAngularJS(AngularJS 1)の次期バージョンです。2016年9月に正式版がリリースされ、本格的に利用できる環境が整いました。Angular 2はAngularJS 1に対して多くの変更点があり、コードの記述法も基本的に異なります。

 前回記事では、Angular 2のWebページを構成する要素である、コンポーネントやモジュールについて説明しました。これらを利用すると、実装を分割して互いの影響範囲を限定することができます。

 しかし、ログ出力のようにさまざまな箇所で使われる処理や、ビジネスロジックのような画面から独立した処理は、独立して実装した処理を、後から追加できれば便利です。Angular 2ではこのような機能として、独立した処理を実装する「サービス」と、サービスをコンポーネントやモジュールに後から追加する「依存性注入(Dependency Injection)」が利用できます。

 本記事では、まず前回記事で説明しきれなかったモジュール化の方法について、サンプルをあげて説明します。次にそのサンプルへ共通処理を追加していくことで、サービスと依存性注入の利用法を解説します。

対象読者

  • 正式版になったので本格的にAngular 2を使い始めようと思っている方
  • 最新フレームワークに触れておきたい方
  • 作成したソースコードを部品化・再利用したい方

必要な環境

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

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

  • Windows 10 64bit版
    • Angular 2 2.1.0
    • Node.js v6.8.0 64bit版
    • Microsoft Edge 38.14393.0.0

 Angular 2の公式Webサイトでは基本的なAngular 2の実行環境を整える手順をQUICKSTARTとして公開しており、本記事のサンプルコードも、クイックスタートで作成したファイル一式をベースにします。2016年10月現在の手順で作成したクイックスタートプロジェクト(angular-quickstart)を、ダウンロードできるサンプルコードに含めています。プロジェクトの実行方法については過去記事も参照してください。

自作したコンポーネントをモジュールに切り出し

 前回記事のサンプル(angular2-003-component3)では、リストの詳細を表示する詳細表示コンポーネントと、リストに項目を追加する項目追加コンポーネントを実装して、ルートコンポーネントの配下に追加する実装例を説明しました(図1)。しかしモジュールという観点で見た場合、これらのコンポーネントはすべて最上位のルートモジュール(AppModule)に含まれており、モジュール分割されていない状態です。ここまでの内容については前回記事も参照してください。

図1 複数コンポーネントを含むAngular 2のWebページ(angular2-003-component3)
図1 複数コンポーネントを含むAngular 2のWebページ(angular2-003-component3)

 今回はここから一歩進めて、詳細表示コンポーネントと項目追加コンポーネントを別のモジュールに切り出す方法を紹介します。まずappフォルダにサブフォルダphoneutilを作成して、関連するファイル(phonedetail.component.ts、phoneinput.component.ts、phone.ts)を移動します。さらにphoneutilフォルダーに追加モジュールの定義ファイルをリスト1のように作成します。

リスト1 追加モジュールの定義(angular2-004-module/app/phoneutil/phoneutil.module.ts)
// モジュール参照 ...(1)
import { NgModule }      from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule }   from "@angular/forms";

// コンポーネント参照 ...(2)
import { PhoneDetailComponent } from "./phonedetail.component";
import { PhoneInputComponent }  from "./phoneinput.component";

// モジュールのメタデータ定義 ...(3)
@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ PhoneDetailComponent, PhoneInputComponent ],
  exports:      [ PhoneDetailComponent, PhoneInputComponent ]
})

// モジュールクラス定義
export class PhoneUtilModule { }

 (1)で使用するAngular 2のモジュール、(2)でモジュールに含むコンポーネントを参照します。(3)のメタデータ定義は「(imports属性で)このモジュールではBrowserModuleとFormsModuleを利用して」、「(declarations属性で)このモジュールにはPhoneDetailComponentとPhoneInputComponentを含み」、「(exports属性で)このモジュールからPhoneDetailComponentとPhoneInputComponentを外部に公開する」という指定を行っています。exports属性は、モジュールが外部に公開するコンポーネントの指定に利用します。

 ルートモジュール側ではリスト2のように、コンポーネント個別ではなく、追加されたモジュールPhoneUtilModuleを参照するように修正します。PhoneUtilModuleを参照すると、リスト1のexports属性で指定したコンポーネントが、ルートモジュールで利用できるようになります。

リスト2 追加モジュールを参照するルートモジュール記述(angular2-004-module/app/app.module.ts)
import { PhoneUtilModule } from "./phoneutil/phoneutil.module";
...
@NgModule({
  imports:      [ BrowserModule, PhoneUtilModule ],
...
})

 リスト1、2でモジュール分割しても、モジュール分割前(図1)と変わらず動作します。


  • 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