このページでは JavaScript におけるオブジェクト指向について説明します。
前節では配列にデータだけではなく関数も要素にできることを説明しました。つまり一つの識別子でデータとコード (何かを実行する部分)が扱えることになります。このことは JavaScript の配列が、すでにオブジェクトとしての 要件の一つを達成していることになりますが、まだまだ完全なものではありません。一般的にオブジェクトとして実装 すべき要件は次のものだと言われています。
このほかにもオブジェクトのカプセル化 (データの隠蔽化) などが問われる場合もあります。
次項からはこれらの要件を一つ一つ説明していきます。JavaScript はサンプルコードなどをコピーして簡単に使う ことができます。そしてそのことが JavaScript の文法が本格的に学習されることが少ない原因だと言われています。 しかし JavaScript の学習が進まないのは JavaScript のオブジェクト指向が他の言語と比べてかなり変わって いるということも大きく原因しているように思われます。たしかに JQuery をはじめてとする便利で優秀なライブラリ やフレームワークが登場している今では、言語的な学習に時間を使うより、ライブラリやフレームワークの使い方を学ぶ ほうが有意義な時間の使い方のように思われます。しかしそれはあくまでも Web サイトを構築する場合の話しです。 このコーナーの目標は「JavaScript による Android/iOS アプリの開発」です。ここはしっかりと JavaScript の オブジェクト指向を学習しておいたほうが良いでしょう。
と、偉そうなこと書いていますが、やや言語オタクの傾向のある私にとって、JavaScript のような仕様の小さな言語で アプリケーションを作るということは、ワクワクするほど面白い私の趣味だということを素直に認めます、ハイ。
JavaScript にはいわゆるクラスというものは存在しません。他のオブジェクト指向言語のクラスの代わりとなるものが コンストラクタ関数です。まず次のコードを見てください。JavaScript ファイルの拡張子は .js です。
book.js
function Book(name, tel, mail) {
this.name = name;
this.tel = tel;
this.mail = mail;
this.showBook = function () {
var str ='名前：'+this.name+'\n';
str += '電話：' + this.tel +'\n';
str += 'メール：' + this.mail;
alert(str);
};
}
1行ずつ説明します。
ここまでの説明で、他のオブジェクト指向プログラミング言語をご存知の方は、非常に奇妙に感じられたかもしれません。 他のオブジェクト指向プログラミング言語ではオブジェクトのプロパティに外部からアクセスすることはできません。 プロパティにアクセスするためにはオブジェクトに用意されているセッター (setter) や ゲッター (getter) と 呼ばれるメソッドを使います。しかし JavaScript のプロパティには obj . property という式で オブジェクトの外部からアクセスすることができます。このことについてオブジェクトのカプセル化(データの隠蔽化)という 観点から、データプロパティに外部から直接アクセスできないようにする方法については、後述することにいたします。
では、Book クラスからインスタンスを作成して実際に使ってみます。book.js に次のコードを追加します。
var obj = new Book ('Yamada Taro',
'090-1111-2222',
'taro@yamada.jp');
obj.showBook();
では、1行ずつ説明します。
/* books.js */
function Book (name, tel, mail) {
this.name = name;
this.tel = tel;
this.mail = mail;
this.showBook = function () {
var str ='名前：'+this.name+'\n';
str += '電話：' + this.tel +'\n';
str += 'メール：' + this.mail;
alert(str);
};
}
var obj = new Book ('Yamada Taro',
'090-1111-2222',
'taro@yamada.jp');
obj.showBook();
JavaScript のスクリプトファイルは前項までで完成しました。しかしスクリプトを実行するには Web ブラウザが必要 になります。そして Web ブラウザにデータを表示するためには HTML ファイルが必要となります。当サイトでは 今の時流を考えて今後作成する HTML ファイルは、すべて HTML5 にしようと思っています。以下に必要最小限 の最もシンプルな HTML5 ファイルの例を記載します。ファイル名は book.html にします。
book.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript"
src="book.js">
</script>
<title>Book</title>
</head>
<body>
<p>Book</p>
</body>
</html>
ドキュメントタイプの宣言は <!DOCTYPE html> というごくシンプルなものに変わっています。実はこのことが HTML5 を採用する本当の理由だったりします。<meta charset="utf-8"> は必須だと思ってください。 そして今回はスクリプトファイルを別のファイルとして作成しましたので <script type="text/javaxcript"> タグに src="book.js" オプションを付けて読み込んでいます。ここではタグの間で改行していますが通常は改行せずに 記述します。そして HTML ファイルなので終了タグ </script> も必要となります。なお HTML ファイルに スクリプトを直接書き込むこともできます。その場合は、<head> と </head> タグの間か、 <body> と </body> タグの間に、<script type="text/javascript"> タグと </script> 終了タグを記述して、その間に book.js の内容を記述します。src="book.js" オプションは 当然不必要になります。
では、book.js と book.html をお使いのテキストエディタで記述して同じディレクトリに保存してください。そして book.html をお使いの Web ブラウザにドラッグするなどして開いてください。何が起こりましたでしょうか！
ところでいま、Aptana Studio というアプリケーションが JavaScript の IDE (統合開発環境) として注目されて います。今もこのページを Aptana Studio で作成しています。Aptana Studio は www.aptana.com から無料でダウンロード できます。インストールの方法や使用方法は Aptana Studio の使い方 で説明しています。