自転車で通勤しましょ♪ブログ

JavaScriptの開発で必須であるFirebugですが、自分は使いこなせてなかったことを痛感しました…。AJAXの通信を見張るのと、DOM要素のCSSチェックとかに使ってたので、これで使いこなせてると思ってたけど、console.logとかあったんやなぁ～。consoleオブジェクトの素晴らしさを知ったら、alertとか使わんで済むから助かる～！！

// ログを出すのみ
console.log("test");

// sprintfのように置換して出力もできる！
console.log("Hello, %s", "patorash"); // Hello, patorash

// 以降は、ログを出し、ソースへのリンクも貼る
console.debug("test");
// infoマーク付き
console.info("test");
// warnマーク付き
console.warn("test");
// error扱い
console.error("test");

// 条件に合致しない場合だけコンソールログ出力（unittestに使える？）
var test = "test";
console.assert(test == "hoge", "test != 'test'ではない", test);

まだまだ色々できるみたいだけれど、自分が使いそうなのはこれくらいかな。

自分が最も使いそうな使い方。（prototype.jsで）

var ary = $w('php javascript css ruby java');
console.debug(Object.inspect(ary));

ソースを全て載せるわけにはいかないが、
scriptaculousを使っていたら、下記のソースのようなことが起きた。

/**
 * エフェクト付きでfoo領域を消して、bar領域を表示する
 */
function foo_blindup(){
  Effect.BlindUp('foo', { // fooが最終的には表示されなくなる
    afterFinish: function(){
      Eeffect.BlindDown('bar');
    }
  });
  $('foo_ul').update(''); // foo領域内のfoo_ul領域内をクリアする
}

/**
 * foo領域が表示されていれば、処理を行う
 */
function foo_exec(){
  if($('foo').visible()){
    // fooが表示されているときの処理
    $('foo_ul').update('<li>test</li>');
  }
  // 他にやりたい処理
}

// fooを消して、barを表示する
foo_blindup();
// fooが表示されていないので、if文内の処理はされないはず！
foo_exec();
// ところが、alertで<li>test</li>が出る。
alert($('foo_ul').innerHTML);

原因を探るべく、以下のように修正

// fooを消して、barを表示する
foo_blindup();
// この時点で、alertの中身は空
alert($('foo_ul').innerHTML);
// あとは変わらずに処理
foo_exec();
// ここでも、alertの中身は空に！！
alert($('foo_ul').innerHTML);

foo_exec()の前にalertを出すと処理をパスし、alertを出さないと処理される…。
なんだこれは？？？と小一時間悩んだ末に気付いたのが、
BlindUp処理が完了し終わってない間にfoo_exec()がコールされているのでは？ということだった。つまり、alertを出した場合は、alertを出している間にBlindUp処理が終わり、foo_exec()がコールされてもif文内の処理が行われないということだ。なんということだ。

結局、以下のように修正。

/**
 * foo領域が表示されていれば、処理を行う
 */
function foo_exec(){
  if($('foo').visible()){
    // fooが表示されているときの処理
    $('foo_ul').update('<li>test</li>');
  }
  // 他にやりたい処理
}

// fooを消して、barを表示する
Effect.BlindUp('foo', { // fooが最終的には表示されなくなる
    afterFinish: function(){
　　　　  $('foo_ul').update(''); // foo領域内のfoo_ul領域内をクリアする
      Eeffect.BlindDown('bar');
　　　　　　foo_exec();  // afterFinish後なので、foo領域はdisplay:none;になっている
    }
}

Prototype & script.aculo.us JavaScriptライブラリによるAjaxアプリケーション開発
	栗山 淳(監訳) おすすめ平均 寄り道せずにこれで決まり prototypeはもはや言語? JavaScriptデファクトスタンダードライブラリのバイブル的１冊。 作者の独断 Amazonで詳しく見る by G-Tools

仕事でバリバリ使っています。prototype.js。
prototype.jsを使うとRubyチックにコーディングできる！でも俺Ruby使いじゃないし！
そんな俺でもこのprototype.jsのコーディングのしやすさにはマジ惚れる。

最初、この本を買ったときは、prototype.jsとscriptaculousの使い方がボチボチわかればいいやーという程度の期待感であったが、読めば読むほどというか、使えば使うほど、実はすげーじゃないか！？ということが判明。いやそれは俺が気付いてなかっただけなのかもしれないけれどもさ。

まだよくわかってない部分も多々あるけれど（bindとか…）、
とりあえずprototype.jsを使い始めるには、この本が一番オススメだと思います！
ただし、プログラマー向けだということは確実ですけどね！！