猫の手ツール

Step 1: Web Basics

01. constとletの違いとは？
モダンJSにおける変数宣言の作法

普段はインフラエンジニアとしてコードよりも設定ファイルを触ることが多い私が、久しぶりにフロントエンド開発に戻ってきて最初に戸惑ったのが「変数の宣言」でした。かつての常識だった var はもはや過去の遺物。現代のスタンダードである const と let の使い分けには、堅牢なシステムを作るための深い意図が隠されていました。

1. なぜ var は使われなくなったのか？

JavaScriptの初期から存在していた var には、プログラミング上の大きな「罠」がいくつかありました。最も深刻だったのは「スコープ（変数の有効範囲）」の曖昧さです。

var は関数スコープであり、意図しない場所で変数が書き換わってしまうリスク（変数の再宣言が可能など）を抱えていました。これに対して、ES6（ES2015）で導入された const と let は「ブロックスコープ」を採用しており、 で囲まれた範囲内でのみ有効です。これにより、コードの予測可能性が飛躍的に向上しました。

2. const と let の使い分けルール

現在のフロントエンド開発において、推奨されるルールは非常にシンプルです。

  • const (Constant): 再代入が不可能な宣言。一度値を決めたら、その名前の変数を書き換えることはできません。
  • let: 再代入が可能な宣言。ループのカウント変数や、状態が変わるフラグなどに使用します。

驚くべきことに、実務で書くコードの 9割以上は const で済みます。「この変数は絶対に変わらない」という宣言は、他の開発者（あるいは未来の自分）に対する「保証」になります。

コードで見る Before / After

【昔の書き方】var による不透明な宣言

var message = "こんにちは";
var message = "さようなら"; // 再宣言できてしまう（バグの元）

if (true) {
  var x = 10;
}
console.log(x); // 10 が出力されてしまう（外に漏れている）

【現在の書き方】const と let による厳格な宣言

const appTitle = "猫の手ツール";
// appTitle = "犬の手"; // ⚠️ Error: Assignment to constant variable.

let counter = 0;
counter += 1; // OK

if (true) {
  const innerVar = "秘密";
}
// console.log(innerVar); // ⚠️ Error: innerVar is not defined（正しくガードされている）

3. インフラエンジニア的な「腑に落ちる」視点

サーバー構築の世界でも、最近は「イミュータブル（不変）インフラストラクチャ」が重視されます。一度プロビジョニングしたサーバーの設定は変更せず、変更が必要なら新しく作り直すという考え方です。

JavaScriptの const もこれに似ています。変数の状態が刻一刻と変化する（ミュータブルな）コードは、いつどこでバグが起きたかの追跡が困難です。しかし、基本を const に制限することで、「この変数が定義された行から下では、この値は絶対にこれだ」という確信を持って読み進めることができます。インフラの設定ファイルを Git で管理する際の「宣言的」な感覚に近いものがあります。

4. 注意点：const は「完全な不変」ではない

初心者がよくハマるポイントが、オブジェクトや配列を const で宣言した時の挙動です。 

const user = { name: "Tanaka" };
user.name = "Sato"; // これはOK！
// user = { name: "Suzuki" }; // これはNG（再代入はできない）

const が禁止しているのはあくまで 「変数そのものへの再代入」 であり、オブジェクトの中身（プロパティ）の変更までは制限しません。ここを勘違いして「const だから中身も変わらないはずだ」と思い込むと、思わぬバグに繋がります。

5. まとめ：実務での運用

「猫の手ツール」の開発では、以下の順序で宣言を検討するようにしています。

  1. まずは const で書く。
  2. どうしても再代入が必要になった時だけ let に変更する。
  3. var は歴史的経緯がない限り絶対に触らない。

一見細かい違いに見えますが、こうした小さな規律の積み重ねが、ブラウザ上で何万回と実行されるツールの安定性を支えています。

© 2026 nekonote-tools.com