では初心者にわかりやすく、例題を交えて「文字列の連結（つなげる）」を詳しく説明します。ポイント→実例→練習問題→解答 の順で進めます。読みながら手元のブラウザのコンソール（F12 → Console）で試してみてください。
基本イメージ（ざっくり）
+演算子は 数の足し算にも使うけど、文字列が関係すると「つなげる」（連結）動作になります。- JavaScriptは自動で型（数値・真偽値など）を文字列に変えてから結合します（これを「型変換」や「暗黙の型変換」と言います）。
- 重要：
+が複数あると 左から順に処理されるので、最初に文字列が出てくると以降は全部「文字列連結」に引きずられます。
例：基本の連結
let a = 'こんにちは' + '世界';
console.log(a); // → こんにちは世界
let b = '年齢：' + 30;
console.log(b); // → 年齢：30 （数値 30 が文字列 '30' に変わる）
型が混ざるとどうなるか（順序が命）
console.log(100 + 80 + '円です。'); // → 180円です。
// 解説：100+80 は数値同士 → 180。次に 180 + '円です。' で文字列連結。
console.log('値段は' + 100 + 80 + '円です。'); // → 値段は10080円です。
// 解説：'値段は' + 100 → '値段は100'（ここで文字列に）
// 次に '値段は100' + 80 → '値段は10080' になる（意図しないことが起きやすい）
対策： 希望の順序で計算させたいときは括弧を使う
console.log('値段は' + (100 + 80) + '円です。'); // → 値段は180円です。
テンプレートリテラル（おすすめの書き方）
ES6 から使える `...${...}...` を使うと読みやすく、型の入り混じりも気にせず書けます。
let price = 180;
console.log(`値段は ${price} 円です。`); // → 値段は 180 円です。
長い文章や複数箇所に変数を埋め込むとき特に便利。
その他の連結方法
String.concat()（あまり一般的ではないが存在）:
console.log('あ' .concat('い', 'う')); // → あいう
- 配列をまとめてつなぐときは
join()：
console.log(['a','b','c'].join('-')); // → a-b-c
よくあるハマり（初心者が間違いやすい点）
- 数値を文字列として扱いたいのに順序を間違え、計算がされない（例：
'値段は' + 100 + 80）。
→ 括弧で計算をまとめる。 +が文字列連結か数値加算か分からなくなったらtypeofやconsole.logで確認する習慣をつける。0や''（空文字）など見た目が紛らわしい値で意図せず文字列連結が起きることがある。
練習問題（まず自分で予想してからコンソールで実行）
console.log('1' + 2 + 3);の出力は？console.log(1 + 2 + '3');の出力は？console.log('合計：' + (50 + 25) + '円');の出力は？- テンプレートリテラルを使って、変数
name = '太郎'とage = 20を使い「太郎さんは20歳です。」と出すコードを書け。 - 配列
['東京','大阪','福岡']を→でつないで東京→大阪→福岡にするコードを書け。
解答と解説
'1' + 2 + 3→'123'
解説：左から処理。'1' + 2は'12'、さらに+ 3で'123'。1 + 2 + '3'→'33'
解説：1 + 2は数値の3。その後3 + '3'で文字列連結 →'33'。'合計：' + (50 + 25) + '円'→'合計：75円'
解説：括弧があるので50 + 25が先に計算される（75）、それを文字列に連結。- テンプレートリテラルの例：
let name = '太郎'; let age = 20; console.log(`${name}さんは${age}歳です。`); // → 太郎さんは20歳です。 - 配列を
joinで：console.log(['東京','大阪','福岡'].join('→')); // → 東京→大阪→福岡
ミニTips（覚えておくと便利）
- 「数値を先に計算してから文字列にする」なら
()を使う。 - 長い文章や複数の埋め込みはテンプレートリテラル（
`...${...}`）が読みやすい。 - デバッグは
console.log()で出力を見れば大抵解決します。
