JavaScriptの「var」の使い方を解説！【JavaScript入門】サンプルコードや画像付きで解説

JavaScriptの「var」の使い方が分からない…

今回はこんな疑問にお答えします。

こんにちは。
現役プログラマーのnktatです！

今回は『JavaScriptの「var」の使い方』について解説していきます。

JavaScriptに限った話ではないですが、どのプログラミング言語でも変数というのは必ず使います。
JavaScriptでは変数を宣言するキーワードが「var」・「let」・「const」の３つありますが、用途に合わせて使えていますか？
JavaScriptで変数を宣言するときに何となく「var」を使っていませんか？

ここでは「var」の特徴や使い方について説明します。
変数を宣言するときには「var」・「let」・「const」を用途に合わせて使えるようになりましょう。

それでは解説していきます。

「var」について

「var」の使い方を説明する前に、「var」とは何なのか？「var」とはどういう意味なのか？から説明します。

「var」とは？

「var」とは、JavaScriptで変数を宣言するときに使うキーワードの一つです。
変数を宣言するキーワードは他にも「let」と「const」がありますが、違いについては後ほど説明します。

「var」の意味とは？

「var」は「variable」の略語です。
「variable」とは「変数」という意味なので、「var」と記述するのは「変数」と宣言していることになります。

「var」の使い方について

JavaScriptの「var」は一つ、または複数の変数を宣言するときに使います。
それぞれの変数の宣言の仕方を見ていきましょう。

「一つの変数を宣言する」使い方

JavaScriptの「var」で一つの変数を宣言する使い方です。

サンプルコード

// 「変数：fruits」を宣言して、「値：リンゴ」を代入
var fruits = "リンゴ";
console.log(fruits); // 「リンゴ」で表示される

実行結果

リンゴ

『変数：fruits』を宣言して、”リンゴ”を表示させました。

「複数の変数を宣言する」使い方

JavaScriptの「var」で複数の変数を宣言する使い方です。

変数と値のペアを「，（カンマ）」で区切ることで、複数の変数を宣言できます。

サンプルコード

// 「変数：fruits1」に「値：リンゴ」を代入し、「変数：fruits2」に「値：バナナ」を代入
var fruits1 = "リンゴ", fruits2 = "バナナ";
console.log(fruits1); // 「リンゴ」で表示される
console.log(fruits2); // 「バナナ」で表示される

実行結果

リンゴ
バナナ

「var」・「let」・「const」の違いについて

JavaScriptで変数を宣言するキーワードは「var」の他にも、「let」と「const」があります。
それぞれの違いを表にまとめました。

「var」は「let」や「const」に比べて、「変数のみの宣言」や「再宣言」などできることが多いのが特徴です。
それぞれの「var」の特徴を説明します。

「var」の変数のみの宣言について

「var」は変数のみの宣言ができます。
「var」で変数宣言時に、値を代入しなかった場合は、値は初期値である「undefined」になります。
「undefined」とは「未定義」という意味で、変数は宣言したが値はまだ定義されていない状態のことです。

サンプルコード

// 「変数：fruits」のみ宣言する。値は何も代入しない。
var fruits; // 初期値である「undefined」が自動的に代入される
console.log(fruits); // 「undefined」で表示される

実行結果

undefined

「var」の再宣言について

「var」は再宣言できます。
再宣言とは、一度宣言した変数名で再度宣言することです。

サンプルコード

// 「変数：fruits」を宣言して、「値：リンゴ」を代入
var fruits = "リンゴ";
console.log(fruits); // 「リンゴ」で表示される

// 「変数：fruits」を再宣言
var fruits; // 「変数：fruits」を再宣言してもエラーにならない
console.log(fruits); // 「リンゴ」で表示される

実行結果

リンゴ
リンゴ

「var」は再宣言可能なので、『変数：fruits』を複数回宣言してもエラーにはなりません。

「var」の再代入について

「var」は再代入できます。
再代入とは、値が入っている変数に上書きで代入することです。

サンプルコード

// 「変数：fruits」を宣言して、「値：リンゴ」を代入
var fruits = "リンゴ";
console.log(fruits); // 「リンゴ」が表示される

// 「変数：fruits」を再宣言して、「値：バナナ」を代入
fruits = "バナナ"; // 「変数：fruits」に値を再代入してもエラーにならない
console.log(fruits); // 「バナナ」が表示される

実行結果

リンゴ
バナナ

「var」は再代入可能なので、『変数：fruits』の値を上書きできます。

「var」のスコープについて

スコープとは、変数の名前や関数などの参照できる範囲を決めるものです。
スコープの中で定義された変数はスコープの内側でのみ参照でき、スコープの外側からは参照できません。

それでは「var」とスコープの関係性について説明します。

グローバルスコープの適用について

