はじめに
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でよく見かける書き方
最初は少し違和感があるかもしれませんが、慣れれば自然に書けるようになります。