こんにちは！フロントエンドからNode.jsの深層まで、日夜JavaScriptと向き合っているシニアアーキテクトです。
今回は、JavaScriptの変数宣言（`let`と`const`）と、V8エンジンが裏側で行っている「隠しクラス（Hidden Classes）」、そして「型が変わる再代入が最適化に与える影響」についてお話しします。
「動的型付け言語だから、変数にどんな値を入れても自由なんでしょ？」
そう思っていませんか？ 確かに文法エラーにはなりませんが、それをやってしまうと、V8エンジンが涙を流しながら超高速化の魔法を解いてしまうんです。
ここをクリアすれば、JavaScriptのランタイムの動きが手に取るようにわかるようになりますよ。一緒にバッチリマスターしていきましょう！
—
1. 変数宣言の基本：なぜ `let` と `const` を使い分けるのか
まずは基本のおさらいから。現代のJavaScriptでは、古い `var` は封印し、主に `const` と `let` を使いますよね。
- `const`: 再代入不可（イミュータブル）。宣言と同時に初期化が必要。
- `let`: 再代入可能（ミュータブル）。後から値を書き換えられる。
コードで書くとこうなります。
// const は再代入できません
const appName = “SuperApp”;
// appName = “NewApp”; // ❌ TypeError: Assignment to constant variable.
// let は再代入できます
let userCount = 10;
userCount = 11; // ⭕️ 問題なく再代入できます
「`let` は便利だな、何にでも使っちゃおう！」……ちょっと待ってください。その「何にでも `let` を使って、しかも全然違う型のデータを代入する」という癖が、実はJavaScriptの実行スピードをガクッと落とす原因になるんです。
それを理解するために、V8エンジンが裏側でやっている秘密を覗いてみましょう。
—
2. V8エンジンの裏側：隠しクラス（Hidden Classes）とは？
JavaScriptは「動的型付け言語」です。C++やJavaのように「この変数は整数型だ」と最初に宣言する必要がありません。開発者にとっては楽ちんですが、コンピュータ（CPU）にとっては「次にどんなデータが来るかわからないから、メモリのどこを探せばいいかわからない」という悪夢です。
そこで、GoogleのV8エンジンは、「隠しクラス（Hidden Classes / Shapes）」という仕組みを使って、裏側でこっそり「擬似的な型」を作り、オブジェクトのプロパティの位置を最適化しています。
イメージ図で見てみましょう。
[初期状態]
let player = {};
player.x = 10; –> V8はここで「隠しクラス A」を生成 (xのメモリ位置を記憶)
[同じ構造で値を代入し続けた場合]
player.x = 20; –> 「隠しクラス A」を維持！超高速にアクセス可能！ 🚀
V8は、「同じプロパティ構造を持つオブジェクト」を同じ隠しクラスで管理することで、C++のような高速なメモリ直接アクセスを実現しています。ここまでは完璧です。
—
3. 悲劇：`let` の再代入で型が変わるとどうなるか？
問題は、`let` を使って「同じ変数に、全く違う型のデータを再代入し続ける」ときです。
例えば、こんなコードを書いてしまったとしましょう。
// 最初は数値（Number）として宣言
let score = 100;
// 処理の途中で、なぜか文字列（String）を再代入してしまう！
score = “100点”;
// さらにオブジェクトを代入してしまう！
score = { points: 100 };
初学者のうちは「動くからいいか」と思いがちですが、V8エンジンの脳内はパニックです。
V8の心の声：「うわっ！さっきまで数値だと思って最適化（Hidden Class A）してたのに、突然文字列が来たぞ！？ おい、最適化をキャンセルして、汎用的な辞書引きモード（スローモード）に切り替えるしかない……！」
これが、いわゆる 「型推論の放棄（Deoptimization）」 です。
一度この状態に落ち込むと、V8エンジンはメモリ上の効率的な場所を見失い、プロパティを探すために遅い検索処理を行うようになります。数万回、数百万回とループする処理の中でこれをやると、アプリケーション全体のパフォーマンスが目に見えて低下します。
—
4. 陥りがちなアンチパターンと、正しいアプローチ
よくあるのが、変数を使い回すために `let` で宣言し、関数の中で役割や型をコロコロ変えてしまうケースです。
❌ 悪い例：変数の使い回しと型の混在
function processUserData(input) {
let data = input; // 入力値（オブジェクトかもしれない）
// 条件によって data に全く違う型を入れる
if (typeof data === “string”) {
data = { name: data, active: true }; // オブジェクトに変化
} else {
data = 0; // 数値に変化
}
return data;
}
このコードは、`data` という1つの変数の型が実行のたびに揺らぐため、V8エンジンは最適化の予測を立てられなくなります。
⭕️ 良い例：役割ごとに変数（できれば const）を分ける
function processUserData(input) {
// 入力値の型をそのまま変えない。必要なら新しい変数を作る
if (typeof input === “string”) {
const userData = { name: input, active: true };
return userData;
}
const defaultData = 0;
return defaultData;
}
このように、「1つの変数には、基本的に1つの型（および構造）のデータしか入れない」、あるいは「可能であれば `const` を使って再代入自体を禁止する」ことが、V8エンジンを味方につける最大のコツです。
—
まとめ：今日の知見のブラッシュアップ
ここまでの内容をまとめます。
1. `let` は便利だが、再代入による「型の変更」はV8エンジンの最適化（隠しクラス）を破壊する。
2. 型が頻繁に変わると、V8は高速化を諦め、パフォーマンスが低下する。
3. 変数のスコープを狭く保ち、`const` をファーストチョイスとして使い、変数ごとの役割と型を明確に固定する。
「動くコード」を書くだけなら誰でもできます。しかし、ランタイム（V8）の挙動まで意識したコードを書けるようになると、あなたの書くJavaScriptは見違えるほど軽快で美しいものになりますよ。
ここをクリアしたあなたなら、もうJavaScriptの変数とスコープの基礎はバッチリマスターしています！自信を持って次のステップへ進んでくださいね。