JavaScript letとは？特徴や使い方、学習方法も紹介

この記事に訪れたあなたはこのような悩みを持っていませんか？

コードを読んでいると、変数にletが書かれていることがよくありますよね。また「varよりもletを使った方がいい！」と聞いたことはありませんか？

しかし今までvarを使ってきた人からすれば、letを使っても今までと同じで「varと何が違うの？」と疑問に思ってしまいますよね。

そこで今回は、JavaScript letの使い方や注意点を紹介！letの特徴やvarやconstとの違いについて解説します。

具体的な内容は以下のとおりです。、

• JavaScript letとは？
• varやconstとの違い
• JavaScript letの特徴
• JavaScriptでのletの使い方
• JavaScriptでのletの注意点
• JavaScript letを学習・勉強する方法

上記の内容に対してサンプルコードと合わせて解説してきますね。

この記事を読めばあなたもletの重要性を知り、使いこなせること間違いなしでしょう。

JavaScript letとは？

JavaScript letとは変数を定義するときに使うものです。varやconstと同様にして利用します。

let value = 300;

ES2015/ES6以降で新しく追加されたので、しばらくJavaScriptを触ってこなかった人にとっては、初めてみるものでしょう。

使い方もvarとほとんど同じなので「letって一体どんなものなの？」と疑問に思ってしまいますよね。

では一体、varとは何が違うのか見ていきましょう。

for (var i=0; i<1; i++){
var a1 = "success!";
let a2 = "success!";
console.log(typeof a1);
console.log(typeof a2);
}
console.log(typeof a1);
console.log(typeof a2);

// 実行結果
string
string
string
undefined

上記のコードではvarやletに値を代入して、for文の中と外でそれぞれ型を出力しています。

for文の中ではvarもletもstringと表示されていますが、for文の外だとletで定義したa2だけがundefinedと表示されていました。

一方varはfor文の外でもしっかりとstringと表示されています。

これが明確なvarとの違いで、varはfor文の外でも使えるのに対し、letはfor文の外では使えなくなるんです。

for文の外で使えない理由については、後述する「JavaScript letの特徴」で解説しますね。

varやconstとの違い

letとはどんなものなのかは知りましたが、変数定義の方法にはvarやconstもあります。

C言語などはintやcharといった、数列や文字列によって使い分ける必要がありますが、JavaScriptの場合だとどう使い分けるべきかわからないですよね。

では具体的に何が違ってくるのか？簡単に説明しますと以下のようになります。

• var：値を宣言・代入できる。for文やif文の中で定義した場合、外でも使える。
• let：値を宣言・代入できる。for文やif文の中で定義した場合、外では使えなくなる。
• const：値を宣言できるが代入できない。for文やif文の中で定義した場合、外では使えなくなる。

varとletは先ほど解説しましたね。letはvarに加えて関数の中で定義した場合は外では使えなくなる性質がありました。

そしてconstはletに加えて代入して値を更新できない性質もあります。以下のコードで確かめてみましょう。

const value = 300;
value = 500;
console.log(value);

// 実行結果
value = 500;
^
TypeError: Assignment to constant variable.

実行すると、2行目のvalueを500に更新する部分でタイプエラーが起きました。このようにconstは途中で値を変更するとエラーが起きてしまうんですね。

つまり値が変わらないとわかっている変数や値が変わってほしくない変数にはconstが推奨されます。

逆にそれ以外の場合にはletが使われますね。では、varはどういったときに使われるのでしょうか？

実は、varは使うことを推奨されていません。最近ではvarの後に出てきたletやconstのみを使うことが推奨されています。

JavaScriptを学習するならletやconstを使うのを意識しましょう。

JavaScript letの特徴

新しく登場したletは、varよりも使われる変数定義となりました。

しかし中には「varは非推奨で、なぜletが推奨されるの？」と考える人もいるでしょう。

letにはvarよりも使われる理由となる、以下の特徴を持っています。

• varと比べて、思いもよらないエラーを防げる
• 再代入はできるが、再宣言はできない
• 宣言する前にconsoleするとエラーが出る

このような特徴がどんなメリットをもたらすのかを交えながら解説してきますね。

varと比べて、思いもよらないエラーを防げる

一つ目の特徴は、varと比べても思いもよらないエラーを防げる点があります。

