JavaScriptクィックスタート

　Ajaxの登場は、JavaScriptと言う言語にとって凄まじい変革をもたらしました。

　それまでは、Webページに多少の動きを持たせて利便性を向上する、といった程度でしか認知されていなかったJavaScriptですが、今やそうではありません。次のような理由から、ブラウザ上で動作するリッチクライアントを作成するための、最も一般的な言語として捉えられています。

• 主要なブラウザのほぼ全てが標準でサポートし、しかも最初から有効になっている
• 厳しいセキュリティの下で動作するため、ユーザにとって安全
• 簡潔で柔軟な言語仕様により、短いコードで多くを実現できるうえ、可読性も高い
• フレームワークの整備による生産性の劇的な向上
• 非常に長い歴史を持つ技術であり、開発者の人口が非常に多い

　しかし、近年におけるJavaScriptの変化は目覚ましいものがあります。筆者自身のJavaScriptコードを見ても、この数年で全くスタイルが変わりました。

　例えば、以下のようなボタンがあるとして、body.onload() のタイミングでイベントハンドラをつけ加える、と言う処理を考えてみましょう。

<form>
  <input type="button" id="bt" name="bt" value="クリックしてください!">
</form>

　このボタンがクリックされたら、ボタンのラベル自体が変化すると言う処理を行います。むかーしむかしは、以下のようにしていました。

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年以前からほとんど変更されていないのです。実に驚くべきことではないでしょうか。