天野 仁史(あまの ひとし)
サイボウズ・ラボ株式会社に勤めるWebプログラマ。出身は石川県金沢市。21歳でプログラミングに出会い,IT戦士になることを決意。それからというもの,寝ても覚めてもプログラムを書き続け今に至る。はてなでamachangというidでブログを書いてます。

 最近,「とんがった」プログラマの間ではJavaScriptがちょっとしたブームです。あちこちの書店で,JavaScriptの書籍を見かけるようになりました。「はてブのホッテントリ」*1にも,よくJavaScriptの記事が入っています(図1)。


図1●ある日の「はてブのホッテントリ」。赤い四角で囲んだ部分がJavaScript関連のブックマーク
図1●ある日の「はてブのホッテントリ」。赤い四角で囲んだ部分がJavaScript関連のブックマーク

 その人気を象徴的に示しているが,Shibuya.js*2という団体が開催しているJavaScript関連のイベント「Technical Talk」です。1回目は2006年4月,2回目は6月に開催されましたが,いずれの回も予約が殺到し,たった1日で席が埋まってしまいました。これには「JavaScriptの人気はここまで来ているのかぁ」と,とても驚かされました。

 そう,今やJavaScriptは最大のモテ言語なのです。これを勉強すれば,きっとあなたもモテモテ間違いなし。JavaScriptに興味がある方も,ない方も,たった今興味を持ってしまった方も,少しだけお付き合いください。これから,筆者がこれまで学んだJavaScriptのいいところを余すことなく紹介していきましょう。

いいところ その1
結果がすぐに目に見える

 まず,筆者がJavaScriptにのめりこんでいくきっかけになった出来事を紹介します。今からちょうど1年半前,筆者は「XMLマスター:ベーシック」というXML関連技術の資格試験のため,XMLを勉強していました。そこで,XMLにはDocument Object Model(DOM)という共通のインタフェースがあることを知りました。XMLやHTMLが持つ論理的な木構造へのアクセスを行うためのインタフェースです。プログラミング言語に対して中立的に設計されているので,様々な言語から扱えます。

 そんなとき「JavaScriptはDOMを簡単に扱える」と聞き,触ってみようと思い立ったのです。それは,衝撃的な体験でした。JavaScriptでDOMを使ってHTMLの構造を変えると,その場で次々とWebページの内容が変わっていきます。それ自体は当たり前のことなのですが,「結果が目に見える」ことの威力を思い知りました。

 JavaScriptに慣れてきたら,DOMを使ってWebページの内容を思うままに変えてみてください。きっと「楽しい!」と感じると思います。すぐに目に見える変化を楽しめることは,プログラミング言語にとって重要な要素だと思います。

いいところ その2
すぐに始められる

 筆者がJavaScriptにのめりこむことができた理由はもう一つあります。それは,すぐに始められるということです。JavaScriptを始めるために,いろいろ準備する必要はありません。ただ,JavaScriptを埋め込んだHTMLファイルを用意し,ブラウザで開くだけでいいのです。

 ほとんどのプログラミング言語は,その言語を学び始めるときには相当なモチベーションが必要です。まず,実行環境と開発環境を整備しなければ,プログラムを書き始めることはできません。さらに,言語によっては実行の前にコンパイルが必要な場合もあります。こうした手間をいとわない覚悟が求められます。

 これに比べると,JavaScriptはかなり簡単です。テキスト・エディタで「<script>alert('Hello World!!');</script>」と書き,「.html」という拡張子を持つファイルとして保存してください。このファイルをブラウザで開けば,それだけでJavaScriptのコードが実行されてダイアログが表示されます(図2)。

図2●「<script>alert('Hello World!!');</script>」をWebブラウザで実行した結果,表示されるダイアログ
図2●「<script>alert('Hello World!!');</script>」をWebブラウザで実行した結果,表示されるダイアログ

いいところ その3
すぐに自慢できる

 プログラミングを学んでいると,すぐにぶつかる大きな壁があります。それは,倦怠期です。使っているプログラミング言語に飽きてくるのです。筆者も,人一倍の飽き性です。しかし,JavaScriptには,にわかプログラマを飽きさせない大きな特徴がありました。

 それは,手っ取り早く「それなりにすごいもの」が作れ,しかも,それをすぐに人に自慢できることです。JavaScriptはWebサーバーに置けばすぐに公開できます。直接ファイルとして渡すのも簡単です。作ったものをすぐに友達や気になるあの子に自慢できるのです。

 一般に,プログラマは自己顕示欲が強いものです。プログラミング言語の勉強を続けていくには,「人に見られている感」はとても大切な要素だと思います。

