【JavaScript】配列要素を連結して文字列化！joinメソッドの活用法

2026年1月25日

概要

配列として管理されているデータを、CSV形式（カンマ区切り）や特定のフォーマット（スラッシュ区切りなど）の1つの文字列に変換したい場合、join メソッドを使用します。

ループ処理で文字列連結を行うよりも簡潔で、末尾の区切り文字処理なども不要なため、非常に効率的です。本記事では、IPアドレスの生成ツールを例にその挙動を解説します。

仕様（入出力）

`join` メソッド

配列の全要素を指定された区切り文字で連結し、新しい文字列を生成します。

引数	説明
`separator` (省略可)	要素間に挿入する文字。・省略時: `","`（カンマ）・`""`（空文字）: 区切りなし

入力: 配列（Array） ※数値、文字列などが混在していても可
出力: 結合された文字列（String）

基本の使い方

1. デフォルト動作（カンマ区切り）

引数を省略すると、CSVデータのようにカンマで結合されます。

const points = [100, 200, 300];
console.log(points.join()); // "100,200,300"

2. 区切り文字を指定（スラッシュなど）

日付データなどを整形する際に使用します。

const dateComponents = [2026, 1, 15];
console.log(dateComponents.join('/')); // "2026/1/15"

3. 直結する（空文字）

区切り文字を入れずに繋げたい場合は空文字を指定します。

const hexParts = ['#', 'FF', '57', '33'];
console.log(hexParts.join('')); // "#FF5733"

コード全文（HTML / JavaScript）

4つの数値入力フィールドから値を取得し、ドット（.）で連結してIPアドレス形式の文字列を生成する設定ツールの例です。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IP Address Generator</title>
    <style>
        .network-panel {
            font-family: 'Segoe UI', sans-serif;
            background-color: #f0f4f8;
            padding: 25px;
            border-radius: 8px;
            border: 1px solid #d1d9e6;
            width: fit-content;
        }
        .ip-inputs {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-bottom: 15px;
        }
        .octet {
            width: 50px;
            padding: 8px;
            text-align: center;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 1rem;
        }
        .dot {
            font-weight: bold;
            color: #555;
        }
        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
        }
        button:hover {
            background-color: #0056b3;
        }
        .result-box {
            margin-top: 15px;
            padding: 10px;
            background: #fff;
            border: 1px solid #ccc;
            font-family: monospace;
            color: #333;
            min-height: 1.2em;
        }
    </style>
</head>
<body>

<div class="network-panel">
    <h3>IPアドレス設定</h3>
    <div class="ip-inputs">
        <input type="number" class="octet" value="192" min="0" max="255">
        <span class="dot">.</span>
        <input type="number" class="octet" value="168" min="0" max="255">
        <span class="dot">.</span>
        <input type="number" class="octet" value="0" min="0" max="255">
        <span class="dot">.</span>
        <input type="number" class="octet" value="1" min="0" max="255">
    </div>
    
    <button id="btn-connect">設定を適用 (Join)</button>
    
    <div id="connection-log" class="result-box"></div>
</div>

<script src="ip_builder.js"></script>
</body>
</html>

JavaScript

/**
 * ネットワーク設定スクリプト
 * 数値配列をjoinで結合してIPアドレスを生成する
 */

// DOM要素の取得
const btnConnect = document.getElementById('btn-connect');
const octetInputs = document.querySelectorAll('.octet');
const logArea = document.getElementById('connection-log');

/**
 * IPアドレス構築処理
 */
const buildIpAddress = () => {
    // 1. 入力欄(NodeList)から数値を取得して配列化する
    // Array.fromを使ってmap処理を行う
    const octetValues = Array.from(octetInputs).map(input => {
        // 空欄の場合は0として扱うなどのバリデーションが必要だが
        // ここでは単純に入力値をそのまま使用
        return input.value;
    });

    // octetValues は ["192", "168", "0", "1"] のような配列になっている

    // 2. joinメソッドで結合
    // 区切り文字にドットを指定する
    const ipAddressString = octetValues.join('.');

    // 結果の出力
    logArea.textContent = `Generated IP: ${ipAddressString}`;
    console.log(`接続先: ${ipAddressString}`);
};

// イベントリスナー
btnConnect.addEventListener('click', buildIpAddress);

カスタムポイント

区切り文字の定数化:const SEPARATOR = '.'; のように定数にしておくと、仕様変更（例: MACアドレスで使うコロン : への変更など）に強くなります。
数値以外の型の処理:null や undefined が配列に含まれている場合、join はそれらを空文字として扱います。意図しない欠損を防ぐため、事前に map や filter でデータを整形しておくのが安全です。

注意点

文字列化される:配列内の要素が数値（Number）であっても、join の結果は必ず文字列（String）になります。
ネストした配列:[[1, 2], [3, 4]].join('-') のように多次元配列に対して実行すると、内部の配列もデフォルト（カンマ区切り）で文字列化され、"1,2-3,4" のような結果になります。意図通りに制御したい場合は flat() で平坦化してから join してください。

応用

パンくずリストの生成

Webサイトの階層構造（配列）を、矢印記号で繋いでナビゲーションを生成します。

const path = ['Home', 'Products', 'Electronics', 'Smartphones'];

// スペース付きの記号で連結
const breadcrumb = path.join(' > ');

console.log(breadcrumb); 
// "Home > Products > Electronics > Smartphones"