function tasizan(n){
var take = 400;
if(n >= 100){
var talk = 200;
take = take + n;
}
console.log(talk) // takeを出力するつもりが間違えてtalkにしてしまう
}
tasizan(100);

// 実行結果
200 // 表示がtalkのものになってしまう

上記のコードは関数tasizanに受け渡された値が100以上ならば、takeに受け渡された値分を足して出力するものです。

実際にはtakeを出力したいのですが、タイプミスしてtalkと打ってしまいました。talkはif文の中で定義しているので通常エラーになってくれます。

ところが、varだとエラーを通さずに実行できてしまいます。そのためコードが間違っているのに気づかず、表示がおかしくなってしまう危険があるんですね。

実際にこういったエラーに巻き込まれて苦しい思いをした経験はありませんか？letなら完全に防げますよ。

function tasizan(n){
let take = 400;
if(n >= 100){
let talk = 200;
take = take + n;
}
console.log(talk)
}
tasizan(100);

// 実行結果
console.log(talk)
　　 ^
ReferenceError: talk is not defined

先ほどのコードで変数をletにしてみたところ、7行目のconsole.logでエラーが出ましたね。

このようにletを使うことで違う変数を記述してしまったときに間違いが発見しやすくなるのでletがvarよりも推奨されるわけなんです。

再代入はできるが、再宣言はできない

変数を作るとき、これまでにどんな変数を作ったか忘れてしまうことはありませんか？

そして変数を作ったら、すでに同じような名前の変数を作っていて「上書きしてしまった…」なんてことありますよね。

こういった再宣言による思いもよらないエラーはletなら完全に防いでくれるんです。

function tasizan(n){
var take = 400 + n;
var take = 200 + n;
console.log(take)
}
tasizan(100);

// 実行結果
300

上記のコードを見てみると、関数tasizanでtakeを2回も宣言しています。

すると表示されてほしい値と違ってきてしまうため、varだとこれまでに使った変数をすべて覚えておく必要が出てしまうんですね。

それではletだとどうなるのでしょうか？

function tasizan(n){
let take = 400 + n;
let take = 200 + n;
console.log(take)
}
tasizan(100);

// 実行結果
let take = 200 + n;
　　^
SyntaxError: Identifier 'take' has already been declared

実行するとしっかりとエラーを出してくれましたね。

letはfor文やif文の外では使えないだけでなく、再宣言も制限します。想定外のエラーを防げるようになるためにletが使われるようになったことがわかってきましたね。

宣言するまえにconsoleをするとエラーが出る

さらにもう一つの特徴として、変数を宣言する前にconsoleするとエラーが表示される特性を持ちます。

console.log(x);
let x = 100;

// 実行結果
console.log(x);
　　 ^
ReferenceError: Cannot access 'x' before initialization

実行するとエラーが表示されましたが、「上記のコードだと、エラーが出て当然じゃないの？」と疑問に思う人もいるでしょう。

確かに、コードは上から順番に実行していくものですから、変数を宣言する前にconsoleをすればエラーが出るのが自然ですよね。

それでは変数のletの部分をvarに変えて実行してみましょう。

console.log(x);
var x = 100;

// 実行結果
undefined

実行すると、なんとエラーが起きずに通ってしまいました。

表示されたのは「undefined」ですが、エラーとして出ていません。そのため、コードがおかしくなっていることに気づかないままになる危険性があるんです。

letにはこういった危険からも守ってくれると頭に入れておくといいですね。

JavaScriptでのletの使い方

letの便利さについてわかったところで、letを使ったサンプルコードを載せて仕組みを理解していきましょう。

記事を読むだけでなく、実際にプログラミングすればよりletのスキルが定着しますよ。

使用例1：配列の値の平均値を求める

配列に格納している値をすべて取り出し、平均値を求めるコードを作ります。

平均値の求め方は知っていますか？平均値は、各要素の合計値から要素の数を割れば求められました。

あとは各要素の合計値を求めるために、for文を使えば良さそうですね。

let list = [2,4,6,8,10,12];
let sum = 0;
for (let i=0; i<list.length; i++){
sum += list[i];
}
console.log(sum/list.length);

// 実行結果
7

