Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

AngularJSアプリで使えるフィルター80個てんこもり(Angular Filter)

AngularJSアプリ開発を支援する便利モジュール(5)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/11/10 14:00

 AngularJSは、テンプレートエンジン、データバインディング、ルーティング、DIコンテナーなどなど、Webアプリのフロントエンドを開発するために必要な機能をあまねくそろえたフルスタックのフレームワークです。もっとも、本格的な開発ではそれだけで賄えるわけではなく、要件に応じて、周辺のモジュールと連携するのが一般的です。本連載では、AngularJSで利用できる拡張ライブラリを、具体的な利用例とともに紹介します。

目次

 なお、本連載ではAngularJSそのものに関しては解説しませんので、専門書として『AngularJSアプリケーションプログラミング』、姉妹連載『AngularJSではじめるJavaScriptフレームワーク開発スタイル』などを併せて参照してください。

はじめに

 フィルターとは、与えられた変数(式)の値を加工するための仕組みです。主にテンプレート(Angular式)から利用します。以下に、AngularJS標準で用意されているフィルターをまとめておきます(注1)。

表1 AngularJS標準のフィルター
分類 フィルター 概要
文字列 lowercase 大文字→小文字の変換
uppercase 小文字→大文字の変換
json オブジェクトをJSON文字列に変換
linky URL/メールアドレスをリンクに整形
配列 orderBy 配列を指定のキーで並べ替え
filter 配列を指定の条件で検索
limitTo 配列のm~n件目を抽出
数値/日付 number 数値に桁区切り文字を付与、小数点以下の丸め
currency 通貨形式に整形
date 日付を整形

注1

 個々のフィルターの用法については、「AngularJS TIPS」のような記事を参照してください。

 ごく基本的な用途に限定されているせいか、「随分と少ないな」というのが第一印象かもしれません。もちろん、自作のフィルターを作成するのはそれほど難しいことではありませんが、よくありそうな機能をいちいち自作するのは車輪の再発明なのでは、と感じる人は多いのではないでしょうか。

 そのような方は、本稿で紹介するAngular Filterの導入を検討してみてはどうでしょう。Angular Filterは、名前のとおり、AngularJSアプリで利用できるフィルターライブラリ。コレクション(配列)、文字列、数値演算、判定関連のフィルターが80種類近くも提供されています。AngularJS標準のフィルターに不満を感じたら、まずはAngular Filterに目的の機能がないか、確認してみるのも良いのではないでしょうか。自作を決断するのは、それからでも遅くはありません!

対象読者

  • AngularJSについて基本的な概念を理解している方
  • AngularJSでSPA(Single Page Application)を実装したいと考えている方
  • AngularJS標準のフィルターでは不足だと感じている方

検証環境

 この記事では、以下の環境でサンプルの動作を確認しています。

  • AngularJS 1.4.6
  • Angular Filter 0.5.5
  • Chrome 45
  • Firefox 40
  • Internet Explorer 11

 Angular Filterは、Bowerを利用することで、以下のコマンドでインストールできます。Bowerに関する詳細は、別稿『Web開発ライブラリを自動的に入手できるパッケージ管理ツールBower』を参照してください。

> bower install --save angular-filter

 Angular Filterの機能は、大きくString(文字列操作)、Math(数値演算)、Boolean(判定)、Collection(配列操作)に分類できます。判定については、データ型や値の大小を判定するだけの、見た目そのままなフィルターなので、以下では、これを除くString/Math/Collectionについて、代表的なものを解説していきます。


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

著者プロフィール

  • WINGSプロジェクト(ウイングスプロジェクト)

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

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

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

バックナンバー

連載:AngularJSアプリ開発を支援する便利モジュール

もっと読む

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