JavaScriptで文字列をつなげる考え方
はじめての文字列操作は「つなげる」が分かると一気に楽になります。ここでは concat を中心に、「どう書くか」「どこでつまずきやすいか」「実務での選び方」まで丁寧に説明します。
concatの基本
- 役割: 複数の文字列を順番につなげて新しい文字列を作ります。
- 書き方:
文字列.concat(文字列1 [, 文字列2, ...])
- ポイント:
- 元の文字列は変わりません。 新しい文字列が返ります。
- 複数の引数を渡せます（2つ以上まとめて連結可能）。
- 数値や真偽値もOK。 自動で文字列に変換されてから連結されます。
例1：基本の連結
const pref = '東京都';
const address = pref.concat('港区', '芝公園');
console.log(address); // 東京都港区芝公園
console.log(pref); // 東京都（元の文字列はそのまま）
例2：数値を含める
const score = 78;
const message = '得点は'.concat(score, '点です');
console.log(message); // 得点は78点です
よく使う他の方法との比較
最終的に「どれを選ぶか」が大事。初心者でも迷わない目安を示します。
1. + 演算子（手軽で直感的）
const name = '太郎';
const msg = 'こんにちは、' + name + 'さん！';
console.log(msg); // こんにちは、太郎さん！
- 向き: 簡単な連結、短い式。
- 注意: カッコが増えると読みにくくなる。
2. テンプレートリテラル（実務の定番）
const user = '花子';
const items = 3;
const msg = `こんにちは、${user}さん。今日の注文は${items}件です。`;
console.log(msg); // こんにちは、花子さん。今日の注文は3件です。
- 向き: 変数をたくさん埋め込みたい、改行や複雑な文章。
- メリット: 可読性が高い、式も入れやすい（例：
${price * tax}）。
3. concat（メソッドで管理したいとき）
const base = 'ID: ';
const id = 1024;
const label = base.concat(String(id), ' / 有効');
console.log(label); // ID: 1024 / 有効
- 向き: メソッドチェーンや関数型の書き方を好む場合。
- 現場ベスト: ほとんどは「テンプレートリテラル」か「+」を使うことが多い。
つまずきやすいポイントと回避法
- 型が違っても怖がらない:
ラベル: 数値や真偽値は自動で文字列化
'合計: '.concat(100, true); // "合計: 100true"
自動変換は便利だけど、意図が伝わるように String() を使うと安心。
- 元の文字列は変更されない:
ラベル: 破壊的ではない（イミュータブル）
let s = 'A';
s.concat('B'); // 'AB' を返すが s は 'A' のまま
s = s.concat('B'); // s を更新したいなら代入が必要
- 配列はそのまま連結できない:
ラベル: 配列は join で整える
const parts = ['東京', '港区', '芝公園'];
console.log('住所: '.concat(parts)); // 住所: 東京,港区,芝公園（カンマが入る）
console.log('住所: '.concat(parts.join(''))); // 住所: 東京港区芝公園（意図に合う）
実践例題で身につける
例題1：ユーザー向けメッセージを作る
- 課題: 名前と点数を使って「太郎さんの得点は78点です」を表示。
- 解答（3パターン）:
const name = '太郎';
const score = 78;
// concat
console.log(name.concat('さんの得点は', String(score), '点です'));
// +
console.log(name + 'さんの得点は' + score + '点です');
// テンプレートリテラル（おすすめ）
console.log(`${name}さんの得点は${score}点です`);
例題2：住所のフォーマット
- 課題: 「東京都」「港区」「芝公園」を「東京都 港区 芝公園」と半角スペース区切りで表示。
- 解答:
const pref = '東京都';
const ward = '港区';
const area = '芝公園';
// concat（スペースも文字列として渡す）
console.log(pref.concat(' ', ward, ' ', area));
// +
console.log(pref + ' ' + ward + ' ' + area);
// 配列 + join（拡張性◎）
console.log([pref, ward, area].join(' '));
例題3：改行を含む文章
- 課題: 2行の案内文を作る。
- 解答（テンプレートリテラルが最適）:
const user = '花子';
const text = `ようこそ、${user}さん。
本日のおすすめをチェックしてください。`;
console.log(text);
どれを選ぶべきかの指針
- 短くシンプル: 「+ 演算子」
- 複雑・可読性重視・改行あり: 「テンプレートリテラル」
- メソッドで揃えたい・複数引数を一気に連結: 「concat」
- 多数要素の連結: 配列で管理して「
join」
練習問題（解いてみよう）
- 挨拶文: 名前
kenを使って「こんにちは、kenさん！」を3通りで表示。 - 小計表示: 単価
120、数量3を使って「小計は360円です」を表示（計算は式で）。 - ログ出力: 変数
id=42とactive=trueを使って「ID: 42 / 状態: 有効」を表示（activeがtrueのときは「有効」、falseのときは「無効」）。