【JavaScriptのクラス】初心者でも理解できる！オブジェクト指向プログラミングの基礎

この記事は広告・PRを含みます プログラミング

JavaScriptのクラスを徹底解説！オブジェクト、インスタンス、コンストラクタ、メソッドをわかりやすく解説

JavaScriptのクラスを理解したいあなたへ！オブジェクト、インスタンス、コンストラクタ、メソッドの用語・基礎を解説します。

僕自身がJavaScriptの「クラス」の学習をしていて「オブジェクト」「クラス」「インスタンス」「コンストラクタ」「メソッド」、、、

と、立て続けに新しい横文字がでてきて意味がごっちゃになりそうだったので、AI先生の力も借りて箇条書きにまとめました。

合わせて、新しくでてきた、「new」と「this」のJavaScriptのクラス内での使い方もまとめました。

おまけで、用語を覚える足がかりに、それぞれの単語の、プログラミング用語以外での英語でのもとの意味も。

参考にどぞ

用語の意味・定義

オブジェクト

  • プロパティとメソッドの集合
  • オブジェクトは、その「もの」の特性（プロパティ）と振る舞い（メソッド）を一つにまとめたもの
  • オブジェクトは、変数に代入したり、関数に引数として渡したりできる
  • オブジェクトの定義は、{ プロパティ名: プロパティの値, ... } のように行う
  • 例えば、{ name: "John Doe", age: 30 }は、名前と年齢のプロパティを持つオブジェクト

クラス

  • オブジェクトの設計図
  • オブジェクトの特性（プロパティ）と振る舞い（メソッド）を定義したもの
  • クラスから、オブジェクトを生成（インスタンス化）することができる
  • クラスの定義は、class クラス名 { ... } のように行う
  • 例えば、class Person { name: string; age: number; }は、名前と年齢のプロパティを持つクラス

インスタンス

  • クラスから生成された具体的なオブジェクト
  • クラスのプロパティとメソッドを継承する＝クラスで定義された特性や振る舞いを備えている
  • 例えば、const person = new Person("John Doe", 30);は、Personクラスのインスタンスを生成する

