Angular最速マスターへの道 第7章
先週末実家へ帰省していたために、夢の国へ行けず、体調が頗る悪い一週間を過ごしております。
きっとビタミン「D」不足ですね←
さぁ今週のAngular最速マスターへの道やっていきましょう！
第7章目次
- Pipe
Pipe
Pipeを使用すると、値を指定した形に変換して出力することができます。
一時的に変換するだけなので元の値が変わってしまう心配はありません。
出力時にパイプ演算子(|)と使用するパイプ名を指定するだけなのでコードもかなり短いです。
AngularにはデフォルトでいくつかのPipeが用意されていますので、よく使うであろうものを簡単にご紹介します。
DatePipe
DatePipeは日付の形式を指定することができるPipeです。
試しに今日の日付を表示させてみましょう。
export class DatePipeComponent {
public today: Date = new Date();
}
<!-- 書き方: {{ Date | date:format }} -->
<p>今日は{{ today | date:'yyyy年MM月dd日' }}です！</p>
この書き方で 2018年08月17日というような表示ができます。
例では値としてDateオブジェクトで渡していますが、これ以外にもミリ秒のnumberやstringを渡すことも可能です。
また引数であるformatには文字列を渡します。
書き方で注意しておくこととして、年・月・日などの指定時にはそれぞれy・M・dなどの決まったアルファベットを指定してください。
phpを使用したことがある方は、date関数でも同じようなルールがありますのでそれを思い出してもらえると分かりやすいかもしれません。
またこのformatには決まった形式の文字列が用意されています。
へ？どういうこと？と思う方もいるでしょう。
「百聞は一見に如かず」
DEMOに用意しましたのでどう出力されるのか見てみてください。
DatePipe DEMO
DecimalPipe
DecimalPipeは数字の形式を変換するPipeです。
値段などのカンマ(,)込みの表示や、小数点以下をどこまで表示するかなどを指定できます。
デフォルトのPipeの中では一番と言って良いほど使う頻度が高めだと思います。
さぁ試しに小数第2位までを表示させるように指定してみましょう。
export class DecimalPipeComponent {
public float: number = 1980.356;
}
<!-- 書き方: {{ Number | number:digitsInfo }} -->
{{ float | number:'1.2-2' }}
<!-- 結果 => 1980.36 -->
DecimalPipeに渡す引数であるdigitsInfoに’1.2-2’という文字列を渡していますね。
この引数は整数部分の表示桁数 . 小数点部分の最小表示桁数 - 小数点部分の最大表示桁数を設定しています。
digitsInfoはデフォルトで'1.0-3'が設定されているので、引数を指定しない場合は小数点部分を最大3桁まで表示されます。
こちらのDEMOは自由に引数を設定できるようにしてみました。
DecimalPipe DEMO
LowerCasePipe / UpperCasePipe / TitleCasePipe
似たようなPipeなので3つまとめてご紹介します（手抜きじゃないですよ←）
* LowerCasePipe
* UpperCasePipe
* TitleCasePipe
Pipe名を見ればわかると思いますが、文字列を小文字にしたり大文字にしたりタイトルっぽくしてくれたりするPipeです。（雑）
引数がないPipeなので、前の2つよりコードがさらに簡単です。
{{ 'ABCDE' | lowercase }}
<!-- 結果 => abcde -->
{{ 'abcde' | uppercase }}
<!-- 結果 => ABCDE -->
{{ 'abcde' | titlecase }}
<!-- 結果 => Abcde -->
はい、これだけですね。
DEMOも不要なくらい簡単かもしれませんが、せっかく作成したので見てください笑
LowerCasePipe / UpperCasePipe / TitleCasePipe DEMO
SlicePipe
SlicePipeは文字列や配列を指定の部分だけ切り出して表示します。
JavaScriptのslice()と処理は全く同じです。
それをPipeで簡単にできるというわけです。
早速文字列を対象に書いてみましょう。
export class SlicePipeComponent {
public text: string = 'どうも！私はMiyajiです！';
}
<!-- 書き方: {{ String | slice:start:end }} -->
{{ text | slice:0:6 }}
<!-- 結果 => どうも！私は -->
(あ、、、名乗らせてもらえない文章になってしまった)
第1引数に開始位置、第2引数に終了位置を指定します。
DEMOには配列のケースもあるので表示を確かめて見てください。
SlicePipe DEMO
おまけ
Pipeももちろん独自のものを作成することができます。
ng g pipe [name] --module [module-name]
試しに消費税込みの金額表示ができるPipeを作成してみました！
オリジナルPipe DEMO
TaxPipeのコード
SeventhOriginPipeComponentのコード
ちなみにPipeは複数を繋げて書くこともできます。
DEMOにはTaxPipeで変換された後にDecimalPipeで変換をさせてみました！
まとめ
Pipeは簡単に書けて値を自由に変換できるので非常に便利です。
自作をどんどん増やしていけばあらゆる変換が可能になりますね！
今回ご紹介した以外にもデフォルトで用意されているPipeがありますので、公式を参考にしてみてください。
次章予告
- HostBinding / HostListener
- Animations
参考
- Pipe
- GUIDE – Pipes
- String.prototype.slice() – JavaScript | MDN – Mozilla
- Array.prototype.slice() – JavaScript | MDN – Mozilla
Angular最速マスターへの道シリーズはGitHubに公開しています。
