【2026年9月最新】JavaScriptの配列・文字列連結ガイド｜join・+演算子・テンプレートリテラルの使い分けとClaude Codeでの書き方

「配列の中身をカンマ区切りの文字列にしたい」「変数と文字列をつなげて表示したい」——JavaScriptを触り始めると、必ずと言っていいほどこの「連結・結合」の壁にぶつかります。

やり方自体はシンプルなのですが、+演算子・join()・concat()・テンプレートリテラルなど選択肢が複数あり、「結局どれを使えばいいのか」「なぜundefinedが変な文字列になって表示されるのか」で混乱しがちな領域でもあります。

この記事では、JavaScriptで配列や文字列を連結する主要な方法を、コード例つきで基礎から丁寧に整理します。さらに後半では、「そもそもこの構文を人間が覚える必要があるのか」という視点から、弊社（株式会社GENAI）がClaude Codeを使ってこの手のコードをどう扱っているかも紹介します。

この記事を最後まで読むと、次のことが分かります。

01 STRING BASICS 文字列連結の基本：+演算子とテンプレートリテラル まずは最もよく使う2つの書き方を押さえる

JavaScriptで文字列同士をつなげる最も基本的な方法が+演算子です。数値の足し算と同じ記号を使いますが、対象が文字列の場合は「結合」の意味になります。

let name = "田中";
let greeting = "こんにちは、" + name + "さん";

console.log(greeting);
// => "こんにちは、田中さん"

複数の変数や文字列を+でつなげていけば、好きな順番で文章を組み立てられます。ただし、+を何個も並べると読みにくくなりがちなのが弱点です。

1-1. テンプレートリテラルで読みやすく書く