コンストラクタ

  • インスタンスを生成するときに実行されるメソッド
  • インスタンスのプロパティを初期化したり、独自の処理を実行したりするために使用される
  • コンストラクタは、クラスの定義内で constructor() 関数として定義する
  • 例えば、class Person { constructor(name: string, age: number) { this.name = name; this.age = age; }は、nameとageのプロパティを初期化するコンストラクタを持つクラス

メソッド

  • オブジェクトの動作を表す処理のまとまり
  • オブジェクトのプロパティを操作したり、計算したり、他のオブジェクトと通信したりすることができる
  • メソッドは、オブジェクトの定義内で プロパティ名() 関数として定義する
  • 例えば、class Person { sayHello() { console.log("Hello, " + this.name); } }は、Helloと挨拶するメソッドを持つクラス

それぞれの関係

クラスは、オブジェクトの設計図である

  • クラスは、オブジェクトの共通の特性や振る舞いを定義する
  • クラスから、オブジェクトを生成（インスタンス化）することができる

インスタンスは、クラスから生成された具体的なオブジェクトである

  • インスタンスは、クラスで定義された特性や振る舞いを備えている

コンストラクタは、インスタンスを生成する際に実行されるメソッドである

  • コンストラクタは、インスタンスの初期化や独自の処理を実行したりできる

メソッドは、オブジェクトの動作を表す処理のまとまりである

  • メソッドは、オブジェクトのプロパティを操作したり、他のオブジェクトと通信したりすることができる

関連する用語

  • プロパティ
    • オブジェクトの特性や属性を表すもの
    • 例えば、nameやageは、オブジェクトの属性を表すプロパティ
  • プロトタイプ
    • クラスのインスタンス間で共有されるプロパティやメソッドを定義したもの
  • 継承
    • あるクラスから別のクラスを派生させること
    • 派生クラスは、親クラスのプロパティとメソッドを継承する

以上、JavaScriptの「オブジェクト」「クラス」「インスタンス」「コンストラクタ」「メソッド」の意味をまとめました。

コードの具体例

JavaScript

// クラスの定義
class Rectangle {
//コンストラクタ
  constructor(width, height) {
//プロパティ
    this.width = width;
    this.height = height;
  }
//メソッドの定義
  getArea() {
    return this.width * this.height;
  }
}

// インスタンスの生成
const rectangle = new Rectangle(10, 20);

// プロパティの取得
console.log(rectangle.width); // 10
console.log(rectangle.height); // 20

// メソッドの呼び出し
console.log(rectangle.getArea()); // 200

この例では、Rectangleというクラスを定義しています。

Rectangleクラスには、widthとheightというプロパティと、getArea()というメソッドが定義されています。

new Rectangle(10, 20)というコードにより、Rectangleクラスからrectangleというインスタンスを生成します。

rectangle.widthやrectangle.heightとすることで、rectangleインスタンスのプロパティwidthとheightを取得できます。

rectangle.getArea()とすることで、rectangleインスタンスのメソッドgetArea()を呼び出すことができます。

getArea()メソッドは、widthとheightのプロパティの値を掛け合わせた面積を返します。

JavaScriptのクラスでの「new」の使い方

  • クラスからインスタンスを生成します。
  • インスタンスを生成する際に、コンストラクタを実行します。

「new」の具体的な使い方：コード

JavaScript

// クラスの定義
class Rectangle {
//コンストラクタ
  constructor(width, height) {
//プロパティ
    this.width = width;
    this.height = height;
  }
}

// インスタンスの生成
const rectangle = new Rectangle(10, 20);

このコードでは、newキーワードを使用して、Rectangleクラスからrectangleというインスタンスを生成しています。

newキーワードを使用することで、Rectangleクラスのコンストラクタが実行されます。

コンストラクタでは、widthとheightというプロパティに10と20の値を代入しています。

「new」は、クラスからインスタンスを生成する際に使用します。インスタンスを生成する際には、コンストラクタを実行します。

JavaScriptのクラスでの「this」の使い方

  • クラスの中では、メソッドを呼び出したインスタンスを参照します。
  • インスタンスのプロパティやメソッドを参照したい場合に使用します。

「this」の具体的な使い方：コード

JavaScript

// クラスの定義
class Rectangle {
//コンストラクタ
  constructor(width, height) {
//プロパティ
    this.width = width;
    this.height = height;
  }
//メソッドの定義
  getArea() {
    return this.width * this.height;
  }
}

// インスタンスの生成
const rectangle = new Rectangle(10, 20);

// メソッドの呼び出し
console.log(rectangle.getArea()); // 200

このコードでは、getArea()メソッドのthisは、rectangleインスタンスを参照します。

そのため、this.widthとthis.heightは、rectangleインスタンスのプロパティwidthとheightを参照します。

なお、クラスの中で「this」を使用しない場合には、selfキーワードを使用することもできます。

selfキーワードは、thisと同じように、メソッドを呼び出したインスタンスを参照します。

おまけ：それぞれの単語の英語での元の意味

プログラミング用語をただのカタカナの横文字として覚えるよりも、英語の元の意味も知っていたほうが記憶に定着しやすい？？

と思うので、それぞれの単語の、プログラミング用語以外での英語での元の意味も書いておきます。

  • オブジェクト
    英語の「object」には、以下の3つの意味があります。
    • 物体、物
    • 対象、目的
    • 目的語
  • クラス
    英語の「class」には、以下の5つの意味があります。
    • 学級、クラス
    • 分類、類、部類、種類
    • 階級、階層
    • 気品、上品さ、礼儀正しさと教養が備わっていること
    • 〈米〉同期生
  • インスタンス
    英語の「instance」には、以下の意味があります。
    • 事実、事例、例、場合
    • 実体、存在
    • 例示、説明
    • 訴訟、裁判
  • コンストラクタ
    「constructor」には、以下の意味があります。
    • 建設者、建造者
  • メソッド
    「method」の意味は、以下のとおりです。
    • 手段、方法、やり方
    • 論理的で組織立った方法、方式
    • 筋道、順序、体系
    • 秩序、規律
    • 規則正しさ、きちょうめんさ
  • プロパティ
    （property）の意味は、以下のとおりです。
    • 所有物、資産、財産
    • 性質、特徴、属性
    • 芝居や映画のセットで使われたり動かせたりする物品や物体
  • プロトタイプ
    「prototype」の意味は、以下のとおりです。
    • 原型、模範、試作品
    • 標準的、典型的な例

読んでいただいて、ありがとうございます。
m(_ _)m

-プログラミング
-