スキルテスト: オブジェクト指向 JavaScript
このスキルテストの目的は、JavaScript でのクラスの記事を理解できたかどうかを評価することです。
メモ: このページのインタラクティブエディターや、CodePen、JSFiddle、Glitchなどのオンラインエディターで解決策を試すことができます。 コードにエラーがあった場合は、このページの結果パネルまたは JavaScript コンソールの中に結果がログ出力されます。
行き詰まった場合は、コミュニケーションチャンネルのいずれかに連絡してください。
OOJS 1
このタスクでは、Shape
クラスの定義から始めましょう。このクラスには name
, sides
, sideLength
の 3 つのプロパティがあります。このクラスは、正方形や正三角形のように、すべての辺の長さが同じである図形のみをモデルとしています。
次のことをやってください。
- このクラスにコンストラクターを追加しましょう。コンストラクターは
name
,sides
,sideLength
プロパティを引数に取り、初期化します。 - このクラスに新しいメソッド
calcPerimeter()
を追加しましょう。このメソッドは、外周の長さ(図形の外縁の長さ)を計算し、その結果をコンソールにログ出力します。 Shape
クラスの新しいインスタンスsquare
を作成しましょう。名前にsquare
、sides
に4
、sideLength
に5
を指定しましょう。- このインスタンスに対して
calcPerimeter()
メソッドを呼び出して、計算結果が期待通りにブラウザーコンソールにログ出力されるかどうかを確認しましょう。 - 新しい
Shape
のインスタンスとしてtriangle
を作成しましょう。名前はtriangle
、sides
は3
、sideLength
は3
とします。 - triangle.calcPerimeter()`を呼び出して、問題なく動作することを確認しましょう。
下記のライブコードを更新して、完成例を再現してみてください。
自分自身でエディターやオンラインエディターで作業する場合は、この作業の開始時点のものをダウンロードしましょう。
OOJS 2
次に、Shape
を継承した Square
クラスを作成し、正方形の面積を計算する calcArea()
メソッドを追加しましょう。また、Square
オブジェクトインスタンスの name
プロパティには自動的に square
が設定され、sides
プロパティには自動的に 4
が設定されるようにコンストラクターを設定しましょう。したがって、コンストラクターを呼び出す際には、sideLength
プロパティだけを提供すればよいことになります。
適切なプロパティ値を持つ Square
クラスのインスタンス square
を作成し、その calcPerimeter()
と calcArea()
メソッドを呼び出して、問題なく動作することを示しましょう。
下記のライブコードを更新して、完成例を再現してみてください。
自分自身でエディターやオンラインエディターで作業する場合は、この作業の開始時点のものをダウンロードしましょう。