JavaScript

JavaScriptの変数宣言の方法【const・let・var】

どうも、つよぽんです!

今回は、JavaScriptの変数について解説します。

「変数とは何か」という基本的なところから、JavaScriptで変数を使う方法まで今回の記事で話していきます。

今回の記事は次のような方に向けて書きました。

想定読者
  • 変数って何?
  • JavaScriptで変数を使うにはどうすれば良いの?
  • JavaScriptの変数を作るときに「const」「let」「var」ってどう使い分ければ良いの?

今回の記事は以下の学習コンテンツのスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
JavaScriptの変数を覚える値を保存するときに利用する「変数」。JavaScriptでは変数を利用するために使うキーワードが3つあります。「const」「let」「var」。この3つのうち「var」に関しては古い書き方になるので、基本的にはconst, letを使うようにしましょう。...

それでは次の内容で話を進めていきます。

今回の内容
  1. 変数とは
  2. JavaScriptの変数の宣言のやり方(3種類)

 

変数とは

変数の基本

この章では「変数」の基本的な概念について解説していきます。

JavaScriptに限らず、全てのプログラミング言語では数値や文字列などの値を「変数」というものに保存して値を使い回すことができます。

この値を保存する変数とは何かイメージがつきづらい場合は中学1年生のときに数学で

x = 1」「y = 2

のような式を思い出すとイメージがつきやすいかもしいれません。

変数は値を保存(格納)する箱のようなイメージ変数は値を保存(格納)する箱のようなイメージ

この場合「xには1という値」「yには2という値」が代入されるというのが理解出来れば今回説明している「変数」を理解したといって良いでしょう。

なぜなら、この「x」「y」がまさに変数の働きをしていて、「xという変数に1を保存」「yという変数に2を保存」していると言えるからです。

JavaScriptの変数を使うときのルール

変数を作るときには前の項目で説明に使った「x」「y」のように、好きな名前を変数に使うことができます。この変数に使う名前のことを変数名」とも言います。

変数名には好きな名前をつけることが出来るとたった今説明したばかりですが、次のルールを守らなければいけません。

変数のルール
  1. アルファベットから始まる
  2. アンダーズコア(_)から始まる
  3. ドル記号($)から始まる

上記3つのいずれか1つでも当てはまれば変数を作ることができます。逆に言えば、上記3つのどれにも当てはまらない場合は変数を作ることができません

また、上記ので例えば「name」「Name」のように単語としては同じだけど、「大文字」「小文字」まで見ると一致していない変数はそれぞれ別々の変数としてみられます。

以下の画像はこの項目で話した変数のルールをまとめたものになります。

JavaScriptで変数を作るときのルールJavaScriptで変数を作るときのルール

 

JavaScriptの変数の宣言のやり方(3種類)

前の章では「変数の基本的な概念」、「JavaScriptでの変数のルール」について解説しました。

この章では実際にJavaScriptで変数を作るときに利用する3つのキーワードについて解説します。

また、「変数を作る」ことを「変数を宣言する」ともいい、他の記事や書籍などで「変数の宣言」という言葉が出てきたら「変数を作るんだな」と思ってもらえればOKです。

JavaScriptで変数宣言するときに使う3つのキーワードは以下のとおりです。

3つのキーワード
  1. const
  2. let
  3. var

上記3つのキーワードは全て変数名の手前にセットします。

前の章で使った「x = 1」「y = 2」を例として使うと「const x = 1」「let y = 2」の形式でキーワードをセットします。

それでは、上記3つのキーワードについて画像を使いながら1つずつ解説していきます。

なお、画像内では「デベロッパーツール」を使ってJavaScriptを実行しているので、以下の記事を参考にしていただければ、このあとの記事を読み進めながら、一緒に変数を使う体験もできます。

あわせて読みたい
【入門】JavaScriptを実行する【デベロッパーツール編】JavaScriptを勉強したいなと思ったときにはまずは実行してみて体験してみると良いでしょう。JavaScriptを実行する方法はプログラミングしたファイルを用意する方法もありますがデベロッパーツールを使うのが手っ取り早いです。...

const

const」は再代入ができない変数を作るときに使います。

再代入できない変数」というのは、変数の宣言と同時に代入した変数以外はセットできないということです。

言葉だけではうまくイメージが掴めないと思うので以下の画像を使いながら説明します。

「const」を使って変数を作ったときのサンプル「const」を使って変数を作ったときのサンプル

画像内のサンプルでは「const name = ‘つよぽん’;」と変数nameに「’つよぽん’」という文字列を保存しています。

その後、「name = ‘つよぽん2’」のように変数nameにもう一度代入をしようとしたときに「Uncaught TypeError…」といったエラーが出ています。

このように「const」は1回しか代入できない変数、つまり再代入ができない変数になるのです。

再代入が出来る変数を使いたいときは次に説明する「let」を使います。

let

let」は再代入ができる変数を作るときに使います。

「const」のときと同じように言葉だけではイメージが掴みづらいと思うので、「let」でも画像を使いながら解説します。

以下の画像は「let」を使って変数を作ったときのサンプルです。

「let」を使って変数を作ったときのサンプル「let」を使って変数を作ったときのサンプル

上記画像では最初に「let age = 20;」で変数ageに「20」を代入しています。

その後、「age = 55」のように、別の値が代入できていることがわかります。(エラーも出ず、変数ageの中身を見ると55と出力されている)

このように、「let」を使うと既に値が保存されている場合でも新しく別の値を代入できるのです。つまり「再代入ができる変数」となります。

var

最後に「var」について説明します。

「const」「let」はES2015という2015年から新しく追加された書き方の1部で、ES2015が出る以前は「var」キーワードを使って変数宣言をしていました。

ES2015について詳しく知りたい場合は以下の記事が参考になります。

Qiita: ES2015(ES6) 入門

「var」を使うと、「let」と同じで再代入可能な変数が作れます。

厳密に言うと変数の「スコープ」という概念からみると、「let」「var」の挙動は異なるのですが、スコープに関しては入門記事の範囲外となるのでここでは説明を割愛します。

「const」「let」「var」のスコープの違いについて詳しく知りたい方は以下の記事が参考になります。

Qiita: ES2015(ES6) 入門 > ブラケット{}によるブロックスコープ

以下の画像は、「var」も「let」と同じく再代入が出来る変数であることを表したものになります。

「var」を使って変数を作ったときのサンプル「var」を使って変数を作ったときのサンプル

再代入できる変数を使いたいときは「let」も「var」もどちらも利用できますが、基本的には新しく用意された「let」を使った方が良いです。

let」を使ったほうが良い理由は、「var」で問題が合った部分を改善したものが「let」だからです。(さきほど出てきた「スコープ」の問題など)

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  1. 変数とは値を保存するもの
  2. 変数名を作るときは次の3つのいずれか1つを守る必要がある
    • アルファベットから始まる
    • アンダーズコア(_)から始まる
    • ドル記号($)から始まる
  3. JavaScriptで変数を宣言するときは次の3つのいずれかを先頭につける
    • const : 再代入できない変数
    • let : 再代入できる変数
    • var : 再代入できる変数
  4. 「let」は「var」の上位互換なので、基本的には「let」を使う

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
JavaScriptの変数を覚える値を保存するときに利用する「変数」。JavaScriptでは変数を利用するために使うキーワードが3つあります。「const」「let」「var」。この3つのうち「var」に関しては古い書き方になるので、基本的にはconst, letを使うようにしましょう。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です