JavaScriptのオブジェクトリテラルとは？基本をわかりやすく解説

JavaScriptの「オブジェクトリテラル」について、基本の概念から書き方まで、初心者向けにわかりやすく解説します。

プログラミングには、名前の印象のせいで実際よりも難しく感じられてしまう概念がいくつかあります。オブジェクトリテラルもその一つですが、その実態は「買い物リスト」程度のシンプルさです。

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

オブジェクト（Object）とは、JavaScriptにおける特殊な種類の値で、他の値と関連を持つことができるものです。

オブジェクトリテラル（Object Literal）とは、プログラムやアプリの中に「文字どおり（literally）」直接記述したオブジェクト値のことを指します。

オブジェクトリテラルは通常、カンマで区切られた「名前と値のペア（プロパティ: 値）」のリストを、波括弧 {} で囲んだ形で表されます。

オブジェクトリテラルの例

const dog = {
    name: 'Naya',
    sex: 'female',
    age: 2,
    breed: 'Rottweiler mix'
};

「通常」と述べたのには理由があります。オブジェクトリテラルは、空の場合や、名前と値のペアが1つだけの場合もあります。

// 空のオブジェクト
const dog = {}

// ペアが1つだけ
const dog = {
    name: 'Naya'
}

上記の例では、dog はオブジェクト値（オブジェクトリテラル）であり、名前と値のペア（例：name: 'Naya'）を使って、犬に関する情報（データ）をひとまとめに格納しています。

つまり、オブジェクトリテラルとは、JavaScriptにおける値の一種（オブジェクト値）であり、他の値への参照（名前と値のペア）を内部に持つものだと言えます。

プロパティと値のスコープの違い

ここで重要なポイントがあります。オブジェクトの中のプロパティはオブジェクトの内部に「存在」し、そのスコープに閉じ込められます。しかし、値そのものはそうではありません。

上の例では、name、sex、age、breed は dog オブジェクトのプロパティとみなされます。

一方、'Naya' や 'female' といった値は、オブジェクトの内部に存在するわけではなく（スコープには含まれず）、オブジェクトのプロパティから参照されているだけです。

まとめ

オブジェクトリテラルは、波括弧 {} の中に「プロパティ: 値」のペアをカンマ区切りで並べて記述する、JavaScriptでオブジェクトを生成する最も基本的な方法です。見た目はシンプルですが、関連するデータをひとまとめに管理できる強力な機能であり、実務でも頻繁に使われます。まずは小さなオブジェクトを自分で書いてみることから始めてみましょう。