第11回【JSのクラス・オブジェクト指向】


まずは動画を見てくださいね!
オブジェクト指向、クラスを使うとプログラミングの表現が広がります!
便利な機能はどんどん使っていきましょう。

オブジェクト指向とは?

データを使うというより、データが何かをするという考え方・・・。
それがオブジェクト指向!(?)
よくわからないでしょうけど、そんな感じで良いかと思いますw

クラスを使ってみる

	class parson
	{
	}
class クラス名 { ... }という書き方をします。
これで、parsonというクラスができました。
中身は何もありません...

	class parson
	{
		constructor(name,height,weight)
		{
			this.name   = name;
			this.height = height;
			this.weight = weight;
		}
	}
クラスは実体が作られた時にconstructorというメソッド(関数の様な物)が呼び出されます。
この場合、parsonというクラスが作られた時に、name,height,weightの3つの引数を受け取るメソッドが呼びだされます。
その時に、
this.name
this.height
this.weight
に、それぞれ引数を入れています。
尚、このthis.xxxxxをプロパティ(クラスが持ってる変数の様な物)と呼びます。

では、このクラスparsonを使って、田中を作ります。
	let tanaka = new parson("田中",187,58 );
これでtanakaというparsonクラスの田中が作成されました。
関数を呼び出すのと違い、newを付けて、新しく実体化させます。
tanakaは、name,height,weightを保有しているオブジェクトとなります。
ただ、この時点では特に何も起きません。
次にメソッドを作ります。

	class parson
	{
		constructor(name,height,weight)
		{
			this.name   = name;
			this.height = height;
			this.weight = weight;
		}
		printBMI()
		{
			let bmi= this.weight / (this.height/100)**2;
			document.write(this.name + "、おはよう<BR>");
			document.write("身長は"+this.height+"cm<BR>");
			document.write("体重は"+this.weight+"kg<BR>");
			document.write("あなたのBMIは"+myBMI+"です。<BR>");
			document.write(this.name + "、さようなら<BR>");
		}
	}
メソッド(関数みたいな物)を定義する時にfunctionと書く必要はありません。
クラスで持ってるプロパティ(変数みたいな物)にはthis.と付けます。
メソッドの中でletで作ってる変数にはthis.は入りません。
当然この中で作った変数bmiは、このメソッドの中でしか使えません。
次に、このメソッドを実行します。
	let tanaka = new parson("田中",187,58 );
	tanaka.printBMI();
これで、田中の情報が表示されます。
これがオブジェクト指向です!!

今までは
	表示してください(田中の情報を)
オブジェクト指向では
	田中(情報を表示してください)
このくらいの差があります。

田中にご飯を食べさせたり、走らせたりも可能です!
	class parson
	{
		constructor(name,height,weight)
		{
			this.name   = name;
			this.height = height;
			this.weight = weight;
		}
		printBMI()
		{
			let bmi= this.weight / (this.height/100)**2;
			document.write(this.name + "、おはよう<BR>");
			document.write("身長は"+this.height+"cm<BR>");
			document.write("体重は"+this.weight+"kg<BR>");
			document.write("あなたのBMIは"+myBMI+"です。<BR>");
			document.write(this.name + "、さようなら<BR>");
			document.write("<BR>");
		}
		eat( val )
		{
			document.write(this.name + "はご飯を食べる<BR>");
			this.weight += val;
			document.write(val + "kg体重が増えました<BR>");
			document.write("<BR>");
		}
		run( val )
		{
			document.write(this.name + "は凄い走った<BR>");
			this.weight -= val;
			document.write(val + "kg体重が減りました<BR>");
			document.write("<BR>");
		}
	}
これでparsonクラスにはeatという食べるメソッドと、runという走るメソッドができました。
メソッドには関数と同じ様に引数や、戻り値(return)を入れる事も可能です。
実際に食べさせたり、走らせたりします。
	let tanaka = new parson("田中",187,58 );
	tanaka.printBMI();
	tanaka.eat(1);
	tanaka.printBMI();
	tanaka.run(2);
	tanaka.printBMI();
これでご飯を食べて1kg太り、走って2kg体重を減らすプログラムになりました。
また山根や小杉も簡単につくれます。
	let tanaka = new parson("田中",187,58 );
	let yamane = new parson("山根",180,54 );
	let kosugi = new parson("小杉",170,110 );
配列に入れたら便利です。
	let member = [];
	member[0] = new parson("田中",187,58 );
	member[1] = new parson("山根",180,54 );
	member[2] = new parson("小杉",170,110 );
この様に初期化することもできます。
	let member = [
		new parson("田中",187,58 ),
		new parson("山根",180,54 ),
		new parson("小杉",170,110 )
	];
宣言時にいっぺんに初期化しています。


“オブジェクト指向”という考え方はともかく、クラス自体はとても便利なので、使い方次第ではプログラムをスッキリと書く事ができるので活用してみましょう。

続く...


akichon/あきちょん
Youtubeでプログラミング講座やってるゲーム好きの(元?)プログラマ...
>>open profile...
■Twitter始めました
https://twitter.com/ak1chon
■Youtubeチャンネルはこちら
akichon(Youtube)