for文では配列の場所を示す変数iを作り、配列の各要素をsumに足しています。そして各要素の合計値sumを配列の要素数で割って平均値を求めているんですね。

ポイントは変数定義をすべてletにしているところ。

変数をletで定義することでfor文の外でiを使ってしまったり、listを再宣言してしまったりと想定外のエラーを引き起こす原因を防いでくれるわけなんですね。

使用例2：配列の値を並べ替えて表示させる

次は配列の値を並び替えて、考えられるすべてのパターンを出力してみましょう。

const list = [2,4,6,8,10,12];
let sort = [];
let slist = list.slice();
for(let i=0; i<list.length; i++){
let random = Math.round(Math.random()*(slist.length-1));
sort.push(slist[random]);
slist = slist.slice(0, random).concat(slist.slice(random+1));
}
console.log(sort);

// 実行結果
[ 6, 8, 4, 12, 10, 2 ]

上記のコードを何度も実行してみてください。毎回違った並び順で表示されます。

上記のコードでもすべての変数をletにしているところがポイントです。また変数listには値が一切変わらないのでconstを付けているのがわかりますね。

このように複雑なコードではletやconstを使用することで、より想定外のエラーを防げました。

ちなみに上記のコードではどのような処理がされているのでしょうか？「何をしているのか全くわからない…」という人のために簡単に説明しますね。

list = [2,4,6,8,10,12];
let sort = [];
let slist = list.slice();

まず1~3行目の部分では並び替えをした後の配列sortと、新しくslistでlist配列を複製しています。

後のfor文で配列の中身を直接変えていくので、あらかじめ同じような配列を作っているんですね。

for(let i=0; i<list.length; i++){
let random = Math.round(Math.random()*(slist.length-1));
sort.push(slist[random]);
slist = slist.slice(0, random).concat(slist.slice(random+1));
}

4~8行目では、for文の部分で配列の要素を一つ取り出してslistに入れています。取り出した値は配列から削除しslistを更新していますね。

以降同じような動作を配列の要素数分、繰り返すことで並び替えた後の配列が表示でき
ました。

JavaScriptでのletの注意点

これまでletの便利さや重要性を解説してきました。

恐らくvarを使うことによるリスクも知れて、「今後はletやconstを使うようにしよう！」と思えるようになったのではないでしょうか？

しかしletにも以下のような気を付けて欲しいポイントが3つあります。

• 同じ変数でも場所によって別のものになる
• 基本的にconstを使った方が良い
• for文やif文でもletは避けた方が良い

それぞれどのように気を付けるのか解説していきますね。

注意点1：同じ変数でも場所によって別のものになる

「JavaScript letの特徴」で再宣言ができないため、思いもよらないエラーを防げると解説しました。ですが例外として同じ変数を作ってもエラーが起きない場合があります。

あなたはif文やfor文などの構文を多用していますよね。とても便利なものですが、実はif文やfor文の中と外で同じ変数を別々に扱えること、知っていましたか？

let one = 1;
if(one >= 1){
let one = 2;
console.log(one); // 2
if(one >= 1){ console.log(one); } // 2
}
if(one >= 1){
console.log(one); // 1
if(one >= 1){ console.log(one); } // 1
}
console.log(one); // 1

上記のコードでは変数oneをletとして定義する処理を2回行っています。そのため「このコードはエラーが出るんだな」と思ってしまいますよね。

ところが実行してみるとエラーが起きずに通りました。さらに、場所によって表示される数字が違うのに気付いたでしょうか？

if(one >= 1){
let one = 2;
console.log(one); // 2
if(one >= 1){ console.log(one); } // 2
}

2~6行目のコードの部分ですね。この部分を見てみると、if文で定義したoneが表示されています。

このようにif文やfor文の中と外で定義した変数は、同じ名前であっても良いわけなんですね。

if(one >= 1){
console.log(one); // 1
if(one >= 1){ console.log(one); } // 1
}

7~10行目では1と表示されています。上の部分ではif文の中では変数を作っていないので、1行目で作成したoneが引き継がれているわけなんですね。

図で簡単に表すと以下のようになります。

エラーを防ぐために便利なletですが、例外として同じ名前でも全く違う変数となる場合があるのを覚えておきましょう。

注意点2：基本的にconstを使った方が良い

実はletも非推奨とされているのは知っていましたか？

