いっしー@Webエンジニア
Webツールプログラミング言語プログラミング学習ITニュースIT用語辞典ポートフォリオ

【JavaScript】変数と変数宣言キーワードの書き方と使い方の基本

JavaScriptでデータを扱うための「変数」について、その宣言方法を基礎から解説します。古い書き方のvarと、現在主流のlet, constの違いを、再代入やスコープ（有効範囲）の観点から比較します。それぞれの特徴を理解し、安全なコードを書く方法を学びます。

作成日: 更新日:

開発環境

  • OS: Windows10
  • Editor: Visual Studio Code
  • JavaScript: ES6以降

JavaScriptの変数とは

「変数」とは、数値や文字列といったデータを一時的に保存しておくための、名前が付いた入れ物のようなものです。プログラムでは多くのデータを扱うため、それぞれのデータに固有の名前（変数名）を付けて区別することで、管理がしやすくなります。

プログラムの中では、この変数を使ってデータを保存し、後からその値を取り出して利用したり（参照）、新しい値に書き換えたり（変更）することができます。例えば、計算結果を一時的に変数に保存しておき、別の計算でその結果を再利用する、といった使い方が可能です。これにより、複雑な処理を効率的に記述できます。

JavaScriptの変数宣言とは

JavaScriptでは、プログラムで扱うデータ（数値や文字列など）を一時的に保存しておくために「変数」というものを使います。変数を利用するには、まず「これからこの名前の変数を使います」とコンピュータに知らせる必要があり、これを「変数宣言」と呼びます。

JavaScriptでは「var」「let」「const」という3つのキーワードを使って変数を宣言できます。

**現在の標準的な書き方は「let」と「const」**で、「var」は古い書き方であり、意図しない動作の原因となる可能性があるため、特別な理由がない限りは使いません。

JavaScriptの変数宣言の一覧

宣言方法再代入再宣言スコープ
var○○関数スコープ
let○×ブロックスコープ
const××ブロックスコープ
宣言なし○-グローバル（※危険）

  • 再代入：変数に一度格納した値を、後から別の値に変更できるかどうかを示します。「const」は一度値を設定すると変更できないため、定数とも呼ばれます。

  • 再宣言：同じ名前の変数を、同じ範囲内でもう一度宣言できるかどうかを示します。「var」は再宣言ができてしまうため、気づかないうちに重要な変数の値を上書きしてしまうといったバグの原因になりやすいです。再宣言ができない「let」や「const」の方が安全です。

  • スコープ：その変数が有効な範囲（どこからアクセスできるか）を示します。

    • ブロックスコープ：{ }（波括弧）で囲まれた範囲内でのみ有効です。例えば、if文やfor文の処理ブロックの中で宣言された変数は、その外側からは利用できません。変数が使える範囲が限定されるため、プログラムの管理がしやすくなります。
    • 関数スコープ：関数 { } の中であれば、どこからでも有効です。ブロックスコープよりも範囲が広くなります。

  • 宣言なし：letなどを付けずにいきなり変数に値を代入することです。これはプログラムのどこからでもアクセスできる「グローバル変数」となり、予期せぬ場所で値が書き換わるなど、深刻なバグの原因となるため絶対に避けるべきです。変数を扱う際は必ずletかconstで宣言しましょう。

JavaScriptの変数宣言の基本的な書き方

JavaScriptでプログラミングを行う際、数値や文字列などのデータを一時的に保存しておくために「変数」を使用します。変数を使うには、まず「変数を宣言する」という作業が必要です。これは、データを格納するための場所に名前を付けて、プログラムが利用できるように準備することです。

変数を宣言するための基本的な構文は以下の通りです。

1変数宣言キーワード 変数名 = 値;

この構文は、主に3つの要素で構成されています。

  1. 変数宣言キーワード: 変数を作ることを示すためのキーワードです。JavaScriptには let や const などがあります。
  2. 変数名: 作成する変数に付ける名前です。後からこの名前を使って、変数に保存したデータを取り出したり、変更したりします。
  3. 値: 変数に保存したいデータ（数値、文字列など）のことです。=（イコール）記号は、右側の値を左側の変数に設定（代入）する役割を持ちます。

最後に置かれている ; （セミコロン）は、文の終わりを示す記号です。

サンプルコード

javascript/chapter01/index.html

このHTMLファイルは、これから見ていく6つのJavaScriptファイルを読み込んで実行するためのものです。<script>タグを使って、各JavaScriptファイルを順番に指定しています。

1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>JavaScriptチュートリアル</title>
7  </head>
8
9  <body>
10    <h1>JavaScriptチュートリアル</h1>
11    <script src="./script01.js" defer></script>
12    <script src="./script02.js" defer></script>
13    <script src="./script03.js" defer></script>
14    <script src="./script04.js" defer></script>
15    <script src="./script05.js" defer></script>
16    <script src="./script06.js" defer></script>
17  </body>
18</html>
19

javascript/chapter01/script01.js

これは、varというキーワードを使って変数を宣言する例です。varには以下の特徴があります。

  1. 再代入が可能: 一度値を代入した後、別の値を代入し直すことができます。
  2. 再宣言が可能: 同じ名前の変数をもう一度varで宣言できてしまいます。

この「再宣言が可能」という特徴は、意図せず変数の値を上書きしてしまう原因になる可能性があるため、現在ではvarの使用は推奨されていません。

1// -----------------------------
2// var の例（非推奨）
3// -----------------------------
4var greeting = "おはようございます";
5console.log("var:", greeting);
6
7// 再代入OK
8greeting = "こんにちは";
9console.log("var:", greeting);
10
11// 再宣言OK
12var greeting = "こんばんは";
13console.log("var:", greeting);
14

javascript/chapter01/script02.js

