Tech：JavaScript Tools

JavaScript用開発ツール

JavaScriptの開発で便利なツールの紹介です。最近ずいぶん手抜きになり紹介だけでのページです。

Ajaxライブラリ(Ajaxに限ったわけではないけれど・・・)

ライブラリ概要 Ajax
jQuery

とても軽くてわかりやすいライブラリ（主観）。数多く Plug-in が用意されているのでとても便利です。ユーザーインターフェースを強化するための UIライブラリも用意されています。
$.ajax({
  url: "ajax.html",
  type: "GET",
  success: function(req){
    $("#id").html(req);
  }
});
Prototype

とても有名なライブラリ。なんだその紹介は・・・。JavaScriptライブラリとして老舗のような存在のライブラリです。
new Ajax.Request(
  "ajax.html", {
    onSuccess: function(req){
      $("id").innerHTML = req.responseText;
    }
  }
);
script.aculo.us
アニメーションやドラッグアンドドロップ操作などユーザーインターフェースを強化するためは非常に多機能なライブラリ。Prototypeを基本的な部品のライブラリと利用しているため、Prototypeライブラリが必要。
Yahoo! User Interface Library

Yahoo!が公開しているライブラリ。基本的な部分からユーザーインターフェース、カレンダーや計算機やカルーセルといった widget風の部品まで揃ったライブラリ。ちょっと重いのが難点。Version 3.0では速くなるのかな？
YAHOO.util.Connect.asyncRequest(
  "GET",
  "ajax.html", {
    success: function(req){
      YAHOO.util.Dom.get("id").innerHTML
          = req.responseText;
    }
  }
);
Dojo Toolkit

コア（配列、文字列、DOM操作、XMLHttpRequestなど）、diｊit（ユーザーインターフェース）に分かれたライブラリ
dojo.xhrGet({
  url: "ajax.html",
  load: function(req){
    dojo.byId("id").innerHTML = req;
  }
});
Ext JS

グリッド、タブ、ウィンドウ、フォーム、ツールバーといった Webページで利用しそうなモジュールが用意されたライブラリ。サンプルもたくさん用意されておりドキュメントが充実している。商用版もあるぐらいだからかな・・・
Ext.Ajax.request({
  url: "ajax.html",
  success: function(req){
    Ext.DomHelper.overwrite("id", req.responseText);
  }
});
MochiKit
非同期通信、DOM、文字列操作、エフェクト、など機能ごとに小さくまとまったライブラリ
MooTools

文字、配列、イベント、HASH、DOM、エフェクト、Ajax、JSONとモジュールごとにまとめられたライブラリ
new Request({
  url: "ajax.html",
  method: "get",
  onSuccess: function(req){
    $("id").innerHTML = req;
  }
}).send();
Adobe Spry

Adobe が提供しているフレームワーク
Spry.Utils.loadURL(
  "GET",
  "ajax.html",
  true,
  function(req){
    Spry.Utils.setInnerHTML("id",
        req.xhRequest.responseText);
  }
);
ほかにもたくさんあるけどこれぐらいで。。。

ライブラリ	概要	Ajax
jQuery	とても軽くてわかりやすいライブラリ（主観）。数多く Plug-in が用意されているのでとても便利です。ユーザーインターフェースを強化するための UIライブラリも用意されています。	$.ajax({ url: "ajax.html", type: "GET", success: function(req){ $("#id").html(req); } });
Prototype	とても有名なライブラリ。なんだその紹介は・・・。JavaScriptライブラリとして老舗のような存在のライブラリです。	new Ajax.Request( "ajax.html", { onSuccess: function(req){ $("id").innerHTML = req.responseText; } } );
script.aculo.us	アニメーションやドラッグアンドドロップ操作などユーザーインターフェースを強化するためは非常に多機能なライブラリ。Prototypeを基本的な部品のライブラリと利用しているため、Prototypeライブラリが必要。
Yahoo! User Interface Library	Yahoo!が公開しているライブラリ。基本的な部分からユーザーインターフェース、カレンダーや計算機やカルーセルといった widget風の部品まで揃ったライブラリ。ちょっと重いのが難点。Version 3.0では速くなるのかな？	YAHOO.util.Connect.asyncRequest( "GET", "ajax.html", { success: function(req){ YAHOO.util.Dom.get("id").innerHTML = req.responseText; } } );
Dojo Toolkit	コア（配列、文字列、DOM操作、XMLHttpRequestなど）、diｊit（ユーザーインターフェース）に分かれたライブラリ	dojo.xhrGet({ url: "ajax.html", load: function(req){ dojo.byId("id").innerHTML = req; } });
Ext JS	グリッド、タブ、ウィンドウ、フォーム、ツールバーといった Webページで利用しそうなモジュールが用意されたライブラリ。サンプルもたくさん用意されておりドキュメントが充実している。商用版もあるぐらいだからかな・・・	Ext.Ajax.request({ url: "ajax.html", success: function(req){ Ext.DomHelper.overwrite("id", req.responseText); } });
MochiKit	非同期通信、DOM、文字列操作、エフェクト、など機能ごとに小さくまとまったライブラリ
MooTools	文字、配列、イベント、HASH、DOM、エフェクト、Ajax、JSONとモジュールごとにまとめられたライブラリ	new Request({ url: "ajax.html", method: "get", onSuccess: function(req){ $("id").innerHTML = req; } }).send();
Adobe Spry	Adobe が提供しているフレームワーク	Spry.Utils.loadURL( "GET", "ajax.html", true, function(req){ Spry.Utils.setInnerHTML("id", req.xhRequest.responseText); } );

