JavaScriptクィックスタート

白石俊平(あゆた)
2007-12-13 18:00:00
  • このエントリーをはてなブックマークに追加

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

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]