Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

クラスはオブジェクトの設計図

I. クラスとコンストラクタ

「ユーザー定義ていぎオブジェクト」が作れるようになると、次にぶつかる壁が 「同じ形のオブジェクトを100人分作りたいときはどうするの?」 という問題です。

一人ずつ手書てがきでオブジェクトを作るのは大変ですよね。そこで登場するのが 「クラス(Class)」「コンストラクタ(Constructor)」 です。

これを 「たいきの型」たとえて説明します。

1. クラス(Class)とは?

クラスは、オブジェクトを作るための 「設計図(せっけいず)」 または 「型(かた)」 のことです。

  • クラス: たいきの「型」。これ自体じたいは食べられませんが、形を決めています。

たい<ruby>焼<rt>や</rt></ruby>きの型

  • オブジェクト(インスタンス): 型から焼かれた「たいき」。実際に食べられる実物です。

たい<ruby>焼<rt>や</rt></ruby>き

クラスを一度作っておけば、同じ特徴を持ったオブジェクトを何度でも、一瞬で作ることができます。

Note

「インスタンス」という言葉は、「オブジェクト」とほぼ同じ意味ですが、より具体的なイメージです。たとえで言えば、「オブジェクト」が「たいき」全般を指すとすると、「インスタンス」は、今、あなた食べようとしている目の前の「たいき」という具体的な存在を指すイメージです。

詳しくはこちら

2. コンストラクタ(Constructor)とは?

コンストラクタは、クラスの中に書く 初期化しょきか(しょきか)のための魔法まほう です。

たいきを焼くときに、「中身は何にする?」「あんこ? クリーム?」と決める作業のことです。オブジェクトが誕生する瞬間に、名前や年齢などのデータをセットする役割を持っています。

3. コードで見てみよう!

クラスという「型」を使って、2人の学生を作ってみましょう。

// 1. クラス(設計図)を作る
class Student {
  // 2. コンストラクタ(中身をセットする役割)
  constructor(name, age) {
    this.name = name; // この人の名前は〜
    this.age = age;   // この人の年齢は〜
  }

  // 3. メソッド(この型で作られた人ができる動(うご)き)
  sayHello() {
    console.log(`こんにちは、${this.name}です!`);
  }
}

// 4. クラスを使って実物(インスタンス)を作る
const studentA = new Student("アリ", 20);
const studentB = new Student("リン", 22);

studentA.sayHello(); // "こんにちは、アリです!"
studentB.sayHello(); // "こんにちは、リンです!"

Note

this.name = name;の右のname引数ひきすうとして渡されたnameで、左のthis.nameは、studentというクラスのインスタンスが内部ないぶに持つデータ、つまりオブジェクトのプロパティです。

studentA.namestudentA[name]で“アリ“を取り出すことができます。

4. たとえ話:ハンコとスタンプ

クラスは 『ハンコ』 です。 ハンコの形(名前や年齢の枠)は決まっているよね。 実際に紙にポン! と押して出てきた図形が 『オブジェクト(インスタンス)』。 押すたびにインクの色(データ)を変えれば、同じ形だけど少し違うスタンプがたくさん作れるでしょ? new という言葉を使ってハンコを押すイメージなんですよ!

5. 大切なキーワードまとめ

言葉意味たとえ話
Class(クラス)オブジェクトの設計図たいきの型 / ハンコ
Constructor(コンストラクタ)最初にデータをセットする場所中身を詰める作業
Instance(インスタンス)クラスから作られた実物焼けたたいき / 押されたスタンプ
new新しいインスタンスを作る命令「焼いて!」という注文

📝 留学生へのアドバイス

最初は this.name = name のようなかたにびっくりするかもしれないけど、これは 『新しく生まれる自分(this)のなまえを、もらった名前にセットしてね』 という意味なんです。 慣れてくると、100人でも1000人でも同じキャラクターを簡単に作れるようになるから、すごく便利ですよ!

いかがでしょうか?「型(クラス)」を作って、「注文(new)」して、「実物(インスタンス)」を作る。この流れが分かれば、大規模だいきぼなプログラムも怖くありません!


II. 継承けいしょう効率こうりつ的に新しいものを作る

「クラス」という設計図の作り方がわかったら、次はもっと便利な 継承けいしょう(けいしょう / Inheritance)」 という仕組しくみを覚えましょう!

