はじめに

TypeScriptとJavaScriptで使えるオブジェクト省略記法について解説します。

実務で何度も見る記法です。直感では少し分かりにくい記法かもしれませんが、初心者でも分かるように簡単な具体例を挙げて解説します。

先に結論

TypeScriptやJavaScriptでは、オブジェクトのプロパティ名と変数名が同じ場合、省略して記述することができます。
※正確にはECMAScript 2015（ES6）以降で導入された記法です

例えば、{ name: name } を単に { name } と書けます！

この記法、最初は「え？これどういう意味？」って感じだったのですが、慣れてしまえばそこまで難しくありません。

オブジェクト省略記法の基本

まずは、従来の書き方と省略記法を比較してみます。

初心者の方にも分かりやすいように、まずは一番シンプルで簡単なコードから説明します。

従来のオブジェクトの書き方

const name: string = "Taro";
const age: number = 21;

// 従来の書き方
// オブジェクトを作成する際に、プロパティ名と変数名が同じになっている
const myProfile: { name: string; age: number } = {
    name: name, // nameプロパティにname変数の値を代入
    age: age    // ageプロパティにage変数の値を代入
};

console.log(myProfile);
// 出力: { name: "Taro", age: 21 }

省略記法を使った書き方

次に、同じ内容を省略記法を使って書いてみます。

const name: string = "Taro";
const age: number = 21;

// 省略記法を使った書き方
const myProfile: { name: string; age: number } = { name, age }; // nameとageが自動的にプロパティとして追加される

console.log(myProfile);
// 出力: { name: "Taro", age: 21 }

スッキリしました！

なぜ省略記法を使うの？🤔

省略記法を使う理由を考えてみると以下4つでしょうか？

コードの簡潔さ: より短く、スッキリしたコードになります。
可読性の向上: 同じ名前の繰り返しが減り、読みやすくなります。
タイピング量の削減: キーボード入力が少なくなり、効率的です。
バグの減少: キーと値を間違えてタイプするミスが減ります。

よく使われるシーン

関数の引数でのオブジェクト生成

関数の引数でオブジェクトを生成する時にもよく使われます。

function createUser(name: string, age: number): { name: string; age: number } {
    return { name, age };
}

const user = createUser("Hanako", 25);
console.log(user); // 出力: { name: "Hanako", age: 25 }

実践的な例

もう少し複雑なケースでも使われます。

interface User {
    id: number;
    name: string;
    age: number;
    email: string;
}

function getUserInfo(id: number): User {
    // データベースからユーザー情報を取得したと仮定
    const name = "Hanako";
    const age = 25;
    const email = "hanako@example.com";
    
    // idも含めてオブジェクト省略記法を使用
    return { id, name, age, email };
}

const user = getUserInfo(1);
console.log(user);
// 出力: { id: 1, name: "Hanako", age: 25, email: "hanako@example.com" }

上記の例では、id引数と取得したユーザー情報を組み合わせて新しいオブジェクトを作成しています。

まとめ

オブジェクト省略記法は、コードをよりクリーンに、読みやすくするための書き方です。より効率的で保守しやすいコードを書くことができます。

覚えておくといいこと

プロパティ名と変数名が同じ時に使える
コードが簡潔になる
タイプミスが減る
モダンなJavaScript/TypeScriptでよく見かける書き方

最初は少し違和感があるかもしれませんが、慣れれば自然に書けるようになります。

参考資料

MDN Web Docs: オブジェクトでの作業

MDN Web Docs: オブジェクト初期化子

TypeScript公式ドキュメント: オブジェクトリテラル