こんにちは、Reiです。
JavaScriptでコードを書いていると、
変数の値をまとめて オブジェクトにする場面 がよくあります。
例えば、
・ユーザー情報をまとめる
・設定データを作る
・複数の値を1つのデータとして扱う
といった場面です。
このとき、
変数名とオブジェクトの項目名が同じになることがよくあります。
実はJavaScriptでは、
このような場合に 同じ名前を2回書かなくていい便利な書き方があるのです。
それが 「オブジェクトの省略記法」 です。
この書き方を使うことで、
コードを短く、読みやすく書くことができます。
まずは基本となる書き方から整理していきましょう！
基本の書き方「オブジェクトの省略記法」
まずは、従来の書き方を見てみましょう。
const name = "田中";
const age = 25;
const user = {
name: name,
age: age
};
このコードでは、変数 name、変数 ageを、
オブジェクトのプロパティとしてまとめています。
ただしこの書き方では、
name: name
age: age
のように、同じ名前を2回書く必要があります。
そこで登場するのが 省略記法 です。
const name = "田中";
const age = 25;
const user = {
name,
age
};
console.log(user);
name: name
age: age
と書く代わりに、
name
age
と1回書くだけで、同じ内容のオブジェクトを作ることができます。
console.log(user) の結果も同じになります。
なぜ1回で書けるの？
JavaScriptでは、
オブジェクトの中で プロパティ名だけが書かれている場合、
同じ名前の変数を探してその値を自動的に代入する仕組みになっています。
先ほど見せたこの省略記法のコードは、
const user = {
name,
age
};
JavaScriptの内部では、
const user = {
name: name,
age: age
};
と同じ意味として扱われます。
そのため、
同じ名前を繰り返し書く必要がなくなるのです。
省略記法が使える条件
この省略記法は、
変数名とプロパティ名が完全に同じ場合だけ使うことができます。
例えば次のコードを見てみましょう。
const tel = "090-1234-5678";
const contact = {
phoneNumber: tel
};
console.log(contact);
電話番号の変数 tel を、
オブジェクトの phoneNumber というプロパティとして
まとめています。
結果は次のようになります。
{ phoneNumber: "090-1234-5678" }
この場合、
変数名は tel
プロパティ名は phoneNumber
と変数名が異なっています。
そのため、この場合は phoneNumber: tel と書く必要があります。
もし
const contact = {
tel
};
と書いてしまうと、
{ tel: "090-1234-5678" }
というオブジェクトになります。
プロパティ名は tel になってしまい、
phoneNumber という名前にはなりません。
このように、
変数名とプロパティ名が違う場合は
省略記法を使うことはできないのです。
メソッド（関数）も省略で
オブジェクトの中に、
関数（メソッド）を定義することもできます。
従来の書き方は次のように、
プロパティ名のあとに : function を書いて
関数を定義する必要があります。
const user = {
sayHello: function() {
console.log("Hello");
}
};
この書き方も、
JavaScriptの省略記法を使うと
さらに短く書くことができます。
const user = {
sayHello() {
console.log("Hello");
}
};
このように : function の部分を省略して、
関数名の後ろに () を書くだけでメソッドを定義できます。
どちらの書き方でも、user.sayHello()
のように同じ方法で関数を呼び出すことができます。
なぜ省略記法を使うの？
省略記法を使うことで、
同じ名前を何度も書く必要がなくなり、コードをよりシンプルに書くことができるのです。
例えば、
name: name,
age: age,
email: email,
address: address
と書くよりも、
name,
age,
email,
address
と書いた方が、
・コードが短くなる
・読みやすくなる
・スペルミスが減る
といったメリットがあります。
まとめ
ここまで、JavaScriptの オブジェクトの省略記法 を見てきました。
オブジェクトの省略記法を使うと、
変数名と同じプロパティ名を
1回の記述で書くことができます。
＼＼ 今回のまとめ ／／
・ オブジェクトの省略記法は、同じ名前を1回で書ける書き方
・ name: name は name と省略できる
・ 変数名とプロパティ名が一致している場合だけ使える
・ メソッド（関数）も : function を省略して書くことができる
・ コードが短くなり、読みやすくなるメリットがある
オブジェクトの省略記法を使えるようになると、
同じ名前を何度も書く必要がなくなり、
コードをすっきり整理させることができます。
最初は小さな違いに見えるかもしれませんが、
実際の開発ではとてもよく使われる書き方です。
ぜひコードを書きながら、
この書き方に少しずつ慣れていきましょう！
次は、
オブジェクトや配列を展開して扱うことができる便利な書き方
「スプレッド構文（Spread構文）」 を見ていきましょう！
コメント