Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery逆引きリファレンス

jQuery逆引きリファレンス

配列から特定の条件で要素を取り出すには?($.grep)

2015年2月26日

$.grepメソッドを使って、配列から条件に合致した要素だけを取り出す方法を解説。Internet Explorer 8以前の環境ではJavaScriptのfilterメソッドをこれで代替しよう。

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

 配列から条件に合致した要素だけを取り出すには、$.grepメソッドを利用します。標準のJavaScriptにも同等のメソッドとしてfilterがありますが、Internet Explorerではバージョン9以降での動作が前提です。Internet Explorer 8以前の環境を想定しなければならない状況がまだまだあることを考えると、現時点では、$.grepメソッドを利用するのが無難でしょう。

$.grepメソッドの基本

 まずは、基本的な例を見ていきます。以下は、オブジェクト配列(メンバーリスト)を読み取り、age(年齢)プロパティが30より大きいメンバーだけを取り出します。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
  // 処理対象のオブジェクト配列
  var members = [
    { name: '山田理央', age: 17, sex: 'female' },
    { name: '鈴木真琴', age: 24, sex: 'male' },
    { name: '佐藤健一', age: 45, sex: 'male' },
    { name: '木下奈美', age: 29, sex: 'female' },
    { name: '天童赤根', age: 35, sex: 'female' }
  ];

  // 配列membersの内容を順に走査
  var filtered = $.grep(members,
    function(elem, index) {
      // ageプロパティの値でフィルター
      return (elem.age > 30);
    }
  );

  console.log(filtered);  // フィルター後の結果
});
</script>
</body>
</html>
ageプロパティが30より大きい要素だけを取り出す例(grep.html)
年齢が30歳より上のメンバーが取り出された
年齢が30歳より上のメンバーが取り出された

IEのF12開発者ツールや、Chromeのデベロッパーツールなどで、[コンソール]/[Console]タブを開いた状態で、上記のgrep.htmlページを閲覧すると、そのタブ内にこのようなログ情報が表示される。

 コールバック関数の条件は、以下の通りです。

  • 引数として要素値(elem)とインデックス番号(index)を受け取る
  • 戻り値がtrueの場合、現在の要素を結果配列に残す

 コールバック関数の戻り値がfalseのもの――ここではageプロパティが30以下の要素は除外されていることが確認できます。

条件を逆転する

 $.grepメソッドの第3引数にtrueを指定した場合、$.grepメソッドはコールバック関数がfalseを返した要素だけを結果配列に残します。

JavaScript
var filtered = $.grep(members,
  function(elem, index) {
    return (elem.age > 30);
  }, true
);
条件式を反転させる例
30歳以下のメンバーが取り出された
30歳以下のメンバーが取り出された

 例えば否定の条件式は人間にとって分かりにくいものです。そのような場合には、第3引数をtrueにすることで条件を反転し、コードを見やすくできます。

処理対象:JavaScriptのfilterメソッドの代替 カテゴリ:ユーティリティ
API:jQuery.grep() カテゴリ:Utilities(ユーティリティ)

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

jQuery逆引きリファレンス
11. 配列の内容を順番に処理するには?($.each)

$.eachメソッドを使って、配列やオブジェクトの内容を順に処理する方法を解説。またJavaScriptのevery/someメソッドを、jQueryの$.eachで代替する方法も説明する。

jQuery逆引きリファレンス
12. 配列の内容を順番に加工するには?($.map)

$.mapメソッドを使って、配列やオブジェクトの内容を順に加工する方法を解説。Internet Explorer 8以前の環境ではJavaScriptのmapメソッドをこれで代替しよう。

jQuery逆引きリファレンス
13. 【現在、表示中】≫ 配列から特定の条件で要素を取り出すには?($.grep)

$.grepメソッドを使って、配列から条件に合致した要素だけを取り出す方法を解説。Internet Explorer 8以前の環境ではJavaScriptのfilterメソッドをこれで代替しよう。

jQuery逆引きリファレンス
14. 配列の内容を検索するには?($.inArray)

$.inArrayメソッドを使って、配列から特定の要素を検索する方法を解説。Internet Explorer 8以前の環境ではJavaScriptのindexOfメソッドをこれで代替しよう。

jQuery逆引きリファレンス
15. イベントに応じて処理を実行するには?(イベントメソッド)

イベントの発生に応じて呼び出されるイベントリスナーをjQueryで実装するための基本的な方法を解説する。

サイトからのお知らせ

Twitterでつぶやこう!