globalThis は JavaScript の実行環境に依存せず、グローバルオブジェクトを参照するための標準的な方法である。ES2020 で導入された。
従来、グローバルオブジェクトへのアクセス方法は環境によって異なっていた。
| ブラウザ | window |
| Node.js | global |
| Web Worker | self |
この違いにより、複数の環境で動作するコードを書くには環境判定が必要だった。globalThis はこの問題を解決し、どの環境でも同じ記法でグローバルオブジェクトにアクセスできる。
// どの環境でも動作する globalThis.myGlobal = 'Hello' console.log(globalThis.myGlobal) // 'Hello'
ポリフィルの登録
環境を問わずポリフィルを登録する場合にも使える。
// 古い環境向けに Array.prototype.at が存在しなければ追加 if (!globalThis.Array.prototype.at) { globalThis.Array.prototype.at = function(index) { if (index < 0) { return this[this.length + index] } return this[index] } }
環境判定
現在の実行環境を判定するコードも簡潔に書ける。
function getEnvironment() { if (globalThis.window !== undefined) { return 'browser' } if (globalThis.process !== undefined) { return 'node' } if (globalThis.self !== undefined) { return 'worker' } return 'unknown' } console.log(getEnvironment())
従来の書き方との比較
globalThis 導入前は、環境ごとの分岐を書く必要があった。
// 従来の方法 const getGlobal = () => { if (typeof window !== 'undefined') return window if (typeof global !== 'undefined') return global if (typeof self !== 'undefined') return self throw new Error('Unable to locate global object') } const g = getGlobal() g.myValue = 42
// globalThis を使う方法 globalThis.myValue = 42
globalThis を使えば、このような冗長なコードが不要になる。ライブラリ開発やユニバーサル JavaScript を書く際に特に有用である。
