JavaScriptでカンマ区切りの文字列を分割して配列に格納する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでカンマ区切りの文字列を分割して配列に格納する方法について現役エンジニアが解説しています。特定の文字で分割するにはsplitメソッドを使います。引数にカンマ(,)などの文字列を指定すると分解された配列の形式で値を返してくれます。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

監修してくれたメンター

井上 祐介

NEC・Microsoftの認定インストラクター。Z80アセンブラ・C++・C#・PHP・Javaなどの経験を経て業務で使用するプログラムの開発や新入社員プログラミング研修の講師を行った。

JavaScriptでカンマ区切りの文字列を分割して配列に格納する方法について、テックアカデミーのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

CSVファイルから読み込まれたカンマ区切りの文字列を分割するだけでなく、URLの「/」スラッシュのような他の区切り文字を指定して分割もできます。

目次

1時間でできる無料体験!

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

大石ゆかり

CSVファイルの読み込みまではできたんですけど、読み込んだカンマ区切りの文字列を1個ずつに分けるにはどうしたらいいですか?

りんご,150,3

文字列から「,」を探して切り分けるんだったら、ものすごくめんどくさいです・・・

田島悠介

CSVファイルの読み込みまでできたんだね。すごいよ!

あと一歩で、カンマ区切りのデータが活用できるよ!

splitっていう便利なメソッドがあるんだ。

大石ゆかり

split?

たしか英語で「分ける」っていう意味でしたね。

田島悠介

その通り!文字通り配列に分けてくれるんだ。

大石ゆかり

へぇ~。CSVファイルから読み込むときに便利そうですね。

田島悠介

splitメソッドが使えるのはCSVファイルからの読み込みだけじゃないんだ。

区切り文字を自由に指定できるから、ファイルの保存場所のパスやURLを分ける時にも使えるよ。

大石ゆかり

そうなんですね!

田島悠介

じゃあ、splitメソッドの基本から見ていこう。

 

※CSVファイルを読み込む方法については、解説記事「JavaScriptでCSVファイルを読み込む方法を現役エンジニアが解説【初心者向け】」をご覧ください。

 

splitメソッドとは

文字列を分割して配列にするメソッドです。

例えば、CSVファイルから読み込んだ「りんご,150,3」のような1件分のデータを配列に変換します。

「りんご,150,3」という文字列をsplitメソッドで配列に分割すれば「りんご」、「150」、「3」という個別の値として配列に取り出します。

また、区切り文字は自由に指定できますので、CSVファイルで使われる「,」(カンマ)以外でも「/」(スラッシュ)でURLを分割するなどに応用できます。

 

※splitメソッドの詳しい解説は、MDNのリファレンス「String.prototype.split()」をご覧ください。

 

splitメソッドの使い方

splitメソッドは文字列から呼び出します。

第1引数区切り文字を指定します。

書式

変換された配列 = 文字列.split(区切り文字);

splitメソッドを呼び出す文字列は、文字列が代入された変数などを使います。

CSVファイルのカンマ区切りの文字列を配列にするには、splitメソッドの第1引数に 「,」 (カンマ)を指定します。

 

【参考】splitメソッドの第2引数について

第2引数は分割して配列に入れる数を指定します。

たとえば「りんご,150,3,割引」を split(‘,’,2) で分割すると最初から2つ目までの「りんご」と「150」は配列に入りますが、「3」と「割引」は配列に変換されません。

splitメソッドの第2引数は省略できます。

 

[PR] フロントエンドで副業する学習方法を動画で公開中

文字列を分割して配列に格納する

splitメソッドを使ってカンマ「,」で区切られた文字列を分割して配列にします。

ソースコード

// カンマで区切られた文字列
const str = "りんご,150,3";
// 文字列をカンマで分割して配列 itemDataに代入
const itemData = str.split(',');

// 配列をHTMLにする
let html = "商品名:" + itemData[0] + "
";
html = html + "値 段:" + itemData[1] + "
";
html = html + "個 数:" + itemData[2] + "
";
// Webページに表示
document.body.innerHTML = html;

※「const」は再代入できない固定された値として使える変数を宣言し、「let」は再代入できる変数を宣言するキーワードです。constやletキーワードについて、詳しくは解説記事「JavaScriptで書く「var,let,const」の違いと使い分け方法」をご覧ください。

表示結果

See the Pen
js_split_org
by mentor-inoue-y (@mentor-inoue-y)
on CodePen.

解説

// カンマで区切られた文字列
const str = "りんご,150,3";

カンマで区切った文字列を str に代入しています。

// 文字列をカンマで分割して配列 itemDataに代入
const itemData = str.split(',');

文字列の変数 str からsplitメソッドを呼び出します。

splitメソッドの第1引数に区切り文字として「,」(カンマ)を指定します。

結果として「りんご」「150」「3」が配列として itemDataに代入されます。

// 配列をHTMLにする
let html = "商品名:" + itemData[0] + "<br>";
html = html + "値 段:" + itemData[1] + "<br>";
html = html + "個 数:" + itemData[2] + "<br>";

配列 itemData に入った値をHTMLとして出力できるように、変数 html にHTMLコードを代入していきます。

itemData[0] に「りんご」、itemData[1] に「150」、itemData[2] に「3」が入っています。

<br>で改行して表示されるようにします。

 

コラム

実は私も!?独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
  • ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
  • ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料相談 に参加してみませんか?

現役エンジニア・デザイナーに何でも気軽に相談できる30分すべて無料で できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き! 無料相談はこちら

まとめ

文字列を分割して配列に格納するには、文字列からsplitメソッドを呼び出します。

splitメソッドの第1引数には、「,」カンマのような区切り文字を指定します。

 

大石ゆかり

splitメソッドを使うには、文字列から第1引数に区切り文字を指定して使えばいいんですね!

文字列.split(‘,’)

田島悠介

その通り!応用してURLを分けるのにも使ってみてね!

大石ゆかり

はい!チャレンジしてみます!

 

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか?

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします!

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料相談を予約する