

JavaScriptの「let」の使い方が分からない…
今回はこんな疑問にお答えします。
こんにちは。
現役プログラマーのnktatです!
今回は『JavaScriptの「let」の使い方』について解説していきます。
JavaScriptに限った話ではないですが、どのプログラミング言語でも変数というのは必ず使います。
JavaScriptでは変数を宣言するキーワードが「let」・「var」・「const」の3つありますが、用途に合わせて使えていますか?
JavaScriptで変数を宣言するときに何となく「let」を使っていませんか?
ここでは「let」の特徴や使い方について説明します。
変数を宣言するときには「let」・「var」・「const」を用途に合わせて使えるようになりましょう。
今回はこんな疑問にお答えします。 本記事の内容 JavaScriptを始める前の準備について JavaScriptの書き方の基本ルール JavaScriptのコメントの仕方 コンソールでのJavaScript実行確認 J …
それでは解説していきます。
「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」で一つの変数を宣言する使い方です。
let 変数名 = 値;
サンプルコード
// 「変数:fruits」を宣言して、「値:リンゴ」を代入
let fruits = "リンゴ";
console.log(fruits); // 「リンゴ」で表示される
実行結果
リンゴ
『変数:fruits』を宣言して、”リンゴ”を表示させました。
「複数の変数を宣言する」使い方
JavaScriptの「let」で複数の変数を宣言する使い方です。
let 変数名1 = 値1, 変数名2 = 値2, 変数名3 = 値3, …, 変数名N = 値N;
変数と値のペアを「,(カンマ)」で区切ることで、複数の変数を宣言できます。
サンプルコード
// 「変数:fruits1」に「値:リンゴ」を代入し、「変数:fruits2」に「値:バナナ」を代入
let fruits1 = "リンゴ", fruits2 = "バナナ";
console.log(fruits1); // 「リンゴ」で表示される
console.log(fruits2); // 「バナナ」で表示される
実行結果
リンゴ
バナナ
「let」・「var」・「const」の違いについて

JavaScriptで変数を宣言するキーワードは「let」の他にも、「var」と「const」があります。
それぞれの違いを表にまとめました。
let | var | const | |
---|---|---|---|
変数のみの宣言 | 〇 | 〇 | × |
再宣言 | × | 〇 | × |
再代入 | 〇 | 〇 | × | グローバルスコープの適用 | 〇 | 〇 | 〇 | 関数スコープ(function)の適用 | 〇 | 〇 | 〇 | ブロックスコープ({})の適用 | 〇 | × | 〇 |
「let」は「変数のみの宣言」と「再代入」ができますが、「再宣言」ができないのが特徴です。
それぞれの「let」の特徴を説明します。
今回はこんな疑問にお答えします。 本記事の内容 「var」について 「var」の使い方について 「var」・「let」・「const」の違いについて 「var」の初期化について 「var」の再宣言について 「var」の再 …
今回はこんな疑問にお答えします。 本記事の内容 「const」について 「const」の使い方について 「const」・「var」・「let」の違いについて 「const」の変数のみの宣言について 「const」の再宣言 …
「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」を追加して影響がないように対応しました。
「let」と「const」の追加が必要な事態を招いた、「var」の使いづらい点についてはこちらの記事にまとめていますのでぜひチェックしてみてください。今回はこんな疑問にお答えします。 本記事の内容 「var」について 「var」の使い方について 「var」・「let」・「const」の違いについて 「var」の初期化について 「var」の再宣言について 「var」の再 …
今回はこんな疑問にお答えします。 本記事の内容 「const」について 「const」の使い方について 「const」・「var」・「let」の違いについて 「const」の変数のみの宣言について 「const」の再宣言 …
まとめ