いいところ その4
便利な道具として使える

 Webブラウザのアドレスバー(URLが表示されている個所)に,javascript:と打ち込むと,そのあとに続くJavaScriptのコードをすぐに実行できます。さらに,これをブックマークとして登録しておくと,いつでもブックマークとしてプログラムを呼び出せます。この機能を「ブックマークレット」と呼びます。これにより,JavaScriptをブラウザのインタフェースとして使うことができます。

 例えば,あるページにとてもたくさんのチェックボックスがあり,あなたはそのすべてをチェックしたいと思っていたとします(図3左)。しかし,不便なことに「すべて選択」するためのインタフェースはWebページには用意されていません。さて,困りました。ここでブックマークレットの出番です。

図3●チェックリストの多いフォーム(左)もブックマークレットで一発解決!(右)
図3●チェックリストの多いフォーム(左)もブックマークレットで一発解決!(右)
[画像のクリックで拡大表示]

 まず,Webページ内のチェックボックスをすべてチェックするJavaScriptのコードを書きます(リスト1)。次に,このコードを1行にしてブックマークレット化します。(リスト2)。最後に「void(0);」を追加しているのは,ブラウザがjavascript:を評価したときに,最後の1文の評価結果がundefined以外の値だった場合はページが遷移してしまうためです。

var nl = document.getElementsByTagName('input');
for (var i = 0; i < nl.length; i ++) {
 var e = nl[i];
 if (e.type == 'checkbox') {
  e.checked = true;
 }
}
リスト1●Webページ内のチェックボックスをすべてチェックするJavaScriptのコード

javascript:var nl = document.getElementsByTagName('input'); for
(var i = 0; i < nl.length; i ++) { var e = nl[i]; if (e.type ==
'checkbox') { e.checked = true; } } void(0);
リスト2●リスト1をブックマークレット化したもの(実際には1行)

 それではさっそく試してみましょう(図3右)。すべてのチェックボックスが選択されるはずです。どうですか? 便利だと思いませんか? JavaScriptは,使いこなすことで,日々のWebブラウジングを快適にする便利な道具になります。

最大のいいところ=「拡張性」

 ここまでJavaScriptの四つのいいところを紹介してきましたが,最大のものがまだ残っています。「拡張性」です。JavaScriptの最大の特徴は,ユーザーがプログラムを通して言語自体を自由に拡張できる点です。

 例として,配列のすべての要素を走査するようなプログラムを考えてみましょう。例えば,Perlであれば「foreach」という構文を使って簡単に記述できます(リスト3)。一方,JavaScriptでは,このような処理はforループを使って行う必要があります(リスト4*3。iというカウンタ変数をインクリメントしながら,すべての要素にアクセスしています。煩雑ですね。

# 配列の生成
my @array = ("one", "two", "three");

# 配列を走査して表示
foreach (@array) { print "$_\n"; }
リスト3●配列のすべての要素を走査するPerlのプログラム

// 配列の生成
var array = ["one", "two", "three"];

// 古典的な配列の走査
for (var i = 0; i < array.length; i ++) {
 alert(array[i]);
}
リスト4●古典的な走査を行うJavaScriptのプログラム

 しかし,ここからがJavaScriptのすごいところです。JavaScriptでは,気に入らない点をユーザーが勝手に変えてしまえるのです。リスト5を見てください。「Array.prototype」のプロパティとして「each」という関数を追加しています。するとeachという関数にalert関数を渡して全要素を走査できるようになります。

// 配列の生成
var array = ["one", "two", "three"];

// 配列のプロトタイプを拡張
Array.prototype.each = function(func) {
 for (var i =0; i < this.length; i ++) {
  func(this[i]);
 }
};

// each関数を使った配列の走査
array.each(alert); //one,two,threeが順番に表示される
リスト5●Array.prototypeのプロパティとして,全要素を走査するeach関数を追加

 何とも不思議な構文だと思いませんか? Array.prototypeというものに「走査」の機能を持つ関数に追加すると,配列で使える関数が一つ増えてしまうのです。関数をいったん定義してしまえば,配列を使うときはいつでもその関数を利用できます。あたかも言語自体を拡張しているかのようです。

 この謎を解くには,「プロトタイプ・ベースのオブジェクト指向」と「組み込みプロトタイプの書き換え」というJavaScriptの二つの特徴を理解する必要があります。これら二つについて見ていきましょう。

この先は会員の登録が必要です。今なら有料会員(月額プラン)が12月末まで無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら