以下では、初心者でも理解しやすいように噛み砕いて説明します。
JavaScript の split() メソッドを、「文章をハサミで切ってバラバラにする」イメージで捉えるとわかりやすいです。
split() メソッドとは？
文字列を「区切り文字」で分けて、配列に変えるためのメソッドです。
例
「文字列をひとつひとつの単語に分けたい」
「CSVのデータをカンマで区切りたい」
といったときに使います。
基本の書き方
文字列.split(区切り文字, 最大分割数);
- 区切り文字：どこで切るかを決める文字（例：” ” や “,” や “…”など）
- 最大分割数（省略可）：切る回数の上限
例①：基本的な使い方
let text = "りんご,バナナ,ぶどう,みかん";
let fruits = text.split(",");
console.log(fruits);
// → ["りんご", "バナナ", "ぶどう", "みかん"]
👉 "りんご,バナナ,ぶどう,みかん" を「,（カンマ）」で切って、
それぞれを配列の要素にします。
例②：先頭や末尾に区切り文字があると？
let text = ",りんご,バナナ,ぶどう,";
let fruits = text.split(",");
console.log(fruits);
// → ["", "りんご", "バナナ", "ぶどう", ""]
👉 先頭や最後にも「,」があるので、
その部分は「空文字列(“”)」として配列に入ります。
例③：切る回数（最大分割数）を制限
let text = "りんご,バナナ,ぶどう,みかん,メロン";
let fruits = text.split(",", 3);
console.log(fruits);
// → ["りんご", "バナナ", "ぶどう"]
👉 3 と指定したので、3 回切ったら終わり。
「みかん」や「メロン」は無視されます。
例④：区切り文字を省略した場合
let text = "りんご,バナナ,ぶどう";
let fruits = text.split();
console.log(fruits);
// → ["りんご,バナナ,ぶどう"]
👉 区切り文字を省略すると、切らずにそのまま一つの要素になります。
例⑤：正規表現を使った柔軟な区切り
let text = "りんご / バナナ・ぶどう・メロン / みかん";
let fruits = text.split(/[・\/]/);
console.log(fruits);
// → ["りんご ", " バナナ", "ぶどう", "メロン ", " みかん"]
👉 /[・\/]/ という正規表現を使って、
「・」または「/」で分割しています。
まとめ
| 項目 | 内容 |
|---|---|
| メソッド名 | split() |
| 所属 | Stringオブジェクト |
| 返り値 | 分割後の文字列を要素に持つ配列 |
| 主な使い道 | CSV・文章・ログなどの文字列を分解 |
| 注意点 | 区切り文字が先頭・末尾にあると空文字が配列に入る |
おまけ：HTML＋JSで試せる練習ページ
以下の3ファイルを同じフォルダに置くと、ブラウザで直接試せます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>JavaScript split() 練習ページ</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>split() メソッド 練習</h1>
<div class="container">
<label>文字列を入力：</label>
<input type="text" id="textInput" value="りんご,バナナ,ぶどう,みかん" />
<label>区切り文字：</label>
<input type="text" id="delimiter" value="," />
<label>最大分割数（任意）：</label>
<input type="number" id="limit" placeholder="例：3" />
<button id="splitBtn">分割する</button>
<pre id="result"></pre>
</div>
<script src="script.js"></script>
</body>
</html>
body {
font-family: "Segoe UI", sans-serif;
background: #f8fafc;
padding: 2em;
}
.container {
background: white;
padding: 1.5em;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
width: 400px;
}
label {
display: block;
margin-top: 10px;
}
input {
width: 100%;
padding: 6px;
margin-top: 5px;
}
button {
margin-top: 15px;
padding: 8px 12px;
background: #2563eb;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
}
button:hover {
background: #1d4ed8;
}
pre {
background: #f1f5f9;
padding: 10px;
border-radius: 6px;
margin-top: 15px;
}
document.getElementById("splitBtn").addEventListener("click", () => {
const text = document.getElementById("textInput").value;
const delimiter = document.getElementById("delimiter").value;
const limitValue = document.getElementById("limit").value;
// 最大分割数が指定されていれば数値に変換
const limit = limitValue ? parseInt(limitValue) : undefined;
// split実行
const resultArray = text.split(delimiter || undefined, limit);
// 結果を整形して表示
document.getElementById("result").textContent =
`結果配列:\n[${resultArray.map(v => `"${v}"`).join(", ")}]`;
});
このサンプルで、
入力文字列・区切り文字・分割数を変えると、split() の挙動がリアルタイムで確認できます。
See the Pen JavaScript split() Extended Version by MONO365 -Color your days- (@monoqlo365) on CodePen.
