TypeScriptのクラスをドラクエ風のステータスを実装しながら学んでみた

はじめに

• npm: 6.13.7
• node: 13.8.0
• TypeScript: 3.8.2

TypeScript 学習のため、ドラクエ風のステータス出力をクラスで実装してみました。

• ステータス

HP:  体力
ATK: 攻撃力
DEF: 防御力

今回はステータスの出力までですが、次の機会はダメージ計算なども追加して実際にバトルをさせてみたいと思います。

TypeScript のクラスについて

• 完成

dorakue_style.ts

class Brave {
  name: string;
  hp:   number;
  atk:  number;
  def:  number;

  constructor(name: string, hp: number, atk: number, def: number) {
    this.name = name;
    this.hp   = hp;
    this.atk  = atk;
    this.def  = def;
  }

  info() {
    return `${this.name}のHPは${this.hp}、攻撃力は${this.atk}、防御力は${this.def}です。`
  }
}

class Monster extends Brave {
  constructor(name: string, hp: number, atk: number, def: number) {
    super(name, hp, atk, def);
  }
}

let brave = new Brave("勇者", 100, 20, 10);
let slime = new Monster("スライム", 10, 2, 1);

console.log(brave.info());
console.log(slime.info());

• 実行結果

$ tsc dorake_style.ts
$ node dorake_style.js
> 勇者のHPは100、攻撃力は20、防御力は10です。
> スライムのHPは10、攻撃力は2、防御力は1です。

TypeScript のクラスを使って「勇者」と「モンスター（スライム）」のステータスを表示しています。

勇者を作る（クラス宣言）

// クラスを宣言
class Brave {
  // ステータスに必要なプロパティを用意
  name: string;
  hp:   number;
  atk:  number;
  def:  number;

  //...
}

まずはクラスを定義します。「勇者」を作成するためBraveクラスとし、ステータスに必要なプロパティを用意します。

コンストラクタ

コンストラクタは、Braveクラスがnewされたときに実行されるメソッド。

class Brave {
  // ...

  // クラスが new されたときに、実行される
  constructor(name: string, hp: number, atk: number, def: number) {
    // new のときに渡された値がそれぞれ代入
    this.name = name;
    this.hp   = hp;
    this.atk  = atk;
    this.def  = def;
  }
}

let brave = new Brave("勇者", 100, 20, 10);
console.log(brave.name); // 勇者

new Brave(名前, HP, ATK, DEF)の際に値を渡すことでコンストラクタが実行され、渡された値がそれぞれ代入されます。

モンスターを作るためにBraveクラスを継承する

ドラクエの定番であるモンスターのスライムを作っていきます。
スライムも勇者と同様のステータスを持つため、Braveクラスをベースに継承を使ってMonsterクラスを作っていきます。

// Brave クラスをベースに Monster クラスを作成
class Monster extends Brave {
  // 独自にプロパティを定義しなくていい

  constructor(name: string, hp: number, atk: number, def: number) {
    // super(); は継承元のコンストラクタを実行する
    super(name, hp, atk, def);
  }
}

class Monster extends Braveとすることで、BraveクラスをベースにMonsterクラスが作成され、MonsterクラスはBraveクラスを継承することで、独自にプロパティを定義する必要がなくなります。

super()はMonsterクラスの継承元であるBraveクラスのコンストラクタを実行します。
ts
super(name, hp, atk, def);


ステータスを出力

class Brave {
  // ...

  info() {
    return `${this.name}のHPは${this.hp}、攻撃力は${this.atk}、防御力は${this.def}です。`
  }
}

let brave = new Brave("勇者", 100, 20, 10);
let slime = new Monster("スライム", 10, 2, 1, 15);

console.log(brave.info());
// 勇者のHPは100、攻撃力は20、防御力は10です。
console.log(slime.info());
// スライムのHPは10、攻撃力は2、防御力は1です。

Braveクラスにステータスを出力する処理を記述して、インスタンス化したそれぞれからinfo()を呼び出します。
MonsterクラスはBraveクラスを継承しているため、info()を呼び出すことができます。

• 完成

class Brave {
 name: string;
 hp:   number;
 atk:  number;
 def:  number;

 constructor(name: string, hp: number, atk: number, def: number) {
   this.name = name;
   this.hp   = hp;
   this.atk  = atk;
   this.def  = def;
 }

 info() {
   return `${this.name}のHPは${this.hp}、攻撃力は${this.atk}、防御力は${this.def}です。`
 }
}

class Monster extends Brave {
 constructor(name: string, hp: number, atk: number, def: number) {
   super(name, hp, atk, def);
 }
}

let brave = new Brave("勇者", 100, 20, 10);
let slime = new Monster("スライム", 10, 2, 1);

console.log(brave.info());
console.log(slime.info());
// 勇者のHPは100、攻撃力は20、防御力は10です。
// スライムのHPは10、攻撃力は2、防御力は1です。

参考

TypeScript初心者が知っておくと嬉しいこと | Qiita
TypeScript ハンドブック