Day8 前半のゴール
Day8 のテーマは「オブジェクト」です。
ここから一気に「現実世界の情報をそのままコードで表現する」力が手に入ります。
前半では、とくに次の感覚をつかむことをゴールにします。
Day8 前半で身につけたいこと
オブジェクトとは「名前付きの情報の集まり」だと理解する
key（キー）と value（値）の関係をしっかりイメージできるようにする
自分でシンプルなオブジェクトを作り、値を取り出せるようになる
オブジェクトとは何か
「1人の人」や「1つのモノ」をまとめて表す入れ物
ここまでに学んだものを振り返ると、
number、string、boolean、配列…ときていました。
でも、現実世界の情報って、もっと「まとまり」で存在しています。
人なら、名前・年齢・学生かどうか
本なら、タイトル・著者・ページ数
ユーザーなら、ID・メールアドレス・権限
こういう「1つのものに関する複数の情報」を
ひとまとめにして扱うための仕組みが オブジェクト です。
const user = {
name: "Taro",
age: 20,
isStudent: true
};
この user という変数の中に、
「Taro」「20」「true」という3つの情報が、
「名前付き」で整理されて入っています。
key と value の関係
「ラベル」と「中身」のペア
オブジェクトの中身は、
key（キー）と value（値）のペア で構成されています。
const user = {
name: "Taro",
age: 20,
isStudent: true
};
ここで、
name → key（キー）
” Taro” → value（値）
age → key
20 → value
isStudent → key
true → value
という対応になっています。
「key はラベル、value はそのラベルに対応する中身」
というイメージを持つとわかりやすいです。
key は「その値が何を表しているか」を説明する
配列との違いを比べてみましょう。
const userArray = ["Taro", 20, true];
この配列だけ見ても、
” Taro” が名前なのかニックネームなのか、
20 が年齢なのかスコアなのか、
true が学生なのか管理者なのか、
パッと見ではわかりません。
一方、オブジェクトならこうです。
const user = {
name: "Taro",
age: 20,
isStudent: true
};
key があることで、
「この値は何を意味しているのか」が一目でわかります。
これは、コードの読みやすさ・安全性の両方にとって、とても大事なポイントです。
オブジェクトの基本的な書き方
中かっこ {} を使う
オブジェクトは、中かっこ {} を使って書きます。
const book = {
title: "JavaScript入門",
pages: 300,
isPublished: true
};
中かっこの中に、key: value をカンマ , で区切って並べていきます。
value にはいろいろな型が入る
value の部分には、
string、number、boolean はもちろん、
配列や別のオブジェクトを入れることもできます。
const user = {
name: "Taro",
age: 20,
favorites: ["JavaScript", "Sushi"],
address: {
city: "Tokyo",
country: "Japan"
}
};
前半ではここまで深追いしなくて大丈夫ですが、
「オブジェクトの中に、さらに配列やオブジェクトを入れられる」
というイメージだけ持っておくと、後で楽になります。
オブジェクトから値を取り出す
ドット記法でアクセスする
オブジェクトの中の値を取り出す一番基本的な方法は、
ドット記法 と呼ばれる書き方です。
const user = {
name: "Taro",
age: 20,
isStudent: true
};
console.log(user.name); // "Taro"
console.log(user.age); // 20
console.log(user.isStudent); // true
user.name は「user の中の name という key の value」という意味です。
変数に入れて使う
取り出した値を、別の変数に入れて使うこともできます。
const userName = user.name;
console.log(userName); // "Taro"
「オブジェクト → 必要な情報だけ取り出す」という流れは、
実務でも頻繁に登場します。
配列との違いをもう一度整理する
配列は「順番」、オブジェクトは「名前」
配列：
const scores = [80, 90, 75];
console.log(scores[0]); // 80
オブジェクト：
const user = { name: "Taro", age: 20 };
console.log(user.name); // "Taro"
配列は「何番目か」でアクセスする。
オブジェクトは「どの key か」でアクセスする。
「順番で管理したいときは配列」
「意味付きの情報をまとめたいときはオブジェクト」
という使い分けのイメージを持っておくと、選びやすくなります。
実践：Day8 前半のサンプルコード
シンプルな user オブジェクトを作って使ってみる
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day8 オブジェクト 前半</title>
</head>
<body>
<h1>Day8: オブジェクトの基本</h1>
<script>
const user = {
name: "Taro",
age: 20,
isStudent: true
};
console.log("ユーザー名:", user.name);
console.log("年齢:", user.age);
console.log("学生かどうか:", user.isStudent);
const message = user.name + " さんは " + user.age + " 歳です。";
console.log(message);
</script>
</body>
</html>
オブジェクトから値を取り出して、
文字列と組み合わせてメッセージを作る、という
「よくある使い方」を体験できます。
セキュリティの視点から見るオブジェクト
「どんな情報を持っているか」が一目でわかることの大事さ
ユーザー情報、権限情報、設定情報などは、
ほとんどの場合オブジェクトで管理されます。
const user = {
id: 123,
name: "Taro",
role: "admin",
isActive: true
};
このように key が明示されていると、
role が “admin” のときだけ管理画面を表示する
isActive が false のときはログインさせない
といった条件分岐を、
読みやすく・安全に書くことができます。
逆に、意味のわからない配列で管理してしまうと、
const user = [123, "Taro", "admin", true];
// 0: id, 1: name, 2: role, 3: isActive …だったはず？
「どのインデックスが何の意味だったか」を忘れた瞬間、
誤った条件判定を書いてしまい、
本来アクセスさせてはいけない人に権限を与える、
といった事故につながります。
オブジェクトで「意味付きの情報」を扱うことは、
読みやすさだけでなく、安全性にも直結します。
Day8 前半のまとめ
オブジェクトは「key と value のペアをまとめた入れ物」。
key はラベル、value はその中身。
ドット記法で obj.key のように値を取り出す。
配列は「順番」、オブジェクトは「名前」でアクセスする。
後半では、このオブジェクトをもう一歩進めて、
値の更新・新しいプロパティの追加、
そして配列とオブジェクトを組み合わせた「実用的なデータ構造」を扱っていきます。