letはvarと比べても便利なため、letを使うことを推奨されています。

しかしletでも値を変更できてしまうので、完全に想定外のエラーを防げません。そう考えたとき、「変数をつくるならすべてconstを使った方が良いんじゃないか？」と思いませんか？

constは一度定義すると、後から変数を変更できないものでした。そのため、後から値が変わったことによるエラーを防げるconstを使うのがよさそうですね。

例えば使用例1で使用したコードでは

let list = [2,4,6,8,10,12];

のように配列を定義していました。この変数は一度も値を変更はしていませんでしたね。

そのためこのような後から変更しないとわかっている変数にはconstを使うといいでしょう。

注意点3：for文やif文でもletは避けた方が良い

for文は繰り返し処理をするときに変数を定義していましたが、この変数もletで定義するのはあまり好ましくないんですね。

ではどうしたらいいのでしょうか？使用例1で紹介した、平均値を求めるサンプルコードを例に挙げてみましょう。

const list = [2,4,6,8,10,12];
const avg = list.reduce( function(sum, value){
return sum + value;
},0);
console.log(avg/list.length);

// 実行結果
7

実行すると使用例1と同じ値が出力されましたね。

よく見ると、letで定義された変数は一つもありません。定義された変数はすべてconstで定義されています。

またfor文を使っていた部分は、reduceを使うことで変数定義をせずに値の合計値を求められていますね。

このようなコードが書けると想定外のエラーもほとんど出なくなり、より効率的にコードが変えるようになりますよ。

JavaScript letを学習・勉強する方法

「なるほど、letはこういう使い方ができるんだな」と実感してもらえたでしょうか？

ですが、読んだだけだとすぐに使い方を忘れてしまいます。そのためしっかりと学習してletを定着しましょう。

letをマスターできるようになる学習方法は次の2つが挙げられます。

• 本で学習・勉強する
• サイトで学習・勉強する

それぞれ学習するときのポイントを交えながら解説していきますね。

本で学習・勉強する

まずは本で学習する方法です。JavaScriptの参考書なら、letの詳しい解説やvarやconstについても触れています。

JavaScriptを学習する人にはとてもおすすめな学習方法ですね。

学習するときのポイントは、手助けとなる人を見つけること。参考書の通りにコードを書いてもうまく実行できなくて「なんでできないんだろう…」と疑問に思ってしまうときがあります。

どうしてもわからなくて時間がかかってしまうときは、手助けとなる人に教えてもらうことですぐに解決できますよ。

おすすめの参考書は以下の記事で紹介しています。もし「どんな参考書を購入したらいいんだろう…」と悩んでいる人がいたら、ぜひ参考にしてみてください。

→ 【2021年最新】Javascriptの学習本・参考書おすすめ13選！初心者から経験者まで

サイトで学習・勉強する

「本だとお金がかかるから戸惑うな…」と感じるあなたはサイトで調べて学習しましょう。

現在ネットでもletの使い方などいろいろな情報があふれているので、ネットでも独学は可能です。

中でも特におすすめする学習サイトは以下の3つ。

• はじめてのJavaScript – ドットインストール
• マンガで分かるJavaScriptプログラミング講座
• 【初心者から創れる人へ】ProgateのHTML&CSSコースをやってみた！ – TechAcademy

上記のサイトは環境構築からJavaScriptのさまざまな機能を学べます。すべてが無料で学習できるため、お金がかからずに学べるのは魅力的ですね。

また「配列の値をすべて足していく方法はどうすればいいんだろう？」とわからないことがありますよね。

こういった悩みも、ネットで検索することで具体的なサンプルコードをすぐに見つけられるはいいですね。

まとめ

今回はJavaScript letについて解説しました。

Letはvarの脆弱性をカバーしてくれる便利なものですが、よりエラーを防ぎたいならletを使うのはおすすめしません。

代わりにconstを使う、変数定義を使わないようにするなど、工夫すればletを使わないコードを作れますからね。

ではletを使ってはいけないのかと言われると、絶対にそうとは言い切れません。

Letを使わないようにした結果、かえってコードがわかりにくくなる場合もあります。また会社によっては見やすくなるならletを使った方が良いというルールもあるかもしれません。

その場の状況に応じてletやconstを使いましょう。