JavaScript splitメソッドの使い方

  • JavaScript
  • メソッド
最終更新日:

この記事のポイント

splitメソッドは文字列操作において重要な機能の一つです。この記事では基本概念から実践的な活用法まで詳しく解説します。

  • 文字列を指定した区切り文字で配列に分割する基本機能
  • さまざまな区切り文字を使った柔軟な文字列分割手法
  • 新しい配列を返し、元の文字列は変更されない

これらのポイントを理解することで、効率的な文字列処理が可能になります。

目次

splitメソッドとは？

splitメソッドは、文字列を指定した区切り文字や条件に基づいて複数の要素に分割し、配列として返す便利な機能です。このメソッドを使用することで、カンマで区切られたデータやスペースで区切られた文章などを効率的に処理できます。

分割条件には文字列だけでなく正規表現も指定可能で、柔軟な文字列操作を実現できます。また、分割する要素数の上限を設定することで、処理をより細かく制御することも可能です。

さらに、split()メソッドは元の文字列を変更せず、常に新しい配列を返すため、文字列の不変性を保ちながら安全に操作できます。これらの特徴から、データ解析やテキスト処理において欠かせない重要なメソッドといえるでしょう。

【関連】
JavaScriptをもっと詳しく学ぶならpaizaラーニング

基本構文

splitメソッドの基本的な記述方法について解説します。最も基本的な構文では文字列に対してsplitメソッドを呼び出し、引数に区切り文字を指定します。また、第二引数として分割数の上限を設定することも可能です。

以下のコード例では、カンマとスペースを区切り文字として使用した基本的な分割処理を示しています。これらの基本パターンを理解することで、より複雑な文字列処理にも応用できるようになります。

let animals = "イヌ,ネコ,ウサギ"; let result = animals.split(","); console.log(result);







出力結果
[ 'イヌ', 'ネコ', 'ウサギ' ]

  
let sentence = "ライオン キリン ゾウ";
let words = sentence.split(" ");
console.log(words);

  


  







出力結果
[ 'ライオン', 'キリン', 'ゾウ' ]
実用例
実際のWebアプリケーション開発でよく使われるsplitメソッドの活用例を紹介します。これらのサンプルコードは日常的なプログラミング作業で遭遇する場面を想定しており、すぐに実践で活用できる内容となっています。
各コード例では異なる分割条件や処理方法を採用しており、splitメソッドの柔軟性と実用性を理解できます。コピー&ペーストしてすぐに動作確認できるよう、実行可能な形式で記載しています。
カンマ区切りデータの分割
CSVファイルやデータベースから取得したカンマ区切りのデータを配列に変換する例です。Webアプリケーションでのデータ表示やフォーム処理でよく使用される基本的なパターンです。

  
let animalData = "パンダ,コアラ,カンガルー,ペンギン";
let animalList = animalData.split(",");
console.log("動物の種類:", animalList.length);
console.log(animalList);

  


  







出力結果
動物の種類: 4
[ 'パンダ', 'コアラ', 'カンガルー', 'ペンギン' ]
URLパラメータの解析
WebページのURLに含まれるクエリパラメータを解析して、個別の値を取得する実用的な処理例です。ユーザーの検索条件や設定情報を取得する際に活用されます。

  
let queryString = "animal=トラ&color=オレンジ&size=大型";
let params = queryString.split("&");
params.forEach(param => {
  let keyValue = param.split("=");
  console.log(`${keyValue[0]}: ${keyValue[1]}`);
});

  


  







出力結果
animal: トラ
color: オレンジ
size: 大型
改行文字での文章分割
テキストデータを行ごとに分割して処理する例です。テキストエディタの機能実装やログファイルの解析で使用される手法です。

  
let textData = "サル\nウマ\nヒツジ\nヤギ";
let lines = textData.split("\n");
console.log("行数:", lines.length);
lines.forEach((line, index) => {
  console.log(`${index + 1}行目: ${line}`);
});

  


  







