カテゴリ: JavaScript 更新日: 2025/11/14

JavaScriptの文字列を分割する方法(splitメソッド)

JavaScriptの文字列を分割する方法(splitメソッド)
JavaScriptの文字列を分割する方法(splitメソッド)

先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptで文字列を分けて扱いたいときって、どうすればいいんですか?」

先生

「それはいい質問ですね。JavaScriptではsplitメソッドを使うと、文字列を好きな区切りで分割することができます。」

生徒

「たとえば、カンマで区切られた文字列を分けたいときも使えるんですか?」

先生

「もちろんです!では、実際の使い方を見ていきましょう。」

1. splitメソッドとは?

1. splitメソッドとは?
1. splitメソッドとは?

JavaScriptのsplitメソッドは、文字列を指定した区切り文字(セパレーター)で分割し、配列(Array)として返すためのメソッドです。 たとえば、「りんご,みかん,ぶどう」という文字列をカンマ(,)で分けると、["りんご", "みかん", "ぶどう"]のように配列として扱えるようになります。

2. splitメソッドの基本構文

2. splitメソッドの基本構文
2. splitメソッドの基本構文

splitメソッドは次のように書きます。


文字列.split(区切り文字);

たとえば、次の例を見てみましょう。


const fruits = "りんご,みかん,ぶどう";
const result = fruits.split(",");
console.log(result);

["りんご", "みかん", "ぶどう"]

このように、カンマ(,)を指定することで、文字列が区切られ、配列として扱えるようになります。 splitを使うと、データを1つずつ処理したり、表示を整えたりするのにとても便利です。

3. 空白で文字列を分割する

3. 空白で文字列を分割する
3. 空白で文字列を分割する

文字列の中にスペース(空白)がある場合、それを区切りとして分割することも可能です。たとえば、ユーザーが入力した文章を単語ごとに分けたいときに使えます。


const text = "JavaScript を 学ぼう";
const words = text.split(" ");
console.log(words);

["JavaScript", "を", "学ぼう"]

このように、スペースを指定すると、単語ごとに分割された配列を得られます。フォームの入力データを整理したり、検索キーワードを扱うときなどに役立ちます。

4. すべての文字を1文字ずつ分割する

4. すべての文字を1文字ずつ分割する
4. すべての文字を1文字ずつ分割する

区切り文字を空文字("")にすると、文字列を1文字ずつ分割できます。文字単位で処理したいときに便利です。


const word = "Hello";
const chars = word.split("");
console.log(chars);

["H", "e", "l", "l", "o"]

たとえば、1文字ずつ判定したり、並べ替えたりするような処理に使えます。

5. 区切り文字を使わない場合

5. 区切り文字を使わない場合
5. 区切り文字を使わない場合

split()の引数を何も指定しないと、文字列全体がそのまま配列の1要素になります。つまり分割されません。


const str = "りんご,みかん,ぶどう";
const arr = str.split();
console.log(arr);

["りんご,みかん,ぶどう"]

分割したい場合は、必ず区切り文字を指定するようにしましょう。

6. 分割数(制限)を指定する

6. 分割数(制限)を指定する
6. 分割数(制限)を指定する

splitメソッドには第2引数を指定でき、取得する要素の数を制限できます。たとえば「最初の2つだけ分割したい」といった場合に便利です。


const fruits = "りんご,みかん,ぶどう,バナナ";
const limited = fruits.split(",", 2);
console.log(limited);

["りんご", "みかん"]

このように、2番目の引数で「取り出す数」を指定できます。データが多いときに一部だけ使いたい場合などに役立ちます。

7. 改行文字で分割する

7. 改行文字で分割する
7. 改行文字で分割する

文章の中で改行ごとに分けたい場合は、改行文字(\n)を指定します。これにより、行単位で配列にできます。


const text = "1行目\n2行目\n3行目";
const lines = text.split("\n");
console.log(lines);

["1行目", "2行目", "3行目"]

ファイルの内容や複数行のテキストを扱う際によく使われます。テキスト処理やログ解析などの場面でも便利です。

8. splitメソッドの応用例

8. splitメソッドの応用例
8. splitメソッドの応用例

たとえば、ユーザーが入力したメールアドレスからドメイン部分だけ取り出したい場合も、splitを使って簡単にできます。


const email = "user@example.com";
const parts = email.split("@");
console.log("ユーザー名:", parts[0]);
console.log("ドメイン:", parts[1]);

ユーザー名: user
ドメイン: example.com

このように、文字列の中で特定の区切りを使って意味のあるデータを分けることができます。 splitは、実務でも非常によく使われる便利なメソッドです。

カテゴリの一覧へ
新着記事
New1
TypeScript
TypeScriptでパスエイリアスを設定する方法!baseUrlとpathsでコードをスッキリ整理
New2
JavaScript
JavaScriptのfor文の書き方を初心者向けにやさしく解説
New3
JavaScript
JavaScriptの関数でよくあるエラーとその解決法まとめ
New4
JavaScript
JavaScriptのイベント処理でよくあるエラーとその対処法
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptのマウスイベントの使い方(click, mouseoverなど)
No.3
Java&Spring記事人気No3
JavaScript
JavaScriptのtoStringとString関数の違いを初心者向けに解説
No.4
Java&Spring記事人気No4
JavaScript
JavaScriptの純粋関数(pure function)と副作用の違いを理解しよう
No.5
Java&Spring記事人気No5
JavaScript
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.6
Java&Spring記事人気No6
TypeScript
TypeScript学習におすすめの無料教材・リファレンスサイト【初心者向け】
No.7
Java&Spring記事人気No7
JavaScript
JavaScriptで文字列をforループで1文字ずつ処理する方法!初心者向け解説
No.8
Java&Spring記事人気No8
JavaScript
JavaScriptのDOMContentLoadedとloadイベントの違いを理解しよう