JavaScript

【入門】JavaScriptの配列(Array)の概念を理解する

どうも、つよぽんです!

今回は、JavaScriptの「配列(Array)」の概念について解説します。

今回の記事は次のような方に向けて書きました。

想定読者
  • 配列って何?
  • 配列ってどのような場面で使うの?
  • 配列はどういうときに使うべき?

Webサービスやアプリを作る上で「配列」を使いこなすのはとても重要なスキルとなります。

例えば配列が使われている場面を3つ挙げると次のとおりです。

配列が使われる場面
  1. TwitterやFacebookなどのタイムライン
  2. Amazonの商品レビューコメント
  3. メールやLINEなどのメッセージ一覧

他にも例を挙げるとキリがないですが、上記3つだけでも配列が様々なところで使われているのがわかるかと思います。

今回の記事は以下の学習コンテンツのスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
【JavaScript】配列とは今回からJavaScriptの配列について学習していきます。配列に関する学習コンテンツの初回は、「配列とは何か?」「配列はどのようなところで使われるのか?」「配列を使ったときと使わなかったときでどう違うか?」ということを学習し、配列の概要を把握します。...

それでは次の内容で話を進めていきます。

今回の内容
  1. JavaScriptの配列(Array)とは
  2. JavaScriptの配列(Array)はオブジェクト型の1つ
  3. JavaScriptの配列(Array)はどのようなときに使うか

 

JavaScriptの配列(Array)とは

この章では、「JavaScriptの配列とは何か?」について解説していきます。

配列は複数のデータを順番をもった形式保存する箱

配列」を定義すると「順序付けられた複数のデータを持つデータ構造」のことです。

ただ、上記の定義だと分かりづらいと思うので、現実世界に置き換えて考えてみましょう。

例えば、マンションの1フロアに3つ部屋があったとして、それぞれの部屋番号を1号室、2号室、3号室として、1号室には住人A、2号室には住人B、3号室には住人Cが住んでいるとします。

このとき、それぞれの「住人A, B, C」が「複数のデータ」となり、それぞれの部屋に住人A、住人B、住人Cといった形でデータが配列(部屋)に保存されます。

以下の画像は配列に値が保存されているイメージを図にしたものです。

複数の値を順番に保存する複数の値を順番に保存する

配列の順番は「0」から数える

さきほどのマンションの例で、部屋番号を1, 2, 3号室と説明しました。

現実世界では「1」から数えるのが一般的ですが、プログラミングの場合は「0」から数えるのが一般的です。

そして、配列に保存されているデータも先頭から「0番目」「1番目」「2番目」というふうに数えていきます。

この時の配列の順番を「インデックス(index)」と呼び、各番号を「インデックス番号」と呼んだりします。

配列の順番のことをインデックス(index)番号という配列の順番のことをインデックス(index)番号という

さきほどマンションを配列の言葉を使って説明すると次のようになります。

配列の言葉を使って説明した場合
  • インデックス番号0(部屋番号1)には住人Aが格納されている
  • インデックス番号1(部屋番号2)には住人Bが格納されている
  • インデックス番号2(部屋番号3)には住人Cが格納されている

JavaScriptの配列(Array)はオブジェクト型の1つ

この章では「プリミティブ型とオブジェクト型」のおさらいをします。

プリミティブ型とオブジェクト型については以下の記事でも解説しているので、もっと詳しく知りたい方は参考にして頂けたらと思います。

あわせて読みたい
【入門】JavaScriptのデータ型【5つのプリミティブ型】JavaScriptで扱うデータ型について解説します。JavaScriptで扱うデータ型は大きく分けてプリミティブ型とオブジェクト型の2種類にわけられ、今回はプリミティブ型の中でもよく使う5つの型についての解説をします。...

プリミティブ型・オブジェクト型のおさらい

プリミティブ型とは次の6つのデータ型のことを言います。

ここにタイトルを入力
  1. Boolean : 真偽値(true, false)
  2. Null : 値が無いことをあらわす
  3. Undefined : 値が未定義なことをあらわす
  4. Number : 数値(1, 2, 3など)
  5. String : 文字列
  6. Symbol (ECMAScript 6 の新データ型)

上記の6つのデータ型の中に「配列(Array)」が含まれていません。

それでは、「配列(Array)」のデータ型は何になるのでしょうか?

上記記事でも解説しているとおり、JavaScriptには大きく2つのデータ型に分けられます。

