JavaScript | 基礎構文:オブジェクト – オブジェクトリテラル

JavaScript JavaScript
スポンサーリンク

オブジェクトとは何か

オブジェクトは、関連するデータ(値)と振る舞い(関数)をひとまとまりにした入れ物です。例えば「ユーザー」を表すなら、名前や年齢といった情報と、挨拶する処理を同じ箱に入れて扱えます。JavaScriptでは、キー(名前)と値のペアを自由に追加・変更でき、現実世界のものを直感的に表現できます。


オブジェクトリテラルとは何か

オブジェクトリテラルは、波括弧 {} を使ってその場でオブジェクトを作る書き方です。配列の [] と同様に、最もよく使われる簡潔な構文です。コードの中で即座にオブジェクトを定義できるため、設定値や小さなデータのやり取りに非常に便利です。

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

基本構文とプロパティ・メソッド

オブジェクトは「キー: 値」を並べて作ります。値には文字列、数値、真偽値、配列、別のオブジェクト、そして関数(メソッド)も入れられます。

const user = {
  name: "太郎",            // プロパティ(文字列)
  age: 20,                 // プロパティ(数値)
  isActive: true,          // プロパティ(真偽値)
  skills: ["JS", "HTML"],  // プロパティ(配列)
  address: { city: "東京" },// プロパティ(オブジェクト)
  greet: function () {     // メソッド(関数)
    return `こんにちは、${this.name}です`;
  }
};

console.log(user.greet()); // こんにちは、太郎です
JavaScript

ここが重要です:メソッドの中から自分自身のデータにアクセスするには this を使います。アロー関数は独自の this を持たないため、メソッド定義では通常の関数記法を使うのが基本です。


アクセス方法と計算済みプロパティ名(重要ポイントを深掘り)

プロパティへのアクセスには2つの方法があります。ドット記法は読みやすく、ブラケット記法は「動的なキー」や「記号を含むキー」に使えます。

const user = { name: "太郎", "fav-color": "blue" };

// ドット記法(静的なキー)
console.log(user.name); // 太郎

// ブラケット記法(動的なキーや記号を含むキー)
const key = "fav-color";
console.log(user[key]); // blue
JavaScript

計算済みプロパティ名を使うと、作成時にキーを動的に決められます。

const field = "score";
const player = {
  name: "Hanako",
  [field]: 95 // 作成時にキーを動的に決定
};

console.log(player.score); // 95
JavaScript

省略記法とメソッド定義(読みやすさの要点)

値に使う変数名とキー名が同じなら、省略記法で短く書けます。メソッドも省略した記法があります。

const name = "太郎";
const age = 20;

const user = {
  name,        // name: name と同じ
  age,         // age: age と同じ
  greet() {    // greet: function() と同じ
    return `こんにちは、${this.name}`;
  }
};

console.log(user.greet()); // こんにちは、太郎
JavaScript

ここが重要です:省略記法は読みやすさと保守性を高めますが、「どの変数を入れているか」が一目で分かるよう、意味のある変数名を保つことが大事です。


参照型であること(コピーと変更の挙動を深掘り)

オブジェクトは「参照型」です。変数に入るのは“中身”ではなく“場所(参照)”。代入すると「同じオブジェクトを指す」ようになります。

const a = { count: 1 };
const b = a;         // 参照を共有
b.count++;
console.log(a.count); // 2(a も同じオブジェクトを見ている)
JavaScript

ここが重要です:この性質により、意図せぬ共有・上書きが起こりやすくなります。独立したコピーが必要なら、スプレッドや Object.assign を使います(ただし浅いコピー)。

const original = { n: 1, nested: { x: 10 } };
const copy = { ...original };            // 浅いコピー
copy.nested.x = 99;
console.log(original.nested.x); // 99(入れ子は同じ参照のまま)
JavaScript

浅いコピーは「一段目のみ」複製されます。入れ子のオブジェクトも別にしたい場合は、入れ子ごとにコピーするか、JSON 変換などの手段(制約あり)を検討します。


ネストと安全なアクセス

入れ子のプロパティは、途中が未定義だとエラーになります。安全に辿るにはオプショナルチェーン ?. が便利です。

const user = { profile: { city: "東京" } };
console.log(user.profile?.city); // 東京
console.log(user.address?.city); // undefined(途中がなければ undefined)
JavaScript

?. は「ここがなければそこで止めて undefined」を返すため、落ちにくいコードになります。


よく使う操作(追加・更新・削除・存在確認)

プロパティの追加・更新は同じ書き方でできます。削除は delete、存在確認は in を使います。

const user = {};
user.name = "太郎";           // 追加
user.name = "花子";           // 更新
console.log("name" in user);  // true(存在確認)
delete user.name;             // 削除
console.log("name" in user);  // false
JavaScript

まとめ

オブジェクトリテラルは {} でキーと値を並べて作る最も基本的で強力な表現です。ドット記法とブラケット記法を使い分け、計算済みプロパティ名や省略記法で読みやすさを上げましょう。メソッド内では this を使い、アロー関数はメソッド本体ではなく内部のコールバックに使うのが安全です。参照型であることを理解し、コピー・共有・ネストアクセスの振る舞いに注意すれば、直感的で壊れにくいオブジェクト設計ができるようになります。

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