I aim to creator.

私自身の中ではJavaScriptは手続き型言語に近い様に感じます。何故ならば、JavaScript入門にはそもそもオブジェクト指向の理念をちゃんと解説している本が少ないからだと私は思います。

C++/C#/Java等の入門書を見ればオブジェクト指向の理念は主な文法の次に説明される様な事なのですが、JavaScriptはオブジェクト指向の前に何かを作ってコツを掴んでもらおうと言うのが先なのです。

確かにその方が学習も進むしいい。

けれど、いつかは壁にぶち当たると思います。

そこで、今回はJavaScript初心者さんを対象にオブジェクト指向をよく理解してもらえる様にしようと思います。

実行環境を整える

今回はブラウザーを利用して実行するのではなくMacやUbuntuにあるターミナルで実行します。なのでまずターミナルを立ち上げて、以下のコマンドを実行しましょう。

alias jsc="/System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/jsc"

後はjsファイルをエディタ等で作り、$ jsc ファイル名.jsで実行出来ます。

次に前提として、ターミナルでの実行結果の表示には print()関数を使います。

まず基本中の基本「Hello World」を表示してみましょう。

jsファイルに以下の様に記述して下さい。

print("Hello World");

これで保存し、ターミナルで$ jsc ファイル名.jsで実行してみてください。

Hello Worldとターミナルで表示されたら成功です。


ではここからが本題です。

普段JavaScriptでプログラミングする再はあまりオブジェクト指向を考える必要がないのですが、もしあなた自身がライブラリを作成する場合や、グローバル汚染を防ぐ時の為に知っておいて損はないかと思います。

グローバル汚染とは?

グローバル汚染とは、貴方が書いたソースを他の人がむちゃくちゃな使い方したり、手違いでエラーが多発したり色々面倒な事になります。その為グローバル汚染対策はある程度必要なわけです。

私の場合だと、ライブラリ作成で、とある処理を必要以上に利用させない為等で使ったりしています。

//グローバル領域
var a = 10;
b = 20; 

function test () {
	//ローカル領域
	var a0 = 30;
	b0 = 40;
}

このソースを例で言うと、グローバル領域から勝手にb0の値を書き換える事がグローバル汚染です。対策する方法は単純で、変数にvarを使えばローカル変数となり、グローバル領域から変更出来ない様になります。

ですが、例ではaの変数がvar付きで宣言されています。
これは正直言ってグローバルの宣言なので、何処からでも値が変更出来るのです。

大体理解は出来たでしょうか?

次に無断で特定の処理をさせたくない時の対処方法をご紹介しましょう。

function test () {
	var a = 1 + 1;
	print(a);
}

上の処理をもし、必要以上に使わせたくない。と思った事はありませんか?
その様な時にオブジェクト指向を使うと便利です。

先程グローバル汚染の対策には、varを使うといいと言うお話をさせて頂きました。
なので、それを利用してクラスを作り処理をしてみましょう。

function test () {	//グローバル領域
	var classData = function(){	//グローバル領域で作成されたクラス
		this.x = 1;
		this.Method = function(data){
			var plus = this.x + data;
			print(plus);
		}
	}

	var test = new classData();

	test.x = 2;
	test.Method(2);
}

test();

ちょっと複雑になりましたね。
ですが、varがある所をよく見て下さい。

var classDataはクラス名になります。varが付いているのでこのクラスが利用出来るのはtest()関数の中だけと言う事になります。

またtest関数内では、「var test = new classData();」とありますが、
これはClassをインスタンス(オブジェクト化)しているわけです。

そうオブジェクト化もvarが付いているのでこのオブジェクトが使えるのはtest()の中だけと言う事になります。これがグローバルから勝手に処理させない処理の書き方です。

クラスの作り方

では次にクラスの作り方を知っておきましょう。
本来Java/C#とかの高級言語だとclass {...}の様な感じでクラスを作るのですが、
JavaScriptはちょっと異なった方法で作ります。

var classData = function() {
	//Classの中身
}

クラスはこの様に簡単に作る事が出来ます。
中身には処理を書くのですが、クラス内で書く関数の事を私はメソッドと呼びます。
では実際にメソッドを作りましょう。

っと言いたいのですが、これも簡単です。

var classData = function() {
	this.Method = function() {
		// メソッド内の処理
	}
}

クラスの作り方と異なると言えば、varがthisに変わった様な感じです。
このthisはクラスをオブジェクト化した時に「オブジェクト名.Method」とります。

次にプロパティの作り方です。

プロパティはクラス内で使う処理に必要な値の様な物で、始めから初期値を設定出来ます。また後から変更する事も出来るのです。JavaScriptの関数では引数を初期化する事は出来ませんが、クラスを利用すれば、引数の初期化の様な効果も期待出来ます。

var classData = function() {

	this.x = 10;

	this.Method = function() {
		// メソッド内の処理
	}
}

ではこれでクラスのメソッドの作成方法とプロパティの作成方法は終わりました。
次はこのクラスをオブジェクト化して利用してみましょう。

var classData = function() {

	this.x = 10;

	this.Method = function(data) {
		print(this.x + data);
	}
}

var test = new classData();

test.x = 20;	//プロパティに20を代入
test.Method(30);	//メソッドを利用

newでクラスをオブジェクト化してプロパティに20を代入したので、クラス内のthis.xの中身は20と言う事になります。また次にMethodの引数に30を渡したので結果は20+30の結果になると言うわけです。

これが大まかな本格的なオブジェクト指向の記述方法です。

今回は以上になります。最後までお付き合い下さりありがとうございます。