JavaScriptのsplit関数をマスターしよう！基本の使い方から応用まで

 JavaScriptは、動的なWebページを作るためのプログラミング言語の1つです。高い汎用性から、ブラウザを動かすプログラミング言語の中で主流になっています。

JavaScriptでデータ操作をする際、文字列を特定の基準で区切る「split関数」は欠かせません。例えば、複数の値がカンマで区切られた文字列から個々の要素を取り出したり、文章の一部を抜き出したりといった処理に大活躍します。split関数は単に文字列を分割するだけでなく、正規表現を使った柔軟な分割や結果の要素数を制限することでさらに高度な使い方も可能です。

この記事ではまずsplit関数の基本的な使い方を解説し、次に日付や単語数の取得、電話番号のフォーマット整形など実践的な応用例を紹介します。最後によくあるエラーの対処法も解説するので、split関数を使いこなしてデータ操作のスキルを向上させましょう。

JavaScriptのsplit関数とは

split関数は文字列を分割するために使用する関数の一種です。文字列を分割する関数には「substr」「substring」「slice」「charAt」などがあり、利用する関数によって用途や注意するポイントが異なります。

split関数は分割した文字列を配列に格納します。配列では、複数のデータを効率良く扱えることから、きれいなコードを書くのに重宝されます。また、split関数は区切りたい文字を指定するだけで簡単に扱えることがメリットです。

JavaScriptのsplit関数の使い方【基礎編】

split関数は基本的な使い方を覚えるだけで簡単に文字列を区切ることが可能です。まずは、split関数の基礎的な使い方を例文付きで解説します。

基本の使い方

split関数構文の基本形は以下のものです。

• String.split(separator[, limit]);

 それぞれの要素がどのような役割を持つかまとめました。

実際の使用例は、以下のとおりです。

const str = "Hello, World!"; // strに文字列「"Hello, World!"」をセット  
const result = str.split(", "); // resultに文字列strから「,」で分割したものをセット  
console.log(result);  // 出力： ["Hello", "World!"]

指定した文字で区切る

split関数の一番分かりやすい使い方として、区切りたい文字を指定する方法があります。

例えば、氏名データの名字と名前の間に半角スペースがある場合、半角スペースを指定して区切ることで名字と名前を配列データに格納できます。なお、区切りに使用する文字をセパレータと呼びます。

const str = "佐藤 花子";  
const words = str.split(" "); // 半角スペースで分割  
console.log(words); // 出力： ["佐藤", "花子"]

正規表現で区切る

split関数は、区切り文字を指定するだけでなく、正規表現を用いて区切ることも可能です。

正規表現とは、いくつかの文字列の集合を一つの文字列で表現する方法です。正規表現の中で特別な意味を持つ記号があり、メタ文字と言います。メタ文字の例をいくつかまとめました。

正規表現を用いることで、区切りたい文字が複数ある場合の分割が可能です。

例として、「東京都渋谷区」を正規表現セパレータ「都道府県市区町村」で区切ると、東京と渋谷が分割結果になります。

const address = "東京都渋谷区";  
const pattern = /[都道府県市区町村]/; //正規表現「都道府県市区町村」をセット  
const [city, area] = address.split(pattern); //区切ったものをcity、areaにセット

console.log(city); // 出力: "東京"  
console.log(area); // 出力: "渋谷"

ただしこの正規表現セパレータには問題があります。

例えば「京都府宇治市」を正規表現セパレータ「都道府県市区町村」で区切ると「都」「府」で区切られるため、京と宇治が分割結果になります。

const address = "京都府宇治市";  
const pattern = /都|道|府|県|市|区|町|村/; //正規表現「都道府県市区町村」をセット  
const [city, area] = address.split(pattern);

console.log(city); // 出力: "京"  
console.log(area); // 出力: "宇治"

split関数は、自由度が高くあらゆる方法で文字列を表現できます。しかし、誤った指定をするとバグが発生する原因になるため注意しましょう。

分割個数を制限する

区切りに使用する文字の後ろに任意の数字を記述することで、分割個数に制限がかけられます。

例えば、分割したデータのうち、最初の3つが欲しい場合は以下のようなプログラムです。

