JavaScriptクィックスタート
白石俊平(あゆた)
2007-12-13 18:00:00
JavaScriptの変化は目覚ましいものがあります。この連載ではJavaScriptの基礎からはじめ、Dojoのソースコードリーディングによる深い理解までによって、JavaScriptを理解することを目指します。
Ajaxの登場は、JavaScriptと言う言語にとって凄まじい変革をもたらしました。
それまでは、Webページに多少の動きを持たせて利便性を向上する、といった程度でしか認知されていなかったJavaScriptですが、今やそうではありません。次のような理由から、ブラウザ上で動作するリッチクライアントを作成するための、最も一般的な言語として捉えられています。
- 主要なブラウザのほぼ全てが標準でサポートし、しかも最初から有効になっている
- 厳しいセキュリティの下で動作するため、ユーザにとって安全
- 簡潔で柔軟な言語仕様により、短いコードで多くを実現できるうえ、可読性も高い
- フレームワークの整備による生産性の劇的な向上
- 非常に長い歴史を持つ技術であり、開発者の人口が非常に多い
しかし、近年におけるJavaScriptの変化は目覚ましいものがあります。筆者自身のJavaScriptコードを見ても、この数年で全くスタイルが変わりました。
例えば、以下のようなボタンがあるとして、body.onload() のタイミングでイベントハンドラをつけ加える、と言う処理を考えてみましょう。
このボタンがクリックされたら、ボタンのラベル自体が変化すると言う処理を行います。むかーしむかしは、以下のようにしていました。
function init() {
var button = document.forms[0].bt;
button.onclick = button_clicked;
}
function button_clicked() {
var button = document.forms[0].bt;
button.value = "クリックしてくれてありがとう!";
}
そのうち、以下のように。
function init() {
var button = document.getElementById("bt");
// IEではaddEventListenerは動かない
button.addEventListener("click", function() {
button.value = "クリックしてくれてありがとう!";
}, true);
}
今では、例えばPrototype.jsというフレームワークを使えばこんな風です。
function init() {
$("bt").observe("click", function() {
$("bt").value = "クリックしてくれてありがとう!";
});
}
Dojo Toolkitというフレームワークを使うならこんな感じ。
function init() {
dojo.connect(dojo.byId("bt"), "onClick", function(ev) {
ev.target.value = "クリックしてくれてありがとう!";
});
}
これほどコーディングスタイルに変化が起きているのに、JavaScriptの言語仕様自体は、2000年以前からほとんど変更されていないのです。実に驚くべきことではないでしょうか。
- ホワイトペーパー

