＜目次＞
(１) JavaScriptのletとは？変数宣言で使われるletの意味やサンプルプログラム
(１-１) letとは？
(１-２) letのサンプルプログラム
(１-３) 参考：スコープの種類
(１) JavaScriptのletとは？変数宣言で使われるletの意味やサンプルプログラム
(１-１) letとは？
JavaScriptで「ブロックスコープ」内で有効なのローカル変数を定義する際に変数の前につけるキーワードです。
変数の定義だと「var」が馴染み深いと思いますが、決定的な違いは「var」は「ファンクションスコープ」なのに対して、「let」は「ブロックスコープ」内でのみ有効なので「if文」、「switch文」、「forループ」、「while文」などの内部でのみ参照・更新可能となります。
（参考）スコープの種類については「(１-３) 参考：スコープの種類」で説明しています。
(１-２) letのサンプルプログラム
実際に簡単なプログラムを使って動作確認してみます。こちらはX=のテキストボックスに数字を入れてボタンを押すと、その二乗（X*X）を計算して表示するプログラムです。
if文の中で、変数x1を「var」＆x2を「let」で宣言した際に、それぞれif文の外でも結果を表示できるか？をチェックしています。
（図１３１）「var x1」は正常に処理されるが、「let x2」はエラーになる。
（操作動画）
そして想定通り、if文の外でx2を参照しようとするとエラーになっています。
（表）
| x1 – ブロックスコープ内 | OK（参照可能） |
| x2 – ブロックスコープ内 | OK（参照可能） |
| x1 – ファンクションスコープ内 | OK（参照可能） |
| x2 – ファンクションスコープ内 | NG（参照不可能） |
function Multiply(){
let x0 = $('#xnum01').val();
if(x0 >= 0){
//# Xを２乗する
var x1 = Math.pow( $('#xnum01').val() , 2 );
let x2 = Math.pow( $('#xnum01').val() , 2 );
//# var＆ブロック内 → OK
console.log("x1_block_scope="+x1)
$('#result1_blscope').text(x1);
//# let＆ブロック内 → OK
console.log("x2_block_scope="+x2)
$('#result2_blscope').text(x2);
}
//# var＆ファンクション内 → OK
console.log("x1_function_scope="+x1)
$('#result1_fnscope').text(x1);
//# let＆ファンクション内 → NG
console.log("x2_function_scope="+x2)
$('#result2_fnscope').text(x2);
}
(１-３) 参考：スコープの種類
・①グローバルスコープ
ファンクションの外で定義された変数は「グローバルスコープ」になります。
var myName = "Rainbow";
function testFunc(){
//# 変数myNameはtestFunc内で使用可能
}
//# 変数myNameはtestFunc外でも使用可能
・②ファンクションスコープ
ファンクション内で定義された変数は「ファンクションスコープ」になります。
function testFunc(){
var myName = "Rainbow";
//# 変数myNameはtestFunc内で使用可能
}
//# 変数myNameはtestFunc外では使用不可
・③ブロックスコープ
通常のvarで定義した変数は「ブロックスコープ」を取り得ないが、letだとそれが可能です。
{
var x = 1;
let y = 2;
}
//# xはここからアクセス出来る
//# yはここからアクセス出来ない
（表）
| x1 – ブロックスコープ内 | OK（参照可能） |
| x2 – ブロックスコープ内 | OK（参照可能） |
| x1 – ファンクションスコープ内 | OK（参照可能） |
| x2 – ファンクションスコープ内 | NG（参照不可能） |