const str = "Red,Blue,Green,Black,White";  
const words = str.split(",", 3); // 「,」で最大3回分割する  
console.log(words); // 出力: ["Red", "Blue", "Green"]

JavaScriptのsplit関数の使い方【応用編】

split関数は、配列の仕様や正規表現をより詳しく理解することで、よりさまざまな用途に使えます。ここでは、split関数の応用的な使い方を4つ紹介します。

日付情報を取得する

配列は、データの左から「0,1,2……」と割り振られるため、欲しい情報が格納されている番号が分かれば、それだけを出力できます。例えば「2024-10-16」という日付データから、10月という情報を取得したい場合は、以下のような実行文です。

let div = "2024-10-16";  
let date = div.split("-"); //文字列dateから「-」で分割  
console.log(date[1]); //配列の2番目に格納されたデータを出力する。結果："10"

最初の行だけ取得する

長い文章は改行によって複数行になることがあります。改行は、表示上では何も見えないですが、文字列データでは「\n」としてデータ化されています。つまり、Split関数のセパレータとして「\n」を用いることで、改行されたデータを分割し配列に格納できます。

以下の例文をもとに詳しく説明します。

let message = "おはようございます。\nいい天気ですね。\n今日は外でサッカーをします。";  
let line = message.split("\n"); //文字列messageから「\n」を分割  
console.log(line[0]); //配列の最初に格納されたデータを出力する。結果："おはようございます。"

単語数を計測する

英文では、単語と単語の間に半角スペースがあります。そのため半角スペースをセパレータとしたsplit関数と配列の長さを取得するlength関数を利用すると、英文の単語数が計測できます。

let message = "Is this a pen? Yes, this is a pen.";  
let d = message.split(" "); //messageから半角スペースで分割  
console.log(d.length); //配列dの長さを出力する。結果：9

電話番号を整える

ショッピングサイトの会員登録などで電話番号を入力してもらう場面は多いでしょう。この時、ハイフン入りとハイフンなしの電話番号が混ざることがあります。split関数を利用し、ハイフンをセパレータにすることで、混ざったデータを整理しやすくなります。さらに、joinメソッドを使って分割したデータを結合し、統一した形式で扱えます。

let number = "090-1234-5678";  
let d = number.split(/[-]/).join(""); //「-」で分割後、配列データを何も入れずに結合  
console.log(d); //出力："09012345678"

JavaScriptのsplit関数でよくあるエラー

split関数は、Stringオブジェクトに組み込まれたメソッドの1種です。そのため、文字列ではなく数値データを分割しようとすると、タイプエラーが発生します。数値を分割したい場合は、String()を利用して一度文字列に変換してからsplitを使いましょう。

また、分割する文字列が「null（代入する値を持たない）」や「undefined（値が代入されていない）」場合でもエラーが発生します。

split関数と正規表現を使った効率的な処理

split関数に正規表現を渡すことで、柔軟な文字列の分割が可能になります。例えば、空白や特殊文字など複数の区切り文字に対応させる場合に便利です。

しかし、複雑な正規表現を頻繁に使うとパフォーマンスが低下することもあるため注意が必要です。特定のパターンが頻繁に現れる文字列を分割する場合は、単純な文字列セパレータを使う方が処理が高速です。正規表現は必要な場面でのみ使い、軽量でシンプルな分割が可能な場合は単一の文字や短い文字列をセパレータにすることが推奨されます。

正規表現とsplit関数の併用例

例えば、改行文字やカンマで区切られたテキストを分割する際に正規表現を使用すると、複数の分割条件を一度に満たせます。次のコード例では、カンマと改行を一度に処理するための正規表現を使用しています。

let text = "Hello,World\nHow,are,you?";
let words = text.split(/,|\n/); // カンマまたは改行で分割
console.log(words); // ["Hello", "World", "How", "are", "you?"]

このように、複数の条件を一度に処理する場合は、正規表現を使うことでコードが簡潔になります。

配列を使ったsplitの処理結果の効率的な操作方法

split関数で分割した結果は配列として返されるため、その後の操作がしやすくなります。配列メソッドを活用すると、データの加工や整形を効率的に行うことができます。

特にmapやforEachといったメソッドを組み合わせると一括で処理を施せるため、コードの読みやすさとパフォーマンスが向上します。

