前回はconstで変数を定義する方法をひな姉に解説してもらいました。
今回は、constと似ているけれど少し違う、letについてひな姉が解説してくれるそうです。
- 天野 陽菜（あまの ひな）：おしゃれな自社サービス開発企業に勤めるフロントエンドエンジニア。明るくフレンドリーで、後輩の育成にも積極的。実は元ゲーマーで方向音痴。
- 後輩ちゃん：JavaScriptを学び始めた初心者。
オープニング：let をもっと深く知ろう！
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]ひな姉、こんにちは！この前 const について教わって、変数の宣言は『まず const を使う』のが良いってことがよく分かりました！ そうなると、これまで何気なく使ってきた let は、一体どういう時に使うのがベストなのかなって、改めて気になってきました。[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]こんにちはー！素晴らしい探求心だね！ const を理解した今だからこそ、let の役割や特性がもっと深く見えてくるはずだよ。今日は、let が持つ大事な性質と、どんな場面で活躍するのかを一緒に見ていこうか！[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]はい、よろしくお願いします！ const は『変わらない』がキーワードでしたけど、let はやっぱり『変わる』がキーワードなんですよね？[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]その通り！まずはそこから確認していこう！[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]constについては、↓の記事でひな姉が解説してくれてたんでしたよね！
後で見直してみます！[/voice]
[kanren postid=”1022″]
let の基本ルール（おさらい）：再代入できるのが強み
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]let の一番分かりやすい特徴は、const とは違って、宣言した後から何度でも値を再代入できることだよね。これは、値が変化していく状況を記録するのにとっても便利なんだ。[/voice]
let score = 0;
console.log("最初のスコア:",score); //最初のスコア:0
//ゲームでポイントゲット！
score = score + 10;
console.log("ポイントゲット後:",score); //ポイントゲット後:10
//さらにボーナスポイント！
score = score + 50;
console.log("ボーナスゲット後:", score); //ボーナスゲット後:60[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]こうやって値がどんどん変わっていく変数は、const じゃ宣言できないから let の出番なんですね。[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]その通り！でもね、let の本当のすごさは、ただ『再代入できる』ってだけじゃないんだ。const と共通する、もう一つのすごく大事な性質があるんだよ。[/voice]
constで定義した値には、再代入することができません。
これは、constが変数ではなく定数を定義するための要素だからです。
一方、letで定義した値には再代入をすることができます。
これだけを聞くと「letの方がいいじゃん！」と思うかもしれないのですが、再代入できるということは、後から間違えて値を変更してしまう可能性があるということでもあります。
間違いを防ぐためにも、値を定義する時はできるだけconstで定義することをお勧めします。
最重要ポイント！let のテリトリー「ブロックスコープ」
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_57_27.png” name=”後輩ちゃん” type=”l line”]const と共通する性質…なんですかそれ？[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]それはブロックスコープを持つっていう性質なんだ。[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_38.png” name=”後輩ちゃん” type=”l line”]ブロック…スコープ…？ なんだか難しそうな言葉が出てきましたね。[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]大丈夫、難しくないよ！スコープっていうのは、簡単に言うと『その変数が有効な範囲』、つまり変数の『テリトリー』みたいなものだと思って。そして、ブロックっていうのは、この {}（波括弧）のこと。[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_57_27.png” name=”後輩ちゃん” type=”l line”]if 文とか for 文で使う、あの中括弧のことですか？[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]そうそう！ let や const で宣言された変数は、その {} の中でだけ生きられるんだ。ブロックの外に出ると、その変数はもう存在しないことになるんだよ。コードで見てみようか。[/voice]
let characterName = "ひな";//ブロックの外で宣言
if(true){
let characterSkill = "回復魔法";
console.log(`${characterName}は${characterSkill}が使える！`);//ブロックの中だから両方使える
}
console.log(`${characterName}のスキルは何だっけ？`);
//エラー！ブロックの外からはcharacterSkillにアクセスできない[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]わ、本当だ！ if 文のブロックの外で characterSkill を使おうとしたらエラーになっちゃう！ {} が壁みたいになってるんですね。[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]まさにそんな感じ！この『壁』があるおかげで、ブロックの中でだけ一時的に使いたい変数を、安心して宣言できるんだ。外の世界にある同じ名前の変数とごっちゃになったり、意図せず書き換えちゃったりする心配がないから、プログラムがすごく安全になるんだよ。[/voice]
解説
関数の中や、if文の中({}の中)で定義された値には、{}の外からアクセスすることはできません。
これをスコープと言います。
一見不便な仕様ですが、使い捨ての変数を定義したい時や、外から書き換えてほしくない変数を守るために重要な仕様です。
let はどんな時に使う？具体的な活躍シーン
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]なるほどー！スコープのおかげで安全になるんですね。じゃあ、具体的に let が活躍するのはどういう場面なんですか？[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]いい質問だね！代表的なのは、やっぱりループ処理、特に for 文のカウンター変数だね。[/voice]
for (let i = 0; i < 5; i++){
console.log(`現在のカウント: ${i + 1}`);
}[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]この変数 i は、ループが一周するごとに 0, 1, 2, 3, 4 と値が変わっていく必要があるよね。だから let がピッタリなんだ。そして、ループが終われば変数 i はキレイに消えてくれるから、後腐れがないのも良いところ。[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]確かに！ループが終わった後まで i が残ってると、他の場所でうっかり使っちゃうかもしれませんもんね。
(後腐れ・・・？何が有ったんだ？)[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]その通り！他には、さっきのスコアの例みたいに『ユーザーのアクションや時間の経過で状態が変化していく値』を保持する時にも let が使われるよ。[/voice]
最終確認！const と let の使い分け
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]let の役割がよく分かってきました。使い分けのルールは、やっぱりこの前の通りでいいんですよね？[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]
うん、バッチリだよ！最後にもう一度おさらいしよう。
- 基本は全部
constで宣言する！- 『この値は変わらない』という意思表示になり、コードが安全で読みやすくなる。
- どうしても再代入が必要な場合だけ
letに変更する！- ループのカウンターや、値が変化していく状態を持つ変数などが、その代表例。
このルールを守るだけで、君のコードはぐっとモダンで堅実なものになるはずだよ。
[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]はい！『原則const、必要ならlet』、しっかり覚えました！[/voice]
まとめ：変数の役割を考えて使い分けよう！
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]
今日のポイントをまとめるね！
letは、再代入が可能な変数を宣言するための命令だよ。constと同じくブロックスコープを持っていて、{}の中で宣言された変数は外からアクセスできない。これがコードを安全に保つ秘訣！- ループ処理のカウンターなど、値が変化することが前提の変数に使うのが主な役割。
let と const、それぞれの役割とテリトリー（スコープ）を理解して、上手に使い分けてあげることが、分かりやすくて安全なプログラムへの第一歩だよ。
[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]ひな姉、ありがとうございました！let の良さと、スコープの大事さがすごくよく分かりました。これからはもっと自信を持って let と const を使い分けられそうです！[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]うん、その調子！どんどんコードを書いて、色々な変数を宣言してみてね。困ったらいつでも相談に乗るから！それじゃ、また次回！[/voice]
コメント