【Angular】パイプを使ってみよう！【日付のフォーマット】

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。

Angularの解説シリーズです。

今回はパイプを使って日付をフォーマットする方法について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

パイプの使い方がわかる
パイプを使って日付のフォーマットができる

※PCにnpm、nodeがインストールされている前提で記述します。
　yarn等をお使いの方は読み替えてください。

環境がない人はcodesansbox等を使ってね！

パイプについて
実際に使ってみよう！
まとめ

パイプについて

パイプとは

Angularのパイプ（Pipe）は、テンプレート内でデータを変換し
表示をカスタマイズするための機能です。

テンプレートというのはいわゆる{{ }}のことだよ！

パイプを使う構文

{{ 変数　| パイプ名 : 引数 }}

ちなみに｜がパイプだよ！

使用例

Angularにデフォルトで搭載されている日付をフォーマットするパイプです

<!-- myDate変数の値を日付フォーマット 'yyyy/MM/dd' で表示する -->
<p>{{ myDate | date:'yyyy/MM/dd' }}</p>

Date型の変数をTypeScriptで処理しなくても直接フォーマットできるよ！

実際に使ってみよう！

実行環境

Angularのバージョンが古いと動かないことがあるよ！
うまく動かなければアップデートしてね！

初期設定

ターミナルを開いて以下のコマンドを実行してください。

ng new my-app
cd my-app
ng serve -o

ng newした際のルーティング設定はどっちでもいいよ！
スタイルの設定はなんでもいいけど、本ブログでは一括してSCSSで記述するよ！

補足

ng new my-app   →   新規Angularアプリの作成
cd my-app       →   ディレクトリ移動
ng serve -o     →   作成したAngularアプリの起動

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  myDate = new Date();
}

app.component.html

<!-- そのまま表示する -->
<p>{{ myDate }}</p>

<!-- myDate変数の値を日付フォーマット 'yyyy/MM/dd' で表示する -->
<p>{{ myDate | date : "yyyy/MM/dd" }}</p>

ブラウザで確認してみよう！

このような画面が表示されます。

Angularにはこのパイプ機能が多数実装されており、
自作することもできます。

パイプを自作する方法については、次の記事で紹介しています。

【Angular】パイプを自作しよう！【文字埋め】

まとめ

以下がパイプの使用方法
{{ 変数　| パイプ名 : 引数 }}

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram