初心者でもクリックしたくなる！constとvarの違いを徹底解説

---

【クリックされる理由】constとvarの違いを徹底解説｜初心者にも優しいJavaScript入門

この解説は中学生にもわかるように丁寧に進めます。まず結論から言うと const は変数の参照先を固定する機能があり、var は古い書き方で使われることが多く、スコープや代入の挙動が異なります。

この差を理解するだけでコードの見通しが良くなり、バグを減らすことができます。

本文では用語の意味を丁寧に解説し、実務での使い分けのコツを具体的な例を交えて紹介します。

まずは結論として、ブロックの範囲、再代入の可否、ホイスティングの三つが大きなポイントです。

このポイントを押さえるだけで理解が深まり、コードを読んだり書いたりする時の迷いが減ります。

では具体的な違いを一つずつ掘り下げていきます。

基本ポイントの整理

var は関数スコープで有効な宣言です。ブロック { } の中に書いても外の影響を及ぼすことがあります。再代入は自由で、同じスコープ内で再宣言も可能です。

この挙動は思わぬバグの原因になりやすいので、特に大きなコードを書くときには注意が必要です。

また、ホイスティングという現象があり、宣言自体はコードの上部へ持ち上がりますが、初期値は代入されていない状態で undefined になります。

つまり、var x = 2; の宣言前に x にアクセスすると undefined が返ってきます。これが原因で「値がないのになぜ動くの？」と混乱する場面が出てきます。

このような性質はプログラムの流れを追いづらくするので、現代のコードではあまり推奨されません。

実務では古いコードを引き継ぐ際に var が残っていることがありますが、可能な限り const へ書き換えるのが安全です。

変数の性質とスコープの理解

一方 const はブロック（if/for などの { } の内部）で有効な宣言です。宣言時に必ず初期化が必要であり、再代入不可、再宣言不可、ブロックスコープという性質を持ちます。これをうまく使えば、意図しない値の変更を防げてコードの安定性が上がります。

ただし参照先の「中身」を変えることは可能です。例えば const アサインされた配列やオブジェクトの要素を変更することはできますが、変数そのものを別の値に置き換えることはできません。

この点を正しく理解していないと、せっかくの const が思ったように動かず混乱を招くことがあります。

例として e>const arr = [1,2,3]; と宣言した後 arr.push(4) は許可されますが、arr = [4,5,6] のような再代入は禁止です。

この挙動はボタンのON/OFFのように「変わらない前提」を作るのに役立ちます。

また TDZ（Temporal Dead Zone、時相デッドゾーン）と呼ばれる現象があり、<code>const や let は宣言前に参照するとエラーになります。

この特徴を知っておけば、コードの実行順序を誤解することが減ります。

総じて const は「後から勝手に値を変えられないものを作りたいとき」に適しています。

一方 var は「過去のコードをそのまま動かすとき」や「変数の再宣言・再代入を受け入れる設計」が必要な場面で使われることがありましたが、現代的な設計では避けられる傾向にあります。

このように使い分けるだけで、コードの可読性と保守性が大きく向上します。

実務の使い分けと注意点

実務ではまず const をデフォルトにする という考え方が基本です。理由はシンプルで、値を変更しようとしたときにエラーが出てくれるため、バグを早期に発見しやすいからです。

ただしどうしても再代入が必要な場合には let を使います。ここでのポイントは let もブロックスコープ であり、var のようなグローバルな影響は避けられる点です。

それでも、var の名残を残さない ようにすることが重要です。コードベース全体の整合性を保つため、リファクタリングの際には var から let/const への移行を検討しましょう。

また、宣言の順序にも注意が必要です。TDZ の影響を受ける位置で参照を行うとエラーになるため、変数を使う直前に宣言を置くことが安全です。

もう一つの実務ポイントとして、コメントで目的を明示 することが挙げられます。変数名だけでは役割が分かりづらい場合がありますが、宣言の直後に短いコメントを入れることで後から読んだ人の理解が早まります。

このような小さな工夫が、長期的なコード品質に大きく影響します。

特性	var	const
スコープ	関数スコープ	ブロックスコープ
再代入	可能	不可
再宣言	可能	不可
初期化	宣言と同時に初期化は任意	必須
ホイスティング	宣言は上へ持ち上がるが、未初期化の状態	宣言は上へ持ち上がるが TDZ がある

まとめとポイント

要点を短くまとめると、const は再代入不可のブロックスコープ変数、var は古いスタイルの関数スコープ変数、TDZ やホイスティングの挙動が異なる、そして実務では デフォルトは const、再代入が必要なら let を使うという点です。

この3点を意識するだけで、コードの安全性と可読性が大きく向上します。

常に最新の書き方を意識して、古いコードでも var の使用箇所を探して置換を検討する癖をつけましょう。

これができれば、JavaScript の理解が深まり、より堅牢なプログラムを書けるようになります。

ピックアップ解説

TDZ という言葉を聞くと、最初は『意味がわからない難しい現象』に感じるかもしれません。でも実は雑談感覚で考えると理解しやすい話題です。想像してみてください、あなたが友達とカフェで新しいゲームのルールを決めているとします。ルールを決める前にそのルールが適用される場面を頭の中で思い描く…この“考える順序の中断”こそ TDZ のイメージに近いです。const や let を使うとき、宣言される場所とその時点で使える状態が微妙にずれるとエラーになります。友達と話しているときも、約束を守る前に行動を起こそうとすると失敗しますよね？なので、私たちは先に宣言してから使う、という“順序の約束”を守ることで、TDZ による混乱を未然に防ぐのです。だからこそ、TDZ の理解はコードの安定性につながる大切な知識。私たちはこの現象を友達との会話にたとえると、ルールを確認するまで手を出さない、という“避けるべき早とちり”の実践になるのです。

---