JavaScriptでグローバルオブジェクトを取得する際、環境によって異なる参照方法が必要でした。ブラウザでは`window`、Node.jsでは`global`を使用するなど、実行環境に応じて書き分ける必要がありました。

この問題を解決するために、ES2020で`globalThis`が導入されました。`globalThis`を使用することで、実行環境に関係なく統一的にグローバルオブジェクトを参照できます。

globalThisの基本的な使い方

// どの環境でも動作する
console.log(globalThis);

// グローバル変数の定義
globalThis.myGlobalVariable = "Hello World";

// グローバル変数へのアクセス
console.log(globalThis.myGlobalVariable); // "Hello World"

実行環境ごとの動作

ブラウザ環境：

console.log(globalThis === window); // true

Node.js環境：

console.log(globalThis === global); // true

Web Workers環境：

console.log(globalThis === self); // true

globalThisの利点

1. クロスプラットフォーム対応

  • 異なる実行環境で同じコードが動作
  • 環境チェックのコードが不要

2. コードの保守性向上

  • 環境依存のコードを書く必要がない
  • 統一的な記述で可読性が向上

3. モジュール間の互換性

  • 様々な環境で動作するライブラリの開発が容易

従来の方法との比較

以前は以下のような冗長なコードが必要でした：

const getGlobalObject = () => {
  if (typeof window !== 'undefined') return window;
  if (typeof global !== 'undefined') return global;
  if (typeof self !== 'undefined') return self;
  throw new Error('グローバルオブジェクトが見つかりません');
};

`globalThis`を使用すれば、このような判定は不要になります：

const global = globalThis;

ブラウザサポート状況

主要なモダンブラウザは`globalThis`をサポートしています：

  • Chrome 71以降
  • Firefox 65以降
  • Safari 12.1以降
  • Edge 79以降

古いブラウザをサポートする必要がある場合は、ポリフィルの使用を検討してください。

実践的な使用例

1. 環境に依存しないタイマー処理：

globalThis.setTimeout(() => {
  console.log('3秒経過');
}, 3000);

2. グローバルイベントリスナー：

globalThis.addEventListener('error', (event) => {
  console.error('エラーが発生しました:', event.error);
});

まとめ

`globalThis`は、JavaScriptのグローバルオブジェクトを統一的に扱うための強力な機能です。環境依存のコードを削減し、より保守性の高いコードを書くことができます。モダンな開発では積極的に活用することをお勧めします。