スキルテスト: オブジェクト指向 JavaScript

このスキルテストの目的は、JavaScript でのクラスの記事を理解できたかどうかを評価することです。

メモ: このページのインタラクティブエディターや、CodePenJSFiddleGlitchなどのオンラインエディターで解決策を試すことができます。 コードにエラーがあった場合は、このページの結果パネルまたは JavaScript コンソールの中に結果がログ出力されます。

行き詰まった場合は、コミュニケーションチャンネルのいずれかに連絡してください。

OOJS 1

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

次のことをやってください。

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

下記のライブコードを更新して、完成例を再現してみてください。

自分自身でエディターやオンラインエディターで作業する場合は、この作業の開始時点のものをダウンロードしましょう。

OOJS 2

次に、Shapeを継承した Square クラスを作成し、正方形の面積を計算する calcArea() メソッドを追加しましょう。また、Square オブジェクトインスタンスの name プロパティには自動的に square が設定され、sides プロパティには自動的に 4 が設定されるようにコンストラクターを設定しましょう。したがって、コンストラクターを呼び出す際には、sideLength プロパティだけを提供すればよいことになります。

適切なプロパティ値を持つ Square クラスのインスタンス square を作成し、その calcPerimeter()calcArea() メソッドを呼び出して、問題なく動作することを示しましょう。

下記のライブコードを更新して、完成例を再現してみてください。

自分自身でエディターやオンラインエディターで作業する場合は、この作業の開始時点のものをダウンロードしましょう。