初心者向けにやさしく、例題たっぷりで join() と toString() を丁寧に解説します。実際に手を動かせるサンプルと、レベル別の練習問題（解答付き）も付けます。
配列を「1つの文字列」にするってどういうこと？
配列（例：['Apple', 'Banana', 'Cherry']）の中身を、1行の文字列にまとめる操作です。よくある用途は「ログ出力」「CSV に変換」「画面表示用のテキスト作り」など。
JavaScript では主に join() と toString() の2つを使います。
join() の使い方（超重要）
役割：配列の要素を文字列に変換して、指定した区切り文字でつなげる。
書き方：
配列.join(区切り文字)
区切り文字を省略すると ","（カンマ）になります。
例 1：基本
let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits.join()); // "Apple,Banana,Cherry"
console.log(fruits.join(' / ')); // "Apple / Banana / Cherry"
console.log(fruits.join('')); // "AppleBananaCherry"
例 2：数値と混ざっている場合
let arr = ['A', 123, true];
console.log(arr.join('-')); // "A-123-true"
→ 要素は自動で文字列化されます。
例 3：ネストした配列（中に配列がある場合）
let nested = [['A', 1], ['B', 2]];
console.log(nested.join(' | ')); // "A,1 | B,2"
→ 内側の配列はまず "A,1" のように toString され、その後外側でつながれます。思った通りにしたければ中身を加工してから join します。
例 4：undefined / null がある場合
let a = [10, undefined, 30, null];
console.log(a.join(',')); // "10,,30," （undefined/null は空文字扱い）
toString() の使い方（覚えておこう）
役割：配列をカンマ区切りの文字列に変換する。join() による join(',') とほぼ同じ動きをします（内部で join(',') を呼んでいるイメージ）。
let arr = [1,2,3];
console.log(arr.toString()); // "1,2,3"
// join と同じ：
console.log(arr.join(',')); // "1,2,3"
注意点：区切り文字を変えられないので、自由に区切りを選びたいときは join() を使ってください。
よくある「困った！」パターンと対策
- 配列の中にオブジェクトがある
let users = [{name: 'A'}, {name: 'B'}];
console.log(users.join(';')); // "[object Object];[object Object]"
→ オブジェクトはデフォルトで "[object Object]" に変換されます。解決法は map で文字列に変換してから join：
console.log(users.map(u => u.name).join(', ')); // "A, B"
- ネスト配列をフラットにしたい
let nested = ['A', ['B','C'], 'D'];
// 平坦化して結合
console.log(nested.flat().join(', ')); // "A, B, C, D"
（flat() は深さ1の flatten。古いブラウザでは使えない場合あり。）
- 空配列
[].join(',') // ""（空文字列）
[].toString() // ""（空文字列）
実用サンプル：CSV 行を作る
let row = ['Alice', 'Tokyo', 28];
let csvLine = row.join(','); // "Alice,Tokyo,28"
実用サンプル：HTML のリストを作る
let items = ['りんご', 'ばなな', 'オレンジ'];
let html = '<ul>' + items.map(i => `<li>${i}</li>`).join('') + '</ul>';
// "<ul><li>りんご</li><li>ばなな</li><li>オレンジ</li></ul>"
練習問題
初級（基礎）
['Tokyo', 'Osaka', 'Nagoya']を"Tokyo | Osaka | Nagoya"にしてください。
解答：
['Tokyo', 'Osaka', 'Nagoya'].join(' | ')
- 空文字区切りで
['1','2','3']を'123'にしてください。
解答：
['1','2','3'].join('')
中級（少し考える）
['A', undefined, 'B', null, 'C']をカンマ区切りで文字列にしたらどうなる？ 意図的にundefinedを"?"に置き換えるには？
解答：
- そのまま
join(',')→"A,,B,,C"（undefined/null は空文字） - 置き換え：
['A', undefined, 'B', null, 'C'].map(x => x == null ? '?' : x).join(',')
結果： "A,?,B,?,C"
- 配列
[{name:'Amy'},{name:'Bob'}]から"Amy & Bob"を作る。
解答：
[{name:'Amy'},{name:'Bob'}].map(u => u.name).join(' & ')
上級（実務に近い）
- 2次元配列
[['A',1], ['B',2]]を"A:1;B:2"の形式にする。
解答：
[['A',1], ['B',2]].map(pair => pair.join(':')).join(';')
// 中の pair.join(':') で "A:1" とし、外で ";" でつなぐ
まとめ（覚えておきたいポイント）
join(separator)：区切り文字を指定できる、これが一番使う。toString()：カンマ区切りの文字列を返す（join(',')と同じ）。- 中にオブジェクトや配列があると「期待と違う」変換になるので、
mapで事前に文字列化すると安心。 undefined/nullは空文字として扱われる。必要ならmapで置き換える。