JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript:JavaScriptを使えるレベルにする - Day8:オブジェクト 練習問題

JavaScript JavaScript
スポンサーリンク

Day8 オブジェクトの練習問題

Day8 のテーマは オブジェクト / key / value
ここでは、オブジェクトの基本操作をしっかり身につけるための練習問題と、
それぞれの解答・解説をまとめていきます。

配列よりも「現実の情報に近い形」で扱えるのがオブジェクトの強みです。
初心者がつまずきやすいポイントを丁寧に押さえながら進めていきます。


オブジェクトの基本構造の練習問題

問題1:オブジェクトを作って値を表示する

次の情報を持つオブジェクト user を作り、
name と age を表示してください。

  • name: “Taro”
  • age: 20

解答例

const user = {
  name: "Taro",
  age: 20
};

console.log(user.name);
console.log(user.age);
JavaScript

解説

オブジェクトは {} の中に
key: value を並べて作ります。
user.name のように ドット記法 で値を取り出します。


key と value の理解を深める問題

問題2:value の型を確認する

次のオブジェクトの各 value がどの型か答えてください。

const item = {
  title: "Book",
  price: 1200,
  inStock: true
};
JavaScript

解答と解説

title → string
price → number
inStock → boolean

オブジェクトの value は どんな型でも入る のが特徴です。
複数の型をまとめて扱えるのがオブジェクトの強みです。


値の更新の練習問題

問題3:オブジェクトの値を変更する

次のオブジェクトの age を 21 に変更してください。

const user = {
  name: "Taro",
  age: 20
};
JavaScript

解答例

user.age = 21;

console.log(user.age);  // 21
JavaScript

解説

user.age = 21; のように、
既存の key に代入すると value が更新されます。
配列よりも「どの情報を変えているか」が明確です。


key の追加の練習問題

問題4:新しい key を追加する

次のオブジェクトに country: “Japan” を追加してください。

const user = {
  name: "Taro",
  age: 20
};
JavaScript

解答例

user.country = "Japan";

console.log(user);
// { name: "Taro", age: 20, country: "Japan" }
JavaScript

解説

存在しない key に代入すると 新しい key が追加される のがオブジェクトの特徴です。
柔軟に情報を増やせますが、増やしすぎると管理が難しくなるため注意が必要です。


ブラケット記法の練習問題

問題5:ブラケット記法で値を取り出す

次のオブジェクトから name をブラケット記法で取り出してください。

const user = {
  name: "Taro",
  age: 20
};
JavaScript

解答例

console.log(user["name"]);
JavaScript

解説

user["name"]user.name と同じ意味です。
ブラケット記法は key を文字列として扱えるため、
変数で key を指定したいときに便利です。


オブジェクト配列の練習問題

問題6:複数のユーザーを配列で管理する

次の3人のユーザーを配列 users にまとめてください。

  • Taro(20歳)
  • Hanako(22歳)
  • Ken(19歳)

解答例

const users = [
  { name: "Taro", age: 20 },
  { name: "Hanako", age: 22 },
  { name: "Ken", age: 19 }
];
JavaScript

解説

1人分の情報 → オブジェクト
複数人 → オブジェクトの配列

この組み合わせは実務でも非常に重要です。


オブジェクト配列 × 繰り返しの練習問題

問題7:全員の名前を表示する

上の users 配列から、全員の name を表示してください。

解答例

for (let i = 0; i < users.length; i = i + 1) {
  console.log(users[i].name);
}
JavaScript

解説

users[i] で「i 番目のユーザーオブジェクト」
.name で「そのユーザーの名前」
という二段階アクセスになります。


セキュリティ視点の練習問題

問題8:role を使ったアクセス制御

次のオブジェクト user が管理者(role が “admin”)なら
「アクセス許可」、それ以外なら「アクセス拒否」と表示してください。

const user = {
  name: "Taro",
  role: "admin"
};
JavaScript

解答例

if (user.role === "admin") {
  console.log("アクセス許可");
} else {
  console.log("アクセス拒否");
}
JavaScript

解説

オブジェクトは「意味付きの情報」を扱えるため、
権限管理のようなセキュリティ処理に非常に向いています。
配列で同じことをすると、インデックスの意味を忘れた瞬間に事故が起きます。


Day8 練習問題まとめ

Day8 の練習で身につくことは次の通りです。

オブジェクトの基本構造(key と value)
ドット記法・ブラケット記法でのアクセス
値の更新・key の追加
オブジェクト配列で複数のデータを扱う
セキュリティに関わる情報管理の基礎

オブジェクトは JavaScript の中心的なデータ構造です。
ここをしっかり理解しておくと、Day9 以降の関数・API・非同期処理が一気に楽になります。

タイトルとURLをコピーしました