出力結果
行数: 4
1行目: サル
2行目: ウマ
3行目: ヒツジ
4行目: ヤギ
複数文字での区切り
単一文字ではなく複数の文字列を区切り文字として使用する処理例です。特定のパターンで区切られたデータの解析で役立つ手法です。

  
let data = "オオカミ--フクロウ--クマ--シカ";
let animals = data.split("--");
console.log("分割結果:", animals);
animals.forEach(animal => {
  console.log(`動物: ${animal}`);
});

  


  







出力結果
分割結果: [ 'オオカミ', 'フクロウ', 'クマ', 'シカ' ]
動物: オオカミ
動物: フクロウ
動物: クマ
動物: シカ
正規表現
正規表現を区切り文字として使用することで、より柔軟で複雑な分割条件を指定できます。複数の区切り文字パターンに対応した例になります。

  
let mixedData = "イルカ,クジラ;アシカ|オットセイ";
let animals = mixedData.split(/[,;|]/);
console.log("分割された動物:", animals);
animals.forEach(animal => {
  console.log(`- ${animal}`);
});

  


  







出力結果
分割された動物: [ 'イルカ', 'クジラ', 'アシカ', 'オットセイ' ]
- イルカ
- クジラ
- アシカ
- オットセイ
分割数制限
splitメソッドの第二引数を使って分割数の上限を設定する例です。大量のデータから必要な分だけを取得したい場合に有効な手法です。

  
let longList = "ハムスター,リス,ネズミ,モルモット,チンチラ";
let limitedSplit = longList.split(",", 3);
console.log("制限あり:", limitedSplit);
console.log("取得件数:", limitedSplit.length);

  


  







出力結果
制限あり: [ 'ハムスター', 'リス', 'ネズミ' ]
取得件数: 3
空白文字での単語分割
文章を単語単位に分割してテキスト解析を行う処理例です。検索機能の実装や文章の統計情報を取得する際によく使用される方法です。

  
let sentence = "野生の ライオン が サバンナ を 歩いている";
let words = sentence.split(" ");
console.log("単語数:", words.length);
words.forEach((word, index) => {
  console.log(`単語${index + 1}: ${word}`);
});

  


  







出力結果
単語数: 6
単語1: 野生の
単語2: ライオン
単語3: が
単語4: サバンナ
単語5: を
単語6: 歩いている
ファイルパスの分解
ファイルパスを階層ごとに分割してディレクトリ構造を解析する例です。ファイル管理システムの実装で重要な機能の一つです。

  
let filePath = "animals/mammals/cats/ライオン.jpg";
let pathParts = filePath.split("/");
console.log("パス階層:", pathParts);
console.log("ファイル名:", pathParts[pathParts.length - 1]);

  


  







出力結果
パス階層: [ 'animals', 'mammals', 'cats', 'ライオン.jpg' ]
ファイル名: ライオン.jpg
まとめ
splitメソッドは文字列を配列に変換する強力な機能であり、Webアプリケーション開発において欠かせないツールです。基本的な区切り文字による分割から正規表現を使った複雑な条件指定まで、幅広い場面で活用できる柔軟性を持っています。また、分割数の制限機能により、処理の最適化も図れます。
splitメソッドの活躍する場面
    

  • CSVデータやAPIレスポンスの解析処理での配列変換
    • 

  • URLパラメータやクエリ文字列の個別値取得処理
    • 

  • テキストファイルの行単位や単語単位での分割処理
    • 

重要なポイント
    

  • 区切り文字には文字列と正規表現の両方が指定可能
    • 

  • 第二引数で分割数の上限を設定してパフォーマンス向上
    • 

  • 空文字列を指定すると全文字が個別要素として分割される
    • 

これらの特徴を理解することで、効率的で保守性の高いコードが書けるようになり、さまざまな文字列処理の課題に対応できるでしょう。
レベルを更に上げたい方はpaizaプログラミングスキルチェックへ





























  1. paizaラーニングトップ
  2. リファレンス
  3. JavaScriptのリファレンス記事一覧
  4. JavaScript splitメソッドの使い方