表示されているページは、編集用 バージョンの MDN Web Docsです

MDN Web Docs のユーザーとして表示: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Method_definitions

ECMAScript 2015 より、オブジェクトイニシャライザのメソッド定義のための短い構文が導入されました。これは、メソッドの名前に割り当てられた関数の省略形です。

構文

const obj = {
  get property() {},
  set property(value) {},
  property( parameters… ) {},
  *generator( parameters… ) {},
  async property( parameters… ) {},
  async* generator( parameters… ) {},

  // 算出されたキーも使用可能:
  get [property]() {},
  set [property](value) {},
  [property]( parameters… ) {},
  *[generator]( parameters… ) {},
  async [property]( parameters… ) {},
  async* [generator]( parameters… ) {}, 
};

説明

簡略構文は、ECMAScript 第 5 版で導入された gettersetter 構文に似ています。

次のコードを例にすると:

var obj = {
  foo: function() {
    /* コード */
  },
  bar: function() {
    /* コード */
  }
};

これを以下のように短縮することができます:

var obj = {
  foo() {
    /* コード */
  },
  bar() {
    /* コード */
  }
};

短縮形ジェネレーターメソッド

Generator メソッドは同様に簡略構文を使用して定義することができます。

簡略構文では:

  • ジェネレータープロパティ名の前にアスタリスク (*)が 必要です。すなわち、* g(){} は動作しますが、g *(){} は動作しません。
  • 非ジェネレーターメソッド定義では yield キーワードを入れることはできません。つまり 旧式の ジェネレーター関数 は動作せず、SyntaxErrorを投げます。yield は常にアスタリスク (*)と一緒に使ってください。
// 名前付きプロパティを使用 (ES6 より前)
const obj2 = {
  g: function*() {
    let index = 0
    while(true)
      yield index++
  }
};

// 簡略構文を使用して同じオブジェクトを生成
const obj2 = { 
  * g() {
    let index = 0;
    while(true)
      yield index++
  }
};

const it = obj2.g()
console.log(it.next().value) // 0
console.log(it.next().value) // 1

Async メソッド

Async メソッドも簡略構文を使用して定義することができます。

// 名前付きプロパティ
const obj3 = {
  f: async function () {
    await some_promise
  }
};

// 簡略構文を使用して同じオブジェクトを生成
const obj3 = { 
  async f() {
    await some_promise
  }
};

Async ジェネレーターメソッド

Generator メソッドasync 関数にすることができます。

const obj4 = {
  f: async function* () {
    yield 1
    yield 2
    yield 3
  }
};

// 簡略構文を使用して同じオブジェクトを生成
const obj4 = {
  async* f() {
   yield 1
   yield 2
   yield 3
  }
};

メソッド定義はコンストラクタブルではない

すべてのメソッド定義がコンストラクターではない(簡略構文のみ!)ため、インスタンス化しようとすると TypeError が発生します。

const obj = { 
  method() {},
};
new obj.method // TypeError: obj.method is not a constructor

const obj = { 
  * g() {} 
};
new obj.g; // TypeError: obj.g is not a constructor (ES2016 で変更)

簡単なテストケース

const obj = {
  a: 'foo',
  b() { return this.a }
};
console.log(obj.b()) // "foo"

計算されたプロパティ名

簡略構文は計算されたプロパティ名もサポートします。

const bar = {
  foo0: function() { return 0 },
  foo1(){ return 1 },
  ['foo' + 2](){ return 2 },
};

console.log(bar.foo0()) // 0
console.log(bar.foo1()) // 1
console.log(bar.foo2()) // 2

// A global function 
function foo() {
  return 1
}

let name = 'foo'
console.log(window[name]())  // 1

仕様

仕様書
ECMAScript (ECMA-262)
Method definitions の定義

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイルサーバー
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung InternetNode.js
Method definitionsChrome 完全対応 39Edge 完全対応 12Firefox 完全対応 34IE 未対応 なしOpera 完全対応 26Safari 完全対応 9WebView Android 完全対応 39Chrome Android 完全対応 39Firefox Android 完全対応 34Opera Android 完全対応 26Safari iOS 完全対応 9Samsung Internet Android 完全対応 4.0nodejs 完全対応 あり
Async generator methodsChrome 完全対応 63Edge 完全対応 79Firefox 完全対応 55IE 未対応 なしOpera 完全対応 50Safari 完全対応 12WebView Android 完全対応 63Chrome Android 完全対応 63Firefox Android 完全対応 55Opera Android 完全対応 46Safari iOS 完全対応 12Samsung Internet Android 完全対応 8.0nodejs 完全対応 10.0.0
完全対応 10.0.0
完全対応 8.10.0
無効
無効 From version 8.10.0: this feature is behind the --harmony runtime flag.
Async methodsChrome 完全対応 55Edge 完全対応 15Firefox 完全対応 52IE 未対応 なしOpera 完全対応 42Safari 完全対応 10.1WebView Android 完全対応 55Chrome Android 完全対応 55Firefox Android 完全対応 52Opera Android 完全対応 42Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 6.0nodejs 完全対応 7.6.0
完全対応 7.6.0
完全対応 7.0.0
無効
無効 From version 7.0.0: this feature is behind the --harmony runtime flag.
Generator methods are not constructable (ES2016)Chrome 完全対応 42Edge 完全対応 13Firefox 完全対応 43IE 未対応 なしOpera 完全対応 29Safari 完全対応 9.1WebView Android 完全対応 42Chrome Android 完全対応 42Firefox Android 完全対応 43Opera Android 完全対応 29Safari iOS 完全対応 9.3Samsung Internet Android 完全対応 4.0nodejs 完全対応 6.0.0

凡例

完全対応  
完全対応
未対応  
未対応
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報

ドキュメントのタグと貢献者

最終更新者: Uemmra3,