JavaScript | ES6+ 文法：オブジェクト拡張 – プロパティ短縮記法

JavaScript JavaScript
スポンサーリンク

プロパティ短縮記法とは何か

オブジェクトの「プロパティ短縮記法」は、
変数名とプロパティ名が同じときに、キー: 値 の 値 を省略できる ES6 の書き方です。

ふつうはこう書きます。

const name = "Alice";
const age = 20;

const user = {
  name: name,
  age: age
};
JavaScript

短縮記法を使うと、右側を省略できます。

const name = "Alice";
const age = 20;

const user = {
  name,
  age
};

console.log(user); // { name: "Alice", age: 20 }
JavaScript

ここが重要です：
name, age と変数名だけ並んでいるように見えるけれど、「name: name, age: age」と同じ意味です。
「変数名＝プロパティ名」で使うときにだけ有効です。

なぜ短縮記法がうれしいのか（読みやすさと意図の明確化）

「どのデータを渡しているのか」がひと目で分かる

たとえば、関数にまとめて情報を渡すためのオブジェクトを作るとき。

const title = "JS 入門";
const page  = 1;
const per   = 20;

// 従来
const params1 = { title: title, page: page, per: per };

// 短縮記法
const params2 = { title, page, per };
JavaScript

ぱっと見て、title, page, per という変数がそのままプロパティになっているのが分かります。
プロパティ名と変数名が一致していると、「このオブジェクトの中身」がすぐ想像できます。

ここが重要です：
「意味のある変数名」を付けておくと、短縮記法にしたときにオブジェクトの構造も一気に読みやすくなる、という相乗効果があります。

タイプ量が減るだけでなく、ミスも減る

従来の書き方だと、コピペやタイプミスでこんなバグが起きがちです。

const name = "Alice";
const age  = 20;

// よくあるミス例
const user = {
  name: age,  // うっかり逆に書いた
  age: name
};
JavaScript

短縮記法では、こういった「左右の取り違え」がそもそも書けません。

const name = "Alice";
const age  = 20;

const user = { name, age }; // 取り違えようがない
JavaScript

プロパティ短縮記法の基本ルール

ルール1：左側（キー）は変数名と同じになる

const id = 1;
const user = { id };

console.log(user); // { id: 1 }
JavaScript

{ id } と書いたとき、プロパティ名は自動的に "id" になります。
「変数名そのまま」がキーとして使われると覚えてください。

ルール2：変数名と違うキーを使いたいときは短縮できない

API の仕様などで、「キー名」と「手元の変数名」を変えたいことがあります。

const userId = 1;

// 「id」というキー名にしたい
const user1 = {
  id: userId      // これはOK
  // id と userId が違うので短縮記法は使えない
};
JavaScript

ここが重要です：
短縮記法はあくまで「key: key」という同じ名前のときだけ。
名前を変えたいときは、従来どおり id: userId のように書きます。

ルール3：他のプロパティやメソッドと混在できる

短縮記法のプロパティと、普通の キー: 値 やメソッド定義を混ぜて使って構いません。

const id = 7;
const name = "Alice";

const user = {
  id,                 // 短縮記法
  name,               // 短縮記法
  role: "admin",      // 通常のプロパティ
  greet() {           // メソッド短縮記法（ES6）
    console.log(`Hello, ${this.name}`);
  }
};
JavaScript

実務でよく使うパターン

データをまとめて返す（オブジェクトで返り値を作る）

関数で複数の値を返したいとき、オブジェクトで返すことが多いです。

// 旧スタイル
function analyze(text) {
  const length = text.length;
  const upper  = text.toUpperCase();
  return {
    length: length,
    upper: upper
  };
}

// 短縮記法
function analyze2(text) {
  const length = text.length;
  const upper  = text.toUpperCase();
  return { length, upper };
}

console.log(analyze2("abc")); // { length: 3, upper: "ABC" }
JavaScript

ここが重要です：
返り値の { length, upper } を見ただけで、「この関数は length と upper を計算して返すんだな」とすぐ分かるようになります。

イベントや API への「ペイロード」を作る

イベントや API コールで、まとめて情報を渡すオブジェクトを作るときも便利です。

const type = "USER_LOGIN";
const userId = 7;
const timestamp = Date.now();

