JavaScriptの変数とは?基本から使い方まで解説

JavaScriptは、Webサイトに動きを与えるためのプログラミング言語です。
そのJavaScriptを理解するうえで、最初に学ぶべき重要な概念が変数です。
変数は、プログラムの中でデータを一時的に保存し、再利用するための仕組みです。
Web制作では、ユーザー入力、計算結果、状態管理など、さまざまな場面で利用されます。
この記事では、JavaScriptの変数について以下の内容を基礎から解説します。
- 変数とは何か
- 変数の宣言方法
let/const/varの違い- 変数の命名ルール
- 変数とデータ型の関係
- 実務での基本的な使い方
JavaScriptを理解するための基礎として、体系的に整理していきます。
Contents
JavaScriptの変数とは
JavaScriptの変数とは、データを保存しておくための「名前付きの箱」のようなものです。
プログラムでは、数値や文字列などのデータを扱います。
変数を使うことで、そのデータに名前を付けて保存し、後から利用できます。
変数の基本例
let message = "Hello";
console.log(message);このコードでは、次のような処理が行われています。
messageという変数を作る"Hello"という文字列を保存するconsole.log()で内容を表示する
このように、データを保存して再利用するための仕組みが変数です。
JavaScriptで変数を宣言する方法
JavaScriptでは、変数を作ることを変数宣言と呼びます。
主に以下の3つの方法があります。
letconstvar
現在のJavaScriptでは、主に let と const が使われます。
letを使った変数宣言
let は、値を後から変更できる変数です。
let score = 100;
score = 120;この例では、score の値を後から変更できます。
特徴
- 再代入ができる
- ブロックスコープを持つ
- 現代JavaScriptで最も一般的
constを使った変数宣言
const は、再代入できない変数です。
const siteName = "My Website";一度代入した値は変更できません。
const siteName = "My Website";
siteName = "New Website"; // エラー特徴
- 再代入できない
- 安全性が高い
- 定数として使う
実務では、変更しない値は基本的に const を使うことが推奨されています。
varを使った変数宣言(現在は非推奨)
var は、古いJavaScriptで使われていた変数宣言です。
var count = 10;しかし、var には次のような問題があります。
- スコープが分かりにくい
- 意図しない再宣言が可能
- バグの原因になりやすい
そのため、現在のJavaScriptでは let と const を使うことが一般的です。
JavaScriptの基本構造については、以下の記事でも詳しく解説しています。
変数の命名ルール
JavaScriptでは、変数名にいくつかのルールがあります。
使用できる文字
変数名には以下が使用できます。
- 英字
- 数字
_(アンダースコア)$
例
let userName;
let totalPrice;
let _count;使用できないルール
次のような名前は使えません。
数字から始める
let 1user; // エラー予約語を使う
JavaScriptには、あらかじめ意味が決まっている予約語があります。
例
ifforfunctionreturn
let if = 10; // エラー推奨される命名方法
JavaScriptでは キャメルケース が一般的です。
例
let userName
let totalPrice
let productCount最初の単語は小文字、2つ目以降は大文字で始めます。
変数とデータ型の関係
JavaScriptの変数には、さまざまな種類のデータを保存できます。
主なデータ型は以下です。
| データ型 | 例 |
|---|---|
| 数値 | 100 |
| 文字列 | "Hello" |
| 真偽値 | true / false |
| 配列 | [1,2,3] |
| オブジェクト | {name:"John"} |
例
let number = 10;
let text = "JavaScript";
let isActive = true;データ型については、以下の記事でも詳しく解説しています。
関連記事
→ JavaScriptのデータ型とは?基本から解説
変数の基本的な使い方
変数は、主に次のような場面で使われます。
値を保存する
let price = 1000;計算に使う
let price = 1000;
let tax = 100;
let total = price + tax;
console.log(total);条件分岐に使う
let age = 20;
if (age >= 18) {
console.log("成人です");
}条件分岐については、以下の記事で詳しく解説しています。
関連記事
→ JavaScriptの条件分岐(if文)とは?基本から解説
配列やオブジェクトと組み合わせる
let user = {
name: "Taro",
age: 25
};
console.log(user.name);配列やオブジェクトについては、以下の記事も参考になります。
関連記事
letとconstの使い分け
実務では、次のルールがよく使われます。
| 宣言方法 | 使い方 |
|---|---|
| const | 基本的にこちらを使う |
| let | 値が変わる場合 |
| var | 基本的に使用しない |
例
const taxRate = 0.1;
let totalPrice = 1000;
totalPrice = totalPrice * (1 + taxRate);基本はconst、必要な場合のみletという使い分けが一般的です。
JavaScriptの変数を理解する重要性
JavaScriptの変数は、すべてのプログラムの基礎になります。
以下の機能は、すべて変数を前提として動作します。
- 条件分岐
- 繰り返し処理
- 関数
- オブジェクト
- DOM操作
そのため、JavaScriptを学習する際は、変数の理解が最初の重要なステップになります。
JavaScriptの全体像については、以下の記事も参考になります。
関連記事
→ JavaScriptの役割と基本構造
まとめ
JavaScriptの変数は、データを保存して再利用するための仕組みです。
ポイントを整理すると次の通りです。
- 変数は「データを入れる箱」
letとconstを使って宣言する- 基本は
const、変更する場合のみlet - わかりやすい名前を付ける
- さまざまなデータ型を保存できる
変数を理解すると、JavaScriptの他の機能も理解しやすくなります。
関連記事
JavaScriptの理解をさらに深めるには、以下の記事もおすすめです。
これらを順番に学ぶことで、JavaScriptの基礎を体系的に理解できます。

