はじめに
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のように記述して、Angular 2のHTTPクライアント機能を提供するHttpModuleを設定します。
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { HttpModule } from "@angular/http"; // HTTPクライアント機能
（略）
@NgModule({
imports: [
BrowserModule,
HttpModule
],
（略）
})
HTTP GETの処理を行う実装は、リスト2のようになります。
// コンストラクター ...（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のようなメソッドやプロパティで通信結果を取得できます。
| 種類 | 名称 | 内容 |
|---|---|---|
| メソッド | 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でサーバーにデータを送信し、サーバーからのレスポンスを画面表示します。
HTTP POSTの処理を行う実装は、リスト3です。
// 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形式で画面に表示されます。
