変数の宣言

JavaScriptは、数学同様に変数を使うことができます。

本ページでは、変数の宣言について説明します。

変数とは

数学では、以下のような式が作れます。

x = 1

y = 2

z = x + y

xに1、yに2が代入されて、zはその足し算になるため、結果は3になります。このx、y、zが変数です。

xは常に1とは限らず、x = 3など数字が変わります。xが3だと、結果となるzの数字も変わります。つまり、変数で式を表すと、変数の値によって結果を変えることができるという訳です。

JavaScriptでも、同様に変数が使えます。

変数の宣言方法

JavaScriptで変数を使う時は、宣言が必要です。これが変数だと、プログラムに知らせるためです。宣言の方法は、以下のように3とおりあります。

【JavaScriptの宣言方法】
var x = 1;
let x = 1;
const x = 1;

どれも、変数xに1を代入していますが、以下のような違いがあります。

【var、let、constの違い】
宣言 再代入 再宣言 ブロックスコープ
var ×
let ×
const × ×
再代入
var x = 1;で宣言した後、x = 2;などと値を変えることです。
再宣言
var x = 1;で宣言した後、var x = 2;などと再度宣言することです。
ブロックスコープ
if文などの{}内でletやconstで宣言した時に、変数が有効な範囲です。有効な範囲は{}で囲まれた中だけで、その外では使えません。これは、ブロックスコープ内だけで変数名が重複しなければよいといったメリットがあります。詳細は、スコープをご参照ください。

varは、古くからある宣言の方法です。再代入も再宣言も可能なので一見自由度がありますが、間違って値を変えてしまう可能性があります。また、ブロックスコープを持たないため、変数名の管理に気を付ける必要があります。

このため、letとconstの宣言方法が追加されました。letで宣言した変数は、値を変えることができますが、再度宣言することを防ぎます。つまり、間違って同じ変数名を使わないようにできます。また、ブロックスコープの外では同じ変数名も使え、異なる変数として扱えます。

constは、間違って値が変更されることも防ぎます。つまり、固定値などの場合に使います。

利用例

以下は、varの利用例です。

【varの利用例】
var x = 1;
var y = 2;
x = x + y;

上記で、xは3になります。最後の行で、x + yがxに再代入されるためです。

もし、最後の行をvar x = x + y;と再宣言しても有効で、xは3になります。

次は、letの利用例です。

【letの利用例】
let x = 1;
let y = 2;
x = x + y;

結果は、varの時と同じでxが3になります。もし、最後の行をlet x = x + y;と再宣言するとエラーになります。

次は、constの利用例です。

【constの利用例】
const x = 1;
const y = 2;
const z = x + y;

上記で、zは3になります。もし、最後の行でこれまでのようにx = x + y;とするとエラーになります。constで宣言したxの値は、書き換えられないためです。

事前に変数だけ宣言

以下のように、宣言だけ行って代入は後で行うこともできます。

【変数だけ宣言する方法】
var x;
let y;

例えば、x = x + 1が実行された時、変数が存在しないとエラーでスクリプトが止まってしまいます。変数だけ作っておくと、値がundefinedとなってエラーにならずにスクリプトが継続されます。

この方法は、後で代入できないconstでは使えません。

複数の変数を宣言

以下のように、カンマ(,)で区切って複数の変数を宣言することもできます。

【複数の変数を変数する方法】
var x=1,y=2,z;
let a=1,b,c=3;
const x1=1,x2=2,x3=3;

変数名のルール

変数の名前は、以下のルールに従う必要があります。

  • 文字、アンダースコア(_)、ドル($)が使えます。
  • 最初の文字として0〜9の数字は使えません。
  • 文字は、大文字と小文字を区別します。
  • 予約語は使えません。

「あ」などの日本語も変数として使えますが、一般的には使われません。予約語は、定義しなくてもJavaScriptで使える単語で、このページで説明しているvarやletなども変数名として使えません。

名前の付け方の一例として、キャメルケースがあります。例えば、enemy data(敵のデータ)という意味の変数であれば、2つめの単語の先頭を大文字にして単語をつなげてenemyDataと記述します。3つ以上の単語でも、つなげて先頭だけ大文字にします。これで、ルールに従いながらわかりやすい名前が付けれます。

巻き上げ

以下のスクリプトがあったとします。

【巻き上げの例】
let a = x;
var x = 1;
let b = x;

let a = xでは、宣言する前にxを使っていますが、undefinedが代入されてエラーにはなりません。値を代入していない、var xが一番上になったように動作するためです。これを、巻き上げと呼びます。

宣言後にxを使うlet b = xでは、bに1が代入されます。

巻き上げでundefinedになるのは、varで宣言した時だけです。もし、var x = 1の代りにlet x = 1とすると、let a = xはエラーになり、スクリプトは停止します。

varでの巻き上げはエラーにならないように動作しますが、実際に行いたい動作と異なることが多いと思います。このため、利用する変数の宣言はなるべく前の方ですることが推奨されます。letやconstで宣言するとエラーになるため、前で宣言していない箇所を発見しやすくなります。

var、let、constの使い分け

varは、なるべくエラーにならないように動作しますが、予期しない値が代入された時、その原因を見つけるのが難しくなる可能性があります。

letとconstであれば、間違って同じ変数名を使ったり、巻き上げになった時などはエラーでスクリプトが停止するため、原因を見つけるのが簡単です。また、ブロックスコープを持つため、変数名の管理も楽になります。このため、今後はletとconstの利用が推奨されます。

次のページ変数で文字列を扱う方法