JavaScriptのクラスclass構文の基本と使い方入門オブジェクト指向をやさしく解説

1. JavaScriptのクラスclass構文とは

1. JavaScriptのクラスclass構文とは

JavaScriptのクラスclass構文とは、同じ種類のデータや処理をまとめて定義できる仕組みです。プログラミング未経験の方は、まず設計図というイメージを持ってください。たい焼きを作るときに型がありますが、その型がクラスです。そして実際に焼き上がったたい焼きがオブジェクトです。

JavaScriptでは、以前は関数を使って似たようなことをしていましたが、class構文が追加されたことで、より分かりやすくオブジェクト指向プログラミングが書けるようになりました。オブジェクト指向とは、データと処理をひとまとめにして考える方法のことです。

2. クラスの基本的な書き方

2. クラスの基本的な書き方

まずはJavaScriptのクラスの基本的な書き方を見てみましょう。classキーワードを使って定義します。キーワードとは、JavaScriptで特別な意味を持つ予約語のことです。

class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log("こんにちは、" + this.name + "です。");
  }
}

const taro = new Person("太郎");
taro.greet();

constructorはコンストラクタと読みます。これはオブジェクトが作られるときに最初に実行される特別なメソッドです。thisは、そのオブジェクト自身を表します。

こんにちは、太郎です。

3. プロパティとメソッドの違い

3. プロパティとメソッドの違い

クラスの中には、プロパティとメソッドがあります。プロパティとはデータのことです。例えば名前や年齢です。メソッドとは、そのデータを使って行う処理のことです。例えば挨拶をする動作などです。

class Car {
  constructor(color, speed) {
    this.color = color;
    this.speed = speed;
  }

  drive() {
    console.log(this.color + "の車が" + this.speed + "キロで走ります。");
  }
}

const myCar = new Car("赤", 60);
myCar.drive();

赤の車が60キロで走ります。

colorやspeedがプロパティ、driveがメソッドです。このようにデータと処理をまとめることが、JavaScriptのクラスの大きな特徴です。

4. 複数のオブジェクトを作る

4. 複数のオブジェクトを作る

クラスの便利なところは、同じ設計図から複数のオブジェクトを作れる点です。これは大量生産のイメージです。

class Animal {
  constructor(type) {
    this.type = type;
  }

  speak() {
    console.log(this.type + "が鳴いています。");
  }
}

const dog = new Animal("犬");
const cat = new Animal("猫");

dog.speak();
cat.speak();

犬が鳴いています。
猫が鳴いています。

同じAnimalクラスから、犬と猫という別々のオブジェクトを作ることができました。これがオブジェクト指向の基本的な考え方です。

5. クラスの中で計算をする例

5. クラスの中で計算をする例

クラスは計算処理にも使えます。例えば商品の合計金額を計算するクラスを作ってみましょう。

class Item {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }

  getTaxIncludedPrice() {
    return this.price * 1.1;
  }
}

const apple = new Item("りんご", 100);
console.log(apple.getTaxIncludedPrice());

110

getTaxIncludedPriceは税込価格を計算するメソッドです。このようにJavaScriptのclass構文を使うと、計算処理も整理して書くことができます。

6. オブジェクト指向の考え方をやさしく理解する

6. オブジェクト指向の考え方をやさしく理解する

オブジェクト指向とは、物を中心に考えるプログラミングの方法です。人や車や動物のような身近な存在をそのままプログラムの中に表現します。クラスは設計図、オブジェクトは実体という関係を覚えておきましょう。

JavaScriptのクラスを学ぶことで、コードの再利用がしやすくなり、整理されたプログラムが書けるようになります。大きなアプリ開発やゲーム開発でも、class構文はとても重要です。初心者のうちから基礎をしっかり理解することで、応用にも強くなります。

JavaScriptのクラスの基本と使い方を理解することは、オブジェクト指向プログラミング入門の第一歩です。class構文、constructor、this、プロパティ、メソッドという言葉の意味を一つずつ確認しながら学習を進めていきましょう。

まとめ

まとめ

今回はJavaScriptのクラスclass構文の基本と使い方について、オブジェクト指向の考え方とあわせてやさしく解説してきました。JavaScriptのclassは設計図の役割を持ち、その設計図からオブジェクトを作成することで、データと処理をひとつにまとめて管理できることが大きな特徴です。プログラミング初心者の方にとっては、クラスやオブジェクト指向という言葉だけで難しく感じるかもしれませんが、たい焼きの型と完成したたい焼きの関係をイメージすることで、classとオブジェクトの関係を直感的に理解できます。

JavaScriptのクラス構文では、classキーワードを使って定義し、constructorで初期化処理を行い、thisを使ってプロパティにアクセスします。プロパティはデータを表し、メソッドは処理を表します。このプロパティとメソッドをひとまとめにできる点こそが、オブジェクト指向プログラミングの重要なポイントです。JavaScriptのclass構文を使うことで、コードの再利用性が高まり、可読性も向上し、大規模なアプリ開発や業務システム開発でも整理された構造を保つことができます。

さらに、同じクラスから複数のオブジェクトを生成できることも重要です。同じ設計図から異なるデータを持つインスタンスをいくつも作成できるため、効率的なプログラミングが可能になります。JavaScript入門の段階でclass構文の基本を理解しておくことは、今後のフレームワーク学習やTypeScript学習にも大きく役立ちます。オブジェクト指向の基礎を身につけることで、複雑な処理も整理して考えられるようになります。

サンプルプログラムで総復習

ここでJavaScriptのクラスclass構文の基本を総復習してみましょう。プロパティとメソッドを持つクラスを定義し、オブジェクトを生成して処理を実行します。

class Student {
  constructor(name, score) {
    this.name = name;
    this.score = score;
  }

  introduce() {
    console.log("私は" + this.name + "です。");
  }

  showScore() {
    console.log(this.name + "の点数は" + this.score + "点です。");
  }
}

const hanako = new Student("花子", 90);
hanako.introduce();
hanako.showScore();

私は花子です。
花子の点数は90点です。

このように、JavaScriptのclass構文を使えば、名前や点数といったデータをプロパティとして保持し、そのデータを使った処理をメソッドとして定義できます。constructorで初期値を設定し、thisでインスタンス自身を参照する流れをしっかり理解しておきましょう。JavaScriptのクラスの基本を繰り返し練習することで、オブジェクト指向の考え方が自然と身につきます。