jQuery逆引きリファレンス
変数の型情報を判定するには？（$.isXxxxx／$.type）
$.isXxxxxメソッドを使って、変数のデータ型を判定する方法を解説。また、$.typeメソッドを使って、引数で指定されたオブジェクトの型を文字列として返す方法も解説する。
jQueryでは、変数のデータ型を判定するために、以下のような$.isXxxxxメソッドを提供しています（Xxxxxは判定するデータ型によって変わります）。以下に、具体的な例を見てみましょう。コメントはそれぞれの結果を示しています。
|
<!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 int_data = 15;
var str_data = '15';
var func_data = function() { /* hogehoge */ };
var empty_data = {};
var obj_data = { name: '山田理央', age: 17, sex: 'female' };
var array_data = [ 1, 2, 3 ];
var xml_data = $.parseXML('<data>123</data>');
var html_data = $.parseHTML('<data>123</data>');
console.log('$.isArray');
console.log($.isArray(array_data)); // true
console.log($.isArray(new Array())); // true
console.log($.isArray($('body'))); // false
console.log('$.isEmptyObject');
console.log($.isEmptyObject(empty_data)); // true
console.log($.isEmptyObject(new Object())); // true
console.log('$.isPlainObject');
console.log($.isPlainObject(obj_data)); // true
console.log($.isPlainObject(new Array())); // false
console.log('$.isFunction');
console.log($.isFunction(func_data)); // true
console.log($.isFunction($.each)); // true
console.log($.isFunction(window.alert)); // true
console.log('$.isNumeric');
console.log($.isNumeric(int_data)); // true
console.log($.isNumeric(str_data)); // true
console.log('$.isWindow');
console.log($.isWindow(this)); // false
console.log($.isWindow(window)); // true
console.log('$.isXMLDoc');
console.log($.isXMLDoc(xml_data)); // true
console.log($.isXMLDoc(html_data)); // false
});
</script>
</body>
</html>
|
それぞれのメソッドについて解説していきます。
$.isArrayメソッド
変数が配列であるかどうかを判定します。リテラル（[...]）、new演算子で生成した場合にも正しく配列と認識します。ただし、jQueryオブジェクトのように、中に要素群を維持した、いわゆる配列ライクなオブジェクトは配列とは見なされません。
$.isEmptyObject／$.isPlainObjectメソッド
$.isEmptyObjectメソッドは、Objectオブジェクトが空であるかどうかを判定します*1。引数には任意の値を指定できますが、Object以外のオブジェクトを渡した場合には、環境によって結果は変動する可能性がありますので、注意してください。
オブジェクトがObjectであるかどうかは、$.isPlainObjectメソッドで確認できます。
- *1 正しくは
for...in命令で走査できるプロパティを含まないかを確認しています。
$.isFunctionメソッド
引数が関数であるかどうかを判定します。匿名関数、jQueryメソッド、ネイティブなメソッドいずれに対しても、$.isFunctionメソッドがtrueを返していることが確認できます。
$.isNumericメソッド
引数が数値として解釈できるかを判定します。これは、厳密に数値だけでなく、数値と見なされるものにはtrueを返すということです。よって、ここでも'15'――クォート付きの文字列に対して、確かにtrue（数値である）を返していることが確認できます。
同じく'0xFF'、'1.44E3'のような文字列も$.isNumericメソッドではtrueです。
$.isWindowsメソッド
名前の通り、引数がwindowオブジェクト（＝ブラウザー環境でのグローバルオブジェクト）であるかどうかを判定します。現在の操作が、ブラウザーウィンドウに対するものかなどを確認するために利用できます。
$.isXMLDocメソッド
指定されたノードがXMLドキュメントそのもの、もしくはその配下のノードであるかを判定します。サンプルで変数xml_dataを得るために利用している$.parseXMLメソッドは、XML文字列をXMLDocumentオブジェクトに変換するためのメソッドです。ちなみに、変数html_dataを得るために利用している$.parseHTMLメソッドは、HTML文字列からノード配列を作成するためのメソッドです。
任意の型を文字列として取得する
特定の型を判定する$.isXxxxxメソッドに対して、指定された引数の型を文字列として返す$.typeメソッドもあります。コメントは、それぞれの結果を表します。
|
<!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() {
console.log($.type('jquery')); // string
console.log($.type(true)); // boolean
console.log($.type(12.3)); // number
console.log($.type(['peach', 'melon'])); // array
console.log($.type({ x: 10, y: 50 })); // object
console.log($.type(function() { })); // function
console.log($.type(new Date())); // date
console.log($.type(/[0-9]{3,}/g)); // regexp
console.log($.type()); // undefined
console.log($.type(String.ng_var)); // undefined
console.log($.type(null)); // null
});
</script>
</body>
</html>
|
標準のJavaScriptにも、似たような機能としてtypeof演算子がありますが、$.typeメソッドに比べると低機能です。プリミティブ型の判定は可能ですが、例えば配列や正規表現などのオブジェクトに対しては、全てobjectを返します。また、ラッパーオブジェクトに対しても、objectを返します。
|
console.log($.type(new String('hoge'))); // string
console.log(typeof(new String('hoge'))); // object
|
型を判定する際には、$.type／$.isXxxxxメソッドを利用することを強くお勧めします。
API：jQuery.isArray() カテゴリ：Utilities（ユーティリティ）
API：jQuery.isEmptyObject() カテゴリ：Utilities（ユーティリティ）
API：jQuery.isPlainObject() カテゴリ：Utilities（ユーティリティ）
API：jQuery.isFunction() カテゴリ：Utilities（ユーティリティ）
API：jQuery.isNumeric() カテゴリ：Utilities（ユーティリティ）
API：jQuery.isWindow() カテゴリ：Utilities（ユーティリティ）
API：jQuery.isXMLDoc() カテゴリ：Utilities（ユーティリティ）
API：jQuery.type() カテゴリ：Utilities（ユーティリティ）
※以下では、本稿の前後を合わせて5回分（第8回～第12回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
8. 要素のプロパティを取得／設定するには？（prop）
任意の要素に対してJavaScriptのプロパティを設定／取得する方法を解説。また、要素の属性を設定／取得できるattrメソッドと機能を比較する。
9. 要素の高さ／幅を設定／取得するには？（height／width／innerHeight／innerWidth／outerHeight／outerWidth）
任意の要素に対して幅／高さを設定／取得する方法を解説。また、height／width、innerHeight／innerWidth、outerHeight／outerWidthメソッドの使い分け方法も説明する。
10. 【現在、表示中】≫ 変数の型情報を判定するには？（$.isXxxxx／$.type）
$.isXxxxxメソッドを使って、変数のデータ型を判定する方法を解説。また、$.typeメソッドを使って、引数で指定されたオブジェクトの型を文字列として返す方法も解説する。
11. 配列の内容を順番に処理するには？（$.each）
$.eachメソッドを使って、配列やオブジェクトの内容を順に処理する方法を解説。またJavaScriptのevery／someメソッドを、jQueryの$.eachで代替する方法も説明する。
12. 配列の内容を順番に加工するには？（$.map）
$.mapメソッドを使って、配列やオブジェクトの内容を順に加工する方法を解説。Internet Explorer 8以前の環境ではJavaScriptのmapメソッドをこれで代替しよう。
