JavaScriptのクラス：オブジェクトの設計図を作る

JavaScriptの学習も終盤に入り、「クラス」を学びました。クラスは、Pythonでも学んだ概念ですが、JavaScriptでも同様に重要な役割を果たします。

オブジェクトに関数を含める

これまで学んだオブジェクトでは、値として文字列や数値を持っていました。実は、オブジェクトの値の部分には関数を用いることもできます。

const user = {
  name: "太郎",
  greet: function() {
    console.log("こんにちは");
  }
};

// プロパティ名()で呼び出し
user.greet();  // こんにちは

構文: 定数名.プロパティ名()

オブジェクトに関数を持たせることで、データと処理をまとめて管理できます。

クラスとは

クラスは、オブジェクトの設計図です。設計図（クラス）をもとに、実際のオブジェクト（インスタンス）を量産できます。

構文: class クラス名 { }

class User {
  // クラスの中身はここに書く
}

ポイント

  • class キーワードで定義
  • クラス名は大文字で始める（例: User, Animal, Product）
  • {} の中にクラスの内容を書く

インスタンスの生成

クラスから実際のオブジェクトを作ることを「インスタンスを生成する」と言います。

構文: new クラス名()

class User {
}

// インスタンスを生成
const user1 = new User();
const user2 = new User();

new キーワードを使うことで、クラスから新しいインスタンスが生成されます。

コンストラクタ：インスタンス生成時の処理

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

構文:

class クラス名 {
  constructor() {
    // 実行したい処理
  }
}

class User {
  constructor() {
    console.log("インスタンスが生成されました");
  }
}

const user1 = new User();  // インスタンスが生成されました
const user2 = new User();  // インスタンスが生成されました

コンストラクタの特徴

  • インスタンスが生成された直後に実行される
  • インスタンスごとに毎回実行される

thisでプロパティを追加

コンストラクタの中で、this.プロパティ名 = 値 とすることで、インスタンスにプロパティと値を追加できます。

class User {
  constructor() {
    this.name = "太郎";
    this.age = 25;
  }
}

const user = new User();

// クラスの外でも使える
console.log(user.name);  // 太郎
console.log(user.age);   // 25

構文: インスタンス.プロパティ名

this は、そのインスタンス自身を指します。

引数を使ってプロパティを設定

class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

const user1 = new User("太郎", 25);
const user2 = new User("花子", 30);

console.log(user1.name);  // 太郎
console.log(user2.name);  // 花子

コンストラクタに引数を渡すことで、インスタンスごとに異なる値を設定できます。

メソッド：インスタンスの「動作」

メソッドは、そのインスタンスの「動作」のようなものです。

  • プロパティ: 情報（データ）
  • メソッド: 処理のまとまり（動作）

構文:

class クラス名 {
  メソッド名() {
    行いたい処理
  }
}

class User {
  constructor(name) {
    this.name = name;
  }
  
  greet() {
    console.log(`こんにちは、${this.name}です`);
  }
}

const user = new User("太郎");
user.greet();  // こんにちは、太郎です

呼び出し: インスタンス.メソッド名()

メソッド内でthisを使う

メソッド内でインスタンスの値を使用するには、this を用います。

class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
  
  showInfo() {
    console.log(`商品名: ${this.name}`);
    console.log(`価格: ${this.price}円`);
  }
}

const product = new Product("ノートPC", 120000);
product.showInfo();
// 商品名: ノートPC
// 価格: 120000円

this.プロパティ名 で、そのインスタンスのプロパティにアクセスできます。

メソッド内で他のメソッドを呼び出す

this.メソッド名() で、同じクラスの他のメソッドを利用できます。

class User {
  constructor(name) {
    this.name = name;
  }
  
  greet() {
    console.log(`こんにちは、${this.name}です`);
  }
  
  introduce() {
    this.greet();  // 他のメソッドを呼び出し
    console.log("よろしくお願いします");
  }
}

const user = new User("太郎");
user.introduce();
// こんにちは、太郎です
// よろしくお願いします

Pythonとの比較

項目PythonJavaScript
クラス定義class クラス名:class クラス名 { }
コンストラクタ__init__constructor
インスタンス生成クラス名()new クラス名()
自身を指すselfthis
# Python
class User:
    def __init__(self, name):
        self.name = name
    
    def greet(self):
        print(f"こんにちは、{self.name}です")

user = User("太郎")
user.greet()

// JavaScript
class User {
  constructor(name) {
    this.name = name;
  }
  
  greet() {
    console.log(`こんにちは、${this.name}です`);
  }
}

const user = new User("太郎");
user.greet();

基本的な考え方は同じですが、JavaScriptでは new が必須という点が違います。

今日の学びのポイント

  • クラス: オブジェクトの設計図
  • class クラス名 { } で定義（大文字始め）
  • new クラス名() でインスタンスを生成
  • コンストラクタ: インスタンス生成時に実行される
  • this.プロパティ名 = 値 でプロパティを追加
  • メソッド: インスタンスの動作（処理のまとまり）
  • this: そのインスタンス自身を指す
  • this.メソッド名() で他のメソッドを呼び出せる

クラスは、複雑なプログラムを整理して管理するための強力なツールです。次は、既存のクラスを元に新しいクラスを作る「継承」を学びます。

コメント