目次
概要
CSVデータの解析やURLパラメータの抽出など、一続きの文字列を特定のルール（区切り文字）に従って分解し、扱いやすい配列形式に変換する処理は非常に重要です。 本記事では、String.prototype.split() メソッドを使用して、文字列を区切り文字で分割する基本操作から、URLクエリ文字列を解析してオブジェクトに変換する実用的な実装までを解説します。
仕様（入出力）
- 入力: URLのクエリ文字列を模したテキスト（例:
?user_id=8823&theme=dark&active=true）。 - 出力: 解析されたキーと値を持つオブジェクト（HTML上のリストとして表示）。
- 動作:
- 先頭の
?を除去し、&でパラメータごとに分割する。 - 各パラメータを
=でキーと値に分割し、デコード処理を行う。 - 生成されたオブジェクトを画面に描画する。
- 先頭の
基本の使い方
split() の引数に区切り文字（セパレータ）を指定します。戻り値は分割された文字列の配列です。
const dateStr = "2026-01-24";
const parts = dateStr.split("-");
console.log(parts); // ["2026", "01", "24"]
// 空文字を指定すると、1文字ずつ分割されます
const word = "Code";
console.log(word.split("")); // ["C", "o", "d", "e"]
コード全文（HTML / JavaScript）
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>String Split Example</title>
<style>
body { font-family: sans-serif; padding: 20px; }
.result-box {
background-color: #f8f9fa;
border: 1px solid #dee2e6;
padding: 15px;
border-radius: 4px;
margin-top: 10px;
}
ul { margin: 0; padding-left: 20px; }
code { background: #eee; padding: 2px 4px; border-radius: 2px; }
</style>
</head>
<body>
<h2>URLパラメータ解析</h2>
<p>解析対象: <code id="targetUrl">?product=laptop&category=pc&ref=google</code></p>
<div id="outputArea" class="result-box">
解析結果を表示中...
</div>
<script src="app.js"></script>
</body>
</html>
JavaScript
/**
* クエリ文字列を解析してオブジェクトに変換する関数
* @param {string} queryString - 解析対象の文字列（例: "?a=1&b=2"）
* @returns {Object} キーと値のペアを持つオブジェクト
*/
const parseQueryString = (queryString) => {
// 1. 先頭の "?" を除去（存在する場合のみ）
const paramsStr = queryString.startsWith("?")
? queryString.slice(1)
: queryString;
if (!paramsStr) return {};
// 2. "&" で各パラメータブロックに分割
// 例: ["product=laptop", "category=pc", "ref=google"]
const paramPairs = paramsStr.split("&");
const result = {};
paramPairs.forEach((pair) => {
// 3. "=" でキーと値に分割
// splitの第2引数で分割数を制限することも可能ですが、
// 値の中に "=" が含まれる可能性を考慮して単純に分割します
const splitIndex = pair.indexOf("=");
if (splitIndex === -1) return; // "=" がない場合はスキップ
const key = pair.slice(0, splitIndex);
const rawValue = pair.slice(splitIndex + 1);
// URLデコード処理
result[key] = decodeURIComponent(rawValue);
});
return result;
};
// 実行処理
const init = () => {
const targetElement = document.getElementById("targetUrl");
const outputElement = document.getElementById("outputArea");
const inputString = targetElement.textContent;
// 解析実行
const parsedData = parseQueryString(inputString);
// 結果をHTMLリストとして生成
const listHtml = Object.entries(parsedData)
.map(([key, value]) => `<li><strong>${key}</strong>: ${value}</li>`)
.join("");
outputElement.innerHTML = `<ul>${listHtml}</ul>`;
console.log("解析結果オブジェクト:", parsedData);
};
document.addEventListener("DOMContentLoaded", init);
カスタムポイント
- 正規表現による分割:
splitの引数には文字列だけでなく正規表現も指定可能です。例えば、カンマとスペースの両方で分割したい場合はtext.split(/[\s,]+/);のように記述することで柔軟な分割が実現できます。 - 空要素の除外: 分割後に空文字が含まれる場合（例:
data,,dataをカンマで分割）、splitの後に.filter(item => item)をチェーンさせることで、不要な空要素を配列から取り除くことができます。
注意点
- サロゲートペア（絵文字など）の分割:
"".split("")で文字列を1文字ずつ分割する場合、サロゲートペア（例: 🍎）などの特殊文字は正しく分割されず、文字化け（コードユニット単位の分離）が発生します。厳密な1文字分割が必要な場合は、スプレッド構文[...str]を使用してください。 - 分割リミットの挙動:
split(separator, limit)のように第2引数で最大分割数を指定できますが、残りの文字列は「結合されたまま」ではなく「切り捨て」られます。PHPなどのexplodeとは挙動が異なるため注意が必要です。
応用
分割回数を指定して取得
ログデータなどで「日付」と「それ以降のメッセージ」のように、最初の1回だけ分割したい場合のテクニックです。
const logLine = "2026-01-24 [ERROR] System crashed";
// 最初のスペースでのみ分割し、残りはそのままにしたい場合
// splitだけでは実現できないため、indexOfとsliceを組み合わせるのが一般的です
const firstSpace = logLine.indexOf(" ");
const date = logLine.slice(0, firstSpace);
const message = logLine.slice(firstSpace + 1);
console.log(date); // "2026-01-24"
console.log(message); // "[ERROR] System crashed"
まとめ
split() は単純な文字列分割だけでなく、データの構造化や解析の第一歩として非常に強力なメソッドです。区切り文字が明確なデータの処理には最適ですが、絵文字を含む文字列の分割や、複雑な入れ子構造の解析には、それぞれスプレッド構文や専用のパーサー（JSON解析など）を検討する必要があります。用途に応じて適切な分割手法を選択することで、堅牢なデータ処理を実装できます。
