Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
AngularJS TIPS

AngularJS TIPS

配列/オブジェクトの内容を列挙するには?(forEach)

2016年1月12日

angular.forEachメソッドを使って、配列の要素やオブジェクトのメンバーを列挙する方法を解説する。

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

 配列の要素、オブジェクトのメンバーを列挙するには、AngularJSのグローバルAPIであるangular.forEachメソッドを利用します。誤解のしようもない、シンプルなメソッドなので、さっそく、具体的な例を見てみましょう。以下は、あらかじめ用意されたメンバー情報の配列から名前を取り出し、列挙する例です。

HTML
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script>
// メンバー情報を定義
var members = [
  {
    name: '山田太郎',
    mail: 't_yamada@example.com',
    birth: new Date(1980, 0, 5)
  },
  {
    name: '鈴木次郎',
    mail: 'j_suzuki@example.com',
    birth: new Date(1978, 2, 11)
  },
  ……中略……
];

// メンバー情報(インデックス+名前)を列挙
angular.forEach(members, function(value, index, array) {
  console.log(index + '. ' + value.name);
});
</script>
</body>
</html>
リスト1 オブジェクト配列の内容を列挙するコード(foreach.html)

サンプルコード全体はこちらからダウンロードできます。後述するリスト3の「……中略……」の部分もこちらのmembersを参考にしてください。

メンバーの名前をコンソールに列挙(Chromeの開発者ツールで確認している例)

 angular.forEachメソッドの構文は、以下の通りです。

[構文]forEachメソッド

angular.forEach(coll, callback)
  • coll: 列挙対象の配列/オブジェクト
  • callback: 配列/オブジェクトの個々の要素を処理するためのコールバック関数

 JavaScript標準のforEachメソッドにも似ていますが、対象の配列/オブジェクトがnullundefinedであった場合の挙動が異なります。ネイティブなforEachメソッドでは例外となるのに対して、angular.forEachメソッドは渡された値をそのまま返します。

 引数collに配列を渡した場合、コールバック関数(=引数callback)の引数には、以下のような値が渡されます。

  • value: 現在の要素値
  • index: 現在のインデックス値
  • array: 処理対象の配列そのもの

 サンプルでは、ここからインデックス(index)と値(value)のnameプロパティをコンソールに出力しています。

オブジェクトのメンバーを列挙する

 同じ要領でオブジェクトのメンバーを列挙することもできます。

JavaScript
var member = {
  name: '山田太郎',
  mail: 't_yamada@example.com',
  birth: new Date(1980, 0, 5)
}

// 変数memberのプロパティ情報を列挙
angular.forEach(member, function(value, prop, obj) {
  console.log(prop + ':' + value);
});
リスト2 オブジェクトのメンバーを列挙するコード(foreach2.html)
オブジェクトメンバーの全プロパティ情報をコンソールに出力

 引数collに配列ではなくオブジェクトを渡した場合、コールバック関数に渡される引数は、それぞれ以下のようになります。

  • value: プロパティ値
  • prop: プロパティ名
  • obj: 処理対象のオブジェクトそのもの

thisを固定する

 forEachメソッドの第3引数として、任意のオブジェクトを指定することで、コールバック関数の配下でthisが示す先を固定することもできます。例えば以下は、メンバー情報の配列から名前だけを取り出し、新たな配列dataに格納する例です。

JavaScript
var members = [
  {
    name: '山田太郎',
    mail: 't_yamada@example.com',
    birth: new Date(1980, 0, 5)
  },
  ……中略……
];

// 空の配列を準備
var data = [];

// 配列membersの内容を配列dataに詰め替え
angular.forEach(members, function(value, index, array) {
  this.push(value.name);
}, data);

// 配列dataの内容を出力
console.log(data);
リスト3 コールバック関数配下のthisを固定するコード(foreach3.html)
配列dataの内容をコンソールで確認

 ポイントとなるのは太字の部分です。forEachメソッドの第3引数で配列dataを指定していますので、コールバック関数配下でのthisdataとなります。よって、「data.push」は「this.push」と書けます。

処理対象:配列/オブジェクトの列挙 カテゴリ:基本
API:angular.forEach カテゴリ:ng(コアモジュール) > function(関数)

※以下では、本稿の前後を合わせて5回分(第37回~第41回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

AngularJS TIPS
37. JSON形式のWeb APIにアクセスするには?($http)

Web APIと通信する際に問題となるクロスドメイン制約を回避するために使われるテクニック「JSONP」を、AngularJSで実現するための基本的な方法を説明する。

AngularJS TIPS
38. 指定された時間の経過で処理を実行するには?($interval/$timeout)

ミリ秒単位で処理を実行できる、いわゆる「タイマー」である$intervalサービスの基本的な使い方を解説。また、一定時間後に処理を実行する$timeoutサービスについても説明する。

AngularJS TIPS
39. 【現在、表示中】≫ 配列/オブジェクトの内容を列挙するには?(forEach)

angular.forEachメソッドを使って、配列の要素やオブジェクトのメンバーを列挙する方法を解説する。

AngularJS TIPS
40. クッキーを読み書きするには?($cookies)

AngularJSが提供する機能を利用してクッキーを読み/書き/削除する方法を解説。また、登録済みの全てのクッキー情報をまとめて取得する方法も説明する。

AngularJS TIPS
41. $cookiesサービスを利用する際の注意点とは?($cookies)

AngularJSのクッキー機能は1.3から1.4で大きく変更された。具体的に何が変わったかを解説。また、アプリ全体で共通のクッキーオプションを設定する方法も説明する。

サイトからのお知らせ

Twitterでつぶやこう!