Help us understand the problem. What is going on with this article?

AngularのPipeを使って、日付を変換する

この記事はAngular+Firebaseでチャットアプリを作るのエントリーです。
前記事:AngularのngIfとsubmitイベントでチャットコメントを実装する
次記事:Firebaseの環境構築

この記事で行うこと

本稿では、外部ライブラリであるMoment.jsをインストールし、AngularのPipeを使って投稿した日付を日本語表記に変更します。


(追記:2020/6)現時点(2020年6月)での最新の内容に書き換えています。


実装内容

Moment.jsをインストールする

Moment.jsは少し癖のあるJavaScriptの日付表示の扱いを簡単にしてくれるライブラリです。
まずはこのライブラリをプロジェクトにインストールします。

npm install moment --save

Commentクラスに、Moment.jsを使ってdateプロパティを追加します。

app/class/chat.ts
import * as moment from 'moment'; // 追加

export class Comment {
  user: User;
  initial: string;
  content: string;
  date: number; // 追加

  constructor(user: User, content: string) {
    this.user = user;
    this.initial = user.name.slice(0, 1);
    this.content = content;
    this.date = +moment(); // 追加
  }
}

+moment()は、現在時刻をUNIXタイムスタンプで取得するメソッドです。
ここで取得した現在時刻を、Angularに標準実装されているDatePipeを使ってビューに反映させます。

app/app.component.html
  <section class="card">
    <div class="card-header">
      NgChat
    </div>
    <div class="card-body">
      <ng-container *ngFor="let comment of comments">
      <div class="media">
        <div class="media-left" *ngIf="comment.user.uid !== currentUser.uid">
          <a href="#" class="icon-rounded">{{comment.initial}}</a>
        </div>
        <div class="media-body">
          <!--DatePipeを追加-->
          <h4 class="media-heading">{{comment.user.name}} Date:{{comment.date | date:'medium'}}</h4>
          <div>{{comment.content}}</div>
        </div>
        <div class="media-right" *ngIf="comment.user.uid === currentUser.uid">
          <a href="#" class="icon-rounded">{{comment.initial}}</a>
        </div>
      </div>
      <hr>
      </ng-container>
    </div>
  </section>

実行結果

NgChat (2).png

代表的なDatePipeのフォーマットをいくつか挙げておきます。それ以外の詳しいフォーマットは、公式を確認してください。

{{ dateObj | date }}               // output is 'Jun 15, 2015'
{{ dateObj | date:'medium' }}      // output is 'Jun 15, 2015, 9:43:11 PM'
{{ dateObj | date:'shortTime' }}   // output is '9:43 PM'
{{ dateObj | date:'mmss' }}        // output is '43:11'

2018/9 追記

検証したところ、safariでのエラーは解消されたようです。
AngularのDatePipeは、現時点だとsafariでエラーを起こします。ご注意ください。
参考:http://qiita.com/shun_kashiwa/items/ece352083e04737b1123

Pipeを使って、日付を変換する

AngularのPipeを使って、オリジナルのpipeを作成します。
PipeはAngularJS1.xxでいうところの「filter」です。Pipeを使えば、ビューにデータを表示させる際、任意の値へ変換することができます。

例) 数字に単位をつける(100→100mm)、別の言語に翻訳する(japanese→日本語)

Angular CLIを使って、新しいPipeの雛形を作成します。

ng g pipe pipe/chat-date

app.module.tsも自動で更新され、declarationsChatDatePipeが挿入されます。
pipe/chat-date.tsを開き、Moment.jsをインポートしておきます。

app/pipe/chat-date.ts
import { Pipe, PipeTransform } from '@angular/core';
import * as moment from 'moment'; // 追加

@Pipe({
  name: 'chatDate'
})
export class ChatDatePipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return null;
  }

}

@Pipeデコレータで指定されているnameプロパティは、html内に渡す時に使う名前です。
transform()の第1引数に元となるデータの値、第2引数には第1引数がなかった場合のデフォルト値を入れます。※デフォルト値は任意です。

Moment.jsを使って、日付表示を日本語表記に変換します。

app/pipe/chat-date.ts
export class ChatDatePipe implements PipeTransform {

  transform(date: number): string {
    moment.locale('ja');
    return moment(date).format('LLLL');
  }

}
app/app.component.html
          <div class="media-body">
            <!--DatePipeを追加-->
            <h4 class="media-heading">{{comment.user.name}}  Date: {{comment.date | chatDate}}</h4>
            <div>{{comment.content}}</div>
          </div>

実行結果

NgChat (3).png

ここまでで一度クライアントサイドの実装を止め、次からはFirebaseの設定に入ります。

ソースコード

この時点でのソースコード

Yamamoto0525
6年間出版社でWEBディレクターとして経験を積んだのち、フリーランスとして活動していました。2017年に株式会社ShareDanを立ち上げ、自社サービスの開発、WEB制作、WEBコンサルティングを行っています。
https://www.sharedan.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした