JavaScriptの「let」の使い方を解説！【JavaScript入門】サンプルコードや画像付きで解説

JavaScriptの「let」の使い方が分からない…

今回はこんな疑問にお答えします。

こんにちは。
現役プログラマーのnktatです！

今回は『JavaScriptの「let」の使い方』について解説していきます。

JavaScriptに限った話ではないですが、どのプログラミング言語でも変数というのは必ず使います。
JavaScriptでは変数を宣言するキーワードが「let」・「var」・「const」の３つありますが、用途に合わせて使えていますか？
JavaScriptで変数を宣言するときに何となく「let」を使っていませんか？

ここでは「let」の特徴や使い方について説明します。
変数を宣言するときには「let」・「var」・「const」を用途に合わせて使えるようになりましょう。

それでは解説していきます。

「let」について

「let」の使い方を説明する前に、「let」とは何なのか？「let」とはどういう意味なのか？から説明します。

「let」とは？

「let」とは、JavaScriptで変数を宣言するときに使うキーワードの一つです。
以前は「var」を使って変数を宣言するのが一般的でしたが、ECMAScript 2015から変数を宣言するキーワードに新しく「let」と「const」が追加されました。
「var」と「const」との違いについては後ほど説明します。

「let」の意味とは？

「let」は略語でもなく、「let」という単語からきています。
「let」とは、数学において利用される「○○をxとする」という意味なので、「let」と記述するのは「変数Xは値○○とする」と宣言していることになります。

「let」の使い方について

JavaScriptの「let」は一つ、または複数の変数を宣言するときに使います。
それぞれの変数の宣言の仕方を見ていきましょう。

「一つの変数を宣言する」使い方

JavaScriptの「let」で一つの変数を宣言する使い方です。

サンプルコード

// 「変数：fruits」を宣言して、「値：リンゴ」を代入
let fruits = "リンゴ";
console.log(fruits); // 「リンゴ」で表示される

実行結果

リンゴ

『変数：fruits』を宣言して、”リンゴ”を表示させました。

「複数の変数を宣言する」使い方

JavaScriptの「let」で複数の変数を宣言する使い方です。

変数と値のペアを「，（カンマ）」で区切ることで、複数の変数を宣言できます。

サンプルコード

// 「変数：fruits1」に「値：リンゴ」を代入し、「変数：fruits2」に「値：バナナ」を代入
let fruits1 = "リンゴ", fruits2 = "バナナ";
console.log(fruits1); // 「リンゴ」で表示される
console.log(fruits2); // 「バナナ」で表示される

実行結果

リンゴ
バナナ

「let」・「var」・「const」の違いについて

JavaScriptで変数を宣言するキーワードは「let」の他にも、「var」と「const」があります。
それぞれの違いを表にまとめました。

「let」は「変数のみの宣言」と「再代入」ができますが、「再宣言」ができないのが特徴です。
それぞれの「let」の特徴を説明します。

「let」の変数のみの宣言について

「let」は変数のみの宣言ができます。
「let」で変数宣言時に、値を代入しなかった場合は、値は初期値である「undefined」になります。
「undefined」とは「未定義」という意味で、変数は宣言したが値はまだ定義されていない状態のことです。

サンプルコード

// 「変数：fruits」のみ宣言する。値は何も代入しない。
let fruits; // 初期値である「undefined」が自動的に代入される
console.log(fruits); // 「undefined」で表示される

実行結果

undefined

「let」の再宣言について

「let」は再宣言できません。
再宣言とは、一度宣言した変数名で再度宣言することです。

サンプルコード

// 「変数：fruits」を宣言して、「値：リンゴ」を代入
let fruits = "リンゴ";

// 「変数：fruits」を再宣言
let fruits; // 「変数：fruits」を再宣言するとエラーになる

実行結果

SyntaxError: Identifier 'fruits' has already been declared

「let」は同一スコープ内で再宣言できないので、『変数：fruits』を同一スコープ内で複数回宣言すると「SyntaxError」となります。

「let」の再代入について

「let」は再代入できます。
再代入とは、値が入っている変数に上書きで代入することです。

サンプルコード

// 「変数：fruits」を宣言して、「値：リンゴ」を代入
let fruits = "リンゴ";
console.log(fruits); // 「リンゴ」が表示される

// 「変数：fruits」に「値：バナナ」を代入
fruits = "バナナ"; // 「変数：fruits」に値を再代入してもエラーにならない
console.log(fruits); // 「バナナ」が表示される

実行結果

リンゴ
バナナ

「let」は再代入可能なので、『変数：fruits』の値を上書きできます。

「let」のスコープについて

スコープとは、変数の名前や関数などの参照できる範囲を決めるものです。
スコープの中で定義された変数はスコープの内側でのみ参照でき、スコープの外側からは参照できません。

それでは「let」とスコープの関係性について説明します。

グローバルスコープの適用について

「let」で宣言する変数はグローバルスコープを適用できます。

サンプルコード

// グローバルスコープについて確認する
let scope = "グローバルスコープ値"; // グローバル変数
console.log(scope); // 「グローバルスコープ値」で表示される

(function(){
    console.log(scope); // 「グローバルスコープ値」で表示される
})()

if(true){
	console.log(scope); // 「グローバルスコープ値」で表示される
}

console.log(scope); // 「グローバルスコープ値」で表示される

実行結果

グローバルスコープ値
グローバルスコープ値
グローバルスコープ値
グローバルスコープ値

すべて”グローバルスコープ値”で表示されました。
「let」で宣言した変数はグローバルスコープを適用できるので、プログラムのトップレベルで「let」で宣言された変数はグローバル変数となり、プログラム全体のどこからでも参照できます。

