本ページでは、JavaScriptにおける変数の宣言方法について解説します。
JavaScriptの変数は、他の言語と異なりちょっとだけやっかいな性質を持っています。そのため、初心者にとっては理解しづらく挫折してしまうことも少なくないでしょう。
ですが、一度理解してしまえば決して難しい概念ではなく使いこなすのも容易です。本ページでは、変数とは何か？という前提知識から、３つの変数宣言命令「let」「const」「var」の違いまで整理して分かりやすく解説しています。
- 【前提】変数とは何か？―詳細解説ページへのリンクあり
- JavaScriptでの変数宣言方法「let/const/var」
- 変数の命名ルールについて
- letとvarの違いは何か？
JavaScriptを学習中の方であれば、JavaScriptを使いこなすための必要最低限の必須知識ばかりですので是非最後までご覧ください。
【前提】変数とは何か？
プログラミングにおける「変数」（variable）は、データを扱うメモリ領域のことを言います。メモリ領域というと言葉が難しくなりますが、分かりやすくデータを格納しておく「箱」だと考えてOKです。
この「箱」には、数字や文字列、日付など様々な値を入れることができます。
変数について、さらに詳しく知りたい方は以下のページをご覧ください。
変数の宣言：let/const/var
JavaScriptでは、let/const/varを用いて変数の宣言を行います。
構文ルール：変数の宣言
let (変数名) = "(初期値)";
const (変数名) = "(初期値)";
var (変数名) = "(初期値)";
上記の構文で、変数と変数に格納される初期値を宣言することができます。
ちなみに、上記のコードの「＝」は等しいという意味ではありません。右辺を左辺に代入するという意味です。プログラム言語全般で共通する内容なので合わせて覚えておきましょう。
サンプルコード
// letを用いた変数宣言
let biz_online1 = "初めての変数";
// letを用いて一度に複数の変数を宣言
let hensu1 = "変数1",
hensu2 = "変数2";
// constを用いた変数宣言
const biz_online2 = "初めての変数";
// constを用いて一度に複数の変数を宣言
const hensu1 = "変数1",
hensu2 = "変数2";
// varを用いた変数宣言
var biz_online3 = "初めての変数";
// varを用いて一度に複数の変数を宣言
var hensu1 = "変数1",
hensu2 = "変数2";初期値を指定しない場合(let/var)
letとvarにおいては初期値の設定は必須ではありません。最初に変数の箱だけ用意しておき、後から必要に応じて値を代入する形で利用することができます。
初期値の設定を行わない場合
let (変数名) ;
var (変数名) ;
// letを用いた変数宣言
let biz_online1;
// letを用いて一度に複数の変数を宣言
let hensu1,
hensu2;
// varを用いた変数宣言
var biz_online2;
// varを用いて一度に複数の変数を宣言
var hensu1,
hensu2;constは初期値必須
constの場合は、必ず初期値を指定する必要があります。これは、constで宣言した変数には後から値を代入することができないためです。
言い方を変えればconstで宣言する変数は「定数※」のように扱われるということになります。ただし、厳密に言うとJavaScriptでは、他の言語でいう「定数」という概念が存在しないため「constは定数を宣言するものである」というのは誤りになってしまうため、変数宣言命令の一部として扱っていきます。
constがなぜ定数を宣言するものではないか？については、JavaScriptのオブジェクトを理解すると納得がいくようになりますが、ここでは説明簡略化のため省略します。
※ 一度宣言したら中の値が書き換えられることは無い変数のようなもの
変数への値の代入
var/letで宣言した変数へ値を代入する場合は「＝」を使って、変数と値を結びつけるだけでOKです。
(変数名)=(値);
// letを用いた変数宣言 let biz_online; // 値の代入 biz_online = "初めての変数代入"; biz_online = "値は何度でも上書き可能です";
変数への代入は何度でも行うことが可能です。変数定義時には「let/var」が必要でしたが、値を代入する際には、不要です。
変数の値を更新したい場合（変数に変数を代入する）
既に定義済みの変数に値を加えたい場合を考えます。
変数は、既に定義済の変数の値を代入することができます。例えば、今の値を２倍したい場合は以下のようにコーディングします。
let sample = 2; //変数定義 sample = sample * 2 ;
この「変数に変数を代入する」シーン。実はJavaScriptでは結構多く存在します。したがって、以下のように省略して記述することも可能になっています。
V・・・任意の変数
V = V + 1 ⇒ V += 10
V = V - 1 ⇒ V -= 10
V = V * 1 ⇒ V *= 10
V = V / 1 ⇒ V /= 10
JavaScript：変数の命名ルール
変数名については、基本的にはプログラマーの自由です。プログラマー個人のポリシーに応じて命名していけばOKですが、最低限以下のルールを順守する必要があります。
①アルファベット/アンダーバー(_)/ダラー($)/数字のみで命名
変数は基本的に「アルファベット」「アンダーバー」「ダラー」「数字」のみで構成します。
実は、上記３つに加えて日本語（ひらがな・カタカナ・一部の漢字）を利用することもできます。ただし、日本語を使うのは一般的ではなく、日本語を使う必要性もないことから基本的には利用を避けたほうが良いかと思います。
②１文字目は数字以外にする
１文字目に数字を用いることはできません。初心者の方ほど、この誤りに陥りがちなので注意しましょう。
×「1JavaScript」
③「予約語」以外の名称にする
「予約語」とは、JavaScript言語の中で既に何らかの意味と役割を与えられている単語です。
例えば、このページで紹介している「let」「var」「const」は予約語です。したがって、以下のような変数を定義することはできません。
// letを用いた変数宣言(以下の変数名は予約語なので宣言不可⇒構文エラーとなる)
let var,
const,
let;letとvarの違い
letとvarの相違点について解説します。
実は、もともとJavaScriptにおける変数宣言命令は「var」のみでした。なぜ、「let」を追加したかと言うと、「var」だけでは様々な問題が発生してしまった（プログラミングの仕方では回避できない）ためです。
そこで、今既に世の中で動いているコードに影響を与えず（varをそのままに）、弊害を回避するために新たに「let」という変数宣言命令が追加されました。
したがって、基本的に「var」「let」は同じような動きをするのですが、細かな点で微妙に処理の内容が異なります。この章では、varとletの違いを端的に解説します。
相違点①：スコープの違い
端的に説明すると、変数のスコープ（有効範囲）が異なります。
早速、let命令を確認してみましょう。let命令で宣言した変数は、そのブロック内でのみ有効となります。
ブロックとは、簡単に言えば下記コード内の「{}」で囲まれた範囲です。
let test = 123;
console.log(test);
{
let test = abc;
console.log(test);
}
console.log(test);※「console.log」は指定した変数の値を返す関数です。()内には対象の変数名が入ります。
letは、{}で囲まれた範囲内でのみ有効な変数を宣言できるため、結果は以下の通りになります。
123 abc 123
逆に、varは宣言した変数がブロック外でも有効になります。
var test = 123;
console.log(test);
{
var test = abc;
console.log(test);
}
console.log(test);結果はこちらです。ブロック外でも、変数が有効となるため４行目で初期値代入した「abc」が引き継がれることになります。
123 abc abc
JavaScriptを体系的に学びたい方は
プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。
そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。
各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。
