あなたは普段変数を定義する際に、constとletのどちらを使っているでしょうか?(varもありますね!)
変数宣言はプログラミングを始めて、最初に習う項目でもあるので、適当に宣言してしまいがちですが、実はconstとletには明確な違いがあります。
今回は、constとletの違いについて、ひな姉が解説してくれるそうです!
- 天野 陽菜(あまの ひな):おしゃれな自社サービス開発企業に勤めるフロントエンドエンジニア。明るくフレンドリーで、後輩の育成にも積極的。実は元ゲーマーで方向音痴。
- 後輩ちゃん:JavaScriptを学び始めた初心者。
もう一つの変数宣言 const


こんにちはー!いいところに目をつけたね!
const
は、今のJavaScriptでは let
と同じくらい、いえ、もしかしたらそれ以上に重要な変数宣言の方法なんだ。今日は、この const
について、let
との違いや使い分けをしっかりマスターしていこう!)
はい、お願いします!
const
っていう名前も気になります。
const は英語の constant(コンスタント)、つまり『定数』っていう意味の言葉から来てるんだ。『変わらない数』っていう意味だね。その名前の通り、const にはとっても大事なルールがあるんだよ。
解説
Javascriptでは、変数を定義する際にconstを使って宣言します。
使い方はconst 変数名となります。
const
の一番大事なルール:再代入はできません!

const
の一番大事なルール、それは一度値を入れたら、後から別の値を入れ直すこと(再代入)ができないっていうことなんだ。let
と比べてみると、その違いがよく分かるよ。//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で宣言した変数には再代入できない

わ、本当だ!
const
で宣言した taxRate
に新しい値を入れようとしたら、エラーになっちゃうんですね。
そうなんだ。
const
は『この変数に入っている値は、これからずっと変わりません!』っていう、プログラム上の強い意志表示みたいなものなんだよ。なぜ const
を使うの?「変わらない」ことのメリット

でも、値を変えられないのって、ちょっと不便じゃないですか?どうしてわざわざ
const
を使うんですか?
良い質問だね。一見不便そうに見えるけど、実は『変わらない』ことには大きなメリットがあるんだ。それは、プログラムが安全になるってこと。

安全に…ですか?

うん。例えば、プログラムがすごく長くなったり、たくさんの人が関わるプロジェクトだったりすると、大事な値をうっかり別の場所で書き換えちゃうっていうミスが起こりやすくなるんだ。でも
const
で宣言しておけば、もし間違って値を変更しようとしても、さっきみたいにJavaScriptが『それはできませんよ!』ってエラーを出して教えてくれる。いわば、大事な設定値を守るためのセーフティロックみたいな役割を果たしてくれるんだよ。
なるほど!ミスを未然に防いでくれるんですね。それに、他の人がコードを読んだ時も、『あ、この変数は変わらない値なんだな』ってすぐに分かって親切ですね。

その通り!コードの可読性もすごく上がるんだ。
解説
letと違い、constで定義した変数には、値を再代入することができません。
「なんぜわざわざ不便なconstを使うんだろう」と思う方もいると思いますが、値が変更されない変数をconstで定義しておくことで、後から間違えて値を変更してしまうミスがなくなります。
またスコープが関わってくると、変数の定義関係がややこしくなるときもあるので、そういった時にconstを使っておくと、変数の内容が変わってしまうバグを防ぐことができます。
ですので、変数を定義する時には基本constを使うようにすることをお勧めします。
最重要ポイント! const
で宣言した配列やオブジェクトのナゾ

さて、ここからが
const
をマスターするための最重要ポイントだよ。実は、const
で宣言した配列やオブジェクトは、その中身を変更できちゃうんだ。
ええっ!? 再代入できないんじゃないんですか? なんだか混乱してきました…。

ふふ、ここは誰もが一度は混乱するポイントだから大丈夫だよ。分かりやすく例えるね。
const
は『家の住所』を固定するようなものだと考えてみて。const myHome = {
address: "東京都〇〇区",
rooms:4
};

この
const
は、『myHome
という名前が指し示す家の住所は、絶対に変えません!』っていう宣言なんだ。でも、住所を変えずに、家の中の家具を入れ替えたり、部屋の壁紙を変えたりすることは自由にできるよね?
あ、なるほど!家の場所(住所)は同じだけど、中身(家具)は変えられる…。

そういうこと!コードで見てみよう。
//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 = ["メロン","いちご"]//エラー!

本当だ!オブジェクトのプロパティや配列の要素は変更できるのに、変数そのものに新しいのを入れようとするとエラーになるんですね。住所と家具の例えで、すごくよく分かりました!

配列の操作方法については、別の記事でも紹介しているから、合わせて確認してみてね!

はい!わかりました!
解説
constで定義した変数を再定義することはできませんが、配列やオブジェクトの中身を変更することは可能です。
意外と勘違いしてしまいがちなので、「配列とオブジェクトの中身を変更することはできるんだな〜」と覚えておいてください。
let
と const
、どう使い分ける?ひな姉のおすすめスタイル

const
のことはよく分かったんですけど、じゃあ実際にコードを書く時、let
と const
はどう使い分ければいいんでしょうか?
いい質問だね。ひな姉のおすすめ、というか、今の多くの現場で推奨されているスタイルは、**『まず全部
const
で宣言してみる』**っていうやり方だよ。
え、全部ですか?

うん。まず
const
を基本にして、もし後から『あ、この変数の値は途中で変える必要があった!』って気づいた時に、初めて let
に変更するんだ。こうすることで、意図せず値を変更してしまう可能性を最小限にできるからね。
なるほど!『原則const、必要ならlet』って感じですね。じゃあ、
let
を使うのはどういう時ですか?
例えば、
for
ループのカウンター変数 i
みたいに、ループの度に値が変わるものとか、計算の途中結果を何度も更新していくような変数には let
を使うよ。それ以外、ほとんどの変数は const
で宣言できることが多いんだ。まとめ:const
と仲良くなろう!

今日のポイントをまとめると…
const
は、再代入ができない変数を作るための命令だよ。- 意図しない値の変更を防ぎ、コードを安全で読みやすくするメリットがある。
- 超重要:
const
で宣言した配列やオブジェクトは、その中身(要素やプロパティ)は変更できる! - 使い分けに迷ったら、まず
const
で宣言するのがおすすめ!
どうだったかな? const
と仲良くなれそう?

はい!特にオブジェクトの中身が変更できる理由が分かって、スッキリしました。これからは、まず
const
で書くようにしてみます!ありがとうございました!
うん、その調子!この習慣が身につくと、君の書くコードがぐっとプロフェッショナルになるはずだよ。頑張ってね!それじゃ、また次回!
let
を使ってきましたけど、他の人のコードを見ているとconst
っていうのもよく見かけるんです。これって、let
と何が違うんですか?