JavaScriptのクラスについて学ぶ

作成:2021.09.01

更新:2021.09.01

JavaScript

クラスとは何か?

「設計書」の役割を果たす機能。

クラスを使ってみる

sample.js
// モンスターの設計書(=クラス)
const monsterClass = class {
  // 設計書を初期化するメソッド(=コンストラクタ)
  constructor(name, normalSkill) {
    // 渡された引数をクラスのプロパティとする
    this.name = name
    this.normalSkill = normalSkill
  }
}

// ピカチュウA(=インスタンス)を生成
const pikachuA = new monsterClass('ピカチュウA', 'でんきショック')

// ピカチュウの攻撃
console.log(pikachuA.name + 'の' +pikachuA.normalSkill + '!') // ピカチュウAのでんきショック!

クラスは再利用可能なので、別のインスタンスも生成できる。

sample.js
// ピカチュウBを生成
const pikachuB = new monsterClass('ピカチュウB', '10まんボルト')

メソッドを使ってみる

staticキーワードを使って、クラス内にメソッドを定義できる。

sample.js
// モンスターの設計書
const monsterClass = class {
  // 初期化
  constructor(name, normalSkill) {
    this.name = name
    this.normalSkill = normalSkill
  }

  // 攻撃
  static attack(name, skill) {
    return name + 'の' + skill + '!'
  }

}

// ピカチュウAを生成
const pikachuA = new monsterClass('ピカチュウA', 'でんきショック')

// ピカチュウの攻撃
console.log(monsterClass.attack(pikachuA.name, pikachuA.normalSkill)) // ピカチュウAのでんきショック!

staticキーワードを使ったメソッドは特に「静的メソッド」と呼び、直接クラスから呼びだす必要がある。

ゲッターを使ってみる

get構文を使って、インスタンスからクラスのメソッドを使う。

sample.js
// モンスターの設計書
const monsterClass = class {
  // 初期化
  constructor(name, normalSkill) {
    this.name = name
    this.normalSkill = normalSkill
  }

  // 通常攻撃
  get normalAttack() {
    console.log(this.name + 'の' +this.normalSkill + '!')
  }
}

// 設計書をもとにモンスターを生成
const pikachuA = new monsterClass('ピカチュウA', 'でんきショック')

// 通常攻撃
pikachuA.normalAttack // ピカチュウAのでんきショック!

セッターを使ってみる

set構文を使って、インスタンスの生成後にプロパティを書き換える。

sample.js
// モンスターの設計書
const monsterClass = class {
  // 初期化
  constructor(name, normalSkill) {
    this.name = name
    this.normalSkill = normalSkill
  }

  // 通常攻撃
  get normalAttack() {
    console.log(this.name + 'の' +this.normalSkill + '!')
  }

  // 技の変更
  set changeNormalSkill(newNormalSkill) {
    this.normalSkill = newNormalSkill
  }
}

// 設計書をもとにモンスターを生成
const pikachuA = new monsterClass('ピカチュウA', 'でんきショック')

// あとから技を変更
pikachuA.changeNormalSkill = '10まんボルト'

// 通常攻撃
pikachuA.normalAttack // ピカチュウAの10まんボルト!

クラスを継承してみる

任意のクラスから別のクラスのプロパティにアクセスすることができる。この機能が「継承」で、継承される側のクラスが「親」、もう一方が「子」になる。

sample.js
// モンスターの設計書(=親)
const monsterClass = class {
  // 初期化
  constructor(name, normalSkill) {
    this.name = name
    this.normalSkill = normalSkill
  }

  // 通常攻撃
  get normalAttack() {
    console.log(this.name + 'の' +this.normalSkill + '!')
  }

  // 技の変更
  set changeNormalSkill(newNormalSkill) {
    this.normalSkill = newNormalSkill
  }
}

// 特殊モンスターの設計書(=子)
const specialMonsterClass = class extends monsterClass {
  // 初期化
  constructor(name, normalSkill, specialSkill) {
    // 親クラスを初期化
    super(name, normalSkill)

    this.specialSkill = specialSkill
  }

  // 特殊攻撃
  get specialAttack() {
    console.log(this.name + 'の' +this.specialSkill + '!')
  }
}

// なみのりピカチュウを生成
const naminoriPikachu = new specialMonsterClass('なみのりピカチュウ', 'でんきショック', 'なみのり')

// 通常攻撃(親のゲッターを使っている)
naminoriPikachu.normalAttack // なみのりピカチュウのでんきショック!

// 特殊攻撃
naminoriPikachu.specialAttack // なみのりピカチュウのなみのり!