はじめに

Reactの公式チュートリアルの問題を解いていたところ、オブジェクトのプロパティ名が[]で囲まれていました。

初めて見た書き方で何をしているかわからなかったため、調べました。

messages: {
  ...state.messages,
  [state.selectedId]: action.message,
},

Computed Property Names

この[]はEC2015から導入された、オブジェクトのプロパティを動的に生成するための構文です。

Computed Property Names、日本語だと「計算プロパティ名」という構文らしいです。

計算プロパティ名を使用することで、プロパティ名に変数を設定できます。

let propertyName = 'UserName';

const profile = {
  age: 21,
  [propertyName]: 'taro',
};

console.log(profile.UserName); // taro

"計算プロパティ名"という名称の意味がよくわからずに混乱しましたが、「計算した結果をプロパティに入れたよ」というような意味合いですね。