Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

「Angular」の変数を見やすい形式に変換して表示できるPipesの活用法

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本連載では、Webアプリケーションフレームワーク「Angular」の活用方法をサンプルとともに紹介しています。前回はAngularのバージョンアップ版となるAngular 4の変更点と今後の見通しを説明しました。今回は、変数の値を画面表示用に見やすく変換できるPipesについて、利用方法を説明していきます。

目次

はじめに

 Angularは、Googleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。AngularJSと呼ばれていたバージョン1(AngularJS 1)から、バージョン2で大きく変更されて、以降はAngularと呼ばれます。バージョン2時点では「Angular 2」と呼ばれることもありましたが、現在はAngularが正式名称です。

 Angularでは、コンポーネントの変数を画面に表示する際に見やすい形式に変換できる、Pipesと呼ばれる仕組みが提供されています。Angularが標準で提供する日付/時刻や数値などのPipesを利用することも、変換処理を自分で実装してカスタムPipesを作ることもできます。

 本記事では、Pipesの利用方法をサンプルとともに説明していきます。

対象読者

  • Angularをより深く使いこなしていきたい方
  • Webページのユーザー体験にこだわりたい方
  • 画面表示の形式変換処理をコンポーネントから分離したい方

必要な環境

 AngularはJavaScriptのフレームワークですが、公式WebサイトのドキュメントやサンプルはTypeScript向けが先行して整備される場合が多く、本連載でもTypeScriptでコードを記述していきます。また、サンプルの実行にはNode.jsが必要になります。

 今回は以下の環境で動作を確認しています。本連載ではWebブラウザーとしてMicrosoft Edgeを利用していますが、現状ではPipesの一部機能が正しく動作しないため、今回はGoogle Chromeを利用します(詳細は後述します)。

  • Windows 10 64bit版
    • Angular 4.0.3
    • Node.js v6.10.3 64bit版
    • Google Chrome 57.0.2987.133 (64bit版)

 公式サイトのガイドでは、GitHubからプロジェクトテンプレートをダウンロードして実装環境を作るよう案内されています。テンプレートを展開したフォルダで、Node.jsのコマンド「npm install」を実行して依存ライブラリをダウンロード後、「npm start」コマンドを実行すると、WebブラウザーでWebページを表示できます。本記事のサンプルは、このテンプレートをもとに実装しています。

基本的な記述方法

 最初に、図1のサンプルでPipesの基本的な記述方法を説明します。このサンプルでは、変数の文字列をデータバインディングで画面に表示します。1行目は変数の値をそのまま表示し、2行目と3行目はPipesで大文字と小文字に変換します。

図1 Pipesで大文字・小文字変換(001-basic)
図1 Pipesで大文字・小文字変換(001-basic)

 このサンプルのルートコンポーネントはリスト1です。

リスト1 Pipesの基本的な記述(001-basic/src/app/app.component.ts)
@Component({
  selector: "my-app",
  template: `
    <h1>Angular サンプル1</h1>
    <div>変換前:{{sampleValue}}</div>             <!--(1)-->
    <div>大文字:{{sampleValue | uppercase}}</div> <!--(2)-->
    <div>小文字:{{sampleValue | lowercase}}</div> <!--(3)-->
  `
})
export class AppComponent {
  // 画面表示する変数 ...(4)
  sampleValue:string = "Sony Xperia XZ SO-01J";
}

 (4)の変数sampleValueを、データバインディング(テンプレートの{{ }}記述)で画面に表示します。(1)は変数をそのまま表示しています。Pipesを利用しているのは(2)と(3)で、変数名の後ろに「| uppercase」をつけると大文字に、「| lowercase」をつけると小文字に変換します。このように、Pipesを利用するには「{{変数名 | Pipesの名前}}」と記述します。

 「{{変数名 | PipesA | PipesB}}」のようにPipesの名前を複数指定することもでき、この場合は変数をPipesAで変換した結果を、さらにPipesBで変換するようになります。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

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

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

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

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

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

もっと読む

All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5