今回は『JavaScriptの「let」の使い方』について解説しました。
これまでの情報のおさらいです。
- 「let」とは、JavaScriptで変数を宣言するときに使うキーワードの一つ
- 「let」は、「○○をxとする」という意味
- 基本的な構文は「let 変数名 = 値;」
- 変数を宣言するキーワードは他にも「var」と「const」がある
- 「let」の特徴について
- 変数のみ宣言できる(初期値:undefine)
- 再宣言できない
- 再代入できる
- グローバルスコープ・関数スコープ・ブロックブロックで適用できる
- 「var」は意図しない変数の上書きによるエラーが発生する可能性があるため、「let」や「const」を使うことが推奨されている
- 基本的には「const」を使い、値の再代入が必要な場合は「let」を使う。そうすれば意図せず変数を上書く可能性は低くなる
JavaScriptの「let」の使い方は理解できましたか?
「var」の使いづらい点を改善するために追加された「let」や「const」ですが、使い方を理解したうえで、状況に応じて使い分けるようにしましょう。
あなたは独学でJavaScriptを学んでいて、嫌になったことはありませんか?
独学で進める場合、分からない部分があれば、
自分で調べる⇒解決方法を見つけて解説を読む⇒解説の中で分からない部分を調べる⇒調べた結果で分からない部分をまた調べる…
という調査ループに陥ってしまい、嫌気が差して挫折することがよくあります。
「プログラミングを学ぶ」と一言でいってもコードを記述するだけではありません。
コード記述前は環境構築を行い、コード記述後はテストが必要です。
エラーが発生したら、エラーの原因を調査して自分で解決しなければいけません。
環境構築やエラー発生時の調査方法など、プログラミングを学び始めたときに躓いてしまうポイントは多岐に渡って潜んでいます。
独学で進める場合、これらの問題に対してインターネットや書籍から自分で調べて自分で解決していくしかありません。
独学でプログラミングを学んだことがある人ならば一度は経験していると思いますが、自分で調べて自分で解決することは非常に難しく、とても根気がいる作業です。
そのため、独学によるプログラム学習は挫折率が高く、ほとんどの学習者が一度は躓きや挫折を経験しています。
仮に根気強く頑張って一通りのプログラミングを学んだとしても、独学ではチーム作業を学ぶことができません。
プログラミングはシステムを開発するために行うことがほとんどですが、システム開発はチーム作業が主です。
チーム作業を学べないというのは大きなデメリットになります。
これらのことを踏まえて考えると、独学でJavaScriptを学ぶことは本当に効率的でしょうか?
JavaScriptを学ぶ理由は「エンジニアになりたい」・「転職したい」・「副業したい」など人それぞれだと思います。
前向きな目標を達成するために自主的に学んだのに、挫折して諦めてしまうのは非常に勿体ないですよね。
人生は一度きりです。
やりたいことをやったほうがいいに決まっています。
では、挫折せずに効率よくJavaScriptを学ぶにはどうしたらいいのでしょうか?
結論から言うと、挫折せずに効率よくJavaScriptを学ぶ方法は「Code Village」を受講することです。
「Code Village」は必要な教材・教育・サポートが揃っており、受講生の学習継続率も93%と非常に高いスクールです。
挫折せずに効率よくJavaScriptを学ぶには「Code Village」を受講することをオススメします。
「Code Village」の口コミを一部紹介します。
- 20代男性 職種:公務員 5.0
-
自走力が身に付くスクールです。基本的にはスクールのオンライン教材を見て学習し、実際に手を動かしながら理解を深めていくというやり方で行います。なのでHTML/CSS、JavaScriptにも少し触れておくことをお勧めします。自分のタイミングで好きな時に好きなだけ学習できます。強制されることはありません。私は6か月在籍していましたが教材の種類が豊富だったおかげで自分の学びたいことを好きなだけ学習することができました。まだ学習できていない教材もありますが卒業後も教材をみられるようなので卒業した今でもそこで学習しています。このスクールにはスタディールームというオンラインルームがあり、質問や疑問があればそこで講師の方に質問したり、エラーを見せてどの部分に問題があるのか聞くことができます。(聞きすぎてしまうと自走力がつかないと思うのでどうしても自分自身では解決できないときにのみ利用したほうが良いと思います。)講師の方はわかりやすく丁寧にどこに問題があるのか教えてくれます。また定期的に学習の進捗状況を共有したりするメンターと呼ばれる方が1人ついてくれるのですがその方にスクールのお勧めの教材などを聞くことができるので効率的に学習することができます。とにかく自由度が高いスクールで自分で考えて学習したい。効率的に学習したい。好きな時に学習したい。という方にすごくマッチしたスクールだと感じました。
引用元: コエテコキャンパス
- 20代男性 職種:公務員 5.0
-
入校する前はもうちょっと基礎を固めてから入った方がいいんじゃないかと躊躇していましたが悩んでいても仕方がないと思い入校しました。 入ってみるとやはり難しかったものの、 講師の方が一から丁寧に教えて下さり、一人でやっている時よりも得るものも多く覚えるスピードも早かったです。 また、もくもく会で受講生と話しているとみなさん目標に向かって頑張っていて、とても刺激になり、より頑張ろうと思えました。 決して安くない金額ですが入ってよかったなと思っています。 もし迷っている方がいらっしゃったら仮入校制度もあるので気軽に入ってみるのもいいと思います!
引用元: コエテコキャンパス
- 20代女性 職種:パート 5.0
-
こちらのスクールを受講してよかったと感じています。フロントエンドエンジニアとして今現在使用されている言語を中心に学ぶことができ、バックエンドに関する最低限の知識なども教材の中に盛り込まれていた点が良かったです。また、教材内容と期間に対する価格が他者さんに比べていい点も、スクールの決め手となりました。
引用元: コエテコキャンパス
ここでは一部のみの紹介となりましたが、以下の記事で総勢32人の受講生のリアルな口コミを紹介しています。
更には、なぜ「Code Village」で受講すべきなのか?、「Code Village」を利用するまでの3ステップなども記事にまとめていますのでぜひチェックしてみてください。
今なら全コース1週間無料体験実施中!!「Code Village」についての詳細はこちらをチェック!!JavaScriptの学習方法について困っていませんか? こんにちは。現役プログラマーのnktatです! JavaScriptはWeb系のフロント開発において世界標準といえるポジションであり、JavaScriptを利用し …