Day8 後半のゴール
Day8 後半では、前半で学んだ「オブジェクトとは何か」「key と value」の基本に加えて、
次のようなことができる状態を目指します。
オブジェクトの値を更新できる。
新しい key をあとから追加できる。
配列とオブジェクトを組み合わせて「現実に近いデータ構造」を扱える。
オブジェクトの値を更新する
既存の key の value を変える
前半では「読み取り」を中心に見ましたが、
オブジェクトの value はあとから変更することもできます。
const user = {
name: "Taro",
age: 20,
isStudent: true
};
user.age = 21;
user.isStudent = false;
console.log(user.age); // 21
console.log(user.isStudent); // false
user.age = 21; は「user の age という key の value を 21 にする」という意味です。
配列のインデックスと違い、「どの情報を変えているか」が一目でわかるのが強みです。
変更可能であることの意味
オブジェクトは「状態」を表すのに向いています。
ログイン中かどうか
メール認証済みかどうか
権限レベルが何か
こういったものは、時間とともに変わる「状態」です。
その変化を安全に、わかりやすく表現できるのがオブジェクトです。
新しい key をあとから追加する
存在しない key に代入すると「追加」になる
オブジェクトは、あとから新しい key を生やすことができます。
const user = {
name: "Taro",
age: 20
};
user.isStudent = true;
user.country = "Japan";
console.log(user);
// { name: "Taro", age: 20, isStudent: true, country: "Japan" }
user.isStudent = true; のように、
もともと存在しなかった key に代入すると、その key が追加されます。
設計の視点での注意
何でもかんでもあとから追加していくと、
「このオブジェクト、結局何を持っているんだっけ？」となりがちです。
最低限、
どんな key を持つ想定なのか
どの key が必須で、どれが任意なのか
といった「設計のイメージ」を頭の中に持っておくと、
バグやセキュリティ事故を防ぎやすくなります。
ブラケット記法でアクセスする
ドット記法との違い
前半では user.name のようなドット記法を使いましたが、
オブジェクトにはもう一つ ブラケット記法 があります。
const user = {
name: "Taro",
age: 20
};
console.log(user["name"]); // "Taro"
console.log(user["age"]); // 20
user["name"] は user.name と同じ意味です。
変数を使って key を指定できる
ブラケット記法の強みは、「key を文字列として扱える」ことです。
const user = {
name: "Taro",
age: 20
};
const key = "name";
console.log(user[key]); // "Taro"
user[key] は user["name"] と同じです。
「どの key を見るかを変数で決めたい」ときに使います。
配列 × オブジェクトで「複数の人」を表す
1人 → オブジェクト、複数人 → 配列
1人のユーザーはオブジェクトで表現できます。
const user = {
name: "Taro",
age: 20,
isStudent: true
};
では、ユーザーが 3人いたらどうするか。
そのときに出てくるのが「オブジェクトの配列」です。
const users = [
{ name: "Taro", age: 20, isStudent: true },
{ name: "Hanako", age: 22, isStudent: false },
{ name: "Ken", age: 19, isStudent: true }
];
users は「ユーザーオブジェクトの配列」です。
配列の中身が「1人分の情報（オブジェクト）」になっています。
繰り返しと組み合わせて使う
for (let i = 0; i < users.length; i = i + 1) {
const user = users[i];
console.log(user.name + " さんは " + user.age + " 歳です。");
}
配列のインデックスで「何人目か」を、
オブジェクトの key で「その人のどの情報か」を指定しています。
この「配列 × オブジェクト」の組み合わせは、
実務でもほぼ毎日見るレベルの超重要パターンです。
セキュリティの視点から見るオブジェクト
権限や状態をオブジェクトで管理する
たとえば、ユーザーの権限をこう表現したとします。
const user = {
id: 1,
name: "Taro",
role: "admin",
isActive: true
};
このとき、管理画面へのアクセスを制御するコードはこう書けます。
if (user.role === "admin" && user.isActive) {
console.log("管理画面にアクセスできます");
} else {
console.log("アクセス権限がありません");
}
key が明確であればあるほど、
「何をチェックしているのか」が読みやすくなり、
条件の書き間違いも減ります。
もしこれを配列でやろうとすると、こうなります。
const user = [1, "Taro", "admin", true];
if (user[2] === "admin" && user[3]) {
// 2 が role、3 が isActive だったはず…
}
「どのインデックスが何を意味していたか」を忘れた瞬間、
誤った条件を書いてしまい、
本来アクセスさせてはいけないユーザーに権限を与える危険があります。
オブジェクトで「意味付きの情報」を扱うことは、
読みやすさだけでなく、安全性にも直結します。
実践：Day8 後半のサンプルコード
オブジェクト配列を使って、学生だけを表示する
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day8 オブジェクト 後半</title>
</head>
<body>
<h1>Day8: オブジェクトの応用</h1>
<script>
const users = [
{ name: "Taro", age: 20, isStudent: true },
{ name: "Hanako", age: 25, isStudent: false },
{ name: "Ken", age: 19, isStudent: true }
];
for (let i = 0; i < users.length; i = i + 1) {
const user = users[i];
if (user.isStudent) {
console.log(user.name + " さんは学生です");
}
}
</script>
</body>
</html>
配列・オブジェクト・条件分岐がすべてつながって動く感覚を、
ここで一度味わっておくと、この先がかなり楽になります。
Day8 後半のまとめ
オブジェクトは「意味付きの情報の集まり」。
key を使うことで、「何の情報か」が明確になる。
値の更新・key の追加ができる。
配列と組み合わせることで「複数のもの」を自然に表現できる。
ここまで理解できていれば、
もう「JavaScript を使えるレベル」にかなり近づいています。
次のステップでは、このオブジェクトを関数や API と組み合わせて、
より実践的なコードにしていきましょう。
