みんなもっと JavaScript Shell 使おうぜ!!

今日の若手IT勉強会でちょっとしたデモをやるのに使ったのですが、そんなに知名度が高くなかったみたいなので紹介。簡単に説明するとブラウザ上で動作する対話式JavaScript実行環境です。Firebugのスクリプトコンソールと同等の機能ですが、シェルっぽい動作が私は好きなので使っています。フォントも大きくできるので、発表か何かでデモを見せる時にも活用できます。

JavaScript Shell
http://www.squarefree.com/shell/

Firefoxの場合はブックマークレット版を使えば、開いているページのコンテキスト上で任意のコードが実行できます。

機能(一部)

• JavaScriptの実行(入力してEnterキー)。複数行入力する場合はShift+Enterで改行
• TABキーでプロパティ名の補完
• ↑↓キーで実行履歴の参照
• ans で前回の評価結果の参照
• print で内容の表示。例:for(var i=0; i<10; i++){print(i*i)}
• props でオブジェクトのプロパティの表示*1。例:props(window.document.documentElement)
• load で外部スクリプトのロード

実行例

twitterAPIのテスト

>document.location
http://twitter.com/

>jQuery // jQueryの存在確認
function (D, E) {
  return new (n.fn.init)(D, E); 
}

>$
function (D, E) {
  return new (n.fn.init)(D, E); 
}

>$ == jQuery // $がjQueryか確認
true

>$.getJSON("http://twitter.com/statuses/friends_timeline.json",
>  function(data){
>    $.each(data, function(i, status){
>      print(status.id);
>      print(status.user.name);
>      print(status.user.screen_name);
>      print(status.text);
>      print(status.created_at);
>      print("-----------------------------");
>      
>    });
>  }
>);

1754743256
圧縮新聞
asshuku
さいたま市長選は１０日午後２時から札幌市東区北１９条東２２の５のカドキホールで。
Sun May 10 14:15:02 +0000 2009
-----------------------------
//...以下略
//取得した件数だけtwitterAPIの取得結果が表示される

mixi上でjQueryを使ってみる

>document.location
http://mixi.jp/home.pl

>jQuery
ReferenceError on line 1: jQuery is not defined

>load('http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js')
Loading http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js...

>jQuery
function (E, F) { 
  return new (o.fn.init)(E, F); 
}

>jQuery.browser.mozilla
true

飲み代のワリカン

>Math.floor(24000/7)
3428

>confirm('一人3500円でいい??')
// OKならtrue, キャンセルならfalse

他にも

参考書に載っているちょっとしたコードを実行したい時や、Dateオブジェクトの使い方どうだっけ?という時にも役に立ちます。ブラウザ間の動作の違いなんかもすぐにわかるので便利。是非使ってみてください。

*1:Methods, Fields, Methods of prototype, Fields of prototype をを分けて表示してくれる