// 旧スタイル
const payload1 = {
  type: type,
  userId: userId,
  timestamp: timestamp
};

// 短縮記法
const payload2 = { type, userId, timestamp };

console.log(payload2);
JavaScript

変数の一覧＝オブジェクトの中身、という対応関係がきれいに見えます。

分割代入との相性がとても良い

分割代入で取り出した変数名と同じ名前でオブジェクトを組み立て直す、というパターンでも短縮記法は自然に使えます。

const res = { id: 1, name: "Alice", age: 20 };

// 分割代入
const { id, name } = res;

// 別の場所に渡す用のオブジェクトを組み立て直す
const user = { id, name };
console.log(user); // { id: 1, name: "Alice" }
JavaScript

よくある勘違いと注意点（重要部分の深掘り）

「短縮記法が使えるのは“変数”だけ」

リテラルや式などは、そのまま短縮できません。

const name = "Alice";

// これは NG（構文エラー）
// const user = { "name" };  

// OK：キーを文字列にしたいなら通常の書き方
const user1 = { "name": name };

// OK：短縮記法は変数名そのものを書く
const user2 = { name };
JavaScript

式を使いたいときも同様です。

const a = 1;

// これは NG
// const obj = { a + 1 };

// OK
const obj = { value: a + 1 };
JavaScript

「短縮記法とスプレッドは別物」

同じ ES6 領域の機能ですが、意味は違います。

const id = 1;
const userBase = { name: "Alice" };

// 短縮記法：{ id: id }
const u1 = { id };

// スプレッド：userBase の中身を展開
const u2 = { ...userBase, id };
JavaScript

ここが重要です：

  • id → 「id という名前のプロパティに、変数 id の値を入れる」
  • ...userBase → 「userBase のすべてのプロパティをここに貼り付ける」

「その変数だけプロパティにしたい」のが短縮、「既存オブジェクトの中身を丸ごと貼り付けたい」のがスプレッドです。

「プロパティ名を変えたいときは素直に通常記法で」

変数名と API のキー名を変えたい場面は多いですが、無理に短縮記法にこだわらない方が読みやすくなります。

const userId = 1;
const displayName = "Alice";

// API 仕様に合わせる
const body = {
  id: userId,          // 名前を変えているので短縮不可
  name: displayName
};
JavaScript

例題で理解を固める

// 1) 短縮記法の基本
const id = 1;
const name = "Alice";
const age = 20;

const user = { id, name, age };
console.log(user); // { id: 1, name: "Alice", age: 20 }

// 2) 通常記法と混在
const role = "admin";
const active = true;

const user2 = {
  id,      // 短縮
  name,    // 短縮
  role,    // 短縮
  active,  // 短縮
  createdAt: Date.now() // 通常
};
console.log(user2);

// 3) 関数の返り値で使う
function createPoint(x, y) {
  const len = Math.sqrt(x * x + y * y);
  return { x, y, len }; // x:x, y:y, len:len
}
console.log(createPoint(3, 4)); // { x: 3, y: 4, len: 5 }

// 4) 分割代入との組み合わせ
const res = { id: 7, name: "Bob", age: 30, city: "Tokyo" };
const { id: userId2, name: userName2 } = res;
const summary = { userId2, userName2 };
console.log(summary);

// 5) 短縮できないパターン（名前変更が必要）
const user_id = 10;
const display_name = "Carol";

const apiBody = {
  user_id,        // これは短縮
  display_name,   // これも短縮
  // もしキー名を userId に変えたいなら:
  // userId: user_id,
  // name: display_name
};
console.log(apiBody);
JavaScript

まとめ

プロパティ短縮記法の核心は、
「変数名と同じ名前のプロパティを作るとき、key: key の右側を省略して key だけ書ける」 ことです。

これにより、

  • オブジェクトの構造が「変数の一覧」として一目で分かる
  • タイプ量が減るだけでなく、「左右の取り違え」などのミスも減る
  • 関数の返り値やペイロードなど、「値をまとめて渡す」コードが読みやすくなる

短縮記法が使える条件（変数名とプロパティ名が同じときだけ）と、
スプレッドとの役割の違いを意識して使い分ければ、
初心者でも「ES6っぽい」きれいで意図の伝わるオブジェクトリテラルを書けるようになります。

スポンサーリンク
タイトルとURLをコピーしました