2つのデータ型
  1. プリミティブ型
  2. オブジェクト型

①のプリミティブ型に含まれないものは全てオブジェクト型となるため、「配列(Array)」はオブジェクト型となります。

オブジェクト型のデータを変数に保存して更新するときは注意が必要

この項目の内容は「入門レベル」ではありませんが、プリミティブ型とオブジェクト型でデータの取り扱い方が異なるので気を付けるポイントを書かせていただきます。

その気を付けるポイントというのは「データを変数に代入する時の挙動」です。

プリミティブ型の値を変数に代入するときは「値そのもの」が保存されます。

例えば、「const data = 5;」とすれば変数dataには「5」が保存されます。

しかしオブジェクト型の場合は、「const data = [‘値1′,’値2′,’値3’];」のように変数dataに配列を代入した場合は、「[‘値1′,’値2′,’値3’]」そのものではなく、「[‘値1′,’値2′,’値3’]」が保存されている場所への「参照」が代入されます。

さきほどもお話したように「入門レベル」の内容ではないため、学習初期段階ではあまり気にしなくても良い内容なので現時点ではスキップしても問題ありません。

詳しく知りたい方は以下の記事にあるスライドを参考にしていただけたらと思います。

あわせて読みたい
JavaScriptの配列で参照を理解する【オブジェクト型の動き】今回はJavaScriptの参照の学習をします。プリミティブ型とオブジェクト型で変数に値を代入するときの動きは異なります。プリミティブ型は値そのものが代入され、オブジェクト型は「参照」が代入されます。参照が何か理解して参照を使いこなせるようになりましょう。...

JavaScriptの配列(Array)はどのようなときに使うか

この章では、「配列はどういうときに使うべきか?」について解説していきます。

配列を使うべき場面

結論から話すと「ループ処理」を行う場面で使うべきです。

次の3つの例はこの記事の冒頭でも説明したものになります。

配列が使われる場面
  1. TwitterやFacebookなどのタイムライン
  2. Amazonの商品レビューコメント
  3. メールやLINEなどのメッセージ一覧

これら3つに共通しているのは、同じような見た目(表示)をリスト形式で並べていることです。

例えばTwitterのタイムラインであればツイート1件毎の表示は次の通りで、それがいくつも並べられています。

1ツイートの表示内容
  • 投稿者
  • 投稿日時
  • ツイート内容
  • アクションボタン(リツイート、いいねなど)

なぜ、配列とループ処理は相性が良いか?

配列を作るときの文法は別記事でも詳しく解説しますが、ざっくり説明すると次のとおりです。

上記サンプルコードでは変数「dataList」に「[‘データ1’, ‘データ2’, ‘データ3’]」という配列を保存しています。

このとき、dataListに保存された「‘データ1’」「‘データ2’」「‘データ3’」という値を取得するには、「配列[インデックス番号]」という形式で取得できます。

つまり今回の場合は、dataListが配列となるので次のようにすることでそれぞれの値を取得できます。

 

このとき「dataList[0]」「dataList[1]」「dataList[2]」のインデックス番号に注目してください。

「0, 1, 2」とインデックス番号の値を「1」増やすごとに(インクリメントするごとに)、先頭から順番に全ての値を取得できるのがわかります。

このことから「for」を使うことで配列内の値を先頭から最後まで一通り取得できるのです。

配列の中に保存されている値が何個あるか確かめるには「配列.length」とすれば取得できます。

今回の場合は「dataList.length」を「for」の条件に使うことで配列に保存されている値の数だけループ処理を行うことが出来ます。

「for」の使い方に関しては以下の記事でも解説しているのでそちらを参考にして頂けたらと思います。

あわせて読みたい
JavaScriptのforループの書き方【whileとの比較】前回の「while」に引き続き「for」を使ったループ処理について解説します。ループ処理を実装したいときには「while」よりも「for」を使うことのほうが多いです。whileよりもforを使うことが多い理由についても解説します。...

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  1. 配列とは、「順序付けられた複数のデータをもつデータ構造」のことである
  2. JavaScriptの配列は「オブジェクト型」に分類される
  3. 配列はループ処理と相性が良い

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
【JavaScript】配列とは今回からJavaScriptの配列について学習していきます。配列に関する学習コンテンツの初回は、「配列とは何か?」「配列はどのようなところで使われるのか?」「配列を使ったときと使わなかったときでどう違うか?」ということを学習し、配列の概要を把握します。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です