こんにちは！フロントエンドの現場を渡り歩いてきた、チーフアーキテクトの私です。
JavaScriptの勉強、毎日お疲れ様です！
コードを書いていると、「あ、この言葉とこの言葉をくっつけて一つの文章にしたいな」という場面、めちゃくちゃよく出てきますよね。
JavaScriptには、文字列をくっつける方法がいくつか用意されています。プラスの記号（`+`）を使ったり、テンプレートリテラル（“ ` “）を使ったり……。そんな中、今回は`String.prototype.concat()`という、文字列結合専用のメソッドにスポットライトを当ててみたいと思います。
「えっ、名前からしてカッコいいし、文字列結合のエースなんじゃないの？」と思ったそこのあなた。
実はこの`concat`くん、現場のプロたちの間では「ちょっと意外な使われ方」をしている、愛すべき（？）存在なんです。
今回は、この`concat`の基本から、よく使われる「プラス演算子」との違い、そして現場のリアルな事情まで、温かく丁寧にお話ししていきますね。難しく考えなくて大丈夫ですから、コーヒーでも飲みながらリラックスして読んでいってください。
—
1. 文字列結合の「のり巻き」？ `concat()`ってなんだろう
まず、`concat`（コンカット）とは、「concatenate（連結する）」の略です。
イメージとしては、「お気に入りの具材（文字列）を、海苔（メソッド）でパズルのようにカチッとつなぎ合わせる」ようなものだと考えてみてください。
使い方はとってもシンプルです。基本の形を見てみましょう。
// 基本的な使い方
const greeting = “こんにちは、”;
const name = “太郎さん”;
// greeting に name を連結する
const message = greeting.concat(name);
console.log(message); // 出力: “こんにちは、太郎さん”
おお、すんなりくっつきましたね！
「これ、プラス記号（`+`）と同じじゃない？」と思いましたか？ ええ、その通りです。結果はまったく同じになります。
複数の文字列をまとめてくっつけることもできるよ
`concat`のちょっと便利なところは、カッコの中にカンマ（`,`）で区切って、いくつでも文字列を追加できるところです。
const firstName = “山田”;
const middleName = “太郎”;
const lastName = “さん”;
// 複数の文字列を一度に結合する
const fullName = “”.concat(firstName, ” “, middleName, ” “, lastName);
console.log(fullName); // 出力: “山田 太郎 さん”
空っぽの文字列 `””` を起点にして、次々に言葉を連結していく……。なんだかベルトコンベアみたいで、ちょっと面白いですよね。
—
2. ライバル登場！ プラス演算子（`+`）との違い
さて、ここで JavaScript 初学者のあなたが絶対に出会うであろう、もう一人の主役プラス演算子（`+`）の話をしなければなりません。
実務の現場では、文字列をくっつけるとき、圧倒的にこのプラス演算子や、のちほど紹介するテンプレートリテラルが使われます。では、`concat`と何が違うのでしょうか？
比べるために、同じことをプラス演算子で書いてみましょう。
const str1 = “おはよう”;
const str2 = “日本！”;
// プラス演算子を使った結合
const resultPlus = str1 + str2;
// concatを使った結合
const resultConcat = str1.concat(str2);
console.log(resultPlus); // “おはよう日本！”
console.log(resultConcat); // “おはよう日本！”
結果は完全に一緒です。では、なぜ現場のエンジニアたちは `+` やテンプレートリテラルを好むのでしょうか？
理由その1：シンプルで書きやすいから
圧倒的にタイピング数が少なく、パッと見て意味が直感的にわかりますよね。`+` は算数の足し算と同じ感覚で使えるので、私たちの脳にスッと馴染みやすいんです。
理由その2：うっかりミスを防げるから（ここ重要！）
実は、`concat`メソッドには「もし結合する相手（引数）が文字列じゃなかったらどうなるの？」という仕様上のクセがあります。
例えば、数字の `5` をくっつけようとした場合を考えてみましょう。
const text = “りんごの数：”;
const count = 5;
// プラス演算子の場合：自動的に文字列の “5” に変換してくっつけてくれる
console.log(text + count); // 出力: “りんごの数：5”
// concatの場合も、一応よしなに文字列にしてくれるけれど……
console.log(text.concat(count)); // 出力: “りんごの数：5”
「あれ、どっちも同じじゃん！」と思いますよね。
ですが、もし最初の変数が `null` や `undefined` だった場合、`concat` は機嫌を損ねてエラーを吐き出してしまうことがあります。
let nothing = null;
// これをやると…
// nothing.concat(“テスト”) -> エラー発生！ (nothing が null だからメソッドが呼べない)
一方で、プラス演算子（`+`）なら、左側が `null` であっても、うまい具合に文字列として扱ってくれる寛大さがあります（`null + “テスト”` は `”nullテスト”` になります）。この「多少の不都合を優しく包み込んでくれる包容力」のせいで、私たちはついつい `+` やテンプレートリテラルを手に取ってしまうのです。
—
3. 実際の開発現場では、どれを使うべき？
ここまで読んで、「じゃあ `concat` なんて使わない方がいいの？」と不安になったかもしれませんが、どうぞ安心してください！「絶対にこれを使わなきゃいけない」という決まりはありません。
ただ、現代のモダンな JavaScript 開発において、文字列の結合は、多くの場合テンプレートリテラル（バッククォート “ ` “ で囲む書き方）の独壇場となっています。
最後に、その最強のライバルもお見せしておきますね。
const user = “花子”;
const item = “コーヒー”;
// テンプレートリテラルを使った、現代風の書き方
const message = `${user}さんが${item}を注文しました。`;
console.log(message); // 出力: “花子さんがコーヒーを注文しました。”
変数や改行をそのまま埋め込めるこの書き方を知ってしまうと、もう他の方法には戻れなくなるほど便利です。実務の現場でも、9割以上のコードでこのテンプレートリテラルが使われています。
—
まとめ：あなたのペースで、書きやすい方法を選ぼう
今回は `String.prototype.concat()` をテーマに、文字列結合の世界を覗いてみました。
- `concat()` メソッド：
複数の文字列をメソッドチェーンのように綺麗につなぎたい時に使える。ただ、現場ではちょっとマイナーな存在。
- プラス演算子（`+`）：
手軽でサクッと書けるけれど、複雑な文章になるとごちゃごちゃしがち。
- テンプレートリテラル（` “ `）：
現代の開発の主流！迷ったらこれを使っておけば間違いなし。
JavaScript には、同じことをするのにも色々なアプローチが用意されています。「どれを使わなきゃダメ」ということは一切ありませんので、あなたが「一番読みやすいな」「書きやすいな」と感じるものを大切にしてくださいね。
最初は誰もが「どれを使えばいいの…？」と立ち止まるものですが、こうやって一つひとつのメソッドの背景を知っていくこと自体が、確実にあなたのエンジニアとしての引き出しを増やしてくれています。
今日も一歩前進です！その調子で、一緒に楽しくコードを書いていきましょうね。
コメント