関数スコープ（function）の適用について

「let」で宣言する変数は関数スコープ（function）を適用できます。

サンプルコード

let scope = "グローバルスコープ値"; // グローバル変数
console.log(scope); // 「グローバルスコープ値」で表示される

function test(prm){
    let scope = "関数スコープ値"; // 関数スコープ（function）が適用されるので、ローカル変数
    console.log(scope); // 「関数スコープ値」で表示される
}

test("")

if(true){
	console.log(scope); // 「グローバルスコープ値」で表示される
}

console.log(scope); // 「グローバルスコープ値」で表示される

実行結果

グローバルスコープ値
関数スコープ値
グローバルスコープ値
グローバルスコープ値

test関数の中のみ”関数スコープ値”で表示されました。
「let」で宣言した変数は関数スコープ（function）を適用できるので、関数内の「let」で宣言した変数はローカル変数となり、関数の内側のみ利用可能です。

ブロックスコープ（{}）の適用について

「let」で宣言する変数はブロックスコープ（{}）を適用できます。

サンプルコード

let scope = "グローバルスコープ値"; // グローバル変数
console.log(scope); // 「グローバルスコープ値」で表示される

if(true){
    let scope = "ブロックスコープ値"; // ブロックスコープ（{}）が適用されるので、ローカル変数
    console.log(scope); // 「ブロックスコープ値」で表示される
}

(function(){
    console.log(scope); // 「グローバルスコープ値」で表示される
})()

console.log(scope); // 「グローバルスコープ値」で表示される

実行結果

グローバルスコープ値
ブロックスコープ値
グローバルスコープ値
グローバルスコープ値

if文の中のみ”ブロックスコープ値”で表示されました。
「let」で宣言した変数はブロックスコープ（{}）を適用できるので、ブロック内の「let」で宣言した変数はローカル変数となり、ブロックの内側のみ利用可能です。

「let」は使わない方がいいのか？

ここまで「let」の特徴を説明しました。
変数を宣言するキーワードは「let」の他にも、「var」と「const」がありますが、どれを使えばいいのでしょうか？

結論：「var」よりも「let」や「const」を使うことが推奨されている

結論から言うと、「var」よりも「let」や「const」を使うことが推奨されています。

ECMAScript 2015で、変数を宣言するキーワードに新しく「let」と「const」が追加されました。
「var」にはいくつか使いづらい点があったからです。
使いづらい点により、「var」は意図せず変数を上書きしてしまう危険性がありました。

「var」の挙動自体を変更しなかったのは、今までに「var」で開発されたアプリケーションが動かなくなるリスクがあったため、新しく「let」と「const」を追加して影響がないように対応しました。

まとめ

今回は『JavaScriptの「let」の使い方』について解説しました。
これまでの情報のおさらいです。

JavaScriptの「let」の使い方は理解できましたか？
「var」の使いづらい点を改善するために追加された「let」や「const」ですが、使い方を理解したうえで、状況に応じて使い分けるようにしましょう。

あなたは独学でJavaScriptを学んでいて、嫌になったことはありませんか？

独学で進める場合、分からない部分があれば、
自分で調べる⇒解決方法を見つけて解説を読む⇒解説の中で分からない部分を調べる⇒調べた結果で分からない部分をまた調べる…
という調査ループに陥ってしまい、嫌気が差して挫折することがよくあります。

「プログラミングを学ぶ」と一言でいってもコードを記述するだけではありません。
コード記述前は環境構築を行い、コード記述後はテストが必要です。
エラーが発生したら、エラーの原因を調査して自分で解決しなければいけません。

環境構築やエラー発生時の調査方法など、プログラミングを学び始めたときに躓いてしまうポイントは多岐に渡って潜んでいます。

独学で進める場合、これらの問題に対してインターネットや書籍から自分で調べて自分で解決していくしかありません。

独学でプログラミングを学んだことがある人ならば一度は経験していると思いますが、自分で調べて自分で解決することは非常に難しく、とても根気がいる作業です。

そのため、独学によるプログラム学習は挫折率が高く、ほとんどの学習者が一度は躓きや挫折を経験しています。

仮に根気強く頑張って一通りのプログラミングを学んだとしても、独学ではチーム作業を学ぶことができません。

プログラミングはシステムを開発するために行うことがほとんどですが、システム開発はチーム作業が主です。

チーム作業を学べないというのは大きなデメリットになります。

これらのことを踏まえて考えると、独学でJavaScriptを学ぶことは本当に効率的でしょうか？

JavaScriptを学ぶ理由は「エンジニアになりたい」・「転職したい」・「副業したい」など人それぞれだと思います。

前向きな目標を達成するために自主的に学んだのに、挫折して諦めてしまうのは非常に勿体ないですよね。

人生は一度きりです。
やりたいことをやったほうがいいに決まっています。

では、挫折せずに効率よくJavaScriptを学ぶにはどうしたらいいのでしょうか？

結論から言うと、挫折せずに効率よくJavaScriptを学ぶ方法は「Code Village」を受講することです。

「Code Village」は必要な教材・教育・サポートが揃っており、受講生の学習継続率も９３％と非常に高いスクールです。
挫折せずに効率よくJavaScriptを学ぶには「Code Village」を受講することをオススメします。

「Code Village」の口コミを一部紹介します。

ここでは一部のみの紹介となりましたが、以下の記事で総勢３２人の受講生のリアルな口コミを紹介しています。

更には、なぜ「Code Village」で受講すべきなのか？、「Code Village」を利用するまでの３ステップなども記事にまとめていますのでぜひチェックしてみてください。