「var」で宣言する変数はグローバルスコープを適用できます。

サンプルコード

// グローバルスコープについて確認する
var scope = "グローバルスコープ値"; // グローバル変数
console.log(scope); // 「グローバルスコープ値」で表示される

(function(){
    console.log(scope); // 「グローバルスコープ値」で表示される
})()

if(true){
	console.log(scope); // 「グローバルスコープ値」で表示される
}

console.log(scope); // 「グローバルスコープ値」で表示される

実行結果

グローバルスコープ値
グローバルスコープ値
グローバルスコープ値
グローバルスコープ値

すべて”グローバルスコープ値”で表示されました。
「var」で宣言した変数はグローバルスコープを適用できるので、プログラムのトップレベルで「var」で宣言された変数はグローバル変数となり、プログラム全体のどこからでも参照できます。

関数スコープ（function）の適用について

「var」で宣言する変数は関数スコープ（function）を適用できます。

サンプルコード

var scope = "グローバルスコープ値"; // グローバル変数
console.log(scope); // 「グローバルスコープ値」で表示される

function test(prm){
    var scope = "関数スコープ値"; // 関数スコープ（function）が適用されるので、ローカル変数
    console.log(scope); // 「関数スコープ値」で表示される
}

test("")

if(true){
	console.log(scope); // 「グローバルスコープ値」で表示される
}

console.log(scope); // 「グローバルスコープ値」で表示される

実行結果

グローバルスコープ値
関数スコープ値
グローバルスコープ値
グローバルスコープ値

test関数の中のみ”関数スコープ値”で表示されました。
「var」で宣言した変数は関数スコープ（function）を適用できるので、関数内の「var」で宣言した変数はローカル変数となり、関数の内側のみ利用可能です。

ブロックスコープ（{}）の適用について

「var」で宣言する変数はブロックスコープ（{}）を適用できません。

サンプルコード

var scope = "グローバルスコープ値"; // グローバル変数
console.log(scope); // 「グローバルスコープ値」で表示される

if(true){
    var scope = "ブロックスコープ値"; // ブロックスコープ（{}）が適用されないので、グローバル変数
    console.log(scope); // 「ブロックスコープ値」で表示される
}

(function(){
    console.log(scope); // 「ブロックスコープ値」で表示される
})()

console.log(scope); // 「ブロックスコープ値」で表示される

実行結果

グローバルスコープ値
ブロックスコープ値
ブロックスコープ値
ブロックスコープ値

if文以降はif文の中で代入された”ブロックスコープ値”で表示されました。
「var」で宣言した変数はブロックスコープを適用できないので、ブロック内の「var」で宣言した変数はグローバルスコープが適用されてグローバル変数となった結果、if文以降はすべて同じ値になりました。

「var」は使わない方がいいのか？

ここまで「var」の特徴を説明しました。
「var」は変数のみの宣言や再宣言・再代入ができるので、「let」や「const」に比べるとできることが多いキーワードですが、できることが多いが故に「var」を使いづらく感じる開発者は増えていきました。

それでは、変数を宣言するときに「var」を使った方がいいのか？、「var」の使いづらい点は何なのか？について説明していきます。

結論：「var」よりも「let」や「const」を使うことが推奨されている

結論から言うと、「var」よりも「let」や「const」を使うことが推奨されています。
ECMAScript 2015で、変数を宣言するキーワードに新しく「let」と「const」が追加されました。
「var」にはいくつか使いづらい点があったからです。
「var」の挙動自体を変更しなかったのは、今までに「var」で開発されたアプリケーションが動かなくなるリスクがあったため、新しく「let」と「const」を追加して影響がないように対応しました。

「let」と「const」の追加が必要な事態を招いた、「var」の使いづらい点とは何なのでしょうか？

「var」の使いづらい点について

「var」にはいくつか使いづらい点があります。

「var」特有の仕様により、意図しない変数の上書きによるエラーが発生していました。
それぞれの点について説明します。

「再宣言」・「再代入」による意図しない変数の上書き

「var」は、「再宣言」と「再代入」ができるため、同じ変数名を意図せず更新してしまう可能性があります。
意図しない値が入ることにより、エラー発生の原因になっていました。

ブロックスコープ（{}）が適用されないことによる意図しない変数の上書き

「var」は関数スコープ（function）は適用されますが、ブロックスコープ（{}）は適用されないという中途半端な仕様になっています。
この中途半端な仕様は勘違いの原因にもなり、意図せず同じ名前の変数を上書きすることに繋がり、エラーが発生することがありました。

「変数のみの宣言」・「変数の巻き上げ」による意図しない変数の上書き

「変数の巻き上げ」とは、JavaScript特有の動きで、宣言された変数がスコープの先頭で生成されることを言います。
文字だけでは理解が難しいので、実際に動きを見てみましょう。

