Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

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

 本連載では、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 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)
図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形式で画面に表示されます。


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

著者プロフィール

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

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

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

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

バックナンバー

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

もっと読む

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