昔からHTMLのお供に何気なく使ってきたJavaScriptな訳ですが、最近はjQueryばかり使っていて、JavaScriptの素晴らしさがいまいち分かっていません。いやjQueryであんなことやこんなことがWebページで出来るようなったことはとても素晴らしいのですが、言語自体の素晴らしさがわからないということです。
手元にあった「新人プログラマのためのjQuery Webアプリケーション開発講座」を読んで、入門だけやり直しておきます。下記コードは自分なりに咀嚼して新たに考えたものですので、本の中に載っているものではないです。
制御構文
if-else, switch, while, do-while, for, for-in, try-catch-finally
JavaScript:
-
// do-while
-
var c = 0;
-
do {
-
c++;
-
} while (c <10);
-
-
// for-in
-
var total = 0;
-
var arr = new Array(1,2,3);
-
for (var i in arr) {
-
total += arr[i];
-
}
配列定義
JavaScript:
-
// create new array variable
-
var arr1 = [1,2,3,4]; // create new array which has 4 elements: 1, 2, 3 and 4
-
var arr2 = new Array(); // create new array which is empty
-
var arr3 = new Array(5); // create new array which has 5 elements
-
var arr4 = new Array(1,2); // create new array which has 2 elements: 1 and 2
-
// create new associative array
-
var arr5 = {1:"one", 2:"Two", "a": "Three"}; // create new associative array which has 3 elements;
クラスの宣言
JavaScriptではすべてのものがオブジェクトである。JavaScript 1.xには言語上にクラスという概念はないが、他のプログラミング言語でいう"いわゆるクラス"は存在する。
コンストラクタ関数を定義し、それをnewすることでいわゆるクラスが作られる。以降、"いわゆるクラス"をクラスと呼ぶ。
JavaScript:
-
function Dog(name) {
-
this.name = name;
-
this.bark = function() {
-
return this.name+" barked!";
-
}
-
}
-
var d1 = new Dog("pochi");
-
alert(d1.bark());
-
var d2 = new Dog("taro");
-
alert(d2.bark());
public/private field/method
クラスにthisで変数や関数を定義するとプロパティ/メソッドとしてクラス外部からアクセス可能な状態となる。
thisではなくvarで変数として定義すると、クラス外部からアクセス不可能な内部プロパティ・内部メソッドとなる。
※関数であれば、普通にfunctionで定義すればよい。
JavaScript:
-
function Dog(name,age) {
-
this.name = name;
-
var age = age;
-
this.bark = function() {
-
return this.name+"("+getNextAge()+") bark!";
-
}
-
function getNextAge() {
-
return age+1;
-
}
-
}
-
var d1 = new Dog("pochi",5);
-
alert(d1.bark());
-
var d2 = new Dog("taro",10);
-
alert(d2.bark());
クラスの拡張
インスタンスにプロパティやメソッドを追加することは簡単だが、クラス全体にプロパティやメソッドを追加することも簡単である。
前者は何も考えずに新しい変数に代入すればよいが、後者はprototypeプロパティを用いる。
JavaScript:
-
function Dog(name) {
-
this.name = name;
-
this.bark = function() {
-
return this.name+" bark!";
-
}
-
}
-
var d1 = new Dog("pochi",5);
-
alert(d1.bark());
-
var d2 = new Dog("taro",10);
-
alert(d2.bark());
-
-
Dog.prototype.getName = function() {
-
return this.name;
-
}
-
alert(d1.getName());
-
alert(d2.getName());
クラスの継承
既存のクラスを継承して新しいクラスを作成することが出来る。
JavaScript:
-
function Dog(name) {
-
this.name = name;
-
this.bark = function() {
-
return this.name+" bark!";
-
}
-
}
-
function Bulldog(name) {
-
Dog.call(this, name); // thisで実行されているかのようにDogのコンストラクタ関数を呼び出している
-
this.bark = function() {
-
return this.name+" loudly bark!";
-
}
-
}
-
var d1 = new Dog("pochi",5);
-
var d2 = new Bulldog("jiro",5);
-
alert(d1.bark());
-
alert(d2.bark());
staticなプロパティ・メソッド
staticなプロパティやメソッド（クラスプロパティやクラスメソッドとも）を作るにはthisではなくクラス名に直接関数を定義する。
JavaScript:
-
function Dog(name,age) {
-
this.name = name;
-
this.age = age;
-
this.bark = function() {
-
return this.name+" bark!";
-
}
-
}
-
Dog.calcNextAge = function(age) {
-
return age+1;
-
}
-
var d1 = new Dog("pochi",5);
-
alert(d1.bark());
-
alert(Dog.calcNextAge(d1.age));
まとめ
コンストラクタ関数を定義することでクラスを作成したり、クラス自体を後から拡張したりなど、他の言語にはない面白い概念がありますよね。もちろん上にあげたものは"入門"ですので、JavaScriptのマニアックな部分にはまだ触れていないのでしょう。ここからさきのマニアックな部分はどんな面白い概念が出てきますかね！
