【JavaScript】文字列の結合方法を初心者向けにわかりやすく解説

はじめに

JavaScriptで文字列を扱う場面は多いのではないでしょうか。
たとえば、画面上に表示する文章を組み立てたり、ユーザー入力を検証して別のメッセージと合わせて表示したりと、いろいろな場面で文字列を結合する作業が必要になります。

とはいえ、JavaScriptで文字列を結合する方法は複数あります。
多くの人はプラス（+）演算子で直感的に結合を行うことから始めるかもしれませんが、テンプレートリテラル（バッククォート）を使うと可読性が高くなるケースもあります。

また、複数の要素を配列に格納して、最後に結合するという手法もあります。
それぞれの方法には得意・不得意が存在しますので、実務のシーンに合わせて選ぶことが大切です。

今回は、JavaScriptで文字列を結合する方法を丁寧に解説しながら、実際のプロジェクトでどのように使えるのかを説明していきます。
文字列の結合方法によってコードの読みやすさやパフォーマンスが変わる場合もありますので、ぜひ参考にしてみてください。

この記事を読むとわかること

• JavaScriptで文字列を結合する主な方法
• それぞれの結合方法のメリットや使い所
• 実務での活用シーンと具体例
• 文字列操作に関連するメソッドや注意点
• 大規模プロジェクトでも役立つベストプラクティス

JavaScriptにおける文字列結合の基本

JavaScriptで文字列を組み立てる方法はいくつか存在します。
単純な例として「"Hello" + "World"」のようにプラス演算子を使う方法がありますが、近年ではテンプレートリテラルも広く使われています。

初心者の方が混乱しがちなポイントとして、どの方法を使えば良いのか、またパフォーマンスにはどの程度の違いがあるのかという疑問があります。
実務では大量の文字列を連結する場面が発生することもありますし、小さなスクリプトの中で一部だけ文字列を結合したいこともあります。

そのため、まずは代表的な方法として「プラス演算子」「テンプレートリテラル」「Array.join()」を押さえ、併せて注意点を理解しておくことをおすすめします。
これらをうまく使い分けることで、読みやすいコードを書きつつも、場面に応じたパフォーマンスを確保することができます。

プラス（+）演算子による結合

プラス演算子による文字列結合は、JavaScriptを初めて学んだときによく目にする方法ではないでしょうか。
例えば、以下のようなコードが基本形になります。

コピー
const firstName = "Tom";
const greeting = "Hello, " + firstName + "!";
console.log(greeting); // "Hello, Tom!"

このように+演算子を使うだけなので非常にシンプルです。
初心者の方でも直感的に理解しやすいのが特長と言えます。

ただし、複数の値を繰り返し結合する場面でプラス演算子を使うと、ソースコードが読みにくくなるケースもあります。
さらに、文字列を大量に生成・結合するような処理では、ループの中で繰り返し+演算をすることでメモリの使い方に影響が出る場合があります。

実務での活用例

• ユーザーの入力欄が1〜2箇所だけで、結合する要素が少ない場合
• ログを一時的に作成するとき（短いメッセージを数回連結する程度）
• すぐに結合結果を表示する簡易的な処理

実務においても、小規模なスクリプトや一時的な処理であれば、プラス演算子による結合でも全く問題なく機能します。
しかし、可読性と保守性の観点から、文字列の内容が複雑になってきたら他の方法（後述のテンプレートリテラルなど）を検討するのがよいでしょう。

テンプレートリテラルでの結合

テンプレートリテラル（バッククォート `` ）を使うと、変数埋め込みや改行を含めた文字列をより分かりやすく記述できます。
次の例を見てみましょう。

コピー
const firstName = "Tom";
const message = `こんにちは、${firstName}さん。
今日はご機嫌いかがでしょうか？`;
console.log(message);

このように、${変数名} の形式で変数を埋め込むことが可能です。
改行やスペースを含む文章でも、そのままの形でソースコードに書けるため、長い文章を生成するときに便利です。

さらに、式を埋め込むこともできます。
たとえば、${1 + 2}のように数値演算の結果を文字列に埋め込むことも可能です。
これはプラス演算子では面倒になりがちな部分をシンプルに書けるので、可読性が高くなるでしょう。

実務での活用例

• HTML片などの長めの文字列を生成するシーン
• 変数を多用してメール本文やチャット文面を組み立てるケース
• 複数行のメッセージを読みやすく管理したいとき

実務でもテンプレートリテラルは非常に使い勝手が良く、プロジェクトの規模が大きくなるほど、保守しやすいというメリットが際立ちます。
特に動的に生成するコンテンツが多い場面では、テンプレートリテラルを利用することでコードの可読性が向上し、デバッグもしやすくなります。

Array.join() メソッドでの結合

配列に文字列や要素を格納しておき、後からjoin()メソッドでまとめて結合する方法もあります。
コード例は以下のようになります。

コピー
const parts = ["Hello", "World", "!!!"];
const result = parts.join(" ");
console.log(result); // "Hello World !!!"

