SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

進化を続けるJavaScriptフレームワーク「Angular」バージョン5の変更点

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

Pipesの国際化サポート

 Pipesは、変数を画面表示に適した内容に変換する機能です。Angular 4まで、数値や日時、通貨のPipesは、ブラウザーの国際化API(ECMAScript Internationalization API)を内部的に利用しており、APIに非対応のブラウザーで動作させるためにはPolyfill(互換ライブラリー)が必要でした。それに対してAngular 5では、Pipesの国際化処理をブラウザーのAPIに頼らず、独自で行うようになりました。実行するコマンドで「ng serve --aot --locale=ja-JP」のように、「--locale」オプションでロケールを指定できます。

 コマンドオプションを指定せずに日本語ロケールを利用するには、モジュール定義ファイルでリスト3のように記述します。(1)で日本語ロケールデータをlocaleJa変数にインポートして、それをregisterLocaleDataメソッドで登録します。(2)のLOCALE_IDで、登録した日本語ロケールでアプリが動作するように指定します。

リスト3 日本語ロケールをアプリに設定する記述(P001-pipes/src/app/app.module.ts)
// 日本語ロケールを登録 ...(1)
import { registerLocaleData } from '@angular/common'
import localeJa from '@angular/common/locales/ja';
registerLocaleData(localeJa);

@NgModule({
(略)
  providers: [
    {provide:LOCALE_ID, useValue:'ja-JP'} // 日本語ロケールを設定 ...(2)
  ],
(略)
})

 リスト3の設定を適用してPipesを実行すると、図2の通り表示されます。

図2 Angular 5のPipes国際化表示(001-pipes)
図2 Angular 5のPipes国際化表示(001-pipes)

 図2で表示したPipesの内容をリスト4に示します。sampleValueには日時(JavaScriptのDate型変数)が設定されます。図2とリスト4、特にフォーマットに「fullDate」を指定した(1)の部分を見比べると、表示が日本語対応していることが分かります。

リスト4 図2で表示したPipesの実装(P001-pipes/src/app/app.component.html)
<div>デフォルト:{{sampleValue | date}}</div>
<div>fullDate:{{sampleValue | date:"fullDate"}}</div><!--(1)-->
<div>shortTime:{{sampleValue | date:"shortTime"}}</div>
<div>yyyyMMss_HHmmss:{{sampleValue | date:"yyyyMMss_HHmmss"}}</div>

 Pipesの国際化をAngular 4以前と同じ挙動にするには、リスト5(1)のように、モジュール定義ファイルでDeprecatedI18NPipesModuleをインポートします。

リスト5 Pipesの国際化をAngular 4以前と同じにする設定(P002-pipes-old/src/app/app.module.ts)
@NgModule({
(略)
  imports: [
    BrowserModule,
    DeprecatedI18NPipesModule // Pipesが従来の挙動になるモジュール ...(1)
  ],
  providers: [
    {provide:LOCALE_ID, useValue:'ja-JP'} // 日本語ロケールを設定
  ],
(略)
})

 リスト5の設定でリスト4のPipeを実行すると、図3の通り表示されます。Angular 4以前の挙動になるため、「デフォルト」と「fullDate」の表示が図2と異なるほか、Microsoft Edgeの国際化APIの挙動によって、「yyyyMMdd_HHmmss」とフォーマットを指定した表示が不正になっています(過去記事も参考にしてください)。

図3 DeprecatedI18NPipesModuleを設定したPipes国際化表示(001-pipes)
図3 DeprecatedI18NPipesModuleを設定したPipes国際化表示(002-pipes-old)

 なお、国際化サポートの変更に伴い、フォーマット文字列の指定方法が細かく変更になっています。変更の内容をまとめた一覧表が公開されています。

RxJSとHTTP機能の変更点

 AngularにReactive Extensionの機能を提供するRxJSが5.5にバージョンアップされて、インポートの記述形式がより分かりやすくなりました。また、Angular 4.3で導入された新しいHTTP機能HttpClientがAngular 5で推奨となり、従来のHTTP機能(@angular/http)は非推奨になりました。

 これらの変更について、RxJSとHTTP機能の新旧形式を組み合わせて実装した、表1のサンプルコードで説明していきます。

