JavaScript ES2022 private static methods の落とし穴：ChromeとSafariで異なる挙動を徹底解説💻

はじめに (対象読者・この記事でわかること)

この記事は、JavaScriptのクラス構文に慣れ親しんだ開発者、特にESNextの新しい機能を積極的に活用しているフロントエンドエンジニアを対象としています。最新のJavaScript仕様をプロダクション環境で利用する際に、予期せぬブラウザ互換性の問題に直面した経験がある方にとって、この記事はきっと役立つでしょう。

この記事を読むことで、JavaScript ES2022で導入されたプライベート静的メソッド（private static methods）が、主要ブラウザであるChromeとSafariで異なる挙動を示す具体的なケースを理解できます。さらに、その挙動の違いによって発生する問題の原因と、それらを回避するための具体的なコードパターンや対策を学ぶことができます。これにより、ブラウザ間の互換性に関する課題を乗り越え、より堅牢なJavaScriptアプリケーションを開発できるようになるでしょう。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - JavaScriptのクラス構文（classキーワード、staticキーワード） - プライベートフィールドおよびメソッドの基本（#プレフィックス）

JavaScript ES2022 プライベート静的メソッドの基本とブラウザ互換性の課題

ES2022（ECMAScript 2022）では、JavaScriptのクラス構文に新しい機能としてプライベート静的メソッド（private static methods）が導入されました。これは、クラスの外部からアクセスできない静的なメソッドを定義するためのものです。主に、クラス内部でしか利用されないヘルパー関数や、クラスレベルでのカプセル化を強化したい場合に役立ちます。

基本的な構文:

Javascript

class MyClass {
  static #privateStaticMethod() {
    return "これはプライベート静的メソッドです。";
  }

  static publicStaticMethod() {
    return MyClass.#privateStaticMethod(); // クラス内部から呼び出し
  }
}

console.log(MyClass.publicStaticMethod()); // 出力: "これはプライベート静的メソッドです。"
// console.log(MyClass.#privateStaticMethod()); // エラー: プライベートメソッドのため外部からアクセス不可

この機能は、クラス設計におけるカプセル化を強化し、コードの保守性や理解度を高める上で非常に有用です。しかし、最新のWeb標準が導入される際には、ブラウザごとの実装状況や解釈の差異が原因で、互換性の問題が発生することが珍しくありません。特にJavaScriptエンジンの実装に起因するバグは、開発者を悩ませる大きな要因となります。今回取り上げるプライベート静的メソッドも、特定のシナリオにおいてChromeとSafariで挙動が異なるという問題が報告されており、注意が必要です。

この問題は、仕様の解釈の差異というよりも、JavaScriptエンジン（特にSafariのWebKit/JavaScriptCore）における実装上のバグが原因であると考えられています。最新のJavaScript機能を安易に採用すると、思わぬところでブラウザ互換性の罠にはまる可能性があることを、このケースは示しています。

ChromeとSafariにおける具体的な挙動の違いと検証

ここでは、JavaScript ES2022のプライベート静的メソッドを巡る、ChromeとSafariでの具体的な挙動の違いについて、コード例を交えながら詳しく解説します。

問題となるシナリオの再現

特定の条件下で、プライベート静的メソッドの呼び出しがSafariで失敗するケースがあります。特に顕著なのが、プライベート静的メソッドが、同じクラス内の別の静的メソッド（公開またはプライベート）から呼び出される場合です。

以下のコードを見てください。

Javascript

class MyUtility {
  // プライベート静的メソッド
  static #calculateSum(a, b) {
    return a + b;
  }

  // 別のプライベート静的メソッドから呼び出すケース
  static #processData(data1, data2) {
    // 問題発生の可能性が高い呼び出し方
    return MyUtility.#calculateSum(data1, data2) * 2; 
  }

  // 公開静的メソッドからプライベート静的メソッドを呼び出すケース
  static performCalculation(x, y) {
    // Chromeでは動作するが、Safariではエラーになる可能性がある
    return MyUtility.#calculateSum(x, y); 
  }

  // 公開静的メソッドから、別のプライベート静的メソッドを介して呼び出すケース
  static processAndPerform(val1, val2) {
      return MyUtility.#processData(val1, val2);
  }
}

console.log("--- MyUtility のテスト ---");
try {
  console.log("performCalculation(5, 3):", MyUtility.performCalculation(5, 3));
} catch (e) {
  console.error("performCalculation でエラー:", e.message);
}

try {
  console.log("processAndPerform(10, 20):", MyUtility.processAndPerform(10, 20));
} catch (e) {
  console.error("processAndPerform でエラー:", e.message);
}

// 継承クラスでの挙動も確認
class ExtendedUtility extends MyUtility {
  static performExtendedCalculation(a, b) {
    // 継承されたクラスからの呼び出し
    // 親クラスのプライベート静的メソッドは直接アクセスできない
    // return ExtendedUtility.#calculateSum(a, b); // これは構文エラー
    // しかし、親クラスのpublicStaticMethodを介してならOK（ただし、元のバグに起因する）
    return MyUtility.performCalculation(a, b);
  }
}

console.log("--- ExtendedUtility のテスト ---");
try {
  console.log("performExtendedCalculation(7, 8):", ExtendedUtility.performExtendedCalculation(7, 8));
} catch (e) {
  console.error("performExtendedCalculation でエラー:", e.message);
}

このコードをChromeで実行した場合、期待通りにすべてのconsole.logが出力され、計算結果が表示されます。

