Firebugにみる「フィーチャーディテクションプログラミング」の使い方

~robcee/ more than just sandwiches

WebサイトやWebアプリケーションの開発ツールとしてFirefoxのアドオン「Firebug」は揺るぎない位置にある。Firefoxで効率のいいデバックを実施できるツールであり、その恩恵にあずかっている開発者は多い。特にFirebugの提供するconsole機能は便利なものだ。この機能がブラウザに組み込まれてくれればいいと思っている開発者は少なくないだろう。

いくつかの機能はすでにFirefoxにも取り込まれている。Firebugの開発者が自身のブログ~robcee/ - console.foo() and youに、console機能を使ったデバッグコードをWebページに組み込む場合のコーディング例を「フィーチャーディテクション」をベースにして紹介したものがあり、コーディングの際の参考になる。まず、もっと最初に利用するデバッグコードは次のようなもの。

console.log("ログメッセージ");

printfデバッグと同じスタイルだ。ブログではさらに工夫したサンプルとして、次のように指定したメソッドの実行時間を測定してログとして出力するといった処理を紹介している。

// 第1引数に指定したメソッドの実行時間と結果をログに出力
// http://antennasoft.net/robcee/2010/11/29/console-foo-and-you/ より抜粋
function myLogFunction(method, message) {
  console.time(method.toString());
  var result = method();
  console.timeEnd(method.toString());
  console.log(message, result);
}

こうしたデバッグコードをWebページに埋め込む場合、対応していないブラウザで問題がでないように条件文を加えることになる。もっともシンプルな条件文は次のとおり。

if (window.console) {
  ...
}

これではブラウザが実装しているconsoleなのかFirebugが持っているconsoleなのか区別がつかないので、さらに次の条件を加えると、Firebug限定の機能が利用できるようになる。

if (window.console && window.console.firebug) {
  ...
}

ここから先がポイントとなる。これまではブラウザやツールなどを特定して利用する処理を切り替える方法が採用されることが多かったが、この方法は多種多様な組み合わせに対応するのが難しいとして最近ではあまり推奨される方法とされていない。

かわりに最近では「フィーチャーディテクション」と呼ばれる方法を採用することが推奨されている。「フィーチャーディテクション」は対象となるブラウザやツールを検出するのではなく、利用したい「機能」を検出して処理を振り分けるというもの。~robcee/ - console.foo() and youに掲載されているコードを「フィーチャーディテクション (機能検出式)」にすると最終的に次のようになる。

if ("console" in window && "time" in window.console) {
  ...
}

この記述であればほかのブラウザがconsoleで同様の機能をサポートした場合にそのまま利用しやすくなる。~robcee/ - console.foo() and youに掲載されているサンプルは、どのようなコーディングが「フィーチャーディテクション」になるのかをわかりやすく示すサンプルとして参考になる。