表1 RxJSとHTTP機能のサンプルコード
サンプルコード名 RxJSの記法 HTTP機能の記法
P003-http1 従来の形式 従来の形式
P004-http2 新しい形式 従来の形式
P005-http3 新しい形式 新しい形式

 実行結果は同一で、ボタンを押すとJSONファイルを取得して、内容を表示します。

図4 RxJSとHTTP機能サンプルの実行結果(P005-http3)
図4 RxJSとHTTP機能サンプルの実行結果(P005-http3)

RxJSの新しい記述形式

 まず、RxJSの新しい記述形式について、P003-http1サンプルと、P004-http2サンプルを比較しながら説明します。リスト6は、コンストラクターで依存性注入されたHTTP機能のオブジェクト(oldHttp)でダウンロード処理を行う実装です。従来は(1)のように、RxJSのインポートに独自の記述形式が必要でした。

リスト6 従来のRxJSインポート記述(P003-http1/src/app/app.component.ts)
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map'; // 従来の形式 ...(1)
(略)
// Httpオブジェクトを受け取る
public constructor(private oldHttp:Http){}
(略)
// HTTPダウンロード処理
this.oldHttp.get('/assets/sample.json')
.map(res => res.json())
.map(obj => obj['message'])
.subscribe(message => {this.message = message});

 Angular 5では、リスト7(1)のように、ほかのimport同様「import {} from ~」形式で記述できるようになりました。この記述を利用するときは、(2)のようにpipeメソッドを利用してObservableチェーンを記述します。

リスト7 Angular 5のRxJSインポート記述(P004-http2/src/app/app.component.ts)
import { Observable } from 'rxjs/Observable';
import { map } from 'rxjs/operators'; // 新しい形式 ...(1)
(略)
// Httpオブジェクトを受け取る
public constructor(private oldHttp:Http){}
(略)
// HTTPダウンロード処理
this.oldHttp.get('/assets/sample.json').pipe( // Observableチェーン...(2)
  map(res => res.json()),
  map(obj => obj['message'])
)
.subscribe(message => {this.message = message});

[参考]Observableチェーン

 RxJSでは、特定の処理に対するイベントを発生する「Observable」で非同期処理を記述します。リスト6、7では、「ダウンロード内容をJavaScriptオブジェクトに変換して、その中からmessageを抽出する」一連の処理を、各処理に対応するObservableをつなげて記述することで実現しています。このような記法をチェーンと呼びます。

HttpClientの利用方法

 次にHttpClientについて、P004-http2サンプルとP005-http3サンプルを比較しながら説明します。HttpClientを利用するには、まずルートモジュール定義ファイルapp.module.tsで、従来のHttpModuleのかわりにHttpClientModuleをインポートします。

リスト8 HttpClientModuleのインポート(P005-http3/src/app/app.module.ts)
//import { HttpModule } from '@angular/http'; // 従来のモジュール
import { HttpClientModule } from '@angular/common/http'; // 新しいモジュール
(略)
@NgModule({
(略)
  imports: [
    BrowserModule,
    // HttpModule,    // 従来のモジュールではなく
    HttpClientModule  // 新しいモジュールをインポート
  ],
(略)
})
export class AppModule { }

 コンポーネントでは、リスト9のようにHttpClientを利用します。(1)のコンストラクターで依存性注入されたHttpClientオブジェクト(newHttp)を、(2)で利用してダウンロード処理を実行します。HttpClientの記述形式は従来のHTTP機能(Httpオブジェクト)とほぼ同じですが、レスポンスをJSONに変換する(3)の記述が不要になります(リスト7と比較してください)。

リスト9 HttpClientの利用例(P005-http3/src/app/app.component.ts)
//import { Http } from 'angular/http' // 従来のHTTP機能
import { HttpClient } from '@angular/common/http';  // 新しいHTTP機能
(略)
// HttpClientオブジェクトを受け取る ...(1)
public constructor(private newHttp:HttpClient){}
(略)
// HTTPダウンロード処理 ...(2)
this.newHttp.get('/assets/sample.json').pipe(
  // map(res => res.json()),  // この処理は不要 ...(3)
  map(obj => obj['message'])
)
.subscribe(message => {this.message = message});

次のページ
フォームの新しい検証タイミング

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
次世代Webアプリケーションフレームワーク「Angular」の活用連載記事一覧

もっと読む

この記事の著者

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

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/10689 2018/03/13 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング