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

【JavaScript入門】getterとsetterの定義方法をわかりやすく解説

Getter（ゲッター）とは

Getterは、オブジェクトのプロパティにアクセスした際に、暗黙的に関数を呼び出して値を取得するための仕組みです。JavaScriptではgetキーワードを使用して定義します。プロパティ名には、文字列や数値などの識別子を指定できます。

Setter（セッター）とは

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

GetterとSetterを活用すると、オブジェクト内部のデータへの直接アクセスを防ぎつつ、値の検証や整形処理を挟むことができるため、安全性と保守性の高いコードを実現できます。

GetterとSetterの実装例

以下は、GetterとSetterを両方実装したサンプルコードです。

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

このコードでは、departmentオブジェクトにdetailsという名前のGetterとSetterを定義しています。Setterに対して「Marketing North 001」という文字列を代入すると、値がスペースで分割され、それぞれdeptName・deptZone・deptIDに自動的に設定されます。

実行結果として、画面には「Marketing」「North」「001」が出力され、Setterを経由してプロパティの値が正しく更新されたことが確認できます。このようにGetterとSetterを使いこなすことで、プロパティへのアクセス方法を柔軟に制御できます。

  1. JavaScriptのencodeURI()・decodeURI()関数の使い方を徹底解説

    JavaScriptには、URL（URI）を安全に扱うための組み込み関数として encodeURI() と decodeURI() が用意されています。この記事では、それぞれの役割と実際の使い方をサンプルコード付きで解説します。 encodeURI()関数とは encodeURI()関数は、URI全体をエンコードするための関数です。日本語やスペースなど、URLにそのまま含めることができない文字をパーセントエンコーディング（%エンコード）に変換します。 ただし、URIの構造上特別な意味を持つ予約文字である以下の文字はエンコードされず、そのまま残ります。 , / ? : @ & = + $

  2. JavaScriptで配列をセット（Set）に変換する方法｜new Set()の使い方を解説

    JavaScriptでは、new Set() コンストラクタを使うことで、配列を簡単にセット（Setオブジェクト）へ変換できます。セットは同じ値を自動的に1つだけ保持する性質を持つため、配列から重複した要素を取り除きたい場合にも非常に便利です。 配列をセットに変換するサンプルコード 以下は、ボタンをクリックすると配列がセットに変換されて表示される、完全なHTMLサンプルです。 <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport co