JavaScriptの文字列を連結する方法（+演算子・concatメソッド）

1. JavaScriptで文字列を連結するとは？

1. JavaScriptで文字列を連結するとは？

JavaScriptでいう文字列（String）の連結とは、複数の文字を順番につなげて、ひとつの文章やメッセージを作ることを意味します。 たとえば「Hello」と「World」という別々の文字列をつなげて、「Hello World」という一文を作るようなイメージです。 日常会話の文章を組み立てる感覚に近いため、プログラミング未経験の方でも理解しやすい考え方です。

文字列の連結は、Webページに表示する案内文やエラーメッセージ、ユーザー名を含めたあいさつ文など、さまざまな場面で使われます。 特に「決まった文章の一部だけを変えたい」ときに活躍する基本的な処理です。

たとえば、名前を変えるだけで同じ文章を表示したい場合、次のように文字列を連結して文章を作れます。

let name = "ハナ";
let message = "こんにちは、" + name + "さん！";
console.log(message);

こんにちは、ハナさん！

この例では、「こんにちは、」と「さん！」という固定の文字列の間に、変数nameの中身をはさんでいます。 このように文字列を連結できるようになると、同じコードを使い回しながら、表示内容だけを柔軟に変えられるようになります。

2. 「+」演算子を使って文字列を連結する方法

2. 「+」演算子を使って文字列を連結する方法

文字列を連結するうえで、もっともよく使われるのが+演算子です。 +は本来、数値を足し算するときに使われますが、文字列同士に使うと「足す」のではなく「順番につなげる」という意味になります。 見た目もシンプルなので、JavaScriptを学び始めたばかりの方でも直感的に理解しやすいのが特徴です。

let greeting = "Hello";
let name = "Taro";
let message = greeting + " " + name + "!";
console.log(message);

Hello Taro!

この例では、「Hello」と名前の間に" "（空白の文字列）をはさむことで、読みやすい文章を作っています。 空白や記号も文字列として扱えるので、文章の形を自由に組み立てられます。

また、+演算子は文字列と数値を一緒に使うこともできます。 その場合、数値は自動的に文字列に変換されて連結されます。 これを意識しておくと、エラーメッセージや説明文を作るときに便利です。

let age = 25;
let text = "年齢は " + age + " 歳です。";
console.log(text);

年齢は 25 歳です。

このように+演算子は手軽で分かりやすい反面、文字列を何個もつなげるとコードが横に長くなりがちです。 短い文章や簡単な表示には向いていますが、複雑になりそうな場合は他の方法も検討すると読みやすさを保てます。

3. concat()メソッドを使って文字列を連結する方法

3. concat()メソッドを使って文字列を連結する方法

concat()メソッドは、JavaScriptの文字列（String）に用意されている機能で、複数の文字列をまとめて連結したいときに使えます。 +演算子と同じく文字列をつなげることができますが、「この文字列に、あとから別の文字列を追加する」という考え方に近いのが特徴です。 メソッドという形になっているため、処理の意味が分かりやすいと感じる人もいます。

基本的な書き方は、文字列.concat(追加したい文字列)です。 さらに、引数をカンマ区切りで並べることで、複数の文字列を一度に連結することもできます。

let str1 = "JavaScript";
let str2 = "の";
let str3 = "勉強中です！";
let result = str1.concat(str2, str3);
console.log(result);

JavaScriptの勉強中です！

この例では、最初の文字列str1に対して、str2とstr3を順番につなげています。 concat()を使っても、元の文字列そのものは書き換えられず、新しい文字列が作られる点は重要なポイントです。

プログラミング未経験の方は、「元の文字列はそのままで、結果だけが新しく作られる」と覚えておくと安心です。 たとえば、決まった見出し文にあとから説明文を付け足したい場合など、処理の流れをはっきりさせたい場面で役立ちます。

let base = "ようこそ";
let name = "サクラ";
let message = base.concat("、", name, "さん！");
console.log(message);

ようこそ、サクラさん！

このように、concat()メソッドを使うと複数の文字列をまとめて連結できます。 ただし、短い文章であれば+演算子のほうが直感的な場合も多いため、読みやすさを基準に使い分けるのがおすすめです。

4. +演算子とconcat()の違いを比較

4. +演算子とconcat()の違いを比較

どちらも同じように文字列を連結できますが、細かい違いがあります。下の表で比較してみましょう。

つまり、どちらを使っても基本的には同じ結果になります。実際の現場では、短い連結なら+、複数の文字列を扱うならconcat()を使うというように使い分けるのが一般的です。

5. 実際の例：ユーザー名とメッセージを組み合わせる

5. 実際の例：ユーザー名とメッセージを組み合わせる

ここでは、実際に文字列を連結してメッセージを作る例を見てみましょう。Webサイトで「こんにちは、ユーザー名さん！」と表示するような場面です。

let userName = "ミカ";
let message1 = "こんにちは、" + userName + "さん！";
let message2 = "ようこそ".concat(userName, "さん！");
console.log(message1);
console.log(message2);

こんにちは、ミカさん！
ようこそミカさん！

このように、どちらの方法でも同じ結果が得られます。状況に応じて使いやすい方を選びましょう。

6. 補足：テンプレートリテラルという便利な方法もある

6. 補足：テンプレートリテラルという便利な方法もある

ここまで紹介した2つの方法以外に、`バッククォート`を使って変数を埋め込む「テンプレートリテラル」という方法もあります。詳しくは別の記事で紹介しますが、次のように書くことができます。

let name = "タロウ";
let message = `こんにちは、${name}さん！`;
console.log(message);

こんにちは、タロウさん！

この書き方では、${}の中に変数を入れるだけで自動的に文字列と結合されるため、読みやすくて便利です。

まとめ

まとめ

文字列連結の基本をしっかり振り返ろう

この記事では、JavaScriptで文字列を連結する基本的な方法として、「+演算子」と「concatメソッド」の使い方を中心に解説してきました。 文字列の連結は、画面表示のメッセージ作成やログ出力、ユーザー名を含めた文章の生成など、プログラミングのさまざまな場面で必ず登場します。 初心者のうちは「文字をつなげるだけ」と感じるかもしれませんが、実際にはとても使用頻度が高く、理解しておくことでコードの読み書きが一気に楽になります。

+演算子は直感的で分かりやすく、短い文字列を組み合わせる場面に向いています。 一方でconcatメソッドは、複数の文字列をまとめて扱いたいときに読みやすく書けるのが特徴です。 どちらも結果は同じですが、「どう書けば自分や他の人が読みやすいか」を意識することが、プログラミングではとても大切です。

実務でも役立つ考え方

実際のWeb開発では、ユーザーの入力内容や状態に応じて動的に文章を作ることが多くあります。 そのため、文字列連結の考え方は「JavaScriptの基礎」でありながら、実務にも直結する重要な知識です。 特に数値と文字列を+演算子で連結したときに、自動的に文字列に変換される仕組みは、初心者がつまずきやすいポイントでもあります。 仕組みを理解していれば、「なぜこの結果になるのか」を落ち着いて判断できるようになります。

まとめとしてのサンプルプログラム

ここで、今回学んだ内容を一度に確認できる簡単なサンプルを見てみましょう。 ユーザー名と年齢を使って、自己紹介メッセージを作る例です。

let userName = "サクラ";
let age = 20;

let message1 = "こんにちは、" + userName + "さん。年齢は " + age + " 歳です。";
let message2 = "ようこそ、".concat(userName, "さん。現在 ", age, " 歳ですね。");

console.log(message1);
console.log(message2);

こんにちは、サクラさん。年齢は 20 歳です。
ようこそ、サクラさん。現在 20 歳ですね。

このように、どちらの方法でも自然な文章を作ることができます。 まずは自分が読みやすいと感じる書き方で問題ありません。 慣れてきたら、コードの長さや見やすさを意識して使い分けられるようになると理想的です。