column

ITコラム

mv8418

プログラミングノウハウ

2025.06.26

JavaScript【 var 】~ グローバル変数と巻き上げ

この記事を書いた人
プログラマカレッジ編集部

国内最大級の就活直結型無料プログラミングスクール「プログラマカレッジ」の編集部です。プログラミング及びスクール選びの専門知識を持つ編集部が当スクールの講師及びキャリアアドバイザーの監修の元、ITの基礎知識やプログラマーとしての転職ノウハウ、スクールの選び方などお役立ちコラムを配信しています。

JavaScript で変数を宣言する際に使用する var キーワードは、普段何気なく使用しているかもしれませんが、実は様々な意味を持っています。
今回は、JavaScript の var キーワードについて紹介します。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

最終更新日:2025年6月26日

1. var とは

var は、JavaScript で 変数を宣言するときに使用するキーワードです。

次のように記述して使用します。

var 変数名;

var 変数名 = 初期値;

変数の宣言のみをする場合 と 変数の宣言と同時に初期値を代入する場合 のどちらにも、var キーワードを使用することができます。

また、次のように 1行で複数の変数を宣言することもできます。

var 変数1, 変数2, … ;

var 変数1 = 初期値1, 変数2 = 初期値2, … ;

このように var キーワードを 冒頭に1回だけ使用して、カンマで 区切りで 変数を複数宣言することができます。

JavaScript は、代入される値によって 変数の型が自動的に決まります。

ですので、文字列型の変数も 数値型の変数も、変数は全て var キーワードを使用して宣言することができます。

JavaScript【 var 】~ グローバル変数と巻き上げ【プログラマカレッジ】

▲目次へ戻る

2. 関数内の var

関数を定義する際は、通常 function キーワードを使用して 次のように記述します。

function disp(){
    var str = "こんにちは!";

    return str;
}

alert(disp());

 
disp 関数は、文字列「 こんにちは! 」を変数 str に代入して 返しています。
ですので、「 alert(disp()); 」を実行すると、「 こんにちは! 」がアラート表示されます。
 
 
上のサンプルと同じ内容の関数を、var キーワードを使用して定義することもできます。

var キーワードを使用して関数を定義する際は、次のように記述します。

var disp = function(){

    return(str);
}

alert(disp);

このような関数の定義方法を 関数式ともいいます。

上のサンプルは、変数 disp を作成して、その変数に関数を格納する構造になっています。

そして、disp 関数の返り値を alert メソッドの引数として代入しています。

関数式は、関数の名前を付けなくてもいいので、無名関数 とも呼ばれます。

この定義方法は、ある関数の返り値を 変数に代入したり 別の関数の引数として利用したりすることができるので、慣れると便利な記述方法です。

JavaScript【 var 】~ グローバル変数と巻き上げ【プログラマカレッジ】

▲目次へ戻る

3. var を付けない変数

var キーワードを記述しなくても、変数の宣言をすることができますが、var キーワードを付けずに宣言された 変数は「 グローバル変数 」となります。

グローバル変数とは、プログラムのどの場所からでも使用できる変数のことです。

プログラムのどの場所からでも使用できるということは、想定しない場所で変数の値を変更されたりする危険性が高いことを意味します。

ですので、グローバル変数 の宣言はできるだけ避けた方が良いです。

次のソースコードをご覧ください。

var str = "こんにちは!";
 
function night(){
    var str = "こんばんは!";
}
 
night();
 
alert(str);

このソースコードを実行すると、「 こんにちは! 」がアラート表示されます。

上のサンプルは、変数 str を night 関数の外でも 中でも 宣言しています。
どちらも var キーワードを使用して宣言しているため ローカル変数となり、night 関数内の 変数 str は night 関数内だけで利用できる変数となります。

ですので、関数の外で alert メソッドを実行すると、night 関数の外で宣言された変数str の値が表示されるという仕組みです。

今度は、var キーワード無しの変数を使用して記述してみます。

var str = "こんにちは!";
 
function night(){
    str = "こんばんは!";
}
 
night();
 
alert(str);

このソースコードを実行すると、「 こんばんは! 」がアラート表示されます。

上のサンプルは、night 関数内で var キーワード無しの 変数 str を宣言して、値を代入しています。

var キーワード無しのため、night 関数内の変数 str は グローバル変数となり、関数の外で宣言した変数 str の値がここで変更されてしまいます。

ですので、アラート表示される文字列が「 こんばんは! 」となってしまいます。

このように、関数の中と外に 同じ名前の変数があって、関数内の変数を var キーワード無しで宣言した場合は、関数実行後、どちらも同じ値となってしまうので注意が必要です。

JavaScript【 var 】~ グローバル変数と巻き上げ【プログラマカレッジ】

▲目次へ戻る

4. 変数の巻き上げ

JavaScriptには、巻き上げ という概念があります。

次のソースコードをご覧ください。

alert(str);
 
var str = "こんにちは!";

alert(str); 

このソースコードを実行すると、「 undefined 」と「 こんにちは! 」が続けてアラート表示されます。

上のサンプルは、変数 str を宣言する前に alert メソッドの引数として変数 str を使用しています。

このように、JavaScript では、変数を宣言する前でも その変数を使用することができます。
この仕組みが「 巻き上げ 」と呼ばれています。

