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

JavaScriptのgetterとsetterの違いとは？基本の仕組みと実装例を解説

JavaScriptでは、オブジェクトのプロパティに対して「getter（ゲッター）」と「setter（セッター）」という特別な関数を定義できます。これらを使うことで、プロパティへのアクセス時に自動的に処理を実行でき、データの検証や整形など柔軟な制御が可能になります。

Getter（ゲッター）とは

Getterは、プロパティが参照（読み取り）されたときに、暗黙的に関数を呼び出して値を返す仕組みです。JavaScriptでは get キーワードを使用して定義します。プロパティ名には文字列や数値の識別子も使用できます。

通常のプロパティのように object.property の形式でアクセスできるため、呼び出し側は関数であることを意識せずに値を取得できるのが特徴です。

Setter（セッター）とは

Setterは、プロパティに値が代入されたときに、暗黙的に関数を呼び出し、代入された値が引数として渡される仕組みです。JavaScriptでは set キーワードを使用して定義します。こちらも文字列や数値の識別子をプロパティ名にできます。

Setter内で受け取った値を加工・検証してから内部プロパティに保存することで、不正なデータの設定を防ぐなどの活用が可能です。

getterとsetterの違いまとめ

  • getter： プロパティの読み取り時に呼ばれ、計算結果などを返す（get キーワード）
  • setter： プロパティの書き込み時に呼ばれ、引数で渡された値を処理する（set キーワード）
  • どちらも通常のプロパティと同じ構文でアクセスできるため、利用者側からは透過的に扱える

getterとsetterの実装例

以下は、getterとsetterを両方実装したサンプルコードです。オブジェクト department に対して、details プロパティ経由で情報の取得と設定を行っています。

<html>
   <body>
      <script>
         var department = {
            deptName: "Finance",
            deptZone: "South",
            deptID: 105,
            get details() {
               return "Department Details<br>" + "Name: " + this.deptName + " <br>Zone: " + this.deptZone + "<br>ID: " + this.deptID;
            },
            set details(info) {
               var res = info.toString().split(' ');
               this.deptName = res[0] || '';
               this.deptZone = res[1] || '';
               this.deptID = res[2] || '';
            }
         }
         department.details = 'Marketing North 001';
         document.write(department.deptName);
         document.write(department.deptZone);
         document.write(department.deptID);
      </script>
   </body>
</html>

コードのポイント

  • set details(info) により、department.details = 'Marketing North 001' を実行すると、スペース区切りで分割した値が各プロパティに自動的に設定されます。
  • get details() により、department.details を参照すると、部署名・地域・IDを整形した文字列が返されます。
  • このようにgetterとsetterを組み合わせることで、オブジェクトの内部構造を隠蔽しながら、直感的なインターフェースを提供できます。
  1. JavaScriptにおける関数とメソッドの違いとは？わかりやすく解説

    JavaScriptにおいて、関数とメソッドは本質的には同じものです。両者の違いは、メソッドがオブジェクトのプロパティとして定義された関数であるという点にあります。つまり、独立して定義されたものを「関数」、オブジェクトに紐づけられたものを「メソッド」と呼びます。 JavaScriptの関数の基本形 まず、一般的な関数の定義方法を見てみましょう。 function functionname(param1, param2){ // 処理内容 } JavaScriptのメソッドの例 メソッドは、オブジェクトに関連付けられた関数です。次の例では、employeeオブジェクトの中にdetails

  2. JavaとJavaScriptの違いとは？歴史・技術・使い分けを徹底解説

    ウェブ開発者のジェレミー・キースは2009年、「JavaとJavaScriptの関係は、ハムとハムスターの関係のようなものだ」と語りました。この比喩がどれほど正確かは議論の余地がありますが、その本質は的確です。共通する言語的ルーツを持つにもかかわらず、JavaとJavaScriptはまったく異なる2つのプログラミング言語なのです。年月とともに両者の重なりも多少増えましたが、今なおJavaScriptはウェブサイトにインタラクティブ性をもたらすフロントエンド言語の主流であり続け、Javaはサーバーサイドやアプリケーション開発で人気を保っています。開発者を採用したい方、プログラミングを学びたい方