カテゴリ: 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
JavaScript
JavaScriptの配列を逆順にする方法(reverseメソッド活用)
New2
JavaScript
JavaScriptの配列の並べ替え(sortメソッド)の基本とカスタマイズ
New3
TypeScript
TypeScriptとJSDocを併用して型推論を強化!初心者向けガイド
New4
JavaScript
JavaScriptの配列の長さ(lengthプロパティ)を理解しよう
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
TypeScript
TypeScriptの型定義ファイル管理を徹底解説!読み込み順序とDefinitelyTypedの仕組み
No.3
Java&Spring記事人気No3
TypeScript
TypeScriptで型定義を拡張する方法を徹底解説!モジュール拡張とDefinitelyTypedの使い方
No.4
Java&Spring記事人気No4
TypeScript
TypeScript型定義ファイル(d.ts)の分割構成を徹底解説!大規模開発でも迷わない管理術
No.5
Java&Spring記事人気No5
JavaScript
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.6
Java&Spring記事人気No6
TypeScript
TypeScript学習におすすめの無料教材・リファレンスサイト【初心者向け】
No.7
Java&Spring記事人気No7
TypeScript
TypeScriptでコメントを書く正しい書き方と使い分け【初心者向けにやさしく解説】
No.8
Java&Spring記事人気No8
TypeScript
TypeScriptで型定義を参照する方法!triple-slash directives(三斜線ディレクティブ)を徹底解説