【JavaScript】concatとは？文字列や配列の連結を初心者向けにわかりやすく解説

プログラミング言語•
JavaScript

はじめに

皆さんは、JavaScriptで文字列や配列をつなぎ合わせる方法として、concatを聞いたことがあるでしょうか。
このconcatは、複数の文字列や配列を一つにまとめるときに役立つ便利なメソッドです。
一方で、+演算子での文字列連結や、テンプレートリテラルを使う方法など、JavaScriptにはさまざまな連結手段があります。

実務でも、ユーザーから入力された情報をまとめて表示したり、APIから受け取ったデータを配列として組み合わせたりする場面は少なくありません。
こうした場面で役立つconcatの使い方を知っておくと、コードの意図が明確になり、保守もしやすくなります。

この記事では、concatというメソッドの使い方や他の連結方法との比較、実務でどのように活用できるかなどについて、初心者の皆さんにも理解しやすいよう丁寧に解説します。

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

  • concatメソッドで文字列や配列を連結する方法と特徴
  • +演算子やテンプレートリテラルとの違いと活用ポイント
  • 実務で使える具体的なコード例や注意点
  • パフォーマンスの考え方やトラブルシューティングのヒント

ここから先は、JavaScriptのconcatメソッドを中心に話を進めますが、単純な文字列連結や配列操作だけでなく、実際の開発シーンをイメージしながら解説します。
ぜひ最後まで読んでみてください。

concatの基本を理解する

JavaScriptのconcatは、文字列同士または配列同士を結合するためのメソッドです。
ここでは、まず文字列の場合をイメージしてみましょう。

concatメソッドを使うときは、文字列.concat(別の文字列)という形で呼び出します。
例えば、次のようなケースがあります。

const greeting = "Hello";
const target = "World";
const combined = greeting.concat(" ", target);
console.log(combined); // "Hello World"

このサンプルでは、"Hello" と " "（半角スペース） と "World" をひとつにつないでいます。
concatメソッドは、呼び出し元の文字列を変更することなく、新しい文字列を返すという点が特徴です。

配列の結合とconcat

文字列だけでなく、配列についてもconcatはよく使われます。
配列の場合は、配列.concat(別の配列)という形をとるだけで、要素が並んだ一つの配列が返されます。

const array1 = [1, 2, 3];
const array2 = [4, 5];
const mergedArray = array1.concat(array2);
console.log(mergedArray); // [1, 2, 3, 4, 5]

配列の場合も、元の配列を上書きせずに新しい配列を返している点がポイントです。
こうした挙動のおかげで、concatを用いた連結処理は副作用（既存データを意図せず書き換えてしまう影響）が少なく済みます。

実務でどんなシーンでconcatを使うのか

JavaScriptの開発で、concatメソッドが威力を発揮するのはどのようなときでしょうか。
例えば、以下のようなシーンが想定されます。

  • サーバーから受け取った複数のデータを配列としてまとめたいとき
  • ユーザーが入力した文字列に接頭語や接尾語をつけたいとき
  • テンプレート文字列で書くのが少し煩わしい部分を、メソッドチェーンとして組み立てたいとき

実際のプロジェクトでは、データを扱うAPIの結果が複数の配列に分かれて返ってくるケースは少なくありません。
それらをひとまとめにして後続の処理をまとめて行いたい場合、concatは非常にわかりやすい手段といえます。

文字列でも同様に、ユーザー名の先頭に「Hello」を付けたり、末尾に感嘆符「!」を付けたりする処理をconcatで行えば、比較的スッキリ書けるかもしれません。
もちろん、後述する**+演算子やテンプレートリテラル**との比較も大切です。

+演算子で文字列を連結する場合との違い

JavaScriptを学び始めると、文字列を連結するために+演算子をよく使います。

const firstName = "Jane";
const lastName = "Doe";
const fullName = firstName + " " + lastName;
console.log(fullName); // "Jane Doe"

こちらもシンプルでわかりやすい方法です。
では、concatメソッドと+演算子とでは、どんな違いがあるのでしょうか。

可読性の観点

+演算子は、パッと見て連結していることが一目でわかりますが、複数の要素を組み合わせるときには、カンマのように並びが増えてしまい見づらくなる場合があります。
一方、concatメソッドの場合は、concat(文字列, ...文字列)という形で引数を列挙できるので、メソッドチェーンに近い感覚で扱えることがあります。

const text1 = "重要な通知:";
const text2 = "あなたの登録情報は更新されました。";
const combinedText = text1.concat(" ", text2);
console.log(combinedText);

上記のように、直感的に「何を付け足しているか」を把握しやすい面があるでしょう。

配列の場合は+演算子が使えない

文字列なら+演算子が使えますが、配列の連結は+演算子ではうまくいきません。
配列同士を足し算すると、意図しない文字列ができてしまうことがあります。

const arr1 = [1, 2];
const arr2 = [3, 4];
console.log(arr1 + arr2); // "1,23,4"

ご覧のように、文字列に変換されてしまっています。
このため、配列を連結したい場合はconcatメソッドか、スプレッド構文（[...]）などを使うのが一般的です。

テンプレートリテラルによる文字列の連結

JavaScriptのモダンな書き方として、テンプレートリテラルがあります。
バッククォート（`）で囲った中に${変数}を埋め込むスタイルです。

const language = "JavaScript";
const action = "concat";
const result = `This is about ${language} ${action}`;
console.log(result); // "This is about JavaScript concat"

この方法は、文字列を埋め込む部分がわかりやすい反面、連結処理のために改行や複雑な計算ロジックを入れたい場合にコードが長くなることがあります。
ただ、多くの場面ではテンプレートリテラルは高い可読性を持ち、最初に検討すべき方法といえます。

テンプレートリテラルとの比較

concatメソッドを使うか、テンプレートリテラルを使うかは好みに左右される部分が大きいです。
ただし、テンプレートリテラルが主体の場合でも、一度に複数の文字列や変数を組み合わせたいシーンではconcatを使うことがあります。
特に、変数の個数が不定のときは、配列に変数をまとめておき、最後にconcatで一気に結合するような実装が考えられます。

concatを使った実務での文字列操作例

ここで、簡単な実務シーンを想定したサンプルを見てみましょう。
例えば、ユーザーがフォームで入力した「名前」「メールアドレス」を一つのテキストにまとめて保存したいケースです。

function createUserRecord(name, email) {
  const header = "登録情報:";
  const userInfo = header.concat(" ", name, " / ", email);
  return userInfo;
}

const record = createUserRecord("Taro Yamada", "taro@example.com");
console.log(record); // "登録情報: Taro Yamada / taro@example.com"

ここでは、header.concat(" ", name, " / ", email)という形で4つの文字列を連結しています。
内部的には連結後の新しい文字列が作られるだけなので、headerなどの元の文字列が書き換わらないのも安心感があります。

実際の開発で、文字列連結が複雑になる場合は、テンプレートリテラルや整形用のライブラリを活用することも多いです。
ただ、このように簡単な内容なら、concatで十分に可読性を保てるでしょう。

concatを使った実務での配列操作例

配列の場合も、実務ではAPI応答やユーザー入力など、さまざまなソースから得た配列をまとめて扱うシーンが考えられます。
例えば、商品データを扱う場合を考えてみましょう。

const fruits = ["apple", "banana"];
const vegetables = ["carrot", "spinach"];

function combineProductLists(list1, list2) {
  const combined = list1.concat(list2);
  return combined;
}

const productList = combineProductLists(fruits, vegetables);
console.log(productList); // ["apple", "banana", "carrot", "spinach"]

受け取る配列の個数が増えたとしても、array1.concat(array2, array3, ...)のように書くことで、まとめて結合できます。
実務では、あらかじめ複数の配列をひとまとめにしておき、後で一気に画面表示やファイルへの書き込み処理を行う、といった使い方をすることもあります。

また、既存の配列を破壊せずに新しい配列を返すという性質は、イミュータブルなデータ処理が求められる場面でも好まれます。
例えば、Reactのように状態管理を行うフレームワークやライブラリでは、元の配列を直接操作せず、新しい配列を生成する方針をとることが多いです。

concat以外で配列を結合する方法

concatと同じような働きをする方法として、スプレッド構文（...）があります。

const arrA = [1, 2];
const arrB = [3, 4];
const combined = [...arrA, ...arrB];

この書き方は、配列要素をそのまま展開して連結しているイメージです。
concatを使うかスプレッド構文を使うかは、チームや好みによるところも大きいです。
ただ、スプレッド構文だと連結だけでなく、要素の再配置やフィルタリングも組み合わせやすいという利点があります。

concatを選択する理由

スプレッド構文を使えば、配列連結だけでなく追加や分割も柔軟に行えます。
一方、concatは**「連結したい」**という意図がコード上ではっきりわかるため、読み手に意図を伝えやすい面もあるでしょう。
複数の配列を手順的に連結する場合、たとえばarray1.concat(array2).concat(array3)のようにチェーンを書けるので、それぞれの連結ステップを視覚的に把握しやすい場合があります。

concatのパフォーマンスを考える

初心者の皆さんがいきなりパフォーマンスを気にすることは少ないかもしれません。
ただ、大量のデータを扱う場合や、文字列の結合が頻繁に行われる部分のパフォーマンスを微調整したいときは、あらかじめ知識を持っていると安心です。

文字列連結のパフォーマンス

実は、JavaScriptエンジン（V8など）は文字列の連結を最適化しているため、+演算子やconcatのパフォーマンス差は、昔ほど顕著ではないという意見もあります。
それよりも、文字列操作を何度も繰り返す場合は、一旦配列に格納して最後に一度だけ連結するなど、アルゴリズム的な工夫が大切かもしれません。

配列連結のパフォーマンス

配列連結も、サイズが膨大にならない限り、concatで十分な速度が出るケースがほとんどです。
ただし、極端に大きな配列を連結する場合や、処理をループの中で何度も実行する場合は注意が必要です。
そのときは、スプレッド構文や他の方法とのベンチマークを比較して、最適な手法を選ぶとよいでしょう。

トラブルシューティング：連結時のよくある落とし穴

concatや+演算子で連結を行うとき、初心者の皆さんがつまずきやすいポイントもあります。

数値やオブジェクトを連結しようとする

文字列連結のつもりで、誤って数値やオブジェクトをconcatに渡してしまうと、意図しない結果になることがあります。
JavaScriptでは暗黙の型変換が行われるので、思わぬ文字列が出来上がることがあるのです。

console.log("Age: ".concat(25)); // "Age: 25"
console.log("Data: ".concat({ user: "Alice" })); // "Data: [object Object]"

オブジェクトを連結すると[object Object]という文字列になってしまうので、JSON文字列に変換するなどの明示的な対応が必要です。

変数の初期値がnullやundefined

変数がnullやundefinedのままconcatに渡されると、文字列の中にそのまま"null"や"undefined"という文字が入ってしまうことがあります。
初心者の方は、ここで「なぜこんな文字列が？」と驚くかもしれません。
防ぐためには、concatする前に変数の存在確認を行うか、デフォルト値を設定しておきましょう。

concatと他の連結手段をどう使い分けるか

ここまで、文字列や配列を連結するための複数の方法を見てきました。
それぞれの特徴を整理すると、次のようなイメージになります。

  • concatメソッド

    • 配列でも文字列でも同じメソッド名で結合
    • 元のデータを変更せず、新しいデータを返す
    • 連結の意図を明確に表現できる

  • +演算子（文字列のみ）

    • 簡単で理解しやすいが、配列には使えない
    • 変数が多いと結合式が長くなる

  • テンプレートリテラル

    • 文章的な文字列を組み立てやすく、可読性が高い
    • 複雑なロジックを入れると、かえって読みにくくなる場合も

  • スプレッド構文（配列向け）

    • 連結だけでなく、要素の挿入や取り出しなど柔軟な操作が可能
    • 大量データでのパフォーマンスやメモリ使用量に注意が必要

皆さんが実際にコードを書くときは、それぞれの長所・短所を踏まえて使い分けるとよいでしょう。
チームのコーディング規約や、読みやすさ、メンテナンス性などを考慮することで、適切な方法を選べます。

実務で意識したいポイント：保守性と可読性

プログラミングで重要なのは、書いて終わりではなく保守しやすいコードを書くことです。
特に、複数人で開発を進めるプロジェクトでは、後から見返しても何をしているのかがすぐに分かるコードが求められます。

  • 開発者が意図を理解しやすいか
  • 将来的に拡張するときに変更箇所が分かりやすいか
  • バグが起きたときに原因を追いやすいか

concatメソッドは名前の通り「連結」という意図がはっきりしており、可読性と保守性を両立しやすい面があります。
一方で、テンプレートリテラルなどのほうが全体を一度に見渡せるときもあるので、状況に合わせて使い分けましょう。

データを編集する際は、連結後のデータ構造が変わらないか確認するのがおすすめです。特に、配列操作を行うときは、元の配列を書き換えないように注意すると、バグを減らせます。

concatのエラー対策とデバッグ

初心者の皆さんが、concat周りでトラブルに遭遇する場合の多くは、想定外の型が渡されているケースや、空文字や空配列の扱いに原因があります。
デバッグ方法としては、以下のステップがおすすめです。

1. console.logで値を確認する

連結前の変数や配列の中身を出力して、想定どおりのデータが入っているかをまず確かめます。

2. typeof演算子やArray.isArrayなどで型をチェックする

文字列だと思っていたら実は数値だった、配列だと思ったらオブジェクトだった、ということがよくあります。

3. 複雑な連結をまとめて一つの処理にしない

何重にもconcatを使う場合は、段階ごとにテストして正しい値が返ってきているかを確かめるとバグを見つけやすくなります。

こうした基本的なデバッグプロセスを踏むことで、concatの使い方に慣れていくとともに、エラー発生時の原因究明がしやすくなるでしょう。

まとめ

ここまで、JavaScriptのconcatメソッドを中心に、文字列と配列の連結方法や、実務での活用シーンを解説してきました。
concatは、文字列と配列という異なるデータ型に同じ名前で使える点が特徴的で、意外と便利なメソッドです。
+演算子やテンプレートリテラル、スプレッド構文など、連結に使える方法はいくつかありますが、どれを選ぶかは可読性や保守性、そしてチームのルールなどに左右されます。

concatメソッドのポイント

  • 元のデータを変更せずに新しいデータを返すため、イミュータブルな操作が可能
  • 文字列同士でも配列同士でも同じ使い方で連結できる
  • 実務では、ユーザー入力やAPI応答をまとめる際などに活躍しやすい

皆さんの開発スタイルに合わせて、concatの使い方を押さえておくと良いでしょう。
また、パフォーマンスや保守性を意識することで、よりわかりやすく、扱いやすいコードを書くことにつながります。
ぜひ、日頃のコーディングでも意識してみてください。

JavaScriptをマスターしよう

この記事で学んだJavaScriptの知識をさらに伸ばしませんか？
Udemyには、現場ですぐ使えるスキルを身につけられる実践的な講座が揃っています。

JavaScriptの人気講座ランキングを見る筆者おすすめ No.1 講座！「ちゃんと学ぶ、HTML/CSS + JavaScript」
プログラミング言語の新着記事をチェック

【PHP】連想配列とは？具体例と使い方をわかりやすく解説