読み込み中...

JavaScriptにおけるグローバル変数の使い方10選！初心者でも分かりやすい徹底解説

JavaScriptグローバル変数の使い方とサンプルコード JS
2023.04.25
この記事は約12分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

JavaScriptを学んでいると、グローバル変数という言葉をよく耳にします。

初心者にとっては難しい印象を持っているかもしれませんが、グローバル変数は実際にはとても便利で強力な機能です。

この記事では、グローバル変数の基本的な使い方から応用例、注意点やカスタマイズ方法まで、わかりやすく徹底解説します。

JavaScriptを使い始めたばかりの初心者でも、この記事を読めばグローバル変数を使いこなせるようになるでしょう。

それでは、さっそくグローバル変数について学んでいきましょう。

●グローバル変数とは

○JavaScriptでの変数の種類

JavaScriptには、変数のスコープ（有効範囲）によって、グローバル変数とローカル変数の2種類があります。

グローバル変数は、プログラム全体でアクセスできる変数で、どの関数からでも参照・変更することができます。

一方、ローカル変数は、関数内でのみアクセスできる変数で、関数外からは参照・変更できません。

●グローバル変数の作り方

○グローバル変数の宣言方法

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

次の例では、globalVarというグローバル変数が宣言されています。

// グローバル変数の宣言
var globalVar = "こんにちは、世界！";

function showMessage() {
  // グローバル変数を参照
  console.log(globalVar);
}

showMessage(); // "こんにちは、世界！" が出力される

○関数内でのグローバル変数の宣言

関数内でグローバル変数を宣言するには、windowオブジェクトにプロパティとして追加します。

次の例では、globalVarというグローバル変数が関数内で宣言されています。

function createGlobalVar() {
  // 関数内でグローバル変数を宣言
  window.globalVar = "こんにちは、世界！";
}

createGlobalVar();
console.log(globalVar); // "こんにちは、世界！" が出力される

これで関数内でグローバル変数を宣言する方法がわかりました。

次に、グローバル変数の使い方を10個のサンプルコードを使って解説していきます。

●グローバル変数の使い方10選

グローバル変数は、様々なシチュエーションで役立ちます。

ここでは、グローバル変数の具体的な使い方を10個のサンプルコードで紹介します。

○サンプルコード1：ページ内の表示切り替え

グローバル変数を使って、ページ内の表示内容を切り替えることができます。

例えば、次のようにして、表示するメッセージを切り替えることができます。

// グローバル変数の宣言
var message = "こんにちは、世界！";

function changeMessage() {
  // グローバル変数の値を変更
  message = "さようなら、世界！";
}

console.log(message); // "こんにちは、世界！" が出力される
changeMessage();
console.log(message); // "さようなら、世界！" が出力される

○サンプルコード2：データの共有

グローバル変数を使って、複数の関数間でデータを共有することができます。

次の例では、countというグローバル変数を使って、関数incrementとdecrementの間でデータを共有しています。

// グローバル変数の宣言
var count = 0;

function increment() {
  // グローバル変数をインクリメント
  count++;
}

function decrement() {
  // グローバル変数をデクリメント
  count--;
}

increment();
increment();
console.log(count); // 2 が出力される
decrement();
console.log(count); // 1 が出力される

○サンプルコード3：イベントリスナーとの連携

グローバル変数を使って、イベントリスナーと連携することができます。

次の例では、clickCountというグローバル変数を使って、ボタンクリックの回数を記録しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>イベントリスナーとの連携</title>
</head>
<body>
  <button id="clickButton">クリックしてね！</button>
  <script>
    // グローバル変数の宣言
    var clickCount = 0;

    // イベントリスナーの登録
    document.getElementById("clickButton").addEventListener("click", function() {
      // グローバル変数を更新
      clickCount++;
      console.log("クリック回数：" + clickCount);
    });
  </script>
</body>
</html>

○サンプルコード4：非同期処理との連携

グローバル変数を使って、非同期処理と連携することができます。

次の例では、fetchDataというグローバル変数を使って、非同期で取得したデータを保存しています。

// グローバル変数の宣言
var fetchData;

// 非同期処理
fetch("https://api.example.com/data")
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    // グローバル変数にデータを保存
    fetchData = data;
    console.log(fetchData);
  });

○サンプルコード5：変数のスコープを把握

グローバル変数を使うことで、変数のスコープを把握しやすくなります。

次の例では、globalVarというグローバル変数と、localVarというローカル変数を使っています。

// グローバル変数の宣言
var globalVar = "グローバル変数";

function exampleFunction() {
  // ローカル変数の宣言
  var localVar = "ローカル変数";
  console.log(globalVar); // "グローバル変数" が出力される
  console.log(localVar);  // "ローカル変数" が出力される
}

exampleFunction();
console.log(globalVar); // "グローバル変数" が出力される
// console.log(localVar);  // localVar はスコープ外なのでエラーが発生する

○サンプルコード6：複数ページ間でのデータのやり取り

グローバル変数では、複数ページ間でのデータのやり取りが難しいため、代わりにローカルストレージやセッションストレージを利用しましょう。

