letとスコープについて理解しよう

月額定額プランのご案内ログイン

Web開発

letとスコープについて理解しよう

1 min

こんにちは！はむさんです！

今回は、JavaScript の let というキーワードを紹介します。動画で観たい方はこちらのYouTube動画をご覧ください。

文字で追っかけたい方はこちらをお読みください。

では、おもむろにこう書いてみてください。

let value = 1;

let は変数を宣言しますよー！っていう意味のキーワードです。変数とはデータの入れ物です。変数には必ず名前を付けます。今回は value という名前をつけました。そして、letの右側にイコール = というのがありますね。これはデータを代入するという働きがあります。データは今回は数字の1ですね。要するに、ここでは、valueという変数に1を代入しますぜ！という意味になるんですね。この命令によって、valueという箱には1が格納されているという状態を作ることができます。

ここまで大丈夫でしょうか？

diff --git a/script.js b/script.js
index ef779b9..a82fe83 100644
--- a/script.js
+++ b/script.js
@@ -1,3 +1,5 @@
 console.log('JavaScript is running!');

 let value = 1;
+
+console.log(value);

では、次、 console.log を使ってこの箱を表示させてみます。ブラウザには何が表示されるでしょう？

1 が出力されますね。

diff --git a/script.js b/script.js
index a82fe83..928d538 100644
--- a/script.js
+++ b/script.js
@@ -3,3 +3,5 @@ console.log('JavaScript is running!');
 let value = 1;

 console.log(value);
+
+let value = 2;

では、次に、上のlet の宣言文をコピーして、2を入れてみました。すると、どうなるでしょう？

Uncaught SyntaxError: Identifier 'value' has already been declared

エラーが表示されますね。シンタックスエラー、文法エラーです。これは、既にvalueは変数としての宣言を行っているので、もう宣言することはできませんよっていう感じのことを言われています。じゃあ、どうやれば、この箱の中身を入れ替えることができるのでしょうか？

diff --git a/script.js b/script.js
index 928d538..1379a81 100644
--- a/script.js
+++ b/script.js
@@ -4,4 +4,4 @@ let value = 1;

 console.log(value);

-let value = 2;
+value = 2;

こうやります。 letをとっちゃうんです。無事、エラーはなくなりました。ここでは、再度代入しています。これを再代入と言います。こういうことができるのが letの特徴になります。 let の中身を覗いてみましょう。

diff --git a/script.js b/script.js
index 1379a81..91d1d75 100644
--- a/script.js
+++ b/script.js
@@ -2,6 +2,6 @@ console.log('JavaScript is running!');

 let value = 1;

-console.log(value);
-
 value = 2;
+
+console.log(value);

console.log をずらしてあげます。　ブラウザには、 2が表示されました。では、次に、応用編です。 if 文、if 節とかいったりしますが、if を使っていきますね。

diff --git a/script.js b/script.js
index 91d1d75..06562f6 100644
--- a/script.js
+++ b/script.js
@@ -5,3 +5,7 @@ let value = 1;
 value = 2;

 console.log(value);
+
+if (value === 2) {
+  value = 20;
+}

このような if 文というのを書いてみました。これは、 if つまり、もしなになにだったら条件が書けるようになります。 value === 2 という箇所は、もしvalueが2だったらという意味になります。で、その下の、 value = 20 は、 if のカッコに渡している条件が成り立つ場合には、この式を評価してね、という命令になります。この場合成り立つはずなので、 value には 20が代入されるはずです。

diff --git a/script.js b/script.js
index 06562f6..64efc08 100644
--- a/script.js
+++ b/script.js
@@ -4,8 +4,8 @@ let value = 1;

 value = 2;

-console.log(value);
-
 if (value === 2) {
   value = 20;
 }
+
+console.log(value);

20 が出力されました。

diff --git a/script.js b/script.js
index 64efc08..edd4a04 100644
--- a/script.js
+++ b/script.js
@@ -5,7 +5,7 @@ let value = 1;
 value = 2;

 if (value === 2) {
-  value = 20;
+  let value = 0;
 }

 console.log(value);

では、このようにコードを変えてみるとどうなるでしょうか？

なんと、2が表示されましたね。 if の中で value を宣言してみたら、これはさっきは、エラーになったはずなのに、エラーになりませんでした。これは、どういうことなんでしょうか？これは、if の中には、波括弧でブロックされている領域があるんですよね。これをブロックとかスコープっていうんですが、その側のスコープとは、世界が違うんですよね。なので、個々のスコープにおいて let を宣言することができる、というのが決まりなんですね。だから、今回はエラーにならなかったということなんです。 if の外にあるvalueと中にあるvalueは完全に別物になります。

ここの概念は凄く大事なのでしっかりイメージできるようにしておきましょう。

diff --git a/script.js b/script.js
index edd4a04..5fa90db 100644
--- a/script.js
+++ b/script.js
@@ -2,8 +2,6 @@ console.log('JavaScript is running!');

 let value = 1;

-value = 2;
-
 if (value === 2) {
   let value = 0;
 }

次に、 value = 2 を削除します。すると、この場合は1が出力されますね。

diff --git a/script.js b/script.js
index 5fa90db..3419d8d 100644
--- a/script.js
+++ b/script.js
@@ -1,6 +1,6 @@
 console.log('JavaScript is running!');

-let value = 1;
+let value = 2;

 if (value === 2) {
   let value = 0;

こうするとどうなるでしょうか？ value は何が出力されるでしょうか？出力は、2です。

問題ないですね？

diff --git a/script.js b/script.js
index ef3b23d..8bbd3cd 100644
--- a/script.js
+++ b/script.js
@@ -3,7 +3,7 @@ console.log('JavaScript is running!');
 let value = 2;

 if (value === 2) {
-  let value = 20;
+  value = 20;
 }

 console.log(value);

じゃあ、こうするとどうなるでしょう？ 20 が出力されます。

もう慣れましたかね？このスコープの概念。

はい、では、ついでに、 letの話ではないんですが、 if について深堀りします。実は、if の条件が成り立つ時に実行する内容が今みたいに 1 行しか無い場合はこう書けます。

diff --git a/script.js b/script.js
index 8bbd3cd..c2282fd 100644
--- a/script.js
+++ b/script.js
@@ -2,8 +2,6 @@ console.log('JavaScript is running!');

 let value = 2;

-if (value === 2) {
-  value = 20;
-}
+if (value === 2) value = 20;

 console.log(value);

但し、このように書くことはできません。

diff --git a/script.js b/script.js
index c2282fd..52c8b15 100644
--- a/script.js
+++ b/script.js
@@ -2,6 +2,6 @@ console.log('JavaScript is running!');

 let value = 2;

-if (value === 2) value = 20;
+if (value === 2) let value = 20;

 console.log(value);

Uncaught SyntaxError: Lexical declaration cannot appear in a single-statement context

というエラーが表示されましたね。

はい、これは、let の宣言に関しては、ワンラインで書くことができないという、JavaScript の制約に引っかかるからですね。

なので、 let は書けません。

diff --git a/script.js b/script.js
index 52c8b15..ef3b23d 100644
--- a/script.js
+++ b/script.js
@@ -2,6 +2,8 @@ console.log('JavaScript is running!');

 let value = 2;

-if (value === 2) let value = 20;
+if (value === 2) {
+  let value = 20;
+}

 console.log(value);

だから、 letを書きたくなったら、ブロック、つまり、波括弧で囲ってあげるしか無いんです。

如何だったでしょうか。

以上が、let とスコープでした。この let、JavaScript では、よく使いますので、是非、ここで基本をしっかり押さえておきましょう。

Tags

Related Posts