VIDEO LESSON

JavaScriptのString.prototype.split()の使い方：引数・戻り値・実例と注意点の解説動画

再生時間 8:32動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:01今回はスプリットを紹介します。
0:04これは、文字列を区切りに従って分けて、配列として返すメソッドです。
0:10たとえばカンマでつながったタグの一覧を、一つずつの項目に分けたり、日付の文字列を年と月と日に分けたりできます。
0:20この動画では、書き方と二つの引数、戻り値、記事の基本例であるカンマ区切りの変換、
0:26個数を制限する方法、正規表現での分割、連続する区切りで空文字列ができる境界例まで、
0:32実行結果と一緒に学びます。
0:38文字列を配列に変える入り口として、データ処理では欠かせない道具です。
0:45まずは、区切りが消えて配列になる、という一点を確かめましょう。
0:51配列になれば、一件ずつ処理したり、件数を数えたりできるようになります。
0:57まず動作環境を確認します。
0:59スプリットは、ジャバスクリプトの最初期から使える文字列メソッドです。
1:04クロームでは一以降、エッジでは十二以降、ファイアーフォックスでは一以降、
1:08サファリでは一以降で使えます。
1:12ノード・ジェイエスではゼロ・十・ゼロ以降に対応しています。
1:16記事の互換性情報はエムディーエヌのデータに基づく目安ですが、対応範囲が非常に広いため、
1:20通常は環境を心配せず使えます。
1:25追加の読み込みは不要で、空文字列にも関数として備わっていることを実機で確認済みです。
1:31迷ったときは、実際に使う環境で小さなコードを試すのが確実です。
1:35対応が広い分、古い環境向けのコードでも安心して使えるのが強みです。
1:40書き方を確認します。
1:42対象の文字列に続けてスプリットと書き、カッコの中に区切りを指定します。
1:48第1引数は区切りで、文字列か正規表現を渡します。
1:52第2引数のリミットは、結果の最大要素数で、省略できます。
1:56戻り値は、分割した文字列の配列で、元の文字列自体は変更されません。
2:02スライドの例では、スペースで区切られた三つの単語が、三つの要素を持つ配列になることを実機で確認しました。
2:11結果を使いたい場合は、戻り値を変数に保存してください。
2:15区切りそのものは結果に含まれない、という点も覚えておきましょう。
2:21慣れてきたら、正規表現による区切りにも広げていきましょう。
2:25記事の基本例を見ます。
2:27エイチティーエムエル、シーエスエス、ジャバスクリプトがカンマでつながった文字列を、
2:31カンマで分割するコードです。
2:36実行すると、三つの要素を持つ配列が表示され、記事の期待出力と一致し、ノードの実機結果とも一致しました。
2:44記事が説明するように、これは単純なタグ入力を配列へ変換する使い方です。
2:49カンマという区切りが消え、その前後が別々の要素になります。
2:54まずはこの基本例を手で実行してみてください。
2:57区切りを別の文字に変えるとどうなるか、予測してから試すと理解が深まります。
3:03タグやカテゴリのように、区切り文字で管理される入力では定番の形です。
3:09第2引数のリミットを確認します。
3:11リミットに二を指定すると、分割は先頭の二要素までで止まり、三つ目は結果に含まれません。
3:18リミットにゼロを指定すると、空の配列になることを、どちらも実機で確認しました。
3:24先頭の数件だけが必要な場合や、処理量を抑えたい場合に便利です。
3:29注意点として、残りの文字列が最後の要素にまとめて残るわけではありません。
3:35途中で切り捨てられるだけです。
3:37必要な個数が決まっている入力では、この引数を活用してください。
3:42省略した場合は、最後まで分割されます。
3:45たとえば先頭の一件だけを見たい場合は、リミットに一を指定します。
3:50区切りの指定方法を広げます。
3:53まず、正規表現を渡す例です。
3:56数字を表す正規表現で区切ると、エー・ワン・ビー・ツー・シーが、エー、ビー、
4:02シーの三要素になることを実機で確認しました。
4:08コロンとセミコロンのように、複数種の区切りをまとめて扱いたいときに便利です。
4:15次に、空文字列を区切りに渡すと、文字列が一文字ずつに分かれます。
4:22ただし、絵文字のような文字では一文字の扱いがずれる場合があるため、日本語や絵文字を一文字ずつ扱う場面では注意してください。
4:34区切りの選び方で、結果の粒度が大きく変わります。
4:39使い分けは、区切りが一種類か、複数かで判断すると迷いません。
4:45記事の境界条件の例を見ます。
4:48エーの後にカンマが二つ続き、ビーが来る文字列を、カンマで分割するコードです。
4:55実行すると、エー、空文字列、ビーの三要素となり、記事の期待出力と同じく、
5:01連続する区切りは空文字列を作ることが分かります。
5:06区切りが文字列の先頭や末尾にある場合も、端に空文字列ができます。
5:12空欄を許可しない入力では、この空文字列が思わぬ要素として残ってしまいます。
5:19成功例だけでなく、こうした境界条件を確かめると、後の整形処理の必要性が見えてきます。
5:27次のセクションで、その整え方を紹介します。
5:31要素数を数える処理では、空要素の有無が結果を左右します。
5:36実務に近い実例を見ます。
5:38カンマの後にスペースが混ざったタグ入力をスプリットで分け、各要素にトリムを適用すると、
5:44余分な空白のないタグの配列が得られ、実機でも確認できました。
5:50さらに、空文字列になった要素はフィルターで取り除けます。
5:54これは、記事が推奨する、分割後にトリムとフィルターで整える流れです。
5:59利用者の入力はそろっていない前提で、分割、整形、除去の順に処理を組み立てると、
6:03扱いやすい配列になります。
6:07メソッドをつなぐ書き方にも慣れておきましょう。
6:11この流れは、検索キーワードの分割や、設定値の読み取りでも同じように使えます。
6:17区切りが見つからない場合を確認します。
6:20カンマを含まないハローをカンマで分けると、文字列全体が一要素の配列になります。
6:26空文字列をカンマで分けた場合も、空文字列が一要素だけ入った配列になることを実機で確認しました。
6:34一方、空文字列を空文字列で分けると、空の配列になります。
6:39引数自体を省略した場合も、全体が一要素の配列です。
6:43要素数がゼロになるのか、一になるのかは条件で変わるため、空入力を扱うコードでは、
6:49長さを前提にせず、実行して確かめる習慣が大切です。
6:54空の配列だと思い込んで処理すると、件数の数え間違いにつながるので注意しましょう。
7:01注意点を二つ確認します。
7:03まず、記事も注意しているように、引用符の中でカンマを含むような本格的なシーエスブイは、
7:08単純なカンマ分割では正しく読めません。
7:13専用の読み取り処理を使ってください。
7:15次に、スプリットは文字列のメソッドなので、数値に対して呼ぶとタイプエラーになることを実機で確認しました。
7:23また、スライドの例のように、分割しても元の文字列は変わらず、新しい配列が返ります。
7:30結果を使いたい場合は、戻り値を変数に保存してください。
7:34単純な区切り専用の道具だと、範囲をはっきりさせておきましょう。
7:39迷った場合は、小さな入力で結果を確かめてから本番のデータに適用してください。
7:44まとめです。
7:45スプリットは、文字列を区切りに従って分割し、文字列の配列を返すメソッドです。
7:52判断のポイントは三つです。
7:54まず、区切りには文字列と正規表現が使え、第2引数で最大要素数を制限できること。
8:00次に、連続する区切りや端の区切りは空文字列の要素を作り、空欄を許さない場合はトリムとフィルターで整えること。
8:09そして、元の文字列は変わらず、引用符を含むシーエスブイのような複雑な形式には向かないことです。
8:17まずは記事の基本例と境界例を実行し、区切りを一つ変えて結果を予測してから確かめてみてください。
8:24お疲れさまでした。
8:26文字列と配列を行き来できるようになると、扱えるデータの形が大きく広がります。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

String.prototype.split()で区切りに従って文字列を配列へ分割する方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

解説記事・サンプルコードを読む：JavaScriptのString.prototype.split()の使い方：引数・戻り値・実例と注意点 →