【プロゲート復習】Javascriptでクラスを学ぼう

プログラミング
難易度:★★☆☆☆

この記事では、Javascriptで以下の内容に触れていきます。

  • 『クラス』ってなに??
  • 『クラス』からインスタンスを生成してみよう

対象読者は、次のような方を対象としています。

Javascriptでクラスを学びたい!

プロゲートの復習がしたい!

さて、今回から、第2章に入っていきます!

第1章では、変数・配列・関数・if文・for文 など、プログラミングの基礎を学びました。

今回からは、1章より1段階レベルアップします。

しかし、1歩ずついけば必ず理解できますので、焦らずいきましょう!

2章の1回目は、『クラス』について学びます。

クラスをマスターすれば、開発をより楽に進めることができます。

とても重要な概念なので、ゆっくりいきましょう!

1章と同じく、新しい知識を得ることを楽しもう!

Javascriptの『クラス』ってなに?

本日は クラス という概念を学びます。

クラスって何??学校のクラスしか知らない!

Javascriptの『クラス』は一言でいうと、人体錬成です!

 

持ってかれタァァーー!!(伝われ)

人体錬成というのは半分ホントです。焦らず解説していきます。

例えば、あなたがRPGを作るとしましょう。

作るときに、モンスターのデータが必要になりますね。

スライムはHP3で、攻撃力が1。ドラゴンは、HP80で、攻撃力が20で、、

みたいに、11体データを毎回0から作るのは非常にめんどくさいですね!

そこで、似たようなデータを効率よく生成する方法を学びます。(ネタバレ:クラス)

 

効率よくモンスターを生成いくための方法として『設計図』を用意する方法があります。

最初に『モンスターを生成するための設計図』をつくり、その設計図を元に、

モンスターデータを生成する、といったことができます。

 

そして、この設計図こそが、クラス です。

 

下のように『class クラス名』とすることで、新しくクラスを用意できます。

class Monster{
    
}
ちなみにクラス名は大文字から始めるようにしましょう.

設計図(クラス)からモンスターを生みだそう!

クラスって、設計図みたいなものだったんだね!

『モンスターを生成するための設計図』をつくったら、その設計図から実際にモンスターを生み出してみましょう。

設計図(クラス)からモンスターを呼び出すときは、『new クラス名()』とします。

クラスから生成したモンスターはインスタンスと呼びます。

Monsterクラスのインスタンスは、Monsterインスタンスと呼びます。

var slime = new Monster();

Monsterインスタンスがslime変数に入りました。

インスタンスも変数に入れて使います!

Monsterクラスから生成したインスタンスをコンソール出力してみましょう。

class Monster{

}

var slime = new Monster();
console.log(slime);

まだ中身が空っぽですが、Monsterインスタンスが生成できてるみたいです。

設計図の中身を追加していこう

インスタンス生成は出来ましたが、空っぽの設計図は悲しいですよね笑

空っぽの設計図に価値はなし!!

とゆーわけで、設計図の中身を追加してみましょう。

コンストラクタとは

クラスにはコンストラクタという機能が用意されています。

コンストラクタは、インスタンス生成時に実行したい処理や設定を追加するための機能です。

下コードのように、クラス内に『constructor() {}』と記述します。

class Monster{

    constructor() {
        console.log("モンスター生成");
    }

}

var slime = new Monster();
var dragon = new Monster();

コンストラクタの中に、コンソール出力の処理が入っているので、インスタンス生成時にコンソール出力が実行されます。

大切なのは、インスタンスごとに実行されるということです。

2newすれば、2回コンソール出力がされます。

 

 

設計図にプロパティを追加する

さて、今はコンストラクタでコンソール出力しただけでしたが、

コンストラクタ内で、設計図の情報を追加してみましょう!

コンストラクタ内で『this.プロパティ=値』とすることで、生成されるインスタンスにプロパティと値を追加することができます。

プロパティとは、インスタンスがもつ属性・情報と思ってください。

下のコードでいうと、モンスターの名前とHPの情報を追加しています。

class Monster{
    constructor() {
        this.name = "スライム";
        this.hp = 3;
    }
}

var slime = new Monster();

これで、変数slimeには、nameがスライム で、HPが3のMonsterインスタンスが入っています

プロパティを呼び出すときは『インスタンス.プロパティ』とすることで呼び出せます。

class Monster{
    constructor() {
        this.name = "スライム";
        this.hp = 3;
    }
}

var slime = new Monster();

console.log(slime.name);
console.log(slime.hp);

インスタンスごとにプロパティ値を変える

コンストラクタ内でプロパティと設定したことで、インスタンスの初期設定が可能になりました。

しかしこのままでは全モンスターがスライムになってしまいます。

class Monster{
    constructor() {
        this.name = "スライム";
        this.hp = 3;
    }
}

var slime = new Monster();
var dragon = new Monster();

console.log(slime.name);
console.log(dragon.name);

設計図の意味ないじゃん!!

そこで、インスタンスごとに名前とHPを変更するために、引数を使いましょう。

new クラス名(引数)』とすることで、コンストラクタに引数を渡せます。

 

class Monster{
    constructor(name,hp) {
        this.name = name;
        this.hp = hp;
    }
}

var slime = new Monster("スライム",3);
var dragon = new Monster("ドラゴン",60);

console.log(slime.name);
console.log(dragon.name);

new Monster(“スライム”, 3); とすることで、インスタンス生成時に、好きな名前とHPをつける事ができます!

コンストラクタに渡した引数nameが、Monsterクラスのプロパティthis.nameに代入されています。

これで、モンスターごとに情報を設定することができますね!

次回は設計図をもっと強化します

今回は、クラスという設計図を作り、そこからインスタンスを生成しました。

そして、設計図にインスタンスの情報(今回でいう名前とHP)も追加できました!

しかし、足りないものがあります。それは、アクションです!

名前がスライムで、HPが3のスライム は作れましたが、スライム のアクションは作れていません。

すなわち攻撃してこないと言うわけです笑

攻撃しないスライムはただのスライム

というわけで、次回はクラスにアクションを追加していきます!!

Javascriptの学習本を何冊か持っておいてもいいかも。

コメント