JavaScript | 第13章「クラスの使用」

javascrpit JavaScript
2019.01.03
スポンサーリンク

JavaScript クラス練習問題集（初心者向け）

初心者でもステップアップできる課題セット（全5問） を作りました。
順番にやっていくと、クラスの基礎 → メソッド → アクセサ → 継承 → 静的メソッド、という流れで自然に身につきます。

レベル1：クラスの基本を作ろう

課題：
Person クラスを作って、名前と年齢を持てるようにしてください。

条件：

  1. クラス名：Person
  2. コンストラクタで name と age を受け取る
  3. introduce() メソッドで「私は〇〇、〇歳です」と表示

例：

const p = new Person("太郎", 20);
p.introduce(); 
// 出力：私は太郎、20歳です
JavaScript

レベル2：メソッドで動きをつけよう

課題：
Counter クラスを作り、数字を数える動作を実装しよう。

条件：

  1. プロパティ：count（初期値 0）
  2. メソッド：
    • increment() → count を 1 増やす
    • decrement() → count を 1 減らす
    • show() → 現在の count を表示

例：

const c = new Counter();
c.increment();
c.increment();
c.show(); // 現在のカウント: 2
JavaScript

レベル3：getter / setter を使ってみよう

課題：
Rectangle クラスを作って、面積を プロパティ風 に取得できるようにしよう。

条件：

  1. プロパティ：width, height
  2. get area() を定義して、width * height を返す
  3. set width と set height で、負の値を拒否（エラーを投げる）

例：

const rect = new Rectangle(5, 10);
console.log(rect.area); // 50
rect.width = -2; // エラー：幅は正の値でなければなりません
JavaScript

レベル4：クラスの継承に挑戦！

課題：
Animal クラスを作り、そこから Dog クラスを継承させてみよう。

条件：

  1. Animal クラスに name と speak() メソッドを持たせる
    • speak() は「（名前）が鳴いた！」を表示
  2. Dog クラスは Animal を継承し、speak() をオーバーライドして「ワンワン！」を表示する
  3. super() を使って親のコンストラクタを呼ぶ

例：

const dog = new Dog("ポチ");
dog.speak(); // ポチがワンワン！と鳴いた！
JavaScript

レベル5：静的メソッドを作ろう

課題：
MathTool クラスを作って、インスタンスを作らなくても使える計算ツールを作ろう。

条件：

  1. 静的メソッド add(a, b) → a + b を返す
  2. 静的メソッド average(arr) → 配列の平均値を返す
  3. new MathTool() で使おうとするとエラーになるようにする（※ヒント：constructor 内で throw）

例：

console.log(MathTool.add(3, 7));       // 10
console.log(MathTool.average([1,2,3])); // 2
JavaScript

ボーナス課題（中級）

Book クラスを作って、BookList クラスで複数の本を管理するシステムを作ってみよう。
追加・削除・検索などをメソッド化すると、オブジェクト設計の力がつきます！

練習のコツ

  • すぐに MDN を見ずに、「どう書けばいいかな？」を考えてみる。
  • クラス名は大文字で始めるのが慣習（例：Person, Rectangle）
  • this は「そのインスタンス自身」を指す
  • 継承では super() を忘れない！

では、先ほどの クラス練習問題（全5問） に、模範解答＋解説つき の完全版をお届けします。
初心者でも「なぜこう書くのか」がちゃんと理解できるように、丁寧にコメントとポイントをつけています。

JavaScript クラス練習問題（模範解答＆解説つき）

レベル1：クラスの基本を作ろう

課題

Person クラスを作って、名前と年齢を持てるようにしてください。

模範解答

class Person {
  constructor(name, age) {
    // インスタンスが作られたときに実行される
    this.name = name;
    this.age = age;
  }

  // メソッド（インスタンスごとに使える関数）
  introduce() {
    console.log(`私は${this.name}、${this.age}歳です`);
  }
}

const p = new Person("太郎", 20);
p.introduce(); // 私は太郎、20歳です
JavaScript

解説

  • constructor() はクラスの「設計図が実体化されるとき」に呼ばれます。
  • this は「作られたそのオブジェクト自身」を指します。
  • introduce() はプロトタイプメソッドとして共有されるため、
    たくさんの Person を作ってもメモリ効率が良いです。