継承けいしょうとは、たとえて言えば、 「親のいいところをいで、新しい独自の特徴をプラスすること」 です。

1. 継承けいしょう(Inheritance)とは?

継承けいしょう」とは、すでに作ってあるクラス(設計図)をベースにして、新しいクラスを作ること です。

たとえば、「動物(Animal)」というクラスがあれば、それを継承けいしょうして「イヌ(Dog)」や「ネコ(Cat)」を作ることができます。

  • 「動物」なら誰でも持っている特徴(名前、食べるうごき)は、そのままもらう
  • 「イヌ」だけの特徴(吠えるうごき)は、新しく書き足す

これが継承けいしょうのすごいところです!

2. かたのキーワード:extendssuper

JavaScriptで継承けいしょうを使うときには、2つの大事な言葉を使います。

  1. extends(イクステンズ): 「〜を広げる(継承けいしょうする)」という意味。
  2. super(スーパー): 「親(親クラス)」という意味。親のコンストラクタを呼び出すときに使います。
// 1. 親クラス(ベース):人間
class Person {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    console.log(`こんにちは、${this.name}です。`);
  }
}

// 2. 子クラス(継承(けいしょう)):留学生
// 「Person(人間)」をベースに「InternationalStudent」を作る
class InternationalStudent extends Person {
  constructor(name, country) {
    super(name); // 親クラスのコンストラクタに「名前」を渡す(重要!)
    this.country = country; // 新しい特徴(国籍)をプラス
  }

  // 3. 新しい動(うご)きをプラス
  introduce() {
    console.log(`${this.country}から来ました。よろしくお願いします!`);
  }
}

const user = new InternationalStudent("アハメド", "エジプト");
user.sayHello();  // 親からもらった動(うご)き
user.introduce(); // 自分だけの新しい動(うご)き

3. 留学生へのたとえ話:スマホの進化

最初の携帯電話(親クラス)は、『電話をする』『メールを送る』機能を持っていました。 次に登場したスマートフォン(子クラス)は、携帯電話の機能を 継承けいしょう しているから、もちろん電話もメールもできます。 でも、そこに『アプリを入れる』とか『顔認証(かおにんしょう)』という 新しい機能を追加 したんだ。これが『継承けいしょう』のイメージです!

4. なぜ継承けいしょうを使うの?

留学生に、継承けいしょうのメリットをこう伝えてあげてください。

  • 楽ができる: 同じことを何度も書かなくていいから、コードが短くなるよ。
  • 間違いが減る: 基本のルール(親)を直せば、全員(子)に反映されるから便利だよ。

まとめテーブル

言葉読み方役割
Parent Class親クラス基本の設計図(ベース)
Child Class子クラス継承けいしょうして新しく作る設計図
extendsイクステンズ「親からぐよ!」という宣言せんげん
super()スーパー「親のコンストラクタを動かして!」という合図

Tip

「オーバーライド」もできます! オブジェクトの「オーバーライド」と同様に、クラスでも、親からもらったうごきを、子クラスでかええる「オーバーライド(上書うわがき)」が使えます。「親のやりかたより、僕のやりかたのほうが得意だよ!」と上書うわがきするイメージだと教えてあげると、より理解が深まります。

いかがでしょうか?「基本の形をもらって、自分流にアレンジする」。これが継承けいしょうのパワーです!

IV. まとめ:プログラマーのように考えよう

オブジェクト指向しこう(しこう)は、単なるかたではなく、**「複雑(ふくざつ)な現実(げんじつ)を整理(せいり)する方法」**です。

アクションプラン

MDNの数てゲーム

上の「数てゲーム」を、オブジェクトを使って次のように改良(かいりょう)を考えてみてください。

  • 「ゲーム全体」をひとつの大きなオブジェクトにする。
  • プレイヤーの「これまでの予想よそう履歴(よそうりれき)」をプロパティに保存する。
  • 「当たり・ハズレの判定はんてい」をメソッドにする。

むずかしい用語も、RPGや自己じこ紹介カードのように身近みじかなものにたとえれば、きっと理解(りかい)できるはずです。オブジェクトを使って、よりスマートでプロフェッショナルなプログラムを作っていきましょう。自信(じしん)を持って挑戦ちょうせん(ちょうせん)してください!