確認テスト: オブジェクト指向 JavaScript

OOJS 1

この課題では、Shape クラスの定義から始めましょう。このクラスには name, sides, sideLength の 3 つのプロパティがあります。このクラスは、正方形や正三角形のように、すべての辺の長さが同じである図形のみをモデルとしています。

課題を完了するには、次のようにしてください。

1. このクラスにコンストラクターを追加しましょう。コンストラクターは name, sides, sideLength プロパティを引数に取り、初期化します。
2. このクラスに新しいメソッド calcPerimeter() を追加しましょう。このメソッドは、外周の長さ（図形の外縁の長さ）を計算し、その結果をコンソールにログ出力します。
3. Shape クラスの新しいインスタンス square を作成しましょう。名前に square、 sides に 4、 sideLength に 5 を指定しましょう。
4. このインスタンスに対して calcPerimeter() メソッドを呼び出して、計算結果が期待通りにブラウザーコンソールにログ出力されるかどうかを確認しましょう。
5. 新しい Shape のインスタンスとして triangle を作成しましょう。name は triangle、sides は 3、sideLength は 3 とします。
6. triangle.calcPerimeter()を呼び出して、問題なく動作することを確認しましょう。

class Shape {
  name;
  sides;
  sideLength;
}

class Shape {
  name;
  sides;
  sideLength;

  constructor(name, sides, sideLength) {
    this.name = name;
    this.sides = sides;
    this.sideLength = sideLength;
  }

  calcPerimeter() {
    console.log(
      `${this.name} の外周の長さは ${this.sides * this.sideLength} です。`,
    );
  }
}

const square = new Shape("square", 4, 5);
square.calcPerimeter();

const triangle = new Shape("triangle", 3, 3);
triangle.calcPerimeter();

OOJS 2

それでは、いくつか継承を加えてみましょう。

課題を完了するには、次のようにしてください。

1. Shape を継承した Square クラスを作成しましょう。
2. 領域の面積を計算する calcArea() メソッドを Square に追加しましょう。
3. Square オブジェクトインスタンスの name プロパティには自動的に square が設定され、sides プロパティには自動的に 4 が設定されるようにコンストラクターを設定しましょう。コンストラクターを呼び出す際には、sideLength プロパティだけを提供すればよいことになります。
4. 適切なプロパティ値を持つ Square クラスのインスタンス square を作成し、その calcPerimeter() と calcArea() メソッドを呼び出して、問題なく動作することを示しましょう。

class Shape {
  name;
  sides;
  sideLength;

  constructor(name, sides, sideLength) {
    this.name = name;
    this.sides = sides;
    this.sideLength = sideLength;
  }

  calcPerimeter() {
    console.log(
      `${this.name} の外周の長さは ${this.sides * this.sideLength} です。`,
    );
  }
}

// ここから上のコードは変更しないでください。

// ここにコードを追加してください。

// ...
// ここから上のコードは変更しないでください。

class Square extends Shape {
  constructor(sideLength) {
    super("square", 4, sideLength);
  }

  calcArea() {
    console.log(
      `${this.name} の面積は ${this.sideLength * this.sideLength} 平方です。`,
    );
  }
}

const square = new Square(4);

square.calcPerimeter();
square.calcArea();

• 前のページ
• Overview: 高度な JavaScript のオブジェクト指向
• 次のページ