やあ。今日もコードと格闘しているかな？
フロントエンドの世界は、ReactだのNext.jsだのとフレームワークの流行り廃りが激しいけれど、結局のところ、僕たちが触っているのは「JavaScript」という言語だ。ブラウザという名のブラックボックスの中で、この言語がどう動いているのか。ここを理解しているかどうかで、パフォーマンスのボトルネックを特定する嗅覚が全く変わってくる。
今日は、誰もが毎日使っている「文字列」の、少し深淵な話。文字列インターニング（String Interning）について紐解いていこう。
—
なぜ「同じ文字列」はメモリを占有しないのか？
例えば、君がコードの中で `const a = “hello”;` と `const b = “hello”;` と書いたとする。直感的には、メモリ上に “hello” というデータが2つ生成されそうに思うよね？
でも、現代のJavaScriptエンジン（V8など）はそんなに無駄遣いはしない。同じ内容を持つ文字列リテラルは、内部的にメモリ上の単一のインスタンスを指し示すように最適化される。これが文字列インターニングだ。
エンジンが裏側で行っていること
ブラウザのエンジンは、コードを解析する際、文字列リテラルを「シンボルテーブル」のような場所に登録する。次に同じ文字列が出てきたとき、わざわざ新しいメモリ領域を確保するのではなく、「以前登録したあの文字列を参照せよ」とポインタを向けるわけだ。
これにより、メモリ消費が抑えられるし、文字列の比較処理（`===`）も、中身を一文字ずつ比較するコストを払わず、メモリ上のアドレス比較だけで済む場合がある。……そう、爆速なんだ。
—
現場で気をつけたい「インターニングが効かない」ケース
ここからが実務の話だ。「リテラル」ならエンジンが気を使ってくれるけれど、動的に生成された文字列にはこの魔法はかからない。
// これはインターニングの対象になりやすい
const staticStr1 = “hello”;
const staticStr2 = “hello”;
console.log(staticStr1 === staticStr2); // true (メモリ上の同一参照)
// しかし、動的に生成された文字列は別物扱いされることが多い
const dynamicStr1 = “he” + “llo”;
const dynamicStr2 = “hello”;
// 見た目は同じでも、メモリの場所が違う可能性がある
console.log(dynamicStr1 === dynamicStr2); // true (値は等しいが、参照としては別モノ)
この「値は同じだが参照は別」という挙動は、大規模なデータセットを扱う際に意外な落とし穴になる。特に、膨大なIDやステータス文字列を扱うアプリケーションでは、無意識に生成された文字列がヒープメモリを圧迫し、ガベージコレクション（GC）の回数を増やしてUIのチラつきを引き起こすことがあるんだ。
—
実践：文字列を最適化するためのテクニック
「じゃあ、動的に作った文字列をインターニングさせたいときはどうするの？」と聞きたくなるよね。そんな時に使える、現場で使える小技を伝授しよう。
1. `String.prototype.replace` で綺麗に整える
APIレスポンスなどで汚れた文字列を受け取ったら、テンプレートリテラルで結合する前に一度正規化（Normalization）して、定数プールに再利用可能な形で乗せる意識を持つといい。
// APIから来た「微妙に違うかもしれない」文字列を正規化して固定値化する
function normalizeStatus(rawStatus) {
// replaceと正規表現を使って、意図しないホワイトスペースや改行を除去
const clean = rawStatus.replace(/\s+/g, ”).toLowerCase();
// 可能な限り定数として扱うことで、エンジンの最適化を助ける
const STATUS_MAP = {
‘active’: ‘active’,
‘pending’: ‘pending’
};
return STATUS_MAP[clean] || ‘unknown’;
}
2. メモリ効率を意識した文字列操作
もし君が、数万件のデータを処理するフロントエンドのデータグリッドを作っているなら、文字列の結合（`+`）よりも、テンプレートリテラルを使う癖をつけた方がいい。近年のエンジンは、テンプレートリテラルの評価に対して非常に強力な最適化をかけている。
// 悪い例：ループ内で頻繁に新しい文字列オブジェクトを生成
let result = “”;
for (let i = 0; i < 1000; i++) {
result += "item-" + i; // 毎回新しいメモリが確保され、GCが走る
}
// 良い例：配列に溜め込んでからjoinする
// これならメモリの断片化を最小限に抑えられる
const items = [];
for (let i = 0; i < 1000; i++) {
items.push(`item-${i}`);
}
const resultOptimized = items.join('');
---
アーキテクトからのアドバイス
文字列インターニングは、僕たちが意識しなくても言語仕様が守ってくれる「甘美な魔法」だ。しかし、それに甘えすぎると、メモリの壁にぶち当たった時に「なぜ？」と頭を抱えることになる。
- 定数は極力リテラルで書く: 何でもかんでも `const str = “a” + “b”` とせず、”ab” と書けるなら書く。
- 動的生成のコストを想像する: 大規模なループ内での文字列操作は、メモリの墓場になる可能性がある。
- ブラウザのプロファイラを見る: Chrome DevToolsの「Memory」タブを見て、ヒープスナップショットを撮ってみよう。同じような文字列が大量に浮いていたら、それが君のコードの改善点だ。
JavaScriptは、書くのは簡単だけど、究めるのは非常に奥深い。こうした「エンジンの裏側」を想像しながらコードを書く癖がつくと、君の書くコードは驚くほど堅牢で速くなるはずだ。
また何か疑問があれば、いつでも聞いてくれ。現場の最前線で待っているよ。
コメント