JavaScriptのクラス構文とオブジェクト指向の基礎を学ぼう｜初心者でもわかるクラス入門

1. クラスって何？設計図のようなもの

1. クラスって何？設計図のようなもの

クラスとは、同じ種類のものをまとめて作るための「設計図」のようなものです。たとえば、車を作るときに「車クラス」を作って、車の特徴や動き方を決めておきます。その設計図を使って、実際の車（オブジェクト）を何台も作ることができます。

プログラミングの世界でいうオブジェクトとは、「もの」や「データのかたまり」のことです。クラスはそのオブジェクトを作るための型（テンプレート）とも言えます。

2. JavaScriptのクラス構文の基本

2. JavaScriptのクラス構文の基本

JavaScriptでクラスを作るときは、classというキーワードを使います。基本の書き方は次の通りです。

class Car {
  constructor(name, color) {
    this.name = name;   // 名前をセット
    this.color = color; // 色をセット
  }

  drive() {
    console.log(this.name + "が走ります。");
  }
}

ここで使っているconstructorは「コンストラクター」と読み、オブジェクトを作るときに呼ばれる特別な関数です。thisは「このクラスで作られたオブジェクト自身」を意味します。

3. クラスからオブジェクトを作ってみよう

3. クラスからオブジェクトを作ってみよう

上のクラスを使って実際に車のオブジェクトを作ってみましょう。

const myCar = new Car("プリウス", "赤");
myCar.drive(); // プリウスが走ります。

newは「新しいオブジェクトを作るよ」という意味です。myCarは車のオブジェクト名で、driveメソッドを呼ぶと車が走る動作をします。

4. オブジェクト指向って何？

4. オブジェクト指向って何？

オブジェクト指向とは、プログラムを「もの（オブジェクト）」として考える考え方です。人や車、商品などをオブジェクトとして扱い、それぞれに特徴（プロパティ）や動作（メソッド）を持たせて整理します。

これにより、プログラムが現実の世界に近い形で表現でき、管理や拡張がしやすくなります。

5. クラスで作るオブジェクトの特徴（プロパティ）と動作（メソッド）

5. クラスで作るオブジェクトの特徴（プロパティ）と動作（メソッド）

先ほどのCarクラスでは、nameやcolorがプロパティ、driveがメソッドです。

• プロパティ：オブジェクトの「特徴」や「情報」。例：色や名前
• メソッド：オブジェクトができる「動作」や「処理」。例：走る、止まる

オブジェクト指向では、これらをセットで考えます。

6. クラスの継承で機能を増やす（簡単な説明）

6. クラスの継承で機能を増やす（簡単な説明）

クラスは別のクラスを元にして作ることもできます。これを「継承（けいしょう）」と言います。例えば「スポーツカー」というクラスを「車」クラスから作り、走る以外に「スピードを上げる」機能を追加できます。

class SportsCar extends Car {
  turbo() {
    console.log(this.name + "がターボで加速します！");
  }
}

const mySportsCar = new SportsCar("フェラーリ", "赤");
mySportsCar.drive(); // フェラーリが走ります。
mySportsCar.turbo(); // フェラーリがターボで加速します！

extendsは「〜を継承する」という意味で、元のクラスの機能を受け継いで新しい機能を足せます。

7. まとめとして大切なポイント

7. まとめとして大切なポイント

• クラスはオブジェクトを作るための設計図のようなもの
• constructorはオブジェクトを作るときに呼ばれる特別な関数
• thisは「そのオブジェクト自身」を指す
• オブジェクトは「プロパティ」と「メソッド」を持つ
• 継承を使うと既存のクラスの機能を引き継ぎ、新しい機能を追加できる

JavaScriptのクラス構文とオブジェクト指向の考え方は、プログラムをわかりやすく整理し、複雑な動きを扱うのにとても役立ちます。ぜひ基本からゆっくり理解していきましょう。

まとめ

まとめ

ここまでJavaScriptにおけるクラス構文の基礎から、オブジェクト指向の考え方までを詳しく解説してきました。プログラミングを始めたばかりの頃は、「なぜわざわざクラスなんて面倒な書き方をするんだろう？」と疑問に思うかもしれません。しかし、大規模なアプリケーション開発やチームでの共同作業において、クラスはソースコードの可読性と再利用性を劇的に向上させてくれる強力な武器になります。

JavaScriptクラス構文の重要キーワードを再確認

クラスを使いこなすために避けては通れないのが、「プロパティ」と「メソッド」、そして「コンストラクタ」の関係性です。これらは、現実世界の「状態」と「振る舞い」をコードに落とし込むための仕組みです。

• コンストラクタ (constructor): new演算子によってインスタンス化される際に自動実行される初期化処理です。
• プロパティ (Property): オブジェクトが保持するデータ（変数）です。
• メソッド (Method): オブジェクトが実行できる処理（関数）です。

実践的なコード例：ユーザー管理クラス

もう少し実用的な例を見てみましょう。ウェブサイトのログインユーザーを管理するようなケースでも、クラスは非常に役立ちます。以下のコードでは、ユーザー名と権限を保持し、挨拶を表示するシンプルなクラスを定義しています。

class User {
  constructor(username, role) {
    this.username = username;
    this.role = role;
  }

  // ユーザーの情報を表示するメソッド
  introduce() {
    console.log(`こんにちは、${this.username}さん。あなたの権限は${this.role}です。`);
  }

  // 権限をチェックするメソッド
  isAdmin() {
    return this.role === "admin";
  }
}

// インスタンスの作成
const user1 = new User("田中太郎", "admin");
const user2 = new User("佐藤花子", "general");

user1.introduce();
console.log("管理者ですか？:", user1.isAdmin());

user2.introduce();
console.log("管理者ですか？:", user2.isAdmin());

実行結果は以下のようになります。

こんにちは、田中太郎さん。あなたの権限はadminです。
管理者ですか？: true
こんにちは、佐藤花子さん。あなたの権限はgeneralです。
管理者ですか？: false

オブジェクト指向がもたらす開発の効率化

オブジェクト指向プログラミング（OOP）の最大の利点は、「カプセル化」や「継承」といった概念を利用できる点にあります。カプセル化とは、データとその操作を一つのユニット（クラス）にまとめ、外部から直接触らせないようにすることでバグを防ぐ仕組みです。

また、記事の後半で触れた「継承」をさらに応用すれば、共通の機能を持つ「親クラス」を作り、そこから派生して個別の機能を持つ「子クラス」を量産できます。これにより、同じコードを何度も書く必要がなくなり、修正が必要な際も親クラスを一箇所直すだけで済むという、メンテナンス性の高いコードが実現します。

これからの学習ステップ

クラスの概念を一度にすべて理解するのは大変です。まずは、身の回りにある「もの」をクラスに置き換えて考えてみる練習をしてみましょう。「スマートフォンクラス」なら、プロパティは「モデル名」や「バッテリー残量」、メソッドは「電話をかける」「アプリを開く」といった具合です。

JavaScriptの世界では、ReactやVue.jsといったモダンなフレームワークの内部構造でもクラス（またはそれに準ずるオブジェクトの考え方）が多用されています。基礎をしっかり固めておくことで、より高度なライブラリの習得もスムーズになるはずです。