これは、letというキーワードを使って変数を宣言する例です。現在では、varの代わりにletを使うことが一般的です。letには以下の特徴があります。

  1. 再代入が可能: varと同様に、一度代入した値を後から変更することができます。
  2. 再宣言は不可能: varとは異なり、同じ名前の変数をもう一度letで宣言しようとするとエラーになります。

これにより、誤って変数を二重に宣言してしまうミスを防ぐことができ、より安全なプログラムを書くことができます。

1// -----------------------------
2// let の例（変数）
3// -----------------------------
4let greeting = "おはようございます";
5console.log("let:", greeting);
6
7// 再代入OK
8greeting = "こんにちは";
9console.log("let:", greeting);
10
11// 再宣言NG：同じスコープで再宣言はエラー
12// let greeting = "こんばんは";
13// console.log("let:", greeting);
14

javascript/chapter01/script03.js

これは、constというキーワードを使って定数を宣言する例です。「定数」とは、一度値を代入したら変更できない入れ物のようなものです。constには以下の特徴があります。

  1. 再代入は不可能: 一度値を代入すると、後から別の値を代入しようとするとエラーになります。
  2. 再宣言も不可能: letと同様に、同じ名前の定数をもう一度宣言しようとするとエラーになります。

プログラムの中で値が変わらないことが確定しているもの（例：消費税率など）にはconstを使います。意図しない値の変更を防げるため、基本的にはconstを使い、値の変更が必要な場合のみletを使うのが現在の良い習慣とされています。

1// -----------------------------
2// const の例（定数）
3// -----------------------------
4const greeting = "おはようございます";
5console.log("const:", greeting);
6
7// 再代入NG：定数なので値を変更できない
8// greeting = "こんにちは";
9// console.log("const:", greeting);
10
11// 再宣言NG：同じスコープで再宣言はエラー
12// const greeting = "こんばんは";
13// console.log("const:", greeting);
14

javascript/chapter01/script04.js

ここでは、var、let、constの「スコープ」の違いを見ていきます。スコープとは、変数が有効な範囲のことです。この例のif文のように、{}で囲まれた範囲を「ブロックスコープ」と呼びます。

  • var: ブロックスコープを持ちません。そのため、{}の中で宣言しても、その外側から参照することができます。
  • let, const: ブロックスコープを持ちます。そのため、{}の中で宣言された変数は、その{}の外側から参照しようとするとエラーになります。

letとconstは変数が使える範囲を限定できるため、プログラムの他の部分への意図しない影響を防ぐことができます。

1// -----------------------------
2// ブロックスコープの例
3// -----------------------------
4if (true) {
5  var a = "varの中身";
6  let b = "letの中身";
7  const c = "constの中身";
8  console.log("ブロック内:", a); // OK
9  console.log("ブロック内:", b); // OK
10  console.log("ブロック内:", c); // OK
11}
12
13// OK：var は外でも使える
14console.log("ブロック外:", a);
15
16// NG：let はブロック外では無効
17// console.log("ブロック外:", b);
18
19// NG：const はブロック外では無効
20// console.log("ブロック外:", c);
21

javascript/chapter01/script05.js

ここでは「関数スコープ」について見ていきます。関数スコープとは、関数{}の中で宣言された変数は、その関数の外からは参照できないというルールです。

この例では、var、let、constのいずれで宣言された変数も、関数の外からアクセスしようとするとエラーになります。

varはブロックスコープ（if文など）は持ちませんが、関数スコープは持つ、という点を覚えておきましょう。letとconstはブロックスコープも関数スコープも持ちます。

1// -----------------------------
2// 関数スコープの例
3// -----------------------------
4function testScope() {
5  var varInside = "varの関数内";
6  let letInside = "letの関数内";
7  const constInside = "constの関数内";
8
9  console.log("関数内 var:", varInside); // OK
10  console.log("関数内 let:", letInside); // OK
11  console.log("関数内 const:", constInside); // OK
12}
13
14testScope();
15
16// NG：関数外からはアクセス不可
17// console.log("関数外 var:", varInside);
18
19// NG：関数外からはアクセス不可
20// console.log("関数外 let:", letInside);
21
22// NG：関数外からはアクセス不可
23// console.log("関数外 const:", constInside);
24

javascript/chapter01/script06.js

これは、var、let、constのいずれも使わずに変数に値を代入する例です。

関数の中で宣言キーワードなしで変数に値を代入すると、その変数は「グローバル変数」という扱いになります。グローバル変数とは、プログラムのどこからでもアクセスできてしまう変数のことです。

この例のように、関数noDeclareの外側からもundeclared変数を参照できてしまいます。これは、意図しない場所で変数の値が書き換わってしまう原因となり、非常に危険です。変数を宣言する際は、必ずletかconstを付けるようにしてください。

1// -----------------------------
2// 宣言なし（暗黙のグローバル変数）※ 非推奨！
3// -----------------------------
4function noDeclare() {
5  // var/let/constなしだと暗黙的にグローバル変数になる
6  undeclared = "これは宣言していない変数";
7  console.log("関数内:", undeclared);
8}
9noDeclare();
10
11// OK：関数外でも参照できる（危険！）
12console.log("関数外:", undeclared);
13

おわりに

今回は、JavaScriptの変数宣言キーワードであるvar, let, constの役割と、それぞれの違いについて学びました。現代の開発では、まず定数を宣言するconstを基本とし、再代入が必要な場合にのみletを使用するのが安全で推奨される書き方です。再宣言やスコープの問題からバグの原因となりやすいvarや、キーワードを使わない宣言は、予期せぬエラーに繋がるため使用を避けましょう。

【JavaScript】変数と変数宣言キーワードの書き方と使い方の基本 | いっしー@Webエンジニア