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

JavaScriptのObject.definePropertyメソッドの使い方をわかりやすく解説

JavaScriptでオブジェクトに新しいプロパティを定義したり、既存のプロパティの属性を変更したりしたい場合には、Object.definePropertyメソッドを使用します。通常のドット記法による代入よりも細かい制御が可能になるため、ライブラリ開発などでもよく使われています。

基本構文

Object.defineProperty(obj, prop, descriptor)

それぞれの引数は以下の通りです。

  • obj – プロパティを定義する対象のオブジェクト
  • prop – 定義または変更するプロパティ名（文字列）
  • descriptor – プロパティの挙動を指定するディスクリプタ（記述子）オブジェクト

プロパティディスクリプタの主な属性

  • value：プロパティに設定する値
  • writable：値の書き換えを許可するかどうか（true / false）
  • enumerable：for...inループやObject.keys()で列挙されるかどうか（true / false）
  • configurable：属性の変更やプロパティの削除を許可するかどうか（true / false）

使用例

次のコードを実行して、Object.definePropertyの動作を確認してみましょう。ここでは、書き換え不可（writable: false）なプロパティを定義しています。

<!DOCTYPE html>
<html>
  <body>
    <script>
      const obj = {};

      Object.defineProperty(obj, 'prop', {
        value: 20,
        writable: false
      });

      // 書き換えを試みる
      obj.prop = 10;

      document.write(obj.prop);
    </script>
  </body>
</html>

実行結果

20

writableがfalseに設定されているため、obj.prop = 10;と代入してもプロパティの値は20のまま変わりません。なお、厳格モード（"use strict"）で実行した場合は、この代入によってTypeErrorが発生する点に注意してください。

まとめ

Object.definePropertyを活用すると、読み取り専用・列挙可否・設定可否といった詳細な属性を持つプロパティを柔軟に定義できます。外部から勝手に変更されたくないデータを扱う場合や、きめ細かなオブジェクト設計が必要な場面で非常に役立つメソッドです。

  1. JavaScriptでインポートしたオブジェクトを分割代入（デストラクチャリング）する方法

    JavaScriptでは、ESモジュールからインポートしたオブジェクトに対して分割代入（デストラクチャリング）を使うことで、必要なプロパティだけを個別の変数として簡潔に取り出すことができます。ここでは、import で読み込んだオブジェクトを分割代入する具体的な手順とコード例を紹介します。 ポイント：分割代入の基本構文 オブジェクトの分割代入は、次のように波括弧 { } の中に取り出したいプロパティ名を並べて記述します。let {プロパティ1, プロパティ2, プロパティ3} = オブジェクト;この構文は、インポートされたデフォルトエクスポートのオブジェクトにもそのまま適用できます。 コード例

  2. JavaScriptで多次元オブジェクトを作成する方法【サンプルコード付き】

    はじめに JavaScriptでは、オブジェクトのプロパティの値として別のオブジェクトを持たせることで、多次元（ネストされた）オブジェクトを作成できます。この構造を活用すると、氏名や学校情報、住所のように階層関係のあるデータを、直感的かつ整理された形で表現することが可能です。 サンプルコード 以下は、多次元JavaScriptオブジェクトを作成し、コンソールに表示するためのコード例です。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /