AngularJS - フィルタ：データ変換のお手伝い

こんにちは、未来のプログラミングスーパースターさん！? 今天的旅程は、AngularJSのフィルタの世界に踏み出します。プログラミングが初めてでも心配しないでください。私はあなたと一緒に、ステップバイステップですべてを説明します。このチュートリアルの最後には、プロのようにデータをフィルタリングできるようになるでしょう！

AngularJS - Filters

AngularJSのフィルタとは？

具体的な内容に入る前に、まずフィルタとは何かを理解しましょう。データを一瞬で変換できる魔法の杖を持っていると想像してみてください。AngularJSのフィルタはまさにそれです！元のデータを変更することなく、データを別の形式で表示します。すごいですね？

では、AngularJSで最もよく使われるフィルタのいくつかを見てみましょう。

大文字フィルタ：素晴らしさを大文字に

作用

大文字フィルタはその名の通り、文字列のすべての文字を大文字に変換します。

使用方法

<p>{{ "hello, world!" | uppercase }}</p>

出力

HELLO, WORLD!

説明

この例では、小文字の文字列 "hello, world!" から始めます。|シンボルは魔法のパイプのように、テキストを大文字フィルタに送ります。結果は？堂々たる "HELLO, WORLD!" です。

小文字フィルタ：控えめに

作用

小文字フィルタは大文字フィルタの逆で、すべての文字を小文字に変換します。

使用方法

<p>{{ "SHOUT OUT TO ANGULARJS!" | lowercase }}</p>

出力

shout out to angularjs!

説明

ここでは、すべて大文字の文字列を始めます。小文字フィルタは音量を下げ、控えめな "shout out to angularjs!" を提供します。

通貨フィルタ：金を见せてください！

作用

通貨フィルタは数値を通貨として格式化します。デフォルトではドル記号を使用しますが、カスタマイズできます。

使用方法

<p>{{ 9.99 | currency }}</p>
<p>{{ 9.99 | currency:"€" }}</p>

出力

$9.99
€9.99

説明

最初の行では、9.99を米ドルとして格式化します。二番目の行では、ユーロ記号を使用するようにフィルタに指示します。魔法ですね？

フィルタフィルタ：藁の中の針を探す

作用

フィルタフィルタ（少し混乱するかもしれませんが）は、配列を検索し、一致する項目を返します。

使用方法

<script>
$scope.friends = [
{name:'John', age:25},
{name:'Mary', age:28},
{name:'Peter', age:35}
];
</script>

<li ng-repeat="friend in friends | filter:{name:'o'}">
{{friend.name}}
</li>

出力

John

説明

ここでは、名前に 'o' を含むものを配列 friends で検索しています。Johnだけが一致するため、彼だけが表示されます。

昇順フィルタ：順序を整える

作用

orderByフィルタは、1つまたは複数の基準に基づいて配列を並べ替えます。

使用方法

<script>
$scope.friends = [
{name:'John', age:25},
{name:'Mary', age:28},
{name:'Peter', age:35}
];
</script>

<li ng-repeat="friend in friends | orderBy:'age'">
{{friend.name}} - {{friend.age}}
</li>

出力

John - 25
Mary - 28
Peter - 35

説明

この例では、friendsを年齢の昇順で並べ替えています。降順にしたい場合は、'-age'を使用します。

すべてを合わせて：素晴らしい例

さて、複数のフィルタを組み合わせて、どれほど強力か見てみましょう！

<script>
$scope.products = [
{name:'Laptop', price:999.99},
{name:'Smartphone', price:599.99},
{name:'Tablet', price:299.99}
];
</script>

<input type="text" ng-model="searchText">
<table>
<tr>
<th>名前</th>
<th>価格</th>
</tr>
<tr ng-repeat="product in products | filter:searchText | orderBy:'price'">
<td>{{product.name | uppercase}}</td>
<td>{{product.price | currency}}</td>
</tr>
</table>

説明

プロダクトの配列から始めます。
ng-modelを使用して searchText にバインドされた入力フィールドを作成します。
テーブル内で ng-repeat を使用してプロダクトを反復します。
filterフィルタを使用して searchText に基づいて検索します。
orderByを使用して価格で並べ替えます。
各プロダクトの名前を大文字で表示し、価格を通貨として格式化します。

この例では、検索、並べ替え、格式化をすべて一度に組み合わせています！

締め括り

おめでとうございます！あなたはAngularJSのフィルタの世界への第一歩を踏み出しました。フィルタはデータの個人的なスタイリストのように、情報を最も適切で魅力的な方法で表示する手助けをしてくれます。

AngularJSとの旅を続ける中で、フィルタを使用するさらに多くの方法を見つけるでしょう。練習を続け、好奇心を持ち、最も重要なのは、楽しむことです！間もなく、あなたは AngularJSのマスターとして素晴らしいウェブアプリケーションを作成し、みんなを感動させるでしょう。

未来のAngularJSマスターさん、ハッピーコーディング！?

フィルタ	目的	シntax
uppercase	文字列を大文字に変換	{{ expression
lowercase	文字列を小文字に変換	{{ expression
currency	数値を通貨として格式化	{{ expression
filter	配列からサブセットを選択	{{ array
orderBy	配列を基準に並べ替え	{{ array

Credits: Image by storyset