maesblog

デバッグ時に使いたいjQueryのユーティリティ関数について

jQuery Advent Calendar 2013の20日目の記事になります。衝動的にエントリーしてしまいましたが、意外とネタがありません。しばらく『サイ本』をパラパラと捲っておりました。その中で何となく目についたjQueryのユーティリティ関数のことでも書いてみることにします。ただユーティリティ関数のこと全部書くと膨大な量になりそうなので、プラグインなどの開発の際のデバッグ時に使いたいjQueryのユーティリティ関数に絞ってまとめてみます。

ブラウザテスト用

jQuery.browser

ブラウザのベンダとバージョンを示すプロパティ。ブラウザがIEの場合、msieプロパティがtrueになります。Safari、Chromeの場合はwebkitプロとティがtrueになり、Firefoxの場合はmozillaプロパティがtrueになり、Operaの場合はoperaプロパティがtrueになります。また、versionプロパティには、ブラウザのバージョン番号が格納されます。

// ブラウザのバージョンを取得する場合
$.browser.version // => 31.0.1650.63

// ブラウザ固有のバグに対処する場合
if ($.browser.mozilla && parseInt($.browser.version) < 25) {

  // Firefoxのバージョン24以下のバグへの対処を行う

}

便利なjQuery.browserプロパティですが、UserAgentの偽装が簡単にできてしまうということもあり、残念ながらjQuery1.9で削除されています。代わりに以下で紹介するjQuery.supportを使用するか、jQuery Migrate pluginを読み込んで使用する必要があります。

jQuery.support

jQuery.browserはnavigator.userAgentの値によってブラウザの判別を行うプロパティでしたが、jQuery.supportはブラウザのサポートする機能やバグを示すプロパティとなります。機能を実装する際に、プラウザの種類やバージョンによって実装を考えるというより、ブラウザのサポートする機能に基づいて実装を考えることの方がより現実的ということから、jQuery.supportプロパティの使用が推奨されるようになった模様です。

試しに、Chrome 31.0.1650.63で$.supportしてみたところ以下のような結果となりました。

$.support

/*
  ajax: true
  appendChecked: true
  boxModel: true
  boxSizing: true
  boxSizingReliable: true
  changeBubbles: true
  checkClone: true
  checkOn: true
  cors: true
  cssFloat: true
  deleteExpando: true
  doesNotIncludeMarginInBodyOffset: true
  enctype: true
  focusinBubbles: false
  getSetAttribute: true
  hrefNormalized: true
  html5Clone: true
  htmlSerialize: true
  inlineBlockNeedsLayout: false
  leadingWhitespace: true
  noCloneChecked: true
  noCloneEvent: true
  opacity: true
  optDisabled: true
  optSelected: true
  pixelPosition: true
  radioValue: true
  reliableHiddenOffsets: true
  reliableMarginRight: true
  shrinkWrapBlocks: false
  style: true
  submitBubbles: true
  tbody: true
*/

jQuery.supportに含まれるテストの一覧とその詳細は以下をご確認ください。

なお、jQuery.supportのプロパティの多くは、jQuery内部で使われる低レベルの情報であり、公式ドキュメントではjQuery.supportを利用する代わりに、 Modernizrのような別のライブラリの利用を薦めています。

各種検証用

jQuery.contains(a, b)

ドキュメント要素aが要素bを含む場合のみtrueを返します。

var foo = document.documentElement;
var bar = document.body;
$.contains(foo, bar); // => true
$.contains(bar, foo); // => false

jQuery.isArray(obj)

引数objがArrayオブジェクトである場合のみtrueを返します。

var foo = [];
$.isArray(foo); // => true

var foo = "bar";
$.isArray(foo); // => false

jQuery.isEmptyObject(obj)

引数objに列挙可能なプロパティが存在しない場合のみtrueを返します。

var foo = {};
$.isEmptyObject(foo); // => true

var foo = {bar: "baz"};
$.isEmptyObject(foo); // => false

jQuery.isFunction(obj)

引数objがFunctionオブジェクトである場合のみtrueを返します。

var foo = function() {};
$.isFunction(foo); // => true

function foo() {}
$.isFunction(foo); // => true

var foo = { bar: function() {} };
$.isFunction(foo); // => false

var foo = "function";
$.isFunction(foo); // => false

jQuery.isPlainObject(obj)

引数objが特化型やオブジェクトクラスのインスタンスではなく、オブジェクトリテラルで生成された「プレーン」なオブジェクトの場合のみtrueを返します。

var foo = {};
$.isPlainObject(foo); // => true

var foo = {bar: "baz"};
$.isPlainObject(foo); // => true

var foo = "bar";
$.isPlainObject(foo); // => false

jQuery.isXMLDoc(obj)

引数objがXMLドキュメントかXMLドキュメントの要素である場合のみtrueを返します。

var foo = "<bar></bar>";
var baz = $.parseXML(foo);
$.isXMLDoc(baz); // => true

var foo = "<bar></bar>";
$.isXMLDoc(foo); // => false

var foo = $("div");
$.isXMLDoc(foo); // => false

その他

jQuery.error(msg)

引数msgを含む例外を発行します。この関数はプラグインから呼び出すこともできれば、デバッグ時にオーバーライドすることもできます（例えば、$.error = alertなど）。

$.error("エラーです！");
$.parseJSON("JSONではありません"); // => エラーです！

jQuery.noConflict()

prototype.jsなど別のJavaScriptライブラリと一緒にjQueryを使う場合、「$」が競合してエラーとなる場合があります。jQuery.noConflict()は、jQueryをロードする前に「$」を値に戻し、jQueryを返します。そうすることで別のライブラリに「$」を譲り渡すことができます。

jQuery.noConflict();
$("div"); // => error
jQuery("div"); // => OK

var j$ = jQuery;
j$("div"); // => OK

なお、.ready()メソッドに指定するコールバック関数の引数に「$」を渡すことで、そのコールバック関数の中では「$」を使うことができるようになります。

jQuery.noConflict();
$("div"); // => error

jQuery.ready(function($) {
  $("div"); // => OK
});

また、使用する機会はほとんどないと思いますが、引数にtrueを指定することで、「jQuery」についても値に戻し破棄することができます。

jQuery.noConflict(true);
$("div"); // => error
jQuery("div"); // => error

jQuery.ready(function($) {
  $("div"); // => error
}); // => error

今回紹介したユーティリティ関数は、jQueryということでほぼ全てのブラウザで同じように動作します。なのでデバッグにも十分使えるものと思います。特にjQueryプラグインの開発時には使いたいところです。今回の内容については、主に以下の書籍を参考にしています。

以上でjQuery Advent Calendar 2013 20日目の記事は終わります。明日の21日目はshinichi.kogisoさんとなります。

関連記事

コメント

  • 必須

コメント