【JS解説|初心者向け】JavaScriptの「var」を徹底解説!変数とは何か、なぜ今「var」を避けるべきなのか?

こんにちは!フロントエンドエンジニアです。プログラミングの学習を始めると、必ず最初にぶつかる壁が「変数(へんすう)」という概念です。

JavaScriptには、この変数を宣言するための命令がいくつか存在します。その中でも、歴史が長く、かつ初心者の方が最初に出会うことが多いのが`var`(ヴァー)というキーワードです。

しかし、現代のJavaScript開発において、`var`を使うことは「あまり推奨されない」というルールがあることをご存知でしょうか?今回は、`var`の基本的な使い方から、なぜ現代では使わなくなったのか、そして代わりに何を使うべきなのかまで、プロの視点でわかりやすく解説します。

変数とは「データの入れ物」

プログラミングにおける「変数」は、一言で言えば「名前のついた箱」です。この箱の中に、数値や文字などのデータを入れておくことで、後からそのデータを取り出したり、別のデータに入れ替えたりすることができます。

例えば、ゲームのスコアやユーザーの名前など、プログラムの途中で値が変わるものを扱うために変数は不可欠です。

varを使った変数の宣言と代入

`var`を使って変数を作る(宣言する)には、以下のように書きます。

// 変数の宣言と値の代入
var score = 100;
var userName = “太郎”;

// 値の表示
console.log(score); // 100と表示される
console.log(userName); // 太郎と表示される

上記のコードでは、`score`という箱に`100`を、`userName`という箱に`”太郎”`という文字列を入れました。`var`というキーワードを先頭に書くことで、「これから変数を作りますよ」という合図を送っているのです。

また、変数の値は後から書き換えることも可能です。

var count = 1;
count = 2; // 中身を入れ替える(再代入)
console.log(count); // 2が表示される

このように、`var`は非常にシンプルで使いやすい仕組みです。しかし、なぜ現代のプログラミングでは「使わない方がいい」と言われているのでしょうか。その理由は、`var`特有の「クセ」にあります。

varの抱える問題点:スコープと再宣言

`var`が避けられる理由は、主に2つの「仕様上の欠陥」にあります。

#### 1. スコープ(有効範囲)が広すぎる
プログラミングには「スコープ」という概念があります。これは「その変数がどこからどこまで使えるか」という範囲のことです。

`var`で宣言した変数は「関数スコープ」を持ちます。これは、関数の中で宣言されればその関数内だけで使えますが、`if`文や`for`文などのブロック(`{ }`で囲まれた部分)を無視して外側に漏れてしまう性質があります。

if (true) {
var message = “こんにちは”;
}
console.log(message); // ブロックの外なのに「こんにちは」と表示されてしまう!

本来、`if`文の中で作った変数はその中だけで使いたいものですが、`var`を使うと外側からもアクセスできてしまい、バグの原因になりやすいのです。

#### 2. 同じ名前で何度でも宣言できてしまう(再宣言)
`var`は、同じ名前の変数を何度でも宣言できてしまいます。

var name = “田中”;
var name = “佐藤”; // エラーにならない!
console.log(name); // 「佐藤」になる

小規模なプログラムなら問題ありませんが、数千行にも及ぶ大きなプログラムの場合、うっかり同じ名前で宣言してしまい、前のデータを上書きしてしまうという大事故が起きる可能性があります。

現代のスタンダード:letとconst

JavaScriptは2015年に大きな進化を遂げ、`var`に代わる新しい変数の宣言方法が登場しました。それが`let`(レット)と`const`(コンストラクタ)です。

現代のフロントエンド開発では、この2つを使うのがルールです。

* **let**: 値を書き換える可能性がある変数に使います。
* **const**: 一度決めたら値を書き換えない(定数)変数に使います。

// letの例:後から値が変わる場合
let score = 100;
score = 120; // OK

// constの例:変わらない値(消費税率など)
const taxRate = 0.1;
// taxRate = 0.2; // これはエラーになる!

`let`と`const`は、先ほど説明した`var`の「スコープが広すぎる問題」や「再宣言の問題」をすべて解決しています。

if (true) {
let secret = “秘密”;
}
// console.log(secret); // エラーになる!ブロックの外からは見えないので安全

このように、現代のJavaScriptは、意図しない場所で変数が書き換わったり、名前が衝突したりしないように設計されているのです。

初心者が守るべき「変数のルール」

これから学習を始める皆さんに、プロとしてのアドバイスを贈ります。

1. **基本は `const` を使う**: 「あとで書き換える必要がないもの」はすべて`const`で宣言しましょう。これにより、コードが非常に読みやすく、安全になります。
2. **書き換える必要があれば `let` を使う**: カウンターやループ処理など、値が変化するものにのみ`let`を使いましょう。
3. **`var` は使わない**: 昔の古い教材や古いWebサイトのコードには`var`が登場しますが、自分で書くコードには使わないようにしましょう。

まとめ:なぜ「学び方」が重要なのか

プログラミングの学習において、古い情報をそのまま鵜呑みにするのは危険です。`var`はJavaScriptの歴史を語る上で欠かせない存在ですが、現在の「安全で効率的な開発」においては、`let`と`const`への置き換えが必須です。

「とりあえず動けばいい」ではなく、「なぜその書き方をするのか」という背景を知ることで、あなたの書くコードはより洗練され、エラーの少ないものになっていきます。

まずは、自分の書いているコードを見直して、`var`を使っている場所を`let`や`const`に書き換えてみてください。それだけで、あなたは一歩プロフェッショナルなフロントエンドエンジニアに近づいたと言えます。

これからも、一つひとつの技術の背景を理解しながら、楽しくプログラミングを続けていきましょう!応援しています。

タイトルとURLをコピーしました