こんにちは。フロントエンドの現場で長年コードと向き合っていると、ふと「これって、もっと効率的な書き方があるんじゃないか？」と立ち止まる瞬間がありますよね。
特に「文字列の連結」は、プログラミングを始めたばかりの人が必ず一度は通り、そして意外と奥が深い場所です。今日は、ただ動けばいいコードから、「メモリに優しく、速いコード」を書くための視点を、身近な例えを交えてお話ししますね。
—
1. 文字列連結は「お買い物の持ち運び」に似ている
まず、なぜ文字列連結が大事なのか。想像してみてください。あなたはスーパーでたくさん買い物をしています。
- `+` 演算子: レジ袋の持ち手に、次から次へと別の袋を縛り付けていくようなもの。袋が増えるたびに、全体を繋ぎ直す作業が発生します。
- テンプレートリテラル: 最初から「全部まとめて入る特大の紙袋」を用意して、そこにポンポン詰めるイメージ。スマートですよね。
- Array.join(): 商品を一度カゴに全部入れてから、最後に一気に段ボールへパッキングするような、非常に効率的な手法です。
JavaScriptの世界でも、「メモリ（記憶領域）」という名のカバンの使い方が、パフォーマンスを左右するんです。
—
2. 初心者から一歩先へ：書き方の比較
① `+` 演算子（一番手軽だけど、要注意！）
「`str = str + ‘追加’`」のように書く方法です。単純ですが、古いブラウザや低スペックな環境で「何万回も」繰り返すと、メモリの確保とコピーが何度も発生し、動作が重くなる原因になります。
let result = “”;
// 短い文字列を数回足す程度ならこれでもOKです。
// でも、ループの中で使うときは少し気をつけましょう。
result += “こんにちは、”;
result += “世界！”;
console.log(result); // 「こんにちは、世界！」
② テンプレートリテラル（今どきの定番！）
バッククォート（“ ` “）で囲む書き方です。直感的で読みやすく、変数を埋め込むのも楽ちん。モダンな開発ではこれが基本です。
const name = “エンジニア”;
// 変数を ${} で囲むだけで、読みやすさが段違いですよね。
const greeting = `ようこそ、${name}さん！`;
console.log(greeting);
③ Array.join()（大量の連結ならこれ！）
数千、数万といった膨大な文字列をくっつけるときは、配列に一度溜め込んでから `join(”)` するのが、実はメモリ効率最強のテクニックなんです。
const parts = [];
for (let i = 0; i < 1000; i++) {
// 配列に放り込んでいくだけ。メモリへの負荷が最小限です。
parts.push("データ" + i);
}
// 最後に一気に繋げる！これが一番の近道です。
const finalResult = parts.join("");
---
3. なぜ「Array.join()」が速いのか？
少しだけ裏側の話をしますね。JavaScriptの文字列は「不変（イミュータブル）」という性質を持っています。一度作られた文字列は、後から書き換えることができません。
つまり、`+` を使うたびに、「古い文字列をコピーして、新しい文字列を作って、古いものを捨てる」という作業を裏で必死にやっているんです。
一方で `Array.join()` は、最後に一回だけ「全体の長さ」を計算して、そこにドンと文字列を書き込むので、無駄なコピーが発生しません。「荷物を一個ずつ運ぶ」か「トラックで一気に運ぶか」の違いだと思えば分かりやすいはずです。
—
4. チーフアーキテクトからのアドバイス
「じゃあ、明日から全部 `Array.join()` に変えるべき？」と聞かれたら、僕はこう答えます。
「まずは可読性を大切にしてください」と。
1. 普段のUI開発: テンプレートリテラルで十分です。読みやすさが正義です。
2. データ処理や大規模な描画: ここで初めて `Array.join()` の出番です。
3. 一番大切なこと: 「自分の書いているコードが、どのくらいの負荷をかけているか」を想像するクセをつけること。
最初は難しく感じるかもしれませんが、大丈夫です。こうして「なぜ？」を考えながらコードを書いている時点で、あなたはもう立派なエンジニアの階段を登っています。
もし迷ったり、うまくいかないことがあっても、それはあなたのせいではありません。JavaScriptという言語の面白い「癖」を知るチャンスが増えただけです。ぜひ、今日紹介した方法をエディタにコピペして、自分の手で動かしてみてください。
あなたのコードが、より軽やかに、そして美しく動くことを心から応援しています！
コメント