これは、JavaScript が、var キ-ワードを使用して 関数内のあらゆる場所に変数を記述することができて、それが 必ず最初に評価される仕組みになっていることに起因します。

つまり、var キ-ワードを使用して 関数内のどこで変数宣言をしても、関数のはじめに宣言したのと同じように扱われるということです。

このような「 巻き上げ 」という JavaScript 特有の概念を知らずにソースコードを記述していると、意図しない結果となることもあります。

想定外の「 巻き上げ 」現象を発生させないために、変数宣言は、ソースコードの先頭 や 関数内の先頭 に記述するようにしましょう。

そうすることで、ソースコードも読みやすく、質の高いプログラムとなります。

JavaScript【 var 】~ グローバル変数と巻き上げ【プログラマカレッジ】

▲目次へ戻る

5. JavaScriptの変数に関するQ&A

Q1. varとはプログラミングで何ですか?

【A】varはJavaScriptにおいて、変数を宣言するために使用されるキーワードです。

変数は、プログラム内でデータを一時的に保存するための箱のようなものです。varを使用して宣言された変数は、関数スコープまたはグローバルスコープを持ちます。

▲目次へ戻る

Q2. letとvarの違いは何ですか?

【A】letとvarはどちらも変数を宣言するために使用されますが、スコープ(変数が有効な範囲)が異なります。

varは関数スコープを持つため、関数内で宣言された変数はその関数全体で有効です。一方、letはブロックスコープを持つため、{}で囲まれたブロック内で宣言された変数はそのブロック内でのみ有効です。

letを使うことで、変数の意図しない再定義や参照を防ぎ、より安全なコードを書くことができます。現代のJavaScriptでは、varよりもletを使用することが推奨されています。

▲目次へ戻る

Q3. varとconstの違いは何ですか?

【A】varとconstの大きな違いは、再代入の可否です。

varで宣言された変数は、後から別の値を代入して変更できます。一方、constで宣言された変数は、一度値を代入すると変更できません。

constは「定数」を意味し、プログラム中で不変の値(例えば、円周率)を扱う際に使用します。constを使うことで、誤って値を変更してしまうことを防ぎ、プログラムの信頼性を高めることができます。

▲目次へ戻る

Q4. constとvarの使い分けを教えて!

【A】基本的に、変数の値を変更しない場合はconstを使い、変更する可能性がある場合はletを使います。

varは古いJavaScriptの書き方であり、現代のJavaScriptではletとconstを使うことが推奨されています。

constを積極的に使用することで、プログラムの可読性と安全性を向上させることができます。

▲目次へ戻る

Q5. 実務でvarを使うべきですか?

【A】現代のJavaScriptでは非推奨です。理由として以下のようなことが挙げられます。

❶ 意図しない変数上書きのリスク
❷ ブロックスコープが効かない
❸ 厳格モード(’use strict’)で制限

代わりにlet/constを使用しましょう。

letとconstはブロックスコープを持つため、変数の有効範囲が明確で、意図しない場所での使用を防げます。それに対してvarは関数スコープのため、スコープが広すぎて予期しない動作を引き起こす可能性があります。
ただし、レガシーコードの保守では必要な場面があるので、レガシーの保守では使います。

▲目次へ戻る

Q6. ブロックスコープとは何ですか?

【A】ブロックスコープとは、変数が中括弧{}で囲まれたブロック内でのみアクセス可能な範囲のことです。

JavaScriptではletとconstがブロックスコープを持ちます。これにより、if文やforループ内で宣言した変数は、そのブロック外からアクセスできなくなります。一方、varは関数スコープのため、ブロック内で宣言しても外部からアクセス可能です。

ブロックスコープを活用することで変数の影響範囲を限定し、より安全なコードを書くことができます。

▲目次へ戻る

Q7. ホイスティングとは何ですか?

【A】ホイスティングとはJavaScriptの特性で、変数や関数の宣言がコード実行前にスコープの先頭に「巻き上げ」られる現象です。

varで宣言された変数はホイスティングされますが、初期化はされません。そのため、宣言前に変数にアクセスするとundefinedが返されます。一方、letやconstもホイスティングされますが、「一時的なデッドゾーン」があり、宣言前に変数にアクセスするとエラーになります。

この違いを理解することで、予期せぬバグを防ぐことができます。

▲目次へ戻る

Q8. プログラミングのconstとは何ですか?

【A】constは、「変更できない値(定数)」を定義したい場合に使用するキーワードです。

一度値を設定した後、プログラム中で値を変更することはできません。主に「変更してはいけない値や識別子」に使われます。

▲目次へ戻る

Q9. varの短所は何ですか?

【A】varの主な短所は、スコープの範囲が広く、予期せぬ変数の上書きやエラーを引き起こしやすいことです。

varは関数スコープを持つため、意図しない場所で変数が変更される可能性があります。また、ホイスティングという現象により、コードの挙動が予測しにくくなることもあります。

これらの理由から、現代的なJavaScriptでは、letやconstの使用が推奨されています。

▲目次へ戻る

無料説明会

SHARE

最新記事

無料説明会に参加してみる

INTERNOUS,inc. All rights reserved.

無料オンライン説明会へ