JavaScript: グローバル変数 vs ローカル変数 - 違いを徹底解説

2024-05-23

JavaScript 関数でグローバル変数を定義する方法

グローバル変数 を定義するには、関数の外側で変数を宣言します。

// グローバル変数宣言
var globalVariable = 10;

function exampleFunction() {
  // ローカル変数宣言
  var localVariable = 20;
  console.log(globalVariable); // 10 が出力される
  console.log(localVariable);  // 20 が出力される
}

console.log(globalVariable); // 10 が出力される

この例では、globalVariable はグローバル変数として宣言されています。そのため、プログラムのどこからでもアクセスできます。一方、localVariable は exampleFunction 関数内でのみアクセスできるローカル変数です。

関数内でグローバル変数を変更するには、その変数を再代入します。

// グローバル変数宣言
var globalVariable = 10;

function exampleFunction() {
  // グローバル変数の値を変更
  globalVariable = 20;
  console.log(globalVariable); // 20 が出力される
}

console.log(globalVariable); // 20 が出力される

この例では、exampleFunction 関数内で globalVariable に 20 を代入しています。そのため、プログラム全体の globalVariable の値は 20 に変更されます。

グローバル変数の注意点

グローバル変数は、プログラム全体で共有されるため、意図せず変数の値を変更してしまう可能性 があります。そのため、グローバル変数は 必要最低限 に使用し、変数のスコープを明確にする ことが重要です。

グローバル変数の代わりに、モジュール や クラス を使用して、変数をカプセル化することを検討しましょう。

サンプルコード：グローバル変数とローカル変数

// グローバル変数宣言 (カウントを初期化)
var globalCount = 0;

function incrementCount() {
  // ローカル変数宣言
  var localCount = 0;

  // グローバル変数をインクリメント
  globalCount++;

  // ローカル変数をインクリメント
  localCount++;

  console.log('グローバルカウント:', globalCount);
  console.log('ローカルカウント:', localCount);
}

// 関数呼び出し (グローバルカウントとローカルカウントを出力)
incrementCount();
incrementCount();
incrementCount();

このコードの説明:

グローバル変数 globalCount を宣言し、初期値を 0 に設定します。
incrementCount 関数を作成します。
関数内では、ローカル変数 localCount を宣言します。
グローバルカウントとローカルカウントの値をコンソールに出力します。
incrementCount 関数を 3 回呼び出し、グローバルカウントとローカルカウントの値を出力します。

出力:

グローバルカウント: 1
ローカルカウント: 1
グローバルカウント: 2
ローカルカウント: 1
グローバルカウント: 3
ローカルカウント: 1

ポイント:

グローバル変数 globalCount は、プログラム全体で共有されます。そのため、関数呼び出しごとに値が増加します。
ローカル変数 localCount は、incrementCount 関数内でのみ有効です。そのため、関数呼び出しごとに初期化され、1 ずつ増加します。

JavaScript 関数でグローバル変数を定義するその他の方法

let キーワードは、ブロックスコープ変数を宣言するために使用されます。ブロックスコープ変数は、変数が宣言されたブロック内でのみ有効です。しかし、グローバルスコープの変数にアクセスしたり、変更したりすることはできます。

// グローバル変数宣言 (let キーワードを使用)
let globalVariable = 10;

function exampleFunction() {
  // ローカル変数宣言
  let localVariable = 20;
  console.log(globalVariable); // 10 が出力される
  console.log(localVariable);  // 20 が出力される
}

console.log(globalVariable); // 10 が出力される

const キーワードは、再代入できない定数変数を宣言するために使用されます。定数変数は、宣言時に初期化され、その値を変更することはできません。グローバルスコープでも同様です。

// グローバル定数宣言 (const キーワードを使用)
const globalConstant = 10;

function exampleFunction() {
  // ローカル変数宣言
  let localVariable = 20;
  console.log(globalConstant); // 10 が出力される
  console.log(localVariable);  // 20 が出力される
}

// globalConstant の値を変更しようとするとエラーが発生
globalConstant = 20;

ウィンドウオブジェクトを使用する

ブラウザ環境では、window オブジェクトを使用してグローバル変数を定義できます。window オブジェクトは、ブラウザウィンドウを表すグローバルオブジェクトです。

// グローバル変数宣言 (window オブジェクトを使用)
window.globalVariable = 10;

function exampleFunction() {
  // ローカル変数宣言
  let localVariable = 20;
  console.log(window.globalVariable); // 10 が出力される
  console.log(localVariable);  // 20 が出力される
}

console.log(window.globalVariable); // 10 が出力される

各方法の比較

方法	利点	欠点
`var`	従来の方法で、広く使用されている	再代入が容易で、意図せず変数の値を変更してしまう可能性がある
`let`	ブロックスコープで変数を宣言できるため、コードの可読性とメンテナンス性が向上する	グローバルスコープの変数を宣言する場合、明示的に `window` オブジェクトを使用する必要がある
`const`	定数変数を宣言できるため、変数の値が意図せず変更されるのを防ぐことができる	再代入できないため、柔軟性に欠ける
`window` オブジェクト	ブラウザ環境でのみ使用可能	コードが煩雑になり、可読性が低下する可能性がある