2015年以降のJavaScript（ES2015 / ES6以降）では、テンプレートリテラルというバッククォート（`）を使った書き方が使えます。文中に${変数名}と書くだけで変数の値を埋め込めるため、+を何個も並べるより圧倒的に読みやすくなります。

let name = "田中";
let age = 32;

// テンプレートリテラル
let profile = `${name}さんは${age}歳です`;

console.log(profile);
// => "田中さんは32歳です"

1-2. 演算の順番に注意：数値と文字列が混ざるとき

+演算子は、左から右へ順番に評価されます。このとき、途中に1つでも文字列が混ざると、それ以降の+はすべて「文字列の連結」として扱われる点に注意が必要です。

console.log(1 + 2 + "3");
// => "33"  （1+2が先に計算されて数値3になり、それが"3"と連結される）

console.log("1" + 2 + 3);
// => "123" （最初が文字列なので、以降はすべて文字列として連結される）

ここまでが文字列同士をつなげる基本の型です。次の章では、配列（複数の値をまとめて持つデータ）を1つの文字列に変換する方法を見ていきます。

02 ARRAY JOIN 配列を文字列に変換する join() メソッド 一覧データを見やすい1本の文字列にまとめる

商品名の一覧やタグの一覧など、複数の値を「配列」として持っているデータを、画面表示用に1つの文字列へまとめたい場面はよくあります。そこで使うのがjoin()メソッドです。

const fruits = ["りんご", "みかん", "ぶどう"];

console.log(fruits.join("、"));
// => "りんご、みかん、ぶどう"

console.log(fruits.join(" / "));
// => "りんご / みかん / ぶどう"

console.log(fruits.join(""));
// => "りんごみかんぶどう"

join()の引数には「区切り文字」を指定します。引数を省略すると、デフォルトでカンマ（,）区切りの文字列になります。

2-1. join() と toString() の違い

実は、配列を文字列に変換したいだけならtoString()や、文字列の中に配列を直接埋め込む方法でも一応動きます。ただしこれらは区切り文字が常にカンマ固定になるため、「、」や「 / 」など任意の区切り文字を使いたい場合はjoin()一択になります。

const tags = ["AI", "業務効率化", "自動化"];

console.log(tags.toString());
// => "AI,業務効率化,自動化"  （区切り文字はカンマ固定）

console.log(tags.join(" #"));
// => "AI #業務効率化 #自動化"  （任意の区切り文字を指定できる）

画面上に「タグ一覧」や「参加者名一覧」を表示するような場面では、ほぼ確実にjoin()が使われると考えて差し支えありません。次章では、この連結処理で初心者がよくつまずく「型変換の罠」を扱います。

03 TYPE COERCION 型変換の罠：undefined・NaN・オブジェクトの連結 「なぜこんな文字列が出るの？」を先に知っておく

JavaScriptの連結処理で初心者が最も戸惑うのが、値が自動的に文字列へ変換される「型強制（Type Coercion）」という仕組みです。エラーにならずに、意図しない文字列が静かに出力されるのが厄介なポイントです。

3-1. undefinedやNaNを連結するとどうなるか

存在しない変数や未定義の値を+で連結すると、エラーにはならず「undefined」という文字列がそのまま結合されます。

let userName;  // 値をまだ入れていない（undefined）

console.log("こんにちは、" + userName + "さん");
// => "こんにちは、undefinedさん"

console.log("合計：" + NaN + "円");
// => "合計：NaN円"

3-2. 配列の中にundefined・nullが混ざっている場合

一方、join()の場合は挙動が少し異なります。配列の要素にundefinedやnullが含まれていても、それらは空文字列として扱われ、「undefined」という文字は出力されません。

const arr = ["a", undefined, "b", null, "c"];

console.log(arr.join("-"));
// => "a--b--c"
// undefined と null は空文字("")として扱われる（"undefined"という文字にはならない）

+演算子とjoin()で、undefinedの扱いが違う点は意外と見落とされがちです。「配列は空文字になる」「単体の+連結ではundefinedという文字が出る」と覚えておくと事故を防げます。

3-3. オブジェクトを連結すると「[object Object]」になる

オブジェクト（複数のデータをまとめたもの）をうっかり+で文字列に連結してしまうと、中身ではなく[object Object]という文字列が出力されます。これは「このオブジェクトを文字列にしてください」とJavaScriptに依頼したときの標準の変換結果です。

const user = { name: "田中", age: 32 };

console.log("ユーザー情報：" + user);
// => "ユーザー情報：[object Object]"

// 中身を見せたいなら JSON.stringify を使う
console.log("ユーザー情報：" + JSON.stringify(user));
// => ユーザー情報：{"name":"田中","age":32}

この「[object Object]」問題は、初心者はもちろんベテランでも一度は踏むポイントです。オブジェクトの中身を文字列として見せたい場合はJSON.stringify()や、必要なプロパティだけを個別に取り出して連結する方法を使います。

04 PERFORMANCE ループ処理での+演算子とjoin()の速度の考え方 大量データを連結するときに気をつけたいこと

数件〜数十件程度の連結であれば、+でもjoin()でも体感差はほとんどありません。ただし、数千件を超えるデータをループで連結するような処理では、書き方によって挙動の安定性が変わってきます。

4-1. ループの中で += を繰り返す書き方

よく見かけるのが、ループの中で文字列変数に+=で継ぎ足していく書き方です。件数が少なければ問題ありませんが、件数が膨大になると、繰り返すたびに新しい文字列を作り直すような処理になりやすく、パフォーマンスが不安定になりやすいパターンとして知られています。

// 件数が多いと非効率になりやすい書き方
let result = "";
for (let i = 0; i < items.length; i++) {
  result += items[i] + "、";
}

4-2. 配列にpushして最後にjoin()する書き方

数千〜数万件規模を扱う可能性がある場合は、一旦配列にデータをpush()で貯めておき、最後に一括でjoin()する書き方が、一般的なJavaScriptのパフォーマンスガイドで推奨されているパターンです。

// 推奨されやすい書き方（件数が多いとき）
const parts = [];
for (let i = 0; i < items.length; i++) {
  parts.push(items[i]);
}
const result = parts.join("、");

重要なのは「絶対にjoin()を使わなければいけない」と暗記することではなく、データ量が多くなりそうな処理では選択肢があると知っておくことです。実務では、この判断自体もあとで紹介するようにAIに相談できます。

05 CONCAT & REPEAT concat()とrepeat()で結合・繰り返しする 配列同士の結合と、同じ文字列の繰り返し表示

連結には「配列同士をつなげる」「同じ文字列を繰り返す」といった周辺ニーズもあります。それぞれ専用のメソッドが用意されています。

5-1. concat()：配列・文字列を結合する

concat()は、配列同士を1つの配列にまとめたり、文字列同士をつなげたりするためのメソッドです。+演算子と似た結果になりますが、「元の配列・文字列は変更されず、新しいものが作られる」という性質があります。

const teamA = ["佐藤", "鈴木"];
const teamB = ["田中", "高橋"];

const allMembers = teamA.concat(teamB);
console.log(allMembers);
// => ["佐藤", "鈴木", "田中", "高橋"]

console.log(teamA);
// => ["佐藤", "鈴木"]  （teamA自体は変わらない）

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

5-2. スプレッド構文という選択肢

近年のJavaScriptでは、配列を結合する場合にconcat()の代わりにスプレッド構文（...）を使う書き方も広く使われています。書き方の好みの範囲ですが、知っておくとコードを読むときに困りません。

const teamA = ["佐藤", "鈴木"];
const teamB = ["田中", "高橋"];

const allMembers = [...teamA, ...teamB];
console.log(allMembers);
// => ["佐藤", "鈴木", "田中", "高橋"]  （concat()と同じ結果）

5-3. repeat()：同じ文字列を繰り返す

区切り線や装飾テキストなど、同じ文字列を複数回繰り返したいときはrepeat()メソッドが便利です。

console.log("ab".repeat(3));
// => "ababab"

console.log("=".repeat(20));
// => "===================="

ここまでで、文字列・配列の連結にまつわる主要な書き方は一通り紹介しました。次章では、これらを整理した早見表で全体像を1枚にまとめます。

06 QUICK REFERENCE 【独自】目的別・連結方法の使い分け早見表 「結局どれを使えばいいか」を1枚で判断する

ここまで紹介した方法を、目的別に整理した早見表です。コードを書く・読む際に迷ったら、この表に立ち返ってください。

やりたいこと	おすすめの方法	元データへの影響	注意点
文字列同士をつなげる	テンプレートリテラル（`${}`）	影響なし	読みやすさ重視なら第一候補
数値と文字列を混在させる	テンプレートリテラル	影響なし	+の評価順トラブルを避けられる
配列を1つの文字列にしたい	join(区切り文字)	影響なし	undefined/nullは空文字扱い
配列同士を結合したい	concat() / スプレッド構文	元配列は変更されない	大量データはメモリ使用量に留意
同じ文字列をN回繰り返す	repeat(回数)	影響なし	回数に負の数は指定不可（エラー）
大量データをループで連結	配列にpush→最後にjoin()	影響なし	数千件を超える処理で有効

例えば「特定の条件に合う配列要素だけを抜き出して、カンマ区切りの文字列にする」といった処理は、filter()とjoin()をメソッドチェーンでつなげて1行で書けます。

const products = [
  { name: "ノートPC", inStock: true },
  { name: "マウス", inStock: false },
  { name: "モニター", inStock: true },
];

const inStockNames = products
  .filter(p => p.inStock)
  .map(p => p.name)
  .join("、");

console.log(inStockNames);
// => "ノートPC、モニター"

この早見表と判断フローさえ手元にあれば、連結処理で迷う場面はかなり減らせます。とはいえ、実務では「この表のどれに当てはまるか」を毎回考えるより、そもそも人間が書かずに済ませる選択肢もあります。次章以降で詳しく紹介します。

07 GENAI CASE STUDY 【独自データ】GENAI社内でのClaude Code実運用 コーディングの細部を暗記しなくても業務は回るという実例

ここまで紹介したjoin()や+演算子の使い分けは、エンジニアにとっては基礎知識です。しかし弊社（株式会社GENAI）では、こうした構文を「人間が暗記する」前提そのものを見直し、Claude CodeというAIエージェントに実務のコーディングを任せる体制で運用しています。

項目	内容
契約プラン	Claude Max 20x（月額$200 / 約30,000円）
利用開始	2025年後半〜
導入範囲	経営・営業・広告・開発・経理・秘書業務・個人業務まで全社

弊社での肌感ベースの業務削減効果は以下の通りです（あくまで概算・肌感値としてご覧ください）。

業務領域	主な用途	概算削減時間
営業	提案書・見積・顧客別資料の自動生成	週20時間 → 週2時間
広告運用	週次レポート・CPA分析・配信内容調整	週10時間 → 週1時間
ブログ記事	SEO記事執筆・リライト・内部リンク最適化	1本8時間 → 1本1時間
経理	請求書チェック・経費仕訳・Freee連携	月40時間 → 月5時間
秘書業務	日報生成・議事録・スケジュール調整	日2時間 → 日15分
開発	WordPress/HTML/LP制作、スクリプト書き捨て	都度数時間削減
個人業務	メール下書き、雑務タスク整理	日1時間 → 日10分

もちろん、AIが生成したコードの意図を大まかに理解できた方が、指示の精度も上がりますし、思わぬ不具合にも気づきやすくなります。だからこそ、この記事の前半でjoin()や型変換の仕組みを解説してきました。次章では、実際に非エンジニアがどうClaude Codeにこの種のコードを書かせているかを見ていきます。

08 DELEGATE TO AI この構文、実は暗記しなくても大丈夫です 非エンジニアがClaude Codeにコードを書かせる方法

ここまでjoin()・+演算子・concat()・テンプレートリテラルと、細かい違いを紹介してきました。正直なところ、エンジニアを目指すのでなければ、この使い分けを一字一句暗記する必要はありません。

株式会社GENAIでは、Claude Codeというターミナル上で動くAIエージェントに、こうした細かいコーディング作業を日常的に任せています。人間がやるべきなのは「構文を覚えること」ではなく、「何を実現したいかを日本語で正確に伝えること」です。

8-1. こんな風に話しかけるだけでコードが書ける

例えば、この記事で扱った「配列をカンマ区切りの文字列にする」処理も、Claude Codeには次のように話しかけるだけで実装してもらえます。

あなた:
「このスプレッドシートの商品名リストを、カンマ区切りの1つの文章にして
メール本文に貼り付けたい。JavaScriptで処理するコードを書いて」

Claude Code:
（join()を使った関数を生成し、意図・注意点も日本語で説明してくれる）

8-2. Claude Codeが担ってくれる3つの役割

もちろん、AIに丸投げして中身を一切理解しないのはリスクがあります。ただ、この記事レベルの基礎知識があれば、「AIが出してきたコードの方向性が合っているか」くらいは判断できるようになります。細部の暗記はAIに任せ、人間は「何を実現したいか」の設計と、最終的なレビューに集中するというのが、弊社の実務での役割分担です。

09 CONCLUSION まとめ ── 連結の基礎を知れば、AIへの指示も的確になる コードは書けなくても、仕組みを知っておく価値はある

この記事では、JavaScriptにおける配列・文字列の連結方法を、基本の+演算子・テンプレートリテラルから、join()・concat()・repeat()、型変換の落とし穴、パフォーマンスの考え方まで整理しました。最後にポイントを振り返ります。

プログラミングの細かい構文は、今後ますます「人間が暗記するもの」から「AIに正確に指示して実行してもらうもの」へと役割が変わっていきます。とはいえ、この記事のような基礎知識があるからこそ、AIが書いたコードの妥当性を判断でき、より的確な指示も出せるようになります。

コードの細部を覚える前に、Claude Codeを使い倒す道もあります

join()や+演算子の使い分けのような細かい知識は、AI鬼管理の伴走支援を通じて「調べながら覚える」より「AIに任せながら学ぶ」方が早く身につきます。
自社の業務にどう組み込めるか、無料相談で一緒に整理します。

ここから先の進め方は、大きく2つあります。

自社で回せるようになりたい方は、AI鬼管理でClaude Code／Codexの使い方から業務設計・社内定着まで伴走を受けながら、社内に仕組みを作る道があります。

覚えるより任せたい方は、AI社員AIKATAでこの記事のような定型業務を丸ごと預ける道があります。料金は月30万円の月額定額、追加費用は0円です。

どちらが合うかは、業務量と社内体制次第です。無料相談・無料適合診断で、貴社の場合はどちらが向くかからご相談いただけます。

よくある質問

Q. join()とconcat()、配列を結合するならどちらを使うべきですか？

A. 目的によります。「配列の中身を1つの文字列にしたい」場合はjoin()、「複数の配列を1つの配列にまとめたい（結果も配列のまま）」場合はconcat()（またはスプレッド構文）を使います。出力結果が文字列か配列かで使い分けると迷いません。

Q. 文字列を連結するとき、+演算子とテンプレートリテラルはどちらが推奨されますか？

A. 現在のJavaScriptでは、可読性の観点からテンプレートリテラル（バッククォートと${}を使う書き方）が広く推奨されています。特に変数と数値が混ざる場面では、+演算子だと評価順序で意図しない結果になりやすいため、テンプレートリテラルの方が安全です。

Q. join()で区切り文字を指定しないとどうなりますか？

A. 引数を省略した場合、デフォルトでカンマ（,）区切りの文字列になります。例えば["a","b","c"].join()は"a,b,c"になります。カンマ以外の区切り文字にしたい場合は、join("、")のように明示的に指定する必要があります。

Q. 配列にundefinedやnullが含まれていると、join()の結果はどうなりますか？

A. join()の場合、undefinedとnullは空文字列として扱われます。例えば["a",undefined,"b"].join("-")は"a--b"になり、"undefined"という文字列がそのまま出力されることはありません。単体の+演算子で連結した場合は挙動が異なり、"undefined"という文字がそのまま混入するので注意が必要です。

Q. 大量のデータをループで連結するとき、必ずjoin()を使うべきですか？

A. 数十件程度であれば+=でループ連結しても体感差はほとんどありません。ただし数千件を超えるような大量データを扱う可能性がある処理では、配列にpushしておいて最後にjoin()で一括結合する書き方の方が、一般的に安定した速度になりやすいとされています。件数の規模を見て判断するのが実務的です。

Q. プログラミング未経験でも、この記事の内容を実務で使えますか？

A. 使えます。この記事の目的は「自分でゼロから書けるようになる」ことだけではなく、「AIが生成したコードが何をしているか、大まかに理解できる」ことにもあります。Claude Codeのようなツールに実装を任せる場合でも、この記事レベルの基礎知識があれば、出力結果の妥当性を判断しやすくなります。

Q. Claude Codeに任せれば、こうした構文を一切覚えなくても業務は回りますか？

A. 完全にゼロにはなりませんが、日常業務のほとんどはカバーできます。弊社の実運用でも、細かい構文の暗記より「何を実現したいか」を正確に日本語で伝える力の方が重要になっています。ただし、AIの出力を検証する最低限の基礎知識は、判断の質を上げるうえで引き続き価値があります。

AIAI鬼管理

AI鬼管理／AI社員AIKATAへのお問い合わせ

この記事を読んで気になった方へ。
専門スタッフが、御社に最適な
業務自動化・業務代行プランを無料でご提案します。

ご希望のサービス

お問い合わせ対象のサービス*必須 選択してください AI鬼管理（AI業務自動化の導入支援） AI社員AIKATA（業務の丸ごと代行） 両方・相談して決めたい

サービスを選択してください

---

お客様情報

会社名・屋号*必須

会社名を入力してください

業種*必須 選択してください IT・ソフトウェア 製造業 建設・不動産 小売・EC 飲食・宿泊 医療・介護 教育・研修 士業・コンサル 人材・BPO その他

業種を選択してください

お名前*必須

お名前を入力してください

メールアドレス*必須

※法人・事業用のメールアドレスでお願いします（Gmail等の個人用フリーメールは受付できません）

正しいメールアドレスを入力してください

電話番号任意

---

現在の課題について

現在感じている課題*必須

人手不足で業務が回らない 社長・経営者が現場を離れられない 定型業務に時間を取られている AIを導入したいが何から始めればいいかわからない 外注・人件費コストが高い 業務フローが属人化している 社員のITリテラシーにばらつきがある

1つ以上選択してください

効率化・自動化したい業務*必須

営業・顧客対応（CRM・メール等） 経理・請求書・入金管理 採用・人事・労務管理 マーケティング・SNS・広告運用 カスタマーサポート・問い合わせ対応 資料作成・レポート・議事録 データ入力・集計・分析 社内の情報共有・ナレッジ管理

1つ以上選択してください

上記業務に現在かけている月額コスト*必須 選択してください まだかけていない（これから検討） 〜10万円 10〜30万円 30〜50万円 50〜100万円 100万円以上 その他（自由入力）

月額コストを選択してください

その他、ご相談内容任意

---

面談日時の選択

ご希望の日時*必須

約1時間のオンライン面談（Google Meet）です

空き枠を取得中...

面談日時を選択してください

この内容で面談を予約する

予約確定後、Google Calendarの招待メールをお届けします。
しつこい営業は一切ございません。