JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptにおけるES6のプロパティ省略記法（ショートハンド）の使い方

ES6（ECMAScript 2015）では、オブジェクトのキー名と、その値として代入したい変数名が同じである場合、値の指定を省略し、キー名だけを記述するだけで済む「プロパティ省略記法（Property Shorthand）」が使えます。

この記法により、コードがより簡潔で読みやすくなります。以下に、JavaScriptでのプロパティ省略記法の実装例を示します。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result {
      font-size: 20px;
      font-weight: 500;
      color: blueviolet;
   }
</style>
</head>
<body>
<h1>JavaScriptのES6プロパティ省略記法</h1>
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックするとpersonオブジェクトが表示されます</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    let name='Rohan',age=16,place='Delhi';
    let person = {
        name,age,place,
    }
    BtnEle.addEventListener("click", () => {
        resEle.innerHTML = 'person.name = '+person.name+'<br>';
        resEle.innerHTML += 'person.age = '+person.age+'<br>';
        resEle.innerHTML += 'person.place = '+person.place+'<br>';
    });
</script>
</body>
</html>

上記のコードでは、変数name・age・placeと同じ名前のキーを持つpersonオブジェクトを、省略記法を使って一行ずつ簡潔に定義しています。従来の書き方ではname: name, age: age, place: placeのようにキーと値を両方書く必要がありましたが、省略記法ならキー名だけでOKです。

出力結果

JavaScriptにおけるES6のプロパティ省略記法（ショートハンド）の使い方

「CLICK HERE」ボタンをクリックすると、以下のようにpersonオブジェクトの各プロパティ値が表示されます。

JavaScriptにおけるES6のプロパティ省略記法（ショートハンド）の使い方


  1. JavaScript Web APIのFile.nameプロパティとは？使い方とサンプルコードを解説

    JavaScriptのFile Web APIに含まれるFile.nameプロパティは、ファイルオブジェクトからファイル名のみを取得するためのプロパティです。このプロパティは、ファイルが保存されているフォルダのパス（ディレクトリ情報）を除いた、ファイル名だけを文字列として返します。 ユーザーが要素を使ってファイルを選択した際、そのファイル名を画面に表示したり、アップロード処理の前に入力チェックを行ったりする場面でよく利用されます。 主な特徴 読み取り専用：File.nameは変更できないため、取得のみ可能です。 パス情報は含まれない：セキュリティ上の理由から、ブラウザはローカルのフルパスを公

  2. JavaScriptで配列内オブジェクトのプロパティ名を置き換える方法

    JavaScriptでオブジェクト配列のプロパティ名を置き換える方法 JavaScriptでは、map()メソッドを活用することで、配列に含まれる各オブジェクトのプロパティ名を別の名前に簡単に置き換えることができます。map()は元の配列を変更せずに新しい配列を生成するため、安全かつ効率的なデータ変換処理に適しています。 以下は、オブジェクト配列のプロパティ名 name を fullName に置き換えるサンプルコードです。 サンプルコード <!DOCTYPE html> <html lang="en"> <head> <meta