concat() と + の使い分けまとめ（初心者向け）
ではここからは、concat() メソッドと「+（プラス）」演算子の 使い分け を、プログラミング初心者でもわかるように丁寧に解説します。
まず基本の違い
| 項目 | concat() メソッド | +（プラス）演算子 |
|---|---|---|
| 書き方 | "文字列1".concat("文字列2") | "文字列1" + "文字列2" |
| 意味 | 「文字列を結合するための関数」 | 「文字列をくっつける演算子」 |
| 戻り値 | 新しい文字列を返す | 新しい文字列を返す |
| 元の文字列 | 変わらない（変更なし） | 変わらない（変更なし） |
| 読みやすさ | やや長い・関数的 | シンプルで直感的 |
| 推奨度 | あまり使われない | 一般的にこちらが主流 |
どちらも結果は同じ
let a = "Hello";
let b = "World";
// concat版
let result1 = a.concat(" ", b, "!");
console.log(result1); // Hello World!
// +版
let result2 = a + " " + b + "!";
console.log(result2); // Hello World!
どちらを使っても「Hello World!」になります。
でも、見やすさ・書きやすさの面では「＋」が人気です。
使い分けのコツ（初心者向け）
| こんなとき | おすすめの方法 | 理由 |
|---|---|---|
| 手軽に文字列をつなげたい | + | 一番わかりやすい・短い |
| 複数の文字列を一気に連結したい | concat() | まとめて書ける（引数をいくつでも指定可能） |
| 変数の中身が数値や真偽値でもつなげたい | + | 自動で文字列変換されるので便利 |
| チェーン（連続呼び出し）したい | concat() | "A".concat("B").concat("C") のように書ける |
例題で比較してみよう！
例1：「＋」のほうが見やすい場合
let name = "たろう";
let age = 15;
let msg = name + "さんは" + age + "歳です。";
console.log(msg);
// → たろうさんは15歳です。
👉 日本語の文のようにつなげるときは「＋」のほうが自然で読みやすい！
例2：「concat」のほうが便利な場合
let address = "東京都";
let full = address.concat("港区", "芝公園", "1-1-1");
console.log(full);
// → 東京都港区芝公園1-1-1
👉 引数をたくさん並べて一気に連結したいときは concat がスッキリ書ける。
⚠️ 注意点：+ は数字の足し算にも使われる！
console.log(10 + 20); // → 30 （数値の加算）
console.log("10" + 20); // → "1020" （文字列として連結）
👉 「文字列か数値か」で意味が変わる！
- どちらかが文字列なら「文字列の連結」になる。
- 両方が数値なら「足し算」になる。
結論（初心者向けまとめ）
| 判断基準 | おすすめ |
|---|---|
| 迷ったら | +（プラス）演算子でOK！ |
| 長い連結・複数を一気に | concat() もあり |
将来的にテンプレート文字列（` `）を使うのがベスト！ | ✅ |
さらに便利な方法：テンプレート文字列（おすすめ！）
最近の JavaScript では、テンプレート文字列（バッククォート ` を使う）を使うのが主流です。
let name = "たろう";
let age = 15;
let msg = `${name}さんは${age}歳です。`;
console.log(msg); // → たろうさんは15歳です。
👉 これが一番読みやすくて、ミスも少ない書き方です。
まとめ
| 方法 | 特徴 | 初心者おすすめ度 |
|---|---|---|
concat() | たくさんの文字列をまとめて連結できる | ★★☆☆☆ |
+（プラス） | シンプルで直感的 | ★★★★☆ |
テンプレート文字列 `...${変数}...` | 読みやすくて今どきの書き方 | ⭐⭐⭐⭐⭐ |