サンプルコード

// 「変数：fruits」を宣言して、「値：リンゴ」を代入
var fruits = "リンゴ";

(function() {
    console.log(fruits); // 「undefined」で表示される
    var fruits = "バナナ";
    console.log(fruits); // 「バナナ」で表示される
})()

実行結果

undefined
バナナ

サンプルコードの6行目で、「var fruits = “バナナ”;」と宣言したことで、「変数の巻き上げ」が発生しました。
「var」は関数スコープを適用するため、『関数：function（4～8行目）』がスコープの範囲となります。
「変数の巻き上げ」とは、宣言された変数がスコープの先頭で生成されることです。
つまり、「変数の巻き上げ」により『関数：function』の先頭で『変数：fruits』のみ宣言された結果、”undefined”と表示されました。

要するに、サンプルコードの5行目に「var fruits;」が追加された以下のサンプルコードと同等です。

// 「変数：fruits」を宣言して、「値：リンゴ」を代入
var fruits = "リンゴ";

(function() {
    var fruits; // 「変数の巻き上げ」により、『関数：function』の先頭で『変数：fruits』のみ宣言された
    console.log(fruits); // 「undefined」で表示される
    var fruits = "バナナ";
    console.log(fruits); // 「バナナ」で表示される
})()

「var」の使いづらい点は分かりましたか？
確かに「var」は使いづらい点はありますが、絶対に使ってはいけないという訳ではありません。
「var」の仕様や、使いづらい点を理解して使う分には問題ないと思います。
ただし、一人作業ではなく、複数人作業の場合は、「var」を使うのか他のメンバーと認識を合わせる必要があります。
他の開発メンバーに迷惑をかけないのであれば、「let」や「const」を使うのが無難といえます。

まとめ

今回は『JavaScriptの「val」の使い方』について解説しました。
これまでの情報のおさらいです。

JavaScriptの「var」の使い方は理解できましたか？
「var」には使いづらい点がいくつかあるので、これらの点を改善するために追加された「let」や「const」を使うことを推奨します。
ただし、「var」を絶対に使ってはいけないという訳ではないので、状況に応じて使い分けましょう。

あなたは独学でJavaScriptを学んでいて、嫌になったことはありませんか？

独学で進める場合、分からない部分があれば、
自分で調べる⇒解決方法を見つけて解説を読む⇒解説の中で分からない部分を調べる⇒調べた結果で分からない部分をまた調べる…
という調査ループに陥ってしまい、嫌気が差して挫折することがよくあります。

「プログラミングを学ぶ」と一言でいってもコードを記述するだけではありません。
コード記述前は環境構築を行い、コード記述後はテストが必要です。
エラーが発生したら、エラーの原因を調査して自分で解決しなければいけません。

環境構築やエラー発生時の調査方法など、プログラミングを学び始めたときに躓いてしまうポイントは多岐に渡って潜んでいます。

独学で進める場合、これらの問題に対してインターネットや書籍から自分で調べて自分で解決していくしかありません。

独学でプログラミングを学んだことがある人ならば一度は経験していると思いますが、自分で調べて自分で解決することは非常に難しく、とても根気がいる作業です。

そのため、独学によるプログラム学習は挫折率が高く、ほとんどの学習者が一度は躓きや挫折を経験しています。

仮に根気強く頑張って一通りのプログラミングを学んだとしても、独学ではチーム作業を学ぶことができません。

プログラミングはシステムを開発するために行うことがほとんどですが、システム開発はチーム作業が主です。

チーム作業を学べないというのは大きなデメリットになります。

これらのことを踏まえて考えると、独学でJavaScriptを学ぶことは本当に効率的でしょうか？

JavaScriptを学ぶ理由は「エンジニアになりたい」・「転職したい」・「副業したい」など人それぞれだと思います。

前向きな目標を達成するために自主的に学んだのに、挫折して諦めてしまうのは非常に勿体ないですよね。

人生は一度きりです。
やりたいことをやったほうがいいに決まっています。

では、挫折せずに効率よくJavaScriptを学ぶにはどうしたらいいのでしょうか？

結論から言うと、挫折せずに効率よくJavaScriptを学ぶ方法は「Code Village」を受講することです。

「Code Village」は必要な教材・教育・サポートが揃っており、受講生の学習継続率も９３％と非常に高いスクールです。
挫折せずに効率よくJavaScriptを学ぶには「Code Village」を受講することをオススメします。

「Code Village」の口コミを一部紹介します。

ここでは一部のみの紹介となりましたが、以下の記事で総勢３２人の受講生のリアルな口コミを紹介しています。

更には、なぜ「Code Village」で受講すべきなのか？、「Code Village」を利用するまでの３ステップなども記事にまとめていますのでぜひチェックしてみてください。