はじめに
npm: 6.13.7node: 13.8.0TypeScript: 3.8.2
TypeScript 学習のため、ドラクエ風のステータス出力をクラスで実装してみました。
- ステータス
HP: 体力
ATK: 攻撃力
DEF: 防御力
今回はステータスの出力までですが、次の機会はダメージ計算なども追加して実際にバトルをさせてみたいと思います。
TypeScript のクラスについて
- 完成
classBrave{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}です。`}}classMonsterextendsBrave{constructor(name:string,hp:number,atk:number,def:number){super(name,hp,atk,def);}}letbrave=newBrave("勇者",100,20,10);letslime=newMonster("スライム",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 のクラスを使って「勇者」と「モンスター（スライム）」のステータスを表示しています。
勇者を作る（クラス宣言）
// クラスを宣言classBrave{// ステータスに必要なプロパティを用意name:string;hp:number;atk:number;def:number;//...}まずはクラスを定義します。「勇者」を作成するためBraveクラスとし、ステータスに必要なプロパティを用意します。
コンストラクタ
コンストラクタは、Braveクラスがnewされたときに実行されるメソッド。
classBrave{// ...// クラスが new されたときに、実行されるconstructor(name:string,hp:number,atk:number,def:number){// new のときに渡された値がそれぞれ代入this.name=name;this.hp=hp;this.atk=atk;this.def=def;}}letbrave=newBrave("勇者",100,20,10);console.log(brave.name);// 勇者new Brave(名前, HP, ATK, DEF)の際に値を渡すことでコンストラクタが実行され、渡された値がそれぞれ代入されます。
モンスターを作るためにBraveクラスを継承する
ドラクエの定番であるモンスターのスライムを作っていきます。
スライムも勇者と同様のステータスを持つため、Braveクラスをベースに継承を使ってMonsterクラスを作っていきます。
// Brave クラスをベースに Monster クラスを作成classMonsterextendsBrave{// 独自にプロパティを定義しなくていい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);
ステータスを出力
classBrave{// ...info(){return`${this.name}のHPは${this.hp}、攻撃力は${this.atk}、防御力は${this.def}です。`}}letbrave=newBrave("勇者",100,20,10);letslime=newMonster("スライム",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()を呼び出すことができます。
- 完成
classBrave{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}です。`}}classMonsterextendsBrave{constructor(name:string,hp:number,atk:number,def:number){super(name,hp,atk,def);}}letbrave=newBrave("勇者",100,20,10);letslime=newMonster("スライム",10,2,1);console.log(brave.info());console.log(slime.info());// 勇者のHPは100、攻撃力は20、防御力は10です。// スライムのHPは10、攻撃力は2、防御力は1です。参考
TypeScript初心者が知っておくと嬉しいこと | Qiita
TypeScript ハンドブック - クラス | js STUDIO