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

JavaScriptの静的プロパティとは？クラス関数に直接定義する方法を解説

JavaScriptの静的プロパティ（Static Properties）とは

JavaScriptにおける静的プロパティは、クラスのprototypeプロパティではなく、クラス関数そのものに割り当てられるプロパティです。この特徴により、オブジェクトをインスタンス化することなく、直接アクセスして呼び出すことができます。

通常のインスタンスプロパティは各オブジェクトごとに生成されますが、静的プロパティはクラス全体で共有される単一の値として扱われます。そのため、設定値やユーティリティ的なデータなど、全インスタンスで共通して使いたい情報を格納するのに適しています。

静的プロパティの基本的な書き方

コンストラクタ関数に対して「関数名.プロパティ名 = 値」という形式で代入するだけで、静的プロパティを定義できます。以下に具体的なコード例を示します。

コード例

<!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の静的プロパティ</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると、Studentクラスの静的プロパティschoolにアクセスできます</h3>
<script>
    let resEle = document.querySelector(".result");
    function Student(name, age) {
        this.name = name;
        this.age = age;
    }
    // クラス関数そのものに静的プロパティを定義
    Student.school = "St Marks Public School";
    document.querySelector(".Btn").addEventListener("click", () => {
        resEle.innerHTML = "Student.school = " + Student.school;
    });
</script>
</body>
</html>

実行結果

ページを読み込んだ直後の表示は以下の通りです。

JavaScriptの静的プロパティとは？クラス関数に直接定義する方法を解説

「CLICK HERE」ボタンをクリックすると、インスタンスを作成せずにStudent.schoolへ直接アクセスでき、静的プロパティの値が画面に表示されます。

JavaScriptの静的プロパティとは？クラス関数に直接定義する方法を解説

ポイントまとめ

  • 静的プロパティはクラス関数自体に紐づくため、prototypeには含まれません。
  • newによるインスタンス化なしで、クラス名.プロパティ名の形式で直接参照・呼び出しが可能です。
  • ES6以降のclass構文では、staticキーワードを使って同様の機能を実現できます。
  1. JavaScriptでクラスに静的メソッドを割り当てる方法

    JavaScriptでクラスに静的メソッド（staticメソッド）を割り当てるには、メソッドの前にstaticキーワードを付けるだけです。静的メソッドは、クラスをインスタンス化することなく、クラス名から直接呼び出すことができます。 静的メソッドはクラスそのものに属するため、個々のインスタンスの状態に依存しないユーティリティ関数や計算処理などに適しています。なお、静的メソッドはインスタンスからは呼び出せず、必ずクラス名を介して呼び出す必要がある点に注意しましょう。 以下は、JavaScriptでクラスに静的メソッドを割り当てるコード例です。 コード例 <!DOCTYPE html>

  2. JavaScriptオブジェクトを配列プロパティの長さで並べ替える方法

    この記事では、各オブジェクトが持つ配列プロパティの要素数（length）を基準にして、JavaScriptのオブジェクトを並べ替える方法を解説します。 ポイントとなる仕組み 並べ替えには Array.prototype.sort() メソッドを使用します。sort() の引数として比較関数（コンパレータ）を渡し、2つのオブジェクトの配列プロパティの length を比較することで、要素数の少ない順（昇順）にソートできます。比較関数は、条件を満たす場合に 1 を、満たさない場合に -1 を返すように記述します。 サンプルコード <!DOCTYPE html> <html la