ES6におけるオブジェクトリテラル構文の拡張

概要: このチュートリアルでは、ES6におけるオブジェクトリテラルの構文拡張について学び、コードをよりクリーンで柔軟にする方法を理解します。

オブジェクトリテラルは、そのシンプルさから、JavaScriptでオブジェクトを作成するための最も一般的なパターンの1つです。ES6は、いくつかの方法で構文を拡張することにより、オブジェクトリテラルをより簡潔かつ強力にします。

オブジェクトプロパティ初期化子省略記法

ES6以前は、オブジェクトリテラルは名前と値のペアの集合でした。例えば

function createMachine(name, status) {
    return {
        name: name,
        status: status
    };
}Code language: JavaScript (javascript)

createMachine() 関数は、nameとstatusの2つの引数を取り、nameとstatusの2つのプロパティを持つ新しいオブジェクトリテラルを返します。

nameおよびstatusプロパティは、nameおよびstatusパラメータの値を取ります。この構文は、nameとstatusがプロパティのnameとvalueの両方で2回ずつ記述されているため、冗長に見えます。

ES6では、オブジェクトのプロパティがローカル変数名と同じである場合、コロンと値なしで名前を含めることで、重複を排除できます。

例えば、ES6ではcreateMachine()関数を次のように書き直すことができます。

function createMachine(name, status) {
    return {
        name,
        status
    };
}Code language: JavaScript (javascript)

内部的には、オブジェクトリテラルのプロパティに名前しかない場合、JavaScriptエンジンは周囲のスコープで同じ名前の変数を検索します。JavaScriptエンジンが見つけた場合、プロパティに変数の値を代入します。

この例では、JavaScriptエンジンはnameおよびstatus引数のnameおよびstatusプロパティ値を代入します。

同様に、次の例に示すように、ローカル変数からオブジェクトリテラルを構築できます。

let name = 'Computer',
    status = 'On';

let machine = {
   name,
   status
};Code language: JavaScript (javascript)

計算されたプロパティ名

ES6以前は、角括弧（[]）を使用して、オブジェクトのプロパティに対して**計算されたプロパティ名**を有効にすることができました。

角括弧を使用すると、文字列リテラルと変数をプロパティ名として使用できます。

次の例を参照してください。

let name = 'machine name';
let machine = {
    [name]: 'server',
    'machine hours': 10000
};

console.log(machine[name]); // server
console.log(machine['machine hours']); // 10000Code language: JavaScript (javascript)

name変数は'machine name'の値に初期化されました。 machineオブジェクトの両方のプロパティにスペースが含まれているため、角括弧を使用して参照することしかできません。

ES6では、計算されたプロパティ名はオブジェクトリテラル構文の一部であり、角括弧表記を使用します。

プロパティ名が角括弧内に配置されている場合、JavaScriptエンジンはそれを文字列として評価します。つまり、式をプロパティ名として使用できます。例えば

let prefix = 'machine';
let machine = {
    [prefix + ' name']: 'server',
    [prefix + ' hours']: 10000
};

console.log(machine['machine name']); // server
console.log(machine['machine hours']); // 10000
Code language: JavaScript (javascript)

machineオブジェクトのプロパティは'machine name'および'machine hours'と評価されるため、machineオブジェクトのプロパティとして参照できます。

簡潔なメソッド構文

ES6以前は、オブジェクトリテラルのメソッドを定義する場合、次の例に示すように、名前と完全な関数定義を指定する必要がありました。

let server = {
	name: "Server",
	restart: function () {
		console.log("The" + this.name + " is restarting...");
	}
};Code language: JavaScript (javascript)

ES6は、コロン（:)とfunctionキーワードを削除することにより、オブジェクトリテラルのメソッドを作成するための構文をより簡潔にします。

次の例は、上記のserverオブジェクトをES6構文を使用して書き直しています.

let server = {
    name: 'Server',
    restart() {
        console.log("The" + this.name + " is restarting...");
    }
};Code language: JavaScript (javascript)

この省略記法は、**簡潔なメソッド構文**とも呼ばれます。プロパティ名にスペースを含めることは有効です。例えば

let server = {
    name: 'Server',
    restart() {
        console.log("The " + this.name + " is restarting...");
    },
    'starting up'() {
        console.log("The " +  this.name + " is starting up!");
    }
};

server['starting up']();Code language: JavaScript (javascript)

この例では、メソッド'starting up'の名前にはスペースが含まれています。メソッドを呼び出すには、次の構文を使用します。

object_name['property name']();Code language: CSS (css)

このチュートリアルでは、プロパティ初期化子省略記法、計算されたプロパティ、簡潔なメソッド構文など、ES6の新しいオブジェクトリテラル構文拡張の使用方法を学習しました。