デバッグ

昔は JavaScript のデバッグなんてしたくなかったけど、最近はとても便利なツールが揃っているのでデバッグがしやすくなりました。

プラグイン URL 概要

Firebug http://getfirebug.com/ Firefox の Add-ons です。Firebugは、JavaScriptに限ったデバッグツールではなく、Web ページの CSS、HTML、JavaScript をリアルタイムに編集し効果を確かめることができます。javaScriptで利用している変数やオブジェクトのモニタリング、ステップ実行などデバッグ機能も充実しています。

CodeBurner http://tools.sitepoint.com/codeburner/ Firebugの Referenceパネルとして、SitePointが提供している HTMLリファレンス、CSSプロパティリファレンスなどを付加します。

Venkman JavaScript Debugger http://www.mozilla.org/projects/venkman/ Firefox の Add-ons です。Netscape版もあるけどまいいか。。JavaScriptのデバッグを行うのに便利なツールです。ステップ実行、ブレークポイント、変数のモニタリング、プロファイリングなどデバッガとしての機能が充実しています。

Drosera http://webkit.org/blog/61/introducing-drosera/ Safari（WebKitベースブラウザ）用の JavaScriptデバッガです。

Internet Explorer Developer Toolbar http://www.microsoft.com/... Firebugに似た IE用のモジュール。JavaScriptのデバッグがこれでうまくできるかというと・・・・微妙

Firefox: Firebug, Page Speed, YSlow

Safari: Web Inspector

Google Chrome: Developer Tools

Opera: Dragonfly

Internet Explorer 6-7: Developer Toolbar

Internet Explorer 8-10: Developer Tools

プラグイン	URL	概要
Firebug	http://getfirebug.com/	Firefox の Add-ons です。Firebugは、JavaScriptに限ったデバッグツールではなく、Web ページの CSS、HTML、JavaScript をリアルタイムに編集し効果を確かめることができます。javaScriptで利用している変数やオブジェクトのモニタリング、ステップ実行などデバッグ機能も充実しています。
CodeBurner	http://tools.sitepoint.com/codeburner/	Firebugの Referenceパネルとして、SitePointが提供している HTMLリファレンス、CSSプロパティリファレンスなどを付加します。
Venkman JavaScript Debugger	http://www.mozilla.org/projects/venkman/	Firefox の Add-ons です。Netscape版もあるけどまいいか。。JavaScriptのデバッグを行うのに便利なツールです。ステップ実行、ブレークポイント、変数のモニタリング、プロファイリングなどデバッガとしての機能が充実しています。
Drosera	http://webkit.org/blog/61/introducing-drosera/	Safari（WebKitベースブラウザ）用の JavaScriptデバッガです。
Internet Explorer Developer Toolbar	http://www.microsoft.com/...	Firebugに似た IE用のモジュール。JavaScriptのデバッグがこれでうまくできるかというと・・・・微妙

テストとバリデーション

ツール URL 概要

JsUnit http://www.jsunit.net/
JavaScript ユニットテスト用フレームワーク。

JSLint http://jslint.com/ Webベースの JavaScriptコードチェッカー。

Crosscheck http://www.thefrontside.net/crosscheck
JavaScript テスト用フレームワーク。ブラウザを使わずに単独で動作する。Javaで書かれている。

YUI Test http://developer.yahoo.com/yui/yuitest/
Yahoo UI ライブラリのテスト用フレームワーク。

ツール	URL	概要
JsUnit	http://www.jsunit.net/	JavaScript ユニットテスト用フレームワーク。
JSLint	http://jslint.com/	Webベースの JavaScriptコードチェッカー。
Crosscheck	http://www.thefrontside.net/crosscheck	JavaScript テスト用フレームワーク。ブラウザを使わずに単独で動作する。Javaで書かれている。
YUI Test	http://developer.yahoo.com/yui/yuitest/	Yahoo UI ライブラリのテスト用フレームワーク。

コードの最適化と最小化

ツール URL 概要

JS Minifier http://fmarcia.info/jsmin/test.html
Webベースの JavaScriptコード最小化ツール。

JSMIN http://www.crockford.com/javascript/jsmin.html もっとも有名なJavaScriptコード最小化ツール。

YUI Compressor http://developer.yahoo.com/yui/compressor/
Yahoo!が公開しているJavaScriptコード最小化ツール。CSSファイルも最小化する機能がある。Javaで書かれている。

ShrinkSafe http://dojotoolkit.org/docs/shrinksafe
もともと Dojoライブラリを最小化するために作られたツール。Javaで書かれている。

ツール	URL	概要
JS Minifier	http://fmarcia.info/jsmin/test.html	Webベースの JavaScriptコード最小化ツール。
JSMIN	http://www.crockford.com/javascript/jsmin.html	もっとも有名なJavaScriptコード最小化ツール。
YUI Compressor	http://developer.yahoo.com/yui/compressor/	Yahoo!が公開しているJavaScriptコード最小化ツール。CSSファイルも最小化する機能がある。Javaで書かれている。
ShrinkSafe	http://dojotoolkit.org/docs/shrinksafe	もともと Dojoライブラリを最小化するために作られたツール。Javaで書かれている。

その他のライブラリ

今やたくさんありすぎて何を紹介すればいいのやら... (Lightbox, Plotkit, AutoSuggest, GlassBox, SWFObject, Starboxと名前だけ羅列・・・）