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

JavaScriptでカスタムオブジェクトを作成する方法をわかりやすく解説

JavaScriptでは、new Object()を使うことで、自由にプロパティを追加できるカスタムオブジェクトを簡単に作成できます。オブジェクトを作成した後は、ドット記法（.）でプロパティにアクセスし、値を代入したり読み取ったりすることが可能です。

カスタムオブジェクトの作成例

以下のコードは、従業員情報を管理するカスタムオブジェクトを作成し、その内容を画面に表示するシンプルなサンプルです。

サンプルコード

<!DOCTYPE html>
<html>
   <body>
      <p id="test"></p>
      <script>
         // Objectコンストラクタでカスタムオブジェクトを生成
         var dept = new Object();
         dept.employee = "Amit";
         dept.department = "Technical";
         dept.technology = "Java";

         // プロパティの値を組み合わせて表示
         document.getElementById("test").innerHTML =
         dept.employee + " is working on " + dept.technology + " technology.";
      </script>
   </body>
</html>

コードの解説

  • new Object()：空のオブジェクトを生成します。
  • dept.employee：従業員名を格納するプロパティです。
  • dept.department：所属部署を格納するプロパティです。
  • dept.technology：使用している技術を格納するプロパティです。

このコードを実行すると、ブラウザ上には次のように表示されます。

Amit is working on Java technology.

補足：オブジェクトリテラルを使った書き方

より簡潔に記述したい場合は、オブジェクトリテラル（波括弧 {}）を使う方法も一般的です。

var dept = {
   employee: "Amit",
   department: "Technical",
   technology: "Java"
};

どちらの方法でも同じ結果が得られますが、現代のJavaScriptでは可読性の高いオブジェクトリテラルが広く使われています。用途に応じて使い分けると良いでしょう。

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

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

  2. 【JavaScript入門】Symbolを使ってオブジェクトごとに一意のIDを作成する方法

    はじめにJavaScriptでオブジェクトごとに一意のIDを作成したい場合、Symbol()を使うのが最も簡単かつ確実な方法です。Symbolは呼び出されるたびに必ず新しい一意の値を生成するため、たとえ同じ説明文字列を渡しても、二度と同じ値にはなりません。以下は、各オブジェクトに対して一意のIDを作成するサンプルコードです。実装例<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewp