JavaScript
TypeScript
angular
Angular2
Angular4

Angular4(over2~)のロケールとPipe


Angular4(over2~)のロケール


ローケルとは


ロケールとは、ソフトウェアに内蔵される、言語や国・地域ごとに異なる単位、記号、日付、通貨などの表記規則の集合。または単に、利用する言語や国・地域の指定。多くのソフトウェアやプログラミング言語は、使用する言語とともにロケールを設定し、ロケールで定められた方式に基づいてデータの表記や処理を行う。


引用元 : ロケール(ロカール)とは - IT用語辞典

つまり、各国・地域などによって異なる諸々の表記方法であり、今回はこれを設定する。


ローケルとPipe

AngularのPipeでは、このローケルの設定によって、処理結果が異なるものが多々存在する。


DatePipe

DatePipeもローケルの設定によって、処理結果が変わるPipeの1つである。

例えば、ロケールを設定しないで、以下のコードを実行する。


app.component.ts

import {Component} from '@angular/core';

@Component({
selector: 'app-root',
template: `<p class="today">
本日は、{{today | date}} だ
</p>
`
,
styles: [`
.today{background-color:yellow}
`
]
})
export class AppComponent {
today = Date.now();
}


すると、表示される画面は以下のようになる。

スクリーンショット 2017-08-30 13.01.34.png


Angularのアプリケーションにロケールを設定する

LOCALE_IDを使用し、アプリケーションにロケールを設定する。

LOCALE_IDをprovideする際にuseValueでLocaleIdを与えると、アプリケーションのロケールがLocaleIdで渡されたものに設定される


実際にやってみた

今回は、ロケールを日本に設定してみる。

app.module.tsのproviderでLOCALE_IDをprovideする際にuseValueで与えるLocaleIdを ja-JP (日本)にする。

実際のコードは以下。


app.module.ts

import {BrowserModule} from '@angular/platform-browser';

import {NgModule, LOCALE_ID} from '@angular/core';
import {AppComponent} from './app.component';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule],
providers: [{provide: LOCALE_ID, useValue: 'ja-JP'}],
bootstrap: [AppComponent]
})
export class AppModule {
}


componentは先ほどと変わらず以下のようなものにする。


app.component.ts

import {Component} from '@angular/core';

@Component({
selector: 'app-root',
template: `<p class="today">
本日は、{{today | date}} だ
</p>
`
,
styles: [`
.today{background-color:yellow}
`
]
})
export class AppComponent {
today = Date.now();
}



実行結果

実行すると以下のようになり、ロケールが日本になったため、同じコードでもDataPipeで変換された後の値が変化していることがわかる。

スクリーンショット 2017-08-30 13.16.31.png


参考文献

山田 祥寛(2017/8/4)『Angularアプリケーションプログラミング』 技術評論社


参考にさせていただいたサイト

ロケール(ロカール)とは - IT用語辞典

Angular - Pipes

DatePipe

LOCALE_ID

※ ブログでも同一の投稿を行っている

Angular4(over2~)のロケールとPipe