「Angular 2」のHTTPクライアント機能で非同期HTTP通信を使いこなす

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

　本連載では、Webアプリケーションフレームワーク「Angular 2」の活用方法をサンプルとともに紹介しています。前回はルーターの機能について解説しました。今回は、モダンなWebページの作成に欠かせない非同期HTTP通信を提供する、Angular 2のHTTPクライアント機能について説明します。

はじめに

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

　最近のWebページでは、画面の内容を動的に更新するなどの目的で、JavaScriptの処理で非同期にWebサーバーとHTTP通信する処理が多用されます。Angular 2では、この非同期HTTP通信の実装をより簡単に行うためのライブラリが提供されます。

　本記事では、HTTP通信を提供するAngular 2のHTTPクライアント機能について、サンプルとともに説明していきます。

対象読者

• Angular 2をより深く使いこなしていきたい方
• 最新のフレームワークを活用したい方
• WebAPIと連携してこそモダンなWebサイトだと思う方

必要な環境

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

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

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

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

HTTPクライアントの基本的な利用法

　まず、単純なサンプルで、HTTPクライアントの基本的な利用方法を説明します。

HTTP GETのサンプル

　HTTP GETの通信を行う方法を、図1のサンプルで説明します。Webページのボタンを押すと、JSONファイルをHTTP GETで取得して、内容を画面に表示します。

図1　HTTP GETのサンプル（angular-001-get）

　まず、ルートモジュールの定義をリスト1のように記述して、Angular 2のHTTPクライアント機能を提供するHttpModuleを設定します。

リスト1　HttpModuleの設定（angular-001-get/app/app.module.ts）

import { NgModule }      from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { HttpModule }    from "@angular/http"; // HTTPクライアント機能
（略）
@NgModule({
  imports: [
    BrowserModule,
    HttpModule
  ],
（略）
})

　HTTP GETの処理を行う実装は、リスト2のようになります。

リスト2　HTTP GETの処理（angular-001-get/app/app.component.ts）

// コンストラクター ...（1）
constructor(private http:Http) {
}
// ボタン押下時の処理
private onClickGet() {
  // http.getメソッドはHTTP通信を表すObservableを返す ...（2）
  var httpGetObservable = this.http.get("app/testdata.json");
  // subscribeメソッドで通信完了時の処理を記述 ...（3）
  httpGetObservable.subscribe(
    // 第1引数は成功時の処理を記述したアロー関数 ...（4）
    res => {
      this.resString = res.text();
    },
    // 第2引数はエラー時の処理を記述したアロー関数 ...（5）
    error => {
      console.error(error.status + ":" + error.statusText);
    }
  );
}

　（1）のコンストラクターで、HTTPクライアントクラスHttpのオブジェクトを受け取ります。（2）でHttpオブジェクトのgetメソッドにJSONファイルのURL（相対パス）を指定して実行すると、HTTP通信を表すReactive Extensions（Rx）のObservableオブジェクトを取得できます。Rxは非同期処理を記述できるライブラリで、Observableは処理の状態変化を表すオブジェクトです。詳細は公式サイトも参照してください。

　（3）のようにObservableオブジェクトをsubscribe（購読）すると、通信結果が受け取れます。メソッドの第1引数（4）が通信成功時、第2引数（5）がエラー時の処理です。各処理の引数res、errorは、通信結果を表すResponseクラスのオブジェクトで、表1のようなメソッドやプロパティで通信結果を取得できます。

表1　Responseクラスの主なメソッド・プロパティ

種類	名称	内容
メソッド	text	レスポンス文字列を取得
メソッド	json	レスポンスJSON文字列をJavaScriptオブジェクトに変換して取得
プロパティ	status	HTTPステータスコード（200、404など）
プロパティ	statusText	HTTPステータスを表す文字列

［参考］アロー関数とthisキーワード

　リスト1（4）（5）で利用されているアロー関数は、JavaScript規格「ECMAScript 2015」で導入され、TypeScriptでも利用できる構文です。通常のJavaScript関数では、関数内で記述したthisキーワードは関数そのものを参照しますが、アロー関数内のthisキーワードは、関数を定義したスコープのthis（この場合はAppComponent）を参照します。リスト1では、（4）の「this.resString」でAppComponentのresString変数を参照するためにアロー関数を使っています。

HTTP POST

　Httpクラスには、GET以外のHTTP通信（POST、HEAD、PUT、DELETEなど）を行うメソッドも定義されています。以下ではHTTP POSTを行うpostメソッドについて、図2のサンプルで説明します。ボタンを押すと、HTTP POSTでサーバーにデータを送信し、サーバーからのレスポンスを画面表示します。

図2　HTTP POSTのサンプル（angular-002-post）

　HTTP POSTの処理を行う実装は、リスト3です。

リスト3　HTTP POSTの処理（angular-002-post/app/app.component.ts）

// POSTデータ ...（1）
let postData = "title=" + encodeURIComponent("POSTテストデータ") +
  "&value=" + encodeURIComponent("HTTP POSTで送信したデータです。");
// リクエストヘッダーの設定 ...（2）
let headers 
= new Headers({ "Content-Type": "application/x-www-form-urlencoded" });
// リクエストヘッダーをリクエストオプションに設定 ...（3）
let options = new RequestOptions({ headers: headers });
// http.postメソッドはHTTP通信を表すObservableを返す ...（4）
var httpPostObservable
= this.http.post("http://localhost:3030/post-test-data", postData, options);
// subscribeメソッドで完了時の処理を記述
httpPostObservable.subscribe(
（略）
);

　（1）で、POST送信するデータを作っています。（2）で、Headersオブジェクトに送信データ形式をリクエストヘッダーで指定して、リクエストオプションを表す（3）のRequestOptionsオブジェクトに設定します。（4）のhttp.postメソッドにURLとPOSTデータ、RequestOptionsオブジェクトを指定して、HTTP通信を表すObservableオブジェクトを取得します。Observableをsubscribeする処理はGETの場合（リスト2）と同様です。

［参考］POSTリクエストを処理するWebサーバーアプリ

　ダウンロードできるサンプルコードには、リスト3のPOSTリクエストを処理するWebサーバーアプリ（node-web-server）を含めています。リスト3の実行時は、このWebサーバーアプリを「npm install」「npm start」コマンドで実行してください。Webサーバーアプリは、HTTP POSTで送信されたデータをJSON形式でクライアントに戻すようになっているため、図2のように、POSTで送信した内容がJSON形式で画面に表示されます。