join()メソッドの引数に区切り文字を指定できるのが特長です。
スペースやハイフン、カンマなど、用途に合わせて自由に設定できます。

大量のデータを一度に文字列へ変換するときや、配列操作によって柔軟に要素を追加・削除したあとに結合したいケースで有用です。
例えば、ユーザーがフォーム入力したデータを一時的に配列で管理しておき、最終的にjoin()でひとまとめにするという実装も考えられます。

実務での活用例

• フォームの複数項目を整理したあとに1つの文面にまとめる場合
• APIから受け取った配列の要素を区切り文字入りの文字列にまとめるケース
• テキストファイルに複数行のデータを連結して書き出す処理

join()による文字列結合は、要素のリストを扱う場面で特に力を発揮します。
テンプレートリテラルのように変数を埋め込むわけではありませんが、「要素群をまとめて結合したい」というニーズに対応しやすい方法です。

結合方法のパフォーマンス面

実務では、文字列結合のパフォーマンスが影響する場面も考えられます。
例えば、大量のログメッセージを生成するとき、あるいは数千、数万規模のアイテム情報をまとめて文字列化するときです。

プラス演算子で繰り返し結合を行うと、文字列が都度コピーされるため、内部的にはメモリの再割り当てが頻発する可能性があります。
一方で、テンプレートリテラルやjoin()を使う場合でも、実装によっては同様の問題が起きることがあります。

とはいえ、モダンなJavaScriptエンジンでは単純な文字列結合程度で極端に性能が落ちることはあまりありません。
ただし、本番運用で非常に大きな文字列を連結し続ける状況などでは、結合処理よりもデータの構造やアルゴリズムそのものを見直す必要があります。

パフォーマンスに関する注意

• ループの中で都度文字列を更新する処理が多いとき
• サーバーサイドJavaScript（Node.jsなど）で大量のログや解析データを扱う場合
• リアルタイム性が求められるアプリケーションで、フロント側の結合処理が頻発するとき

これらのケースでは、結合ロジックだけでなくデータの扱い方全体を見直すのが重要です。
過度に文字列を連結する代わりに、オブジェクトや配列のままデータを保持し、最終的にまとめて文字列化する方が効率が良い場合もあります。

知っておきたい文字列操作関連のメソッド

文字列結合と直接関係があるわけではないですが、文字列を扱ううえで覚えておくと便利なメソッドがあります。
結合以外に、部分的な置換や抽出など、実務でよく行う操作をスムーズに行うために理解しておくと良いでしょう。

concat() メソッド

concat()メソッドは、文字列を結合する専用のメソッドです。
下記のように使えます。

コピー
const str1 = "Hello, ";
const str2 = "World!";
const combined = str1.concat(str2);
console.log(combined); // "Hello, World!"

プラス演算子と役割は似ていますが、利用頻度はそれほど高くない印象です。
複数の文字列を連続して結合したい場合は、concat()をチェーンで呼び出すこともできますが、可読性を重視するならばテンプレートリテラルなどの方がわかりやすいケースが多いです。

replace() メソッド

既存の文字列の一部を置き換えるためのメソッドです。
結合自体とは異なる操作ですが、実務でメッセージを動的に編集するときなどに役立ちます。

コピー
const sentence = "Hello, world!";
const newSentence = sentence.replace("world", "JavaScript");
console.log(newSentence); // "Hello, JavaScript!"

部分的に入れ替える操作が必要なときに使うメソッドですが、正規表現を使うと複数箇所の同時置換など、より高度な編集もできます。
ユーザーの入力データやテンプレートから生成された文字列を、一部だけ変更するといった場合に活用しやすいでしょう。

substring() / slice() メソッド

文字列の一部を抜き出すときによく使われます。
結合の前に、どの部分の文字列を取り出したいか明確にするシーンで便利です。

コピー
const text = "JavaScript";
console.log(text.substring(0, 4)); // "Java"
console.log(text.slice(4, 10));    // "Script"

substring()とslice()は似たような動作をしますが、引数に負の値を指定した際の挙動が異なるなど細かい違いがあります。
結合したい文字列を切り出して調整する場合などにも活躍しますので、どちらも覚えておくと良いでしょう。

文字コードと結合の注意点

文字列を結合する際に、文字コードやエンコーディングに関して問題が生じる場合があります。
特に日本語を扱う場合、環境やファイルの保存形式が異なることで文字化けが起きることがあり、思った通りに結合できないという状況になることもあります。

環境によっては、文字列連結の結果が予期しない文字列へ変換されてしまうことも考えられます。
たとえば、サーバーサイドでUTF-8が使われているのに対し、フロントエンドが別の文字コードを期待しているときなどです。

文字化けの原因と対策

• 開発環境と本番環境で文字コードの設定が違う
• ファイルの保存形式が正しく設定されていない
• 外部APIから取得した文字列が想定外のエンコーディングだった

対策としては、プロジェクト全体で統一的にUTF-8を採用するなど、まずは文字コードを統一する方針が大切です。
さらに、APIのやり取りで文字が変換される場合は、やり取りを行う前にどのエンコーディングが使われているか確認しておくと良いでしょう。