次の例では、ローカルストレージを使ってデータを保存し、次のページでそのデータを表示しています。

1ページ目のHTML (page1.html)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>1ページ目</title>
</head>
<body>
  <h1>1ページ目</h1>
  <button id="saveButton">データを保存する</button>
  <script>
    document.getElementById("saveButton").addEventListener("click", function() {
      // データをローカルストレージに保存
      localStorage.setItem("message", "こんにちは、2ページ目！");
      window.location.href = "page2.html"; // 2ページ目へ遷移
    });
  </script>
</body>
</html>

2ページ目のHTML (page2.html)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>2ページ目</title>
</head>
<body>
  <h1>2ページ目</h1>
  <div id="message"></div>
  <script>
    // ローカルストレージからデータを取得
    var savedMessage = localStorage.getItem("message");
    document.getElementById("message").innerText = savedMessage;
  </script>
</body>
</html>

○サンプルコード7：関数の引数として利用

グローバル変数は、関数の引数として利用することもできます。

次の例では、userNameというグローバル変数を関数greetの引数として使用しています。

// グローバル変数の宣言
var userName = "Taro";

// 関数の定義
function greet(name) {
  console.log("こんにちは、" + name + "さん！");
}

// 関数の呼び出し
greet(userName); // "こんにちは、Taroさん！" が出力される

○サンプルコード8：オブジェクトとしての利用

グローバル変数をオブジェクトとして利用することで、関連するデータをまとめて管理できます。

次の例では、userInfoというグローバル変数をオブジェクトとして使用しています。

// グローバル変数の宣言
var userInfo = {
  name: "Taro",
  age: 25,
  job: "エンジニア"
};

// オブジェクトのプロパティを表示
console.log(userInfo.name); // "Taro" が出力される
console.log(userInfo.age);  // 25 が出力される
console.log(userInfo.job);  // "エンジニア" が出力される

○サンプルコード9：配列としての利用

グローバル変数を配列として利用することで、複数のデータを一つの変数で管理できます。

次の例では、userNamesというグローバル変数を配列として使用しています。

// グローバル変数の宣言
var userNames = ["Taro", "Jiro", "Saburo"];

// 配列の要素を表示
console.log(userNames[0]); // "Taro" が出力される
console.log(userNames[1]); // "Jiro" が出力される
console.log(userNames[2]); // "Saburo" が出力される

○サンプルコード10：設定値の一元管理

グローバル変数を使って、設定値を一元管理することができます。

次の例では、configというグローバル変数をオブジェクトとして利用し、アプリケーションの設定値を管理しています。

// グローバル変数の宣言
var config = {
  apiUrl: "https://example.com/api/",
  apiKey: "1234567890abcdef",
  maxResults: 10
};

// 設定値を利用した関数の例
function fetchData() {
  var url = config.apiUrl + "?key=" + config.apiKey + "&maxResults=" + config.maxResults;
  console.log("データを取得するURL: ", url);
}

// 関数の呼び出し
fetchData();

●注意点と対処法

○グローバル変数の過剰な使用に注意

グローバル変数は、過剰に使用するとコードの可読性や保守性が低下します。

必要最低限の使用に留め、適切なスコープで変数を宣言しましょう。

○ネームスペースの利用

ネームスペースは、グローバル変数をグループ化し、名前の衝突を防ぐために使用されます。

ネームスペースは、オブジェクトを利用して作成できます。

// ネームスペースを利用したグローバル変数の宣言
var MyApp = {
  config: {
    apiUrl: "https://example.com/api/",
    apiKey: "1234567890abcdef",
    maxResults: 10
  },
  data: {
    userNames: ["Taro", "Jiro", "Saburo"]
  },
  methods: {
    fetchData: function () {
      var url = MyApp.config.apiUrl + "?key=" + MyApp.config.apiKey + "&maxResults=" + MyApp.config.maxResults;
      console.log("データを取得するURL: ", url);
    }
  }
};

// ネームスペースを利用して関数を呼び出す
MyApp.methods.fetchData();

上記の例では、MyAppというネームスペースを作成し、グローバル変数をまとめて管理しています。

●カスタマイズ方法

○グローバル変数の値を変更する方法

グローバル変数の値を変更する場合は、直接代入して変更できます。

// グローバル変数の値を変更
MyApp.config.maxResults = 20;

// 変更後の値を利用して関数を呼び出す
MyApp.methods.fetchData();

○グローバル変数の利用範囲を制限する方法

グローバル変数の利用範囲を制限する方法として、即時関数（IIFE: Immediately Invoked Function Expression）を使用できます。

(function () {
  // グローバル変数ではなく、ローカル変数として宣言
  var localVar = "この変数は、この関数の中でのみアクセス可能です";

  // localVarを利用する処理を記述
  console.log(localVar);
})();

まとめ

グローバル変数は、適切に使用することでプログラムの柔軟性や保守性を向上させることができます。

ただし、過剰な使用には注意しましょう。ネームスペースを利用することで、グローバル変数の管理が容易になります。

カスタマイズ方法を理解し、適切な使い方でコードの品質を高めましょう。