JavaScriptの変数とは？初心者にもわかりやすく解説
JavaScriptを学び始めると、まず最初に出てくるのが「変数」という言葉です。
変数はプログラミングにおける基礎中の基礎ですが、初心者にとっては少し分かりづらい部分でもあります。
この記事では、JavaScriptにおける変数の基本的な考え方から使い方まで、丁寧に解説します。
変数とは？その役割
変数とは、データに名前をつけて一時的に保存しておくための「入れ物」です。
let message = "こんにちは";
このコードでは、「message」という名前の変数に「こんにちは」という文字列を保存しています。
その後は message を使えば、保存された値を簡単に利用することができます。
JavaScriptでの変数宣言
JavaScriptでは、変数を宣言する際に次の3つのキーワードを使用します。
| キーワード | 特徴 |
|---|
| var | 古い書き方。関数スコープ。再代入・再宣言可能。現在は非推奨。 |
| let | 再代入可能。ブロックスコープ。一般的に使用される。 |
| const | 再代入不可。ブロックスコープ。定数の定義に使用する。 |
スコープとは
スコープとは、変数がどの範囲で有効かという「見える範囲」のことです。
let や const は「ブロックスコープ」と呼ばれ、波括弧 {} で囲まれた範囲内でのみ有効です。
{
let x = 10;
console.log(x); // 有効
}
console.log(x); // エラー
再代入と再宣言の違い
| 操作 | var | let | const |
|---|
| 再代入 | ○ | ○ | × |
| 再宣言 | ○ | × | × |
let value = 5;
value = 10; // OK（再代入）
let value = 15; // エラー（再宣言）
const はどちらもできないため、固定値や変更が不要な情報に使われます。
初期化しない変数は undefined になる
変数を宣言しただけで値を代入しなかった場合、JavaScriptでは自動的に undefined という値が設定されます。
let data;
console.log(data); // undefined
動的型付けと変数の型
JavaScriptは「動的型付け言語」であり、変数に代入する値によって自動的に型が決まります。
let value = 100; // 数値
value = "テキスト"; // 文字列
value = true; // 真偽値
テンプレートリテラルで変数を文字列に組み込む
テンプレートリテラルを使うと、文字列の中に変数を埋め込むことができます。
これはバッククォート ` を使って記述します。
let name = "山田";
let message = `こんにちは、${name}さん`;
console.log(message); // こんにちは、山田さん
const でも中身の変更が可能な場合
const は再代入できませんが、オブジェクトや配列などの参照型の場合は中身を変更することができます。
const user = { name: "Taro" };
user.name = "Jiro"; // OK
user = {}; // エラー（再代入は不可）
まとめ
- 変数は「名前付きのデータ保存箱」
- 宣言には
let や const を使うのが主流
const は変更できない値に使う- スコープの違いを理解することが重要
- 初期化していない変数には
undefined が自動で入る
変数の基礎をしっかり理解することで、JavaScriptの学習をよりスムーズに進めることができます。