mapを使った分割データの変換

例えば、配列の各要素に変換処理を加える場合にはmapメソッドを使うと便利です。次のコードでは、カンマ区切りのデータを整数型に変換しています。

let str = "1,2,3,4,5";
let numbers = str.split(",").map(Number); // 文字列から数値へ変換
console.log(numbers); // [1, 2, 3, 4, 5]

このように、分割したデータを一括で変換することで、効率的に処理ができます。

filterで不要なデータを削除

配列から不要な要素を取り除きたい場合には、filterメソッドが有効です。次の例では、空の要素を削除するためにfilterを活用しています。

let data = "apple,,banana,,cherry";
let fruits = data.split(",").filter(item => item !== "");
console.log(fruits); // ["apple", "banana", "cherry"]

filterメソッドを活用することで、不要なデータが取り除かれ、配列の品質が向上します。

split関数で得られたデータのメモリ効率を考慮した管理

大量の文字列データを分割する場合、そのデータを効率的に保持する工夫が必要です。例えば、メモリの無駄遣いを防ぐために、不要なデータをすぐに削除したり必要なデータのみを新しい配列にコピーするなどの方法が考えられます。split関数を多用する場合はメモリ効率を意識することで、アプリケーションのパフォーマンスが向上します。

必要な要素だけを保持する

大量のデータを扱うときには、不要なデータを削除することでメモリを節約できます。次の例では分割されたデータのうち特定のキーワードに該当しない要素を削除し、メモリ効率を向上させています。

let str = "apple,banana,grape,orange,lemon";
let selectedFruits = str.split(",").filter(fruit => fruit.includes("a"));
console.log(selectedFruits); // ["apple", "banana", "grape", "orange"]

カンマ区切りのデータを整える方法

カンマ区切りのデータはCSV形式などでよく見られますが、split関数を使って配列に変換することで管理が容易になります。各項目を分割して配列に格納することで、個別のデータにアクセスしやすくなるため、情報の抽出や並べ替えがしやすくなります。

カンマ区切りデータの分割例

次の例では、カンマ区切りのデータをsplit関数で配列に変換しています。

let data = "apple,banana,cherry";
let fruits = data.split(",");
console.log(fruits); // ["apple", "banana", "cherry"]

このようにカンマを指定することで、各データを個別に管理できます。

さらに複雑なデータ構造への変換

配列に変換したデータをさらに分けて構造化したい場合は、配列内の配列として整理できます。

let data = "apple:fruit,carrot:vegetable";
let items = data.split(",").map(item => item.split(":"));
console.log(items); // [["apple", "fruit"], ["carrot", "vegetable"]]

このようにしてデータを構造化し、管理しやすくします。

複数の区切り文字を使用してデータを整形する

split関数と正規表現を組み合わせることで、改行やタブ文字を含む複数の区切り文字でデータを分割できます。たとえば、改行やスペースが含まれるテキストを一度に分割することで、異なる区切り文字が混在するデータも統一的に管理できます。

改行やタブ文字を使ったデータの分割例

次のコードでは、改行とタブ文字の両方を区切り文字として使用してデータを分割しています。

let text = "apple\tbanana\ncherry\tdate";
let fruits = text.split(/\t|\n/);
console.log(fruits); // ["apple", "banana", "cherry", "date"]

この方法を用いると、複雑なデータもシンプルに分割できます。

特定のパターンを含むデータの整形

特定の文字列やパターンが含まれる場合でも、splitと正規表現で効率よく処理が可能です。次の例では、空白やコンマで分割しています。

let text = "apple, banana orange, grape";
let fruits = text.split(/[ ,]+/);
console.log(fruits); // ["apple", "banana", "orange", "grape"]

正規表現に複数の区切り文字を指定することで、複雑なデータも一度に整形できます。

まとめ

split関数は、基本文法が簡単で、文字列を分割する関数の中でも特に扱いやすい関数です。今回紹介した使い方以外にも、特定の文字種だけ取得したり、分割した要素の数に別な処理を加えたりなど、さまざまな運用が可能です。

また、正規表現を覚えることで、複数文字の分解が可能になり、split関数の利便性が高まります。正規表現はsplit関数以外でも使用する機会があるため、split関数とセットでマスターしましょう。