では concat を中心に、初心者がつまづきやすい点をやさしく噛み砕いて、たっぷり例題と練習問題（解答付き）で説明します。
1. まず「文字列の連結」って何？
「文字列の連結（れんけつ）」とは、複数の文字列をつなげて 1つの長い文字列 を作る操作です。
たとえば 'Hello' と 'World' をつなげると 'HelloWorld' になります。
2. 代表的なやり方（3つ覚えれば十分）
A. concat メソッド
let a = 'Hello';
let b = a.concat(' ', 'World', '!');
console.log(b); // Hello World!
console.log(a); // Hello （元の a は変わらない）
文字列.concat(追加1, 追加2, ...)の形で使います。- 新しい文字列を返す（元の文字列は変わらない）。
B. プラス（+）演算子
let name = '太郎';
let msg = 'こんにちは、' + name + 'さん';
console.log(msg); // こんにちは、太郎さん
- シンプルでよく使われます。
C. テンプレートリテラル（バッククォート）
let name = '太郎';
let score = 90;
let msg = `こんにちは、${name}さん。得点は${score}点です。`;
console.log(msg); // こんにちは、太郎さん。得点は90点です。
- 変数を埋め込めて読みやすい。複数行文字列も作れる。
3. concat の特徴（初心者が押さえるべきポイント）
- 複数の引数を渡せる：
'a'.concat('b','c')→'abc' - 非破壊的：元の文字列は変わらない（イミュータブル）
- 引数が文字列でなくても OK：数値や真偽値は自動で文字列に変換される
'得点:'.concat(78) // '得点:78' - 実務では
+やテンプレートリテラルを使うことが多いですが、concatも覚えておくと読みやすい場合があります。
4. どれを使えばいいの？（使い分けの目安）
- 短く複数の変数を結合するだけ → テンプレートリテラル が読みやすくおすすめ。
- 単純に文字列どうしをつなぐだけ →
+でも良い。 - メソッドチェーン風に書きたい（慣例的な使い方） →
concatでも可。
パフォーマンス差は通常は気にしなくて OK（大量データを大量に連結する特殊ケースは別）。
5. よくある間違い・落とし穴
- 元の文字列が書き換わると思い込む
let s = 'A';
s.concat('B');
console.log(s); // 'A' ← 変わっていない！
→ concat は新しい文字列を返すので、結果を変数に代入する必要があります。
- 数値の足し算と混同する
let a = '5';
console.log(a + 3); // '53' ← 文字列連結になる
→ 文字列と数値を + で結合すると数値が文字列に変換され、連結になります。
null/undefinedの連結
'値:'.concat(undefined) // '値:undefined'
→ 意図しない undefined や null が入らないように注意（事前チェックを！）。
6. たくさんの例（実行イメージ付き）
例1：住所を作る
let pref = '東京都';
let city = '港区';
let town = '芝公園';
let address1 = pref.concat(city, town);
console.log(address1); // 東京都港区芝公園
let address2 = pref + city + town;
console.log(address2); // 同じ結果
例2：数値を含むメッセージ
let score = 78;
console.log('得点は'.concat(score, '点です')); // 得点は78点です
console.log(`得点は${score}点です`); // テンプレートだと同じ
例3：ユーザー名が未定義かもしれない場合の安全な連結
let user; // undefined
let msg = 'ユーザー:'.concat(user ?? '（未設定）');
console.log(msg); // ユーザー:（未設定）
??（Nullish coalescing）で未定義時のデフォルトを使うと安心。
7. 練習問題（初心者向け）
各問題の下に解答と解説を載せます。まずは自分で考えてから答えを見ると学習効果が高いです。
問題1
let a = 'Good';
let b = a.concat(' ', 'Morning');
console.log(b);
console.log(a);
出力は？
問題2
let x = '10';
console.log(x + 5);
console.log(x.concat(5));
2行の出力は？
問題3
次をテンプレートリテラルで書き換えなさい（${} を使う）：
let name = '花子';
let age = 25;
let s = '名前：' + name + '、年齢：' + age + '歳';
問題4
ユーザー名 userName が null または undefined のとき 'ゲスト' を代わりに使って "ようこそ、<名前>さん" を作るコードを書きなさい。（concat かテンプレートどちらでも可）
問題5（応用）
['A','B','C'] の配列を 'A-B-C' のように結合する方法を 2つ書きなさい。
8. 練習問題の解答と解説
解答1
出力：
Good Morning
Good
解説：concat は新しい文字列を返すので b は 'Good Morning'、a は元のまま 'Good'。
解答2
出力：
105
105
解説：x は文字列 '10'。+ では '10' + 5 が '105' に。concat(5) でも引数が文字列に変換されて '105'。
（※ 数学的に 15 にしたいなら Number(x) + 5 とする）
解答3
let s = `名前：${name}、年齢：${age}歳`;
テンプレートは可読性が高い。
解答4（例）
let userName; // 例: undefined
let welcome = `ようこそ、${userName ?? 'ゲスト'}さん`;
console.log(welcome); // ようこそ、ゲストさん
解説：?? で null / undefined のときに代替文字列を使う。
（concat を使うなら）
let name = userName ?? 'ゲスト';
let welcome = 'ようこそ、'.concat(name, 'さん');
解答5
方法1: join を使う（配列専用で簡単）
['A','B','C'].join('-') // 'A-B-C'
方法2: ループや reduce、または +/concat で繋ぐ
['A','B','C'].reduce((acc, cur) => acc + '-' + cur);
// or
let s = '';
for (let i=0;i<array.length;i++){ s += (i?'-':'') + array[i]; }
まとめ（初心者がまず覚えること）
concatは「文字列に別の文字列をくっつける」メソッド。元の文字列は変わらない。- 普段は可読性の高いテンプレートリテラル（
`...${...}...`）を多用すると良い。 - 演算子
+とconcatの違いを理解して、null/undefinedや数値混在のケースに注意する。