オブジェクトリテラルって何者？
オブジェクトリテラルは、
「波カッコ {} を使って、その場で“まとまりのあるデータ”を作る書き方」 です。
人間の世界でいうと、
「名前・年齢・住所がセットになった“1人の人”」
「タイトル・価格・在庫がセットになった“1つの商品”」
みたいな“ひとかたまり”を、コードの中で表現するための形です。
JavaScript では、この“ひとかたまり”を
オブジェクト（object） と呼び、
それを一気に書くための文法が オブジェクトリテラル です。
一番シンプルなオブジェクトリテラルの例
「人」をオブジェクトで表現してみる
const user = {
name: "太郎",
age: 25,
isAdmin: false,
};
これがオブジェクトリテラルです。
{ ... } の中にプロパティ名: 値 をカンマ区切りで並べていきます。
ここでは、
name というプロパティに "太郎"age に 25isAdmin に false
という値が入っています。
この user は、
「名前・年齢・管理者かどうか」という情報を
ひとかたまりにした“1人のユーザー”を表しています。
ここが重要です。
オブジェクトリテラルは「関連する情報を“名前付きの箱”としてまとめる」ための形。
バラバラの変数ではなく、“1つのもの”として扱えるようにする。
プロパティへのアクセス方法
ドット記法とブラケット記法
さっきの user から値を取り出してみます。
console.log(user.name); // 太郎
console.log(user.age); // 25
console.log(user.isAdmin); // false
オブジェクト.プロパティ名 という形でアクセスできます。
これを ドット記法 と呼びます。
もう一つの書き方が ブラケット記法 です。
console.log(user["name"]); // 太郎
オブジェクト["文字列のプロパティ名"] という形です。
基本的にはドット記法で書くことが多いですが、
次のようなときはブラケット記法が必要になります。
プロパティ名が変数で決まるとき：
const key = "age";
console.log(user[key]); // 25
プロパティ名にスペースや記号が含まれるとき：
const obj = {
"user name": "太郎",
};
console.log(obj["user name"]); // 太郎
// obj.user name は文法エラー
ここが重要です。
「ふつうはドット、動的に名前を決めたいときや特殊な名前のときはブラケット」
と覚えておくとスムーズです。
オブジェクトリテラルの中にいろんな型を入れてみる
文字列・数値・真偽値・配列・オブジェクト・関数
オブジェクトのプロパティの「値」は、
ほぼ何でも入れられます。
const article = {
title: "JavaScript入門",
page: 10,
tags: ["js", "basic"],
author: {
name: "山田",
age: 30,
},
isPublished: true,
printTitle: function () {
console.log(this.title);
},
};
article.printTitle(); // JavaScript入門
ここでは、
文字列：title
数値：page
配列：tags
オブジェクト：author
真偽値：isPublished
関数：printTitle
が1つのオブジェクトの中に共存しています。
このように、
オブジェクトリテラルは「複雑な構造」をそのまま表現できる のが強みです。
プロパティの追加・変更・削除
あとから生やしたり書き換えたりできる
オブジェクトは「後から育てられる」存在です。
const user = {
name: "太郎",
};
user.age = 25; // 追加
user.name = "花子"; // 変更
console.log(user); // { name: "花子", age: 25 }
delete user.age; // 削除
console.log(user); // { name: "花子" }
const で宣言していても、
「オブジェクトそのものを別の値に入れ替えない限り」
中身のプロパティは変更できます。
const user = { name: "太郎" };
user.name = "花子"; // OK
// user = {}; // これは NG（再代入）
ここが重要です。const は「変数に別のオブジェクトを入れ直せない」だけで、
「オブジェクトの中身を変えてはいけない」という意味ではない。
オブジェクトリテラルの便利な省略記法
プロパティ名と変数名が同じとき
よくあるパターンがこれです。
const name = "太郎";
const age = 25;
const user = {
name: name,
age: age,
};
プロパティ名と変数名が同じとき、name: name のように書くのは冗長なので、
省略記法が使えます。
const user = {
name,
age,
};
console.log(user); // { name: "太郎", age: 25 }
name とだけ書くと、
「プロパティ名も name、値も変数 name」
という意味になります。
ここが重要です。
「変数をそのままオブジェクトに詰めたいとき」は、{ name, age } のように省略記法を使うとスッキリ書ける。
計算されたプロパティ名（少しだけ）
プロパティ名を動的に決めたいとき
ときどき、
「プロパティ名を変数から作りたい」
という場面があります。
const key = "userName";
const obj = {
[key]: "太郎",
};
console.log(obj.userName); // 太郎
[ ] の中に式を書いて、
その結果をプロパティ名として使うことができます。
例えば、"user_" + id のように文字列を組み立てて
プロパティ名にすることもできます。
const id = 10;
const obj = {
["user_" + id]: "太郎",
};
console.log(obj.user_10); // 太郎
基礎の段階では「こういうこともできる」くらいでOKです。
「プロパティ名をコードで作りたいときは [ ] を使う」
と頭の片隅に置いておいてください。
オブジェクトリテラルが“なぜ大事か”
「関連する情報を1つにまとめる」という発想
もしオブジェクトを使わなかったら、
こんなコードになってしまいます。
const userName = "太郎";
const userAge = 25;
const userIsAdmin = false;
これでも動きますが、
「これらが“1人のユーザー”の情報だ」ということが
コードからは伝わりにくいです。
オブジェクトにすると、こうなります。
const user = {
name: "太郎",
age: 25,
isAdmin: false,
};
これだけで、
「user という“ひとかたまり”の中に、
名前・年齢・管理者フラグが入っている」
という構造が一目で分かります。
ここが重要です。
オブジェクトリテラルは「意味のあるまとまり」を作るための道具。
“ただの変数の集まり”を“1つの概念”に昇格させる。
初心者として「オブジェクトリテラル」で本当に押さえてほしいこと
オブジェクトリテラルは、
const obj = {
key1: value1,
key2: value2,
};
という形で書く、
「名前付きの値をまとめるための基本構文」 です。
特に大事なのは次の感覚です。
関連する情報は、バラバラの変数ではなくオブジェクトにまとめるobj.key でアクセスする（必要に応じて obj["key"]）
あとからプロパティを追加・変更・削除できる
プロパティ名と変数名が同じなら { name, age } の省略記法が使える
まずは、
const book = {
title: "JavaScript入門",
price: 1980,
inStock: true,
};
console.log(book.title);
console.log(book.price);
このレベルのオブジェクトを、
自分の手で何個か作ってみてください。
「これは“1冊の本”」
「これは“1人のユーザー”」
と、現実の“もの”をオブジェクトで表現する感覚がつかめてくると、
JavaScript の世界が一気に立体的に見えてきます。