しかし、Safari (特にバージョン16.x以前) で実行すると、MyUtility.performCalculation() や MyUtility.processAndPerform() の呼び出し箇所で、以下のようなTypeErrorが発生する可能性がありました。

TypeError: Attempted to get private field on non-instance

または、より直接的にプライベート静的メソッドの解決に失敗することを示すエラー:

TypeError: private static method must be accessed on class

これらのエラーは、本来クラス内部で正しく解決されるべきプライベート静的メソッドへの参照が、SafariのJavaScriptエンジン（JavaScriptCore）内で正しく処理されず、あたかもインスタンスのプロパティであるかのように扱われたり、静的コンテキストが失われたりすることで発生していました。

ハマった点やエラー解決

この問題に遭遇した際、Chromeでは問題なく動作するため、原因特定に時間がかかることがよくあります。「なぜSafariだけで動かないのか」「仕様に反した書き方をしているのか」と悩むことになります。特に、複数のプライベート静的メソッドが連鎖的に呼び出されるような複雑なクラスでは、デバッグが非常に困難になります。

このTypeErrorは、プライベート静的メソッドへの参照が、SafariのJavaScriptCoreエンジン内部で正しく解決されないことが原因です。静的コンテキスト（MyUtility.#calculateSumのような直接的なクラス名からの参照）が、何らかの理由で破綻し、thisコンテキストを必要とするインスタンスメソッドのように扱われてしまう、あるいは全く解決できない状況に陥るためです。これはSafari（WebKit/JavaScriptCore）の実装バグであり、TC39の仕様に準拠していない挙動でした。

解決策

幸いなことに、この問題にはいくつかの回避策があります。

1. プライベート静的メソッドを公開静的メソッドに変更する (カプセル化の緩和) 最も単純な解決策は、プライベート静的メソッドの使用を諦め、公開静的メソッドとして定義することです。 ```javascript class MyUtility { static calculateSum(a, b) { // # を削除して公開メソッドに return a + b; }

   static performCalculation(x, y) { return MyUtility.calculateSum(x, y); // # を削除 } } // この方法だとSafariでも問題なく動作 ``` しかし、これはカプセル化の目的を損ない、外部からアクセスできてしまうため、設計意図に反する場合があります。

2. プライベートヘルパー関数をクラス外部に定義する (ES Modulesの場合) ES Modulesを使用している場合、クラス外部のモジュールスコープにヘルパー関数を定義し、それをプライベートなものとして扱うことで回避できます。 ```javascript // utility.js const _calculateSum = (a, b) => { // _ でプライベートであることを示す慣習 return a + b; };

   export class MyUtility { static performCalculation(x, y) { return _calculateSum(x, y); // モジュールスコープの関数を呼び出し } } ``` この方法は、実際にプライベートフィールド構文を使用しないため、ブラウザの互換性問題を完全に回避できます。ただし、クラス構文によるカプセル化とは異なり、あくまで「モジュール内のプライベート」というスコープになります。

3. Babelなどのトランスパイラを利用する 最も堅牢な解決策は、BabelのようなJavaScriptトランスパイラを使用して、ESNextの構文を既存のブラウザで動作するES5やES6の構文に変換することです。Babelは、プライベートメソッドの構文を、最終的にクロージャーやWeakMapを用いたコードに変換してくれます。これにより、ブラウザの実装バグの影響を受けずに、意図した通りの挙動を実現できます。 javascript // Babelのプラグイン: @babel/plugin-transform-private-methods を使用 // これにより、#privateMethod() の呼び出しがブラウザ互換のコードに変換される プロダクション環境で最新のJavaScript構文を使用する場合は、トランスパイラの導入が強く推奨されます。

4. Safariのバージョンアップを待つ これは受動的な解決策ですが、現在この問題はSafariの最新バージョン（Safari 17以降）で修正されている可能性が高いです。WebKitのバグトラッカーでもこの種の問題に対する修正が多数報告されています。しかし、ユーザーが常に最新のブラウザを使用しているとは限らないため、上記1〜3のいずれかの対策を講じるのが賢明です。

これらの解決策を検討し、プロジェクトの要件や開発環境に合わせて最適な方法を選択することが重要です。

まとめ

本記事では、JavaScript ES2022で導入されたプライベート静的メソッドが、ChromeとSafariという主要なブラウザ間で異なる挙動を示すという、デバッグが困難な互換性問題について解説しました。

• プライベート静的メソッド はクラス内部のカプセル化を強化する強力な機能です。
• しかし、SafariのJavaScriptエンジン（JavaScriptCore）の実装バグ により、特定の条件下（特に、他の静的メソッドからプライベート静的メソッドを呼び出す場合）でTypeErrorが発生する可能性があります。
• この問題に対する解決策として、公開メソッドへの変更、モジュールスコープのヘルパー関数、そしてBabelなどのトランスパイラを用いた変換、さらにはブラウザのバージョンアップを待つという選択肢があることを示しました。

この記事を通して、読者が最新のJavaScript機能を導入する際に、ブラウザ互換性の課題を常に意識し、適切な対策を講じる重要性を改めて理解できたことでしょう。特に、トランスパイラの活用は、安定したアプリケーション開発には不可欠な要素です。

今後は、他のESNext機能におけるブラウザ間の互換性問題や、新しいWeb標準の導入が開発プロセスに与える影響についても記事にする予定です。

参考資料

• ECMAScript 2022 Language Specification - Private Static Methods
• MDN Web Docs - Classes: Private class features
• Babel Plugin: @babel/plugin-transform-private-methods
• WebKit Bugzilla (関連するバグ報告を検索)