初心者向け：結合（concat / +）の基本
「結合」は、値をつなげて1つにする操作です。JavaScriptでは主に「文字列の結合」と「配列の結合」で使います。文字列は +（またはテンプレートリテラル）、配列は concat（またはスプレッド構文）を覚えると安全に書けます。
文字列の結合（+ とテンプレートリテラル）
console.log("Hello" + " " + "World"); // "Hello World"
const name = "Taro";
console.log("こんにちは、" + name + "さん"); // "こんにちは、Taroさん"
- おすすめ: テンプレートリテラルで読みやすく
const item = "りんご";
const price = 120;
console.log(`商品：${item} 価格：${price}円`);
- 型の自動変換（注意点）:
- 数値 + 文字列 → 文字列結合
console.log(1 + "2"); // "12" - 左右の評価順で結果が変わる
console.log(1 + 2 + "3"); // "33"（先に足して3、その後文字列結合） console.log("1" + 2 + 3); // "123"（最初が文字列なので全部結合）
- 数値 + 文字列 → 文字列結合
- null/undefinedの扱い:
console.log("val=" + null); // "val=null"
console.log("val=" + undefined); // "val=undefined"
- オブジェクト/配列は文字列化される:
console.log("obj=" + { a: 1 }); // "obj=[object Object]"
console.log("arr=" + [1, 2]); // "arr=1,2"
文字列の concat（滅多に使わない）
console.log("Hello".concat(" ", "World")); // "Hello World"
- ポイント:
+やテンプレートリテラルの方が簡潔。concatは文字列結合でも使えるが一般的ではない。
配列の結合（concat とスプレッド）
- 非破壊で結合（元の配列を変えない）:
const a = [1, 2];
const b = [3, 4];
const c = a.concat(b); // [1, 2, 3, 4]
console.log(a); // [1, 2]（元はそのまま）
- スプレッド構文（読みやすい書き方）:
const c2 = [...a, ...b]; // [1, 2, 3, 4]
- 単体の値も結合できる:
const arr = [1, 2].concat(3); // [1, 2, 3]
const arr2 = [...[1, 2], 3]; // [1, 2, 3]
- ネストはそのまま（フラット化はしない）:
[1, 2].concat([3, [4, 5]]); // [1, 2, 3, [4, 5]]
- 破壊的に末尾へ追加したい（元を変えてよい）:
const base = [1, 2];
base.push(...[3, 4]); // base は [1, 2, 3, 4]
よくあるつまずきと注意点
- 文字列 + 数値の混在:
結合の途中で文字列が入ると以降は全部文字列結合になる。数値計算と文字列結合を混在させないか、テンプレートリテラルで明示する。 - 配列の結合で元を保持:
元の配列を崩したくないなら concat かスプレッド。破壊的操作（push）は使いどころに注意。 - オブジェクト文字列化の予期せぬ結果:
[object Object] になりがち。整形したいならJSON.stringify(obj)を使う。 - パフォーマンス（大量結合）:
文字列を何万回も+で繋ぐより、配列に溜めて最後にjoin("")の方が効率的な場面がある。
実用パターン
- ファイルパスの結合（区切り忘れ防止はライブラリ推奨だが簡易例）：
const dir = "/usr/local";
const file = "bin";
const path = `${dir}/${file}`; // "/usr/local/bin"
- CSV行の生成：
const cols = ["id", "name", "age"];
console.log(cols.join(",")); // "id,name,age"
- ログの組み立て（テンプレートで可読性UP）：
const level = "INFO", msg = "started", ts = 1733836200000;
console.log(`[${level}] ${new Date(ts).toISOString()} - ${msg}`);
- 複数の配列を1つに：
const a = [1], b = [2, 3], c = [4];
const all = a.concat(b, c); // [1, 2, 3, 4]
// または [...a, ...b, ...c]
ミニ練習
- 問1: 数値の合計を計算し、その結果を「合計はXです」と出力（型混在に注意）。
const total = 10 + 20 + 30;
console.log(`合計は${total}です`);
- 問2: 配列 [1,2] と [3,4] を非破壊で結合せよ。
const res = [1, 2].concat([3, 4]);
console.log(res); // [1, 2, 3, 4]
- 問3: 文字列 “a”, “b”, “c” を間にハイフンで結合して “a-b-c” を作れ。
console.log(["a", "b", "c"].join("-"));
- 問4: 配列の末尾に別配列の要素を追加（元を変更OK）せよ。
const base = [10];
const extra = [20, 30];
base.push(...extra);
console.log(base); // [10, 20, 30]
まとめ
- 文字列は
+かテンプレートリテラル。混在計算はテンプレートで明示する。 - 配列は
concat（非破壊）かスプレッド。編集したいならpush(...items)。 - オブジェクトの文字列化や大量結合の効率に注意し、必要なら
JSON.stringifyやjoinを使う。