globalThis とはなにか

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 を書く際に特に有用である。