お問い合わせ
お問い合わせ
ホーム > JavaScript > JavaScriptのjoin()とは？配列を文字列に変換する基本と使い方を徹底解説

JavaScriptのjoin()とは？配列を文字列に変換する基本と使い方を徹底解説

JavaScript
JavaScriptのjoin()で配列が1つの文字列に連結されるイメージ
配列の要素を区切り文字でつなぎ、1つの文字列に変換するjoin()のイメージ

JavaScriptのjoin()は、配列の要素を連結して1つの文字列に変換するメソッドです。
シンプルながら実務でも頻繁に使われる重要な機能であり、ログ出力・CSV生成・UI表示など幅広い用途に活用されます。

この記事では、join()の基本から実践的な使い方、注意点までを丁寧に解説します。

join()とは

join()は、配列の各要素を指定した区切り文字（セパレータ）で連結し、1つの文字列として返すメソッドです。

// join-basic.js
const fruits = ['apple', 'banana', 'orange'];

const result = fruits.join(',');

console.log(result); // apple,banana,orange

ポイント

  • 元の配列は変更されない（非破壊）
  • 戻り値は文字列
  • 区切り文字は自由に指定できる

join()の基本構文

array.join(区切り文字);

引数の説明

引数内容
区切り文字要素同士をつなぐ文字列（省略可）

区切り文字を変更する

区切り文字は自由に指定できます。

// join-separator.js
const fruits = ['apple', 'banana', 'orange'];

console.log(fruits.join(' / ')); // apple / banana / orange

よく使う区切り文字

  • ','：CSV形式
  • ' '：スペース区切り
  • ' / '：見やすいUI表示
  • ''：文字をそのまま連結
// join-no-separator.js
const chars = ['H', 'e', 'l', 'l', 'o'];

console.log(chars.join('')); // Hello

join()の具体的な使い方

1. 配列を文章として表示する

// join-sentence.js
const items = ['りんご', 'みかん', 'ぶどう'];

const text = items.join('、');

console.log(text); // りんご、みかん、ぶどう

2. CSV形式の文字列を作成する

// join-csv.js
const data = ['田中', '25', '東京'];

const csv = data.join(',');

console.log(csv); // 田中,25,東京

3. 配列をHTML表示用の文字列に変換する

// join-html.js
const list = ['項目1', '項目2', '項目3'];

const html = '<li>' + list.join('</li><li>') + '</li>';

console.log(html);
// <li>項目1</li><li>項目2</li><li>項目3</li>

join()とtoString()の違い

配列を文字列に変換する方法としてtoString()もありますが、柔軟性に違いがあります。

// join-vs-tostring.js
const arr = [1, 2, 3];

console.log(arr.toString()); // 1,2,3
console.log(arr.join('-'));  // 1-2-3

違いまとめ

メソッド区切り文字の指定
join()可能
toString()不可（カンマ固定）

join()の注意点

undefined・nullは空文字として扱われる

// join-null.js
const arr = [1, undefined, 3, null];

console.log(arr.join('-')); // 1--3-

意図しない空文字が入る可能性があるため注意が必要です。

ネストされた配列はそのまま結合される

// join-nested.js
const arr = [1, [2, 3], 4];

console.log(arr.join('-')); // 1-2,3-4

配列の中の配列は自動的にtoString()されます。

join()と他の配列メソッドの関係

join()は、配列を「文字列に変換する最終処理」として使われることが多いです。

例えば、map()やfilter()と組み合わせることで、実務的な処理が可能になります。

// join-with-map.js
const numbers = [1, 2, 3, 4];

const result = numbers
  .map((n) => n * 2)
  .join(', ');

console.log(result); // 2, 4, 6, 8

内部リンク

これらと組み合わせることで、より実践的なデータ処理が可能になります。

join()を使う場面まとめ

  • 配列を画面表示用の文字列にする
  • CSVやログデータを作る
  • HTML文字列を生成する
  • データ整形の最終工程

まとめ

join()は、配列を扱う上で非常に基本かつ重要なメソッドです。

  • 配列を文字列に変換できる
  • 区切り文字を自由に指定できる
  • 非破壊で安全に使える
  • map()やfilter()と組み合わせると実務で活躍する

シンプルな機能ですが、使いどころを理解することでコードの可読性と効率が大きく向上します。

関連記事