スキルテスト: オブジェクトの基本
このスキルテストの目的は、JavaScript オブジェクトの基本の理解度をテストすることです。
メモ: このページのインタラクティブエディターや、CodePen、JSFiddle、Glitch のようなオンラインエディターを使って課題の解決を試すことができます。 コードにエラーがある場合、このページの結果パネルまたは JavaScript コンソールにログ出力されます。
もし行き詰まったら、私たちのコミュニケーションチャンネルのいずれかに連絡してください。
オブジェクトの基本 1
この課題では、オブジェクトリテラルが与えられています。課題は次の通りです。
catName
変数に、ブラケット記法を用いて、name
プロパティの値を保存する- ドット記法を用いて、
greeting()
メソッドを実行する(これはブラウザーのコンソールに挨拶をログ出力します) color
プロパティをblack
に変更する
下記のライブコードを更新して、完成例を再現してみてください。
この課題の最初の状態をダウンロードすると、自分のエディターまたはオンラインエディターで作業することができます。
オブジェクトの基本 2
次の課題では、お気に入りのバンドの 1 つを表す、自分だけのオブジェクトリテラルを作成してみましょう。必要な要素は次のとおりです。
-
name
: バンドの名前を表す文字列 -
nationality
: バンドの出身国を表す文字列 -
genre
: バンドが演奏する音楽の種類 -
members
: バンドのメンバー数を表す数字 -
formed
: バンドが結成した年を表す数字 -
split
: バンドが解散した年を表す数字、まだ活動している場合はfalse
-
albums
: そのバンドによってリリースされたアルバムを表す配列。それぞれの配列の要素は、下記の要素を含んだオブジェクトであることname
: アルバムの名前を表す文字列released
: リリースされた年を表す数字
albums
配列には、少なくとも 2 つのアルバムを含めること。
これを実行したら、変数 bandInfo
に文字列を書き込む必要があります。この文字列には、バンド名、国籍、活動年数、スタイル設定、最初のアルバムのタイトルとリリース日などの詳細な略歴を格納します。
下記のライブコードを更新して、完成例を再現してみてください。
この課題の最初の状態をダウンロードすると、自分のエディターまたはオンラインエディターで作業することができます。
オブジェクトの基本 3
この課題では、課題 1 の cat
オブジェクトリテラルに戻りましょう。 greeting()
メソッドを、 "Hello, said Bertie the Cymric."
とログ出力されるように、書き直してください。 ブラウザーの開発者ツールのコンソールにアクセスしますが、名前や品種に関係なく、同じ構造のすべての cat
オブジェクトで機能します。
完了したら、 cat2
という独自のオブジェクトを作成します。このオブジェクトは、同じ構造、まったく同じ greeting()
メソッドを持ちますが、名前、品種、色が異なります。
両方の greeting()
メソッドを呼び出して、適切なあいさつがコンソールに記録されることを確認します。
下記のライブコードを更新して、完成例を再現してみてください。
この課題の最初の状態をダウンロードすると、自分のエディターまたはオンラインエディターで作業することができます。
オブジェクトの基本 4
課題 3 で書いたコードでは、 greeting()
メソッドが 2 回定義されています。それぞれが猫 1 匹分です。これは理想的ではありません(仕様上、 DRY または "Don't Repeat Yourself" と呼ばれる原則に違反しています)。
この課題では、コードを改善して greeting()
を一度だけ定義し、すべての cat
インスタンスが自分自身で greeting()
メソッドを取得するようにしていただきたいのです。ヒント: JavaScript のコンストラクターを使用して、cat
のインスタンスを作成するようにしましょう。
下記のライブコードを更新して、完成例を再現してみてください。
この課題の最初の状態をダウンロードすると、自分のエディターまたはオンラインエディターで作業することができます。