レベル2：メソッドで動きをつけよう

課題

Counter クラスを作り、数字を数える動作を実装。

模範解答

class Counter {
  constructor() {
    this.count = 0; // 初期値
  }

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }

  show() {
    console.log(`現在のカウント: ${this.count}`);
  }
}

const c = new Counter();
c.increment();
c.increment();
c.show(); // 現在のカウント: 2
JavaScript

解説

  • this.count は各インスタンスが自分で持っているデータ。
  • increment() や decrement() はインスタンスごとに動作。
  • 実際のアプリではクリック回数やスコア管理などに応用できます。

レベル3：getter / setter を使ってみよう

課題

Rectangle クラスを作って、area プロパティで面積を取得できるように。

模範解答

class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  // width の setter
  set width(value) {
    if (value <= 0) {
      throw new Error("幅は正の値でなければなりません");
    }
    this._width = value; // 内部用に _ をつけて区別
  }

  // width の getter
  get width() {
    return this._width;
  }

  // height の setter
  set height(value) {
    if (value <= 0) {
      throw new Error("高さは正の値でなければなりません");
    }
    this._height = value;
  }

  // height の getter
  get height() {
    return this._height;
  }

  // 面積をプロパティ風に取得できる
  get area() {
    return this.width * this.height;
  }
}

const rect = new Rectangle(5, 10);
console.log(rect.area); // 50
rect.width = -2; // エラー: 幅は正の値でなければなりません
JavaScript

解説

  • get / set を使うと、「プロパティのように見えるメソッド」が作れます。
    → rect.area は関数呼び出しに見えないけど、実際は get area() が呼ばれています。
  • _width のような内部変数は慣習的に「外から直接触らない」ことを示す記法。
  • 実際には #width のようなプライベートフィールドも使えます（より安全）。

レベル4：クラスの継承に挑戦！

課題

Animal クラスを作り、そこから Dog を継承して鳴く動作を変える。

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

  speak() {
    console.log(`${this.name}が鳴いた！`);
  }
}

class Dog extends Animal {
  constructor(name) {
    // 親クラスのコンストラクタを呼ぶ
    super(name);
  }

  // speak() をオーバーライド
  speak() {
    console.log(`${this.name}がワンワン！と鳴いた！`);
  }
}

const dog = new Dog("ポチ");
dog.speak(); // ポチがワンワン！と鳴いた！
JavaScript

解説

  • extends を使うと、親クラス（Animal）の機能を引き継げます。
  • super(name) は「親の constructor を呼ぶ」特別な関数。
  • 同名メソッドを定義すると、親のメソッドを上書き（オーバーライド）できます。
  • JavaScript のクラス継承は「プロトタイプチェーン」で内部的に実現されています。

レベル5：静的メソッドを作ろう

課題

MathTool クラスを作って、new しなくても呼べる計算ツールに。

模範解答

class MathTool {
  constructor() {
    // new されたらエラーを出す
    throw new Error("MathToolはインスタンス化できません");
  }

  // 静的メソッドはインスタンスを作らずに呼べる
  static add(a, b) {
    return a + b;
  }

  static average(arr) {
    const sum = arr.reduce((a, b) => a + b, 0);
    return sum / arr.length;
  }
}

console.log(MathTool.add(3, 7));       // 10
console.log(MathTool.average([1, 2, 3])); // 2
// const m = new MathTool(); // → エラー
JavaScript

解説

  • static をつけると、new せずに MathTool.add() のように呼べます。
  • 静的メソッドは「インスタンス固有ではない処理（汎用的なツール）」に向いています。
  • 実際の開発では「ユーティリティ関数」や「ヘルパークラス」によく使われます。

まとめ：ここで学べること

機能概要キーワード
コンストラクタ初期化処理を書くconstructor()
インスタンスメソッド各オブジェクトが使える機能this.method()
getter/setterプロパティ風の読み書き制御get / set
継承親クラスの機能を引き継ぐextends, super()
静的メソッドクラス全体で共有する関数static
前へ次へ
123456
スポンサーリンク
タイトルとURLをコピーしました