あなたは普段変数を定義する際に、constとletのどちらを使っているでしょうか?(varもありますね！)
変数宣言はプログラミングを始めて、最初に習う項目でもあるので、適当に宣言してしまいがちですが、実はconstとletには明確な違いがあります。
今回は、constとletの違いについて、ひな姉が解説してくれるそうです！
- 天野 陽菜（あまの ひな）：おしゃれな自社サービス開発企業に勤めるフロントエンドエンジニア。明るくフレンドリーで、後輩の育成にも積極的。実は元ゲーマーで方向音痴。
- 後輩ちゃん：JavaScriptを学び始めた初心者。
もう一つの変数宣言 const
[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 を使ってきましたけど、他の人のコードを見ていると 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 は、今のJavaScriptでは let と同じくらい、いえ、もしかしたらそれ以上に重要な変数宣言の方法なんだ。今日は、この 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 っていう名前も気になります。[/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 は英語の constant（コンスタント）、つまり『定数』っていう意味の言葉から来てるんだ。『変わらない数』っていう意味だね。その名前の通り、const にはとっても大事なルールがあるんだよ。[/voice]
解説
Javascriptでは、変数を定義する際にconstを使って宣言します。
使い方はconst 変数名となります。
const の一番大事なルール：再代入はできません！
[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]
//letの場合(再代入できる)
let price = 100;
console.log(price); //100
price = 120; //新しい値を再代入できる
console.log(price); //120
//constの場合(再代入できない)
const taxRate = 0.1;
console.log(taxRate); //0.1
taxRate = 0.08; //エラー！constで宣言した変数には再代入できない[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 で宣言した taxRate に新しい値を入れようとしたら、エラーになっちゃうんですね。[/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 は『この変数に入っている値は、これからずっと変わりません！』っていう、プログラム上の強い意志表示みたいなものなんだよ。[/voice]
なぜ const を使うの？「変わらない」ことのメリット
[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_57_27.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”]うん。例えば、プログラムがすごく長くなったり、たくさんの人が関わるプロジェクトだったりすると、大事な値をうっかり別の場所で書き換えちゃうっていうミスが起こりやすくなるんだ。でも const で宣言しておけば、もし間違って値を変更しようとしても、さっきみたいにJavaScriptが『それはできませんよ！』ってエラーを出して教えてくれる。いわば、大事な設定値を守るためのセーフティロックみたいな役割を果たしてくれるんだよ。[/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”]なるほど！ミスを未然に防いでくれるんですね。それに、他の人がコードを読んだ時も、『あ、この変数は変わらない値なんだな』ってすぐに分かって親切ですね。[/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]
解説
letと違い、constで定義した変数には、値を再代入することができません。
「なんぜわざわざ不便なconstを使うんだろう」と思う方もいると思いますが、値が変更されない変数をconstで定義しておくことで、後から間違えて値を変更してしまうミスがなくなります。
またスコープが関わってくると、変数の定義関係がややこしくなるときもあるので、そういった時にconstを使っておくと、変数の内容が変わってしまうバグを防ぐことができます。
ですので、変数を定義する時には基本constを使うようにすることをお勧めします。
最重要ポイント！ const で宣言した配列やオブジェクトのナゾ
[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 をマスターするための最重要ポイントだよ。実は、const で宣言した配列やオブジェクトは、その中身を変更できちゃうんだ。[/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”]ふふ、ここは誰もが一度は混乱するポイントだから大丈夫だよ。分かりやすく例えるね。const は『家の住所』を固定するようなものだと考えてみて。[/voice]
const myHome = {
address: "東京都〇〇区",
rooms:4
};[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 は、『myHome という名前が指し示す家の住所は、絶対に変えません！』っていう宣言なんだ。でも、住所を変えずに、家の中の家具を入れ替えたり、部屋の壁紙を変えたりすることは自由にできるよね？[/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”]あ、なるほど！家の場所（住所）は同じだけど、中身（家具）は変えられる…。[/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]
//constで宣言したオブジェクト
const user = {name: "ひな", age:29};
//中のプロパティを変更するのはOK!
user.age = 30;
console.log(user); //{name: "ひな", age:30}
//constで宣言した配列
const fruits = ["りんご","ばなな"];
//中の要素を追加したり変更したりするのはOK!
furits.push("みかん");
fruits[0] = "すごいりんご";
console.log(fruits);//["すごいりんご","ばなな","みかん"];
//要素そのものに別のオブジェクトや配列を再代入しようとするとエラーになる
//user = {name: "たなか", age:25}//エラー！
//fruits = ["メロン","いちご"]//エラー！[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.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_49_35.png” name=”後輩ちゃん” type=”l line”]はい！わかりました！[/voice]
[kanren postid=”1002″]
解説
constで定義した変数を再定義することはできませんが、配列やオブジェクトの中身を変更することは可能です。
意外と勘違いしてしまいがちなので、「配列とオブジェクトの中身を変更することはできるんだな〜」と覚えておいてください。
let と const、どう使い分ける？ひな姉のおすすめスタイル
[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 のことはよく分かったんですけど、じゃあ実際にコードを書く時、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”]いい質問だね。ひな姉のおすすめ、というか、今の多くの現場で推奨されているスタイルは、**『まず全部 const で宣言してみる』**っていうやり方だよ。[/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”]え、全部ですか？[/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』って感じですね。じゃあ、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 ループのカウンター変数 i みたいに、ループの度に値が変わるものとか、計算の途中結果を何度も更新していくような変数には let を使うよ。それ以外、ほとんどの変数は const で宣言できることが多いんだ。[/voice]
まとめ：const と仲良くなろう！
[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は、再代入ができない変数を作るための命令だよ。- 意図しない値の変更を防ぎ、コードを安全で読みやすくするメリットがある。
- 超重要：
constで宣言した配列やオブジェクトは、その中身（要素やプロパティ）は変更できる！ - 使い分けに迷ったら、まず
constで宣言するのがおすすめ！
どうだったかな？ 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”]はい！特にオブジェクトの中身が変更できる理由が分かって、スッキリしました。これからは、まず 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]
コメント