JavaScriptの配列を文字列にする方法
はじめての人でもわかるように、配列を「つなげて文字列にする」2つの方法、join() と toString() を例題つきで丁寧に説明します。どちらも「配列の中身を文字に変える」メソッドですが、できることが少し違います。
配列ってそもそも何？
- 説明: 配列は「複数の値をひとつの箱にまとめたもの」です。箱の中身は順番に並んでいます。
- 例:
const items = ['A', 'B', 'C'];
console.log(items.join()); // "A,B,C" 区切り指定なし→カンマ
console.log(items.join(' - ')); // "A - B - C"
console.log(items.join('')); // "ABC" 区切りなし
join() メソッド：好きな区切りでつなぐ
- できること: 配列の要素を文字に変えて、指定した「区切り文字」でつないだ1つの文字列を作る。
- 書き方:
配列.join(区切り文字);
- ポイント:
- 区切り文字なしだと、デフォルトでカンマ「,」でつながる。
- 好きな区切りを入れられる（空白、記号、改行など）。
- 空文字 “” を使えば区切りなしでギュッと連結。
例1：基本の使い方
const items = ['A', 'B', 'C'];
console.log(items.join()); // "A,B,C" 区切り指定なし→カンマ
console.log(items.join(' - ')); // "A - B - C"
console.log(items.join('')); // "ABC" 区切りなし
例2：実用例（表示用の文字を作る）
const names = ['田中', '佐藤', '鈴木'];
const message = '参加者：' + names.join('、');
console.log(message); // "参加者：田中、佐藤、鈴木"
例3：改行でつなぐ（画面で縦に並べたい）
const todos = ['洗濯', '買い物', 'メール返信'];
console.log(todos.join('\n'));
// 出力:
// 洗濯
// 買い物
// メール返信
例4：数値を計算式っぽく見せる
const nums = [10, 20, 30];
console.log(nums.join(' + ')); // "10 + 20 + 30"
例5：配列の中に配列がある場合（ネスト）
const data = [['Apple', 120], ['Grapes', 80]];
console.log(data.join(' | ')); // "Apple,120 | Grapes,80"
// 中の配列はまず "Apple,120" のような文字になってから、外側で join されます
例6：空要素、undefined、null の扱い
const scores = [10, , 20, undefined, null, 30];
console.log(scores.join(',')); // "10,,20,,,30"
// 空のところは「空文字」として扱われ、区切りだけが並びます
toString() メソッド：常にカンマでつなぐ簡易版
- できること: 配列を「カンマ区切りの文字列」に変えるだけ。区切りは変更できない。
- 書き方:
配列.toString();
- ポイント:
- いつでも「,」で結合される。
- 区切りを自由に変えたいなら
join()のほうが便利。
例：基本の使い方
const fruits = ['Apple', 'Grapes', 'Orange'];
console.log(fruits.toString()); // "Apple,Grapes,Orange"
どっちを使う？簡単な目安
- 自由な区切りが欲しい:
join()を使う - ただ文字列にしたいだけ（カンマでOK）:
toString()を使う - 実務のよくある使い方: 画面表示や出力成形では
join()のほうが圧倒的に多い
例題と練習問題
例題1：参加者名を表示用の文字にする
- 課題:
['田中', '佐藤', '鈴木']を「参加者：田中・佐藤・鈴木」にしたい - 模範解答:
const members = ['田中', '佐藤', '鈴木'];
const result = '参加者：' + members.join('・');
console.log(result); // "参加者：田中・佐藤・鈴木"
例題2：タグのスラッグ生成（区切りなし）
- 課題:
['web', 'design', 'tips']をwebdesigntipsにしたい - 模範解答:
const tags = ['web', 'design', 'tips'];
const slug = tags.join('');
console.log(slug); // "webdesigntips"
例題3：チェックリストを縦表示
- 課題:
['手を洗う', 'うがいする', '机を拭く']を行ごとに表示 - 模範解答:
const checklist = ['手を洗う', 'うがいする', '机を拭く'];
console.log(checklist.join('\n'));
// 手を洗う
// うがいする
// 机を拭く
例題4：ネストした配列の見え方を確認
- 課題:
[['Pen', 100], ['Notebook', 200]]を"Pen,100 | Notebook,200"にしたい - 模範解答:
const items = [['Pen', 100], ['Notebook', 200]];
console.log(items.join(' | ')); // "Pen,100 | Notebook,200"
練習問題（自分でやってみよう）
- 問題1:
['山田', undefined, '田中']を山田・・田中にしたい。何を使う？区切りは？
ヒント:
['山田', undefined, '田中'].join('・')
- 問題2:
['2025', '10', '27']を2025-10-27にするコードを書いてみよう。 - 問題3:
['A', 'B', 'C']をABCにするにはどうする？ - 問題4:
['洗濯', '買い物']をカンマ区切りの文字列にする、一番短い書き方は？
よくあるつまずきポイント
- 数値や真偽値も文字になる:
join()は要素を「文字」にしてからつなぐので、型が混ざっていても基本OK。 - 区切りの入れ忘れ:
join()に区切りを入れないと勝手に「,」になる。意図した表示にしたいなら明示しよう。 - 空要素の見え方: 配列に空要素（
[1, , 3]）があると、区切りだけが続く見た目になる。データ作成時に注意。
まとめのひとこと
- 見栄えを整えるなら
join()、ただカンマ区切りでよければtoString()。
表示用の文字を作る場面が多いなら、join()を日常的に使いこなすのがおすすめです。