大規模プロジェクトでの文字列結合のベストプラクティス

大規模なシステムで文字列を結合するときは、可読性や保守性を意識して選択することが重要です。
チーム開発の場合、別のエンジニアがコードをレビューしたり修正したりしますので、複雑な結合はテンプレートリテラルを使って明示的に書く方が好まれる場合が多いです。

逆に、処理速度の最適化を最優先する場面では、大量の配列を結合するときにjoin()を活用したり、連結そのものを最小限に抑えるロジックを検討することがあります。
結合の方法だけでなく、データ構造自体の見直しも欠かせません。

テンプレートエンジンとの連携

JavaScriptフレームワークやテンプレートエンジンを使う場合、文字列結合の大半はフレームワーク側でサポートされます。
例えば、Vue.jsやReactなどではJSXやテンプレート構文を用いることで、HTML要素と変数を簡単に組み合わせることができます。

テンプレートエンジンを使うと、複雑なロジックで文字列を合成するよりも、コンポーネントに分割して表示を制御する方が自然になる場合があります。
このように、プロジェクトのアーキテクチャによって文字列結合のアプローチを変えることも大切です。

ライブラリ利用時の注意点

外部ライブラリを導入するとき、内部的にどのように文字列を扱っているかを理解しておくのは重要です。
とりわけ、UIライブラリやサーバーサイドのフレームワークは、独自のテンプレート構文や文字列生成の仕組みを持つことがあります。

もしライブラリが大量のメッセージを扱うなら、結合処理でパフォーマンスに影響が出る可能性があるため、機能や設定を確認することが必要です。
また、一部のライブラリは文字コードを独自に扱うことがあるので、日本語を含む文字列で問題がないかもチェックしておきましょう。

フォーマット済みメッセージの作成

実務では、ユーザーに対して通知やメール本文のようなフォーマット済みメッセージを自動生成する場面がよくあります。
例えば、注文情報とユーザー情報を組み合わせて、決済結果をまとめたメッセージを作成するなどです。

このような場合、テンプレートリテラルでメッセージの骨組みを作りつつ、${変数}に必要なデータを埋め込む方法がわかりやすいです。
以下はサンプルコードの一例です。

コピー
function createOrderMessage(customerName, orderId, price) {
  return `お客様: ${customerName}  
ご注文番号: ${orderId}  
ご請求金額: ${price}円`;
}

console.log(createOrderMessage("Alice", "XYZ123", 1500));

このようにテンプレートリテラルを使えば、複数行の文章を読みやすい形で表現できます。
必要に応じて変数を追加して調整すれば、複雑なメッセージでも管理しやすいでしょう。

動的コンテンツの生成での活用シーン

ウェブアプリケーションでは、ユーザー操作や外部サービスからのレスポンスなどに応じて表示内容を動的に変えることが多いです。
そうした動的な処理でも、文字列結合は欠かせません。

フォームからの入力を用いたメッセージ作成

ユーザーがフォームに入力したデータを読み取り、その結果を画面やログに表示する場合があります。
このとき、文字列結合を使って「ようこそ、〇〇さん」というメッセージを生成したり、入力内容をレイアウトに合わせて再構成したりします。

小規模なシステムならプラス演算子で十分ですが、メッセージが複数行にわたるならテンプレートリテラルの方が管理しやすくなります。
特に誤字脱字や変数名の間違いを減らすため、コードをできるだけ読みやすく書いておくことが大切です。

REST APIや外部サービス連携でのメッセージ作成

外部サービスからJSONデータを取得して、その内容を組み立てた上でユーザーに見せたり、別のAPIに送信したりする場合にも文字列結合が必要です。
例えば、以下のようなフローを考えてみてください。

1. API呼び出しでユーザー情報を受け取る
2. 受け取ったユーザー情報（名前や年齢など）を組み立てて新たなメッセージを生成
3. そのメッセージを別のサービスに送信したり、画面に表示したりする

この手順の「2」の部分で文字列結合が活躍します。
join()で配列の要素をまとめたり、テンプレートリテラルで変数を埋め込んだりなど、データ構造やレイアウトに合わせて適切な方法を選びましょう。

まとめ

JavaScriptで文字列を結合する方法は、プラス演算子・テンプレートリテラル・Array.join()などいくつも存在します。
小さなスクリプトならプラス演算子でも問題ありませんが、大きめのプロジェクトや複数行の文章を扱うならテンプレートリテラルが読みやすく、保守性が高いと言えます。

join()は配列の要素をまとめて結合する場面に強く、ログやデータ群を簡単に文字列化するのに向いています。
また、concat()やreplace(), substring()といった他の文字列操作メソッドも覚えておくことで、実務での作業効率を上げることができるでしょう。

文字コードやエンコーディングに注意が必要なケースもあるため、特に日本語を扱う場合はプロジェクト全体での設定を確認することが重要です。
最終的には、結合処理を通じて何が実現したいかを整理し、コードの可読性や性能バランスを考慮して最適な手法を選ぶと良いでしょう。