このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

【JavaScript入門】静的メソッドと静的プロパティ

静的メソッドと静的プロパティ

　静的メソッドと静的プロパティは 「インスタンスを作らなくてもクラス名だけでアクセスできる機能」 です。
ユーティリティ関数、定数、インスタンス数のカウントなど “全インスタンスに共通” の情報を管理するのに最適で、static キーワード 1 つで簡単に宣言できます。ここでは構文から実践例までを段階的に解説します。

１．静的メンバーの概要

1.1. インスタンスメンバーとの違い

種別アクセス例this 参照主な用途
インスタンスプロパティobj.name可能個々の状態保持
インスタンスメソッドobj.run()可能個々の動作
静的プロパティClass.version不可定数・共有カウンタ
静的メソッドClass.fromJSON()不可変換・ファクトリ関数

1.2. 宣言構文

class ClassName {
  static PROP = 初期値;          // 静的プロパティ
  static method(arg){ … }        // 静的メソッド
}

２．静的メソッド

2.1. 基本形

class MathUtil{
  static sqr(n){ return n * n; }
}

console.log(MathUtil.sqr(5)); // 25

2.2. ファクトリメソッドの実装例

🔧 ファクトリメソッドとは？

  1. 新しいインスタンス（オブジェクト）を生成するメソッドのこと。
  2. 特徴は「new を使わずに、メソッド経由で簡単にインスタンスを作れる」こと。
  3. JavaScriptではよく static メソッドとして書かれます。

👇 例のコードを見てみましょう！

class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  static fromJSON(json) {
    const o = JSON.parse(json);  // ← JSON文字列をオブジェクトに変換
    return new User(o.name, o.age);  // ← オブジェクトからUserを作る
  }
}

// 例：JSON文字列（JSONデータは文字列として渡す必要があります）
const jsonStr = '{"name": "Taro", "age": 25}';

// ファクトリメソッドからUserインスタンスを生成
const user = User.fromJSON(jsonStr);

// 結果の表示
console.log(user);  // 出力: User { name: 'Taro', age: 25 }

💡 解説

部分説明
constructor(name, age)Userオブジェクトを作るための初期化メソッド。
static fromJSON(json)JSON文字列を元にして、Userのインスタンスを生成する「ファクトリメソッド」。
JSON.parse(json)JSON文字列 → JavaScriptオブジェクトに変換します。
new User(...)オブジェクトから名前と年齢を取り出して User を作ります。

３．静的プロパティ

3.1. 定数を一元管理

class Config{
  static API_ENDPOINT = 'https://api.example.com';
  static RETRY_LIMIT  = 3;
}

fetch(Config.API_ENDPOINT);

💡 これは何をしているの？

  1. Config クラスを作って、
  2. API_ENDPOINT と RETRY_LIMIT という 定数のような値を static で定義しています。
  3. 最後に fetch() という関数を使って、API_ENDPOINT のURLにアクセスしています。

🧠 各要素の意味を詳しく説明

コード説明
class Config { ... }設定情報（Config）をまとめて管理するためのクラスです。
static API_ENDPOINT = 'https://api.example.com';APIのURLをクラスの定数として定義しています。
static RETRY_LIMIT = 3;リトライ回数の上限を定義しています（今回は使っていませんが）。
fetch(Config.API_ENDPOINT);APIのエンドポイントに対して、ネットワーク通信（HTTPリクエスト）を送信します。

3.2. インスタンス数をカウント

class Counter{
  static total = 0;
  constructor(){ Counter.total++; }
}

new Counter(); new Counter();
console.log(Counter.total); // 2

４．実践サンプル ― 税率と割引を静的メンバーで管理

ファイル名： static_member_demo.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>静的メソッドと静的プロパティ</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body{font-family:sans-serif;margin:2rem}
pre{background:#f4f4f4;padding:1rem}
</style>
</head>
<body>
<h2>🍰 商品価格計算デモ</h2>
<pre id="log">loading…</pre>

<script>
/* ---------- クラス宣言 ---------- */
class Product{
  static TAX = 0.1;                       // 静的プロパティ: 消費税率
  static discountRate = 0.05;             // 静的プロパティ: 一律割引

  constructor(name, price){
    this.name  = name;
    this.price = price;
  }

  // インスタンスメソッド
  finalPrice(){
    return Product.calcTax(this.price) - Product.calcDiscount(this.price);
  }

  /* ---------- 静的メソッド ---------- */
  static calcTax(base){
    return Math.round(base * (1 + Product.TAX));
  }
  static calcDiscount(base){
    return Math.round(base * Product.discountRate);
  }
}

/* ---------- 動作確認 ---------- */
const cake   = new Product('チョコケーキ', 460);
const cheese = new Product('チーズケーキ', 440);

const lines = [
  `税率         : ${Product.TAX * 100}%`,
  `割引率       : ${Product.discountRate * 100}%`,
  `${cake.name}   → ${cake.finalPrice()}円`,
  `${cheese.name} → ${cheese.finalPrice()}円`
];

document.getElementById('log').textContent = lines.join('\n');
</script>
</body>
</html>

ブラウザの表示例

プログラム解説

  • Product.TAX / discountRate はクラス単位で 1 つだけ存在する定数。
  • calcTax と calcDiscount を静的メソッドにすることで、
    ・インスタンスを作らずにユーティリティとして再利用
    ・インスタンスメソッド finalPrice() 内でも Product. 経由で呼び出し。
  • 税率や割引率を変更すると全インスタンスの計算に即反映される。

まとめ

  • static を付けると クラス名から直接アクセス できるメンバーになる。
  • 静的メソッドはユーティリティ関数やファクトリ関数、静的プロパティは定数や共有状態の管理に最適。
  • インスタンス側からは ClassName.静的メンバー で参照し、this には含まれない点に注意。

　静的メンバーを活用してロジックとデータの責務を整理し、メンテナンスしやすいクラス設計を目指しましょう。