JavaScript

JavaScriptの多次元配列を理解する【2次元配列の図解付】

どうも、つよぽんです!

今回は、JavaScriptの多次元配列を解説します。

多次元配列とは配列のもう1つ先に進んだ概念で、「配列の中に配列がセットされているデータ構造」のことです。

言葉だけではイメージが掴みづらいと思うので、この記事では多次元配列の中でも使われることが多い「2次元配列」を図とサンプルコードを交えて解説しています。

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

想定読者
  • 多次元配列って何?
  • 多次元配列の作成方法を知りたい
  • 多次元配列内の特定の値を取得・更新する方法を知りたい

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

あわせて読みたい
JavaScriptでの多次元配列の作り方JavaScriptでの多次元配列の作り方に学習します。多次元配列というのは「配列の中に別の配列」が入っているような配列のことです。多次元配列の作り方、値の取得方法、値の更新方法は通常の配列と基本は同じなので、多次元配列の概念も掴んでいきましょう。...

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

今回の内容
  1. JavaScriptの多次元配列とは
  2. JavaScriptの多次元配列の作成方法
  3. JavaScriptの多次元配列内の特定の値を取得・更新する方法

 

JavaScriptの多次元配列とは

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

多次元配列とは、「配列の中に配列がセットされているデータ構造」のことです。

以下の画像は多次元配列の内部構造をイメージとして描き出したものです。

多次元配列のイメージ多次元配列のイメージ

上の画像を見てわかるとおり、「変数array」は配列です。

そして、配列である「変数array」の中に次のような3つの配列がセットされています。

変数array(配列)の中身
  1. 1つ目の配列には「1, 2, 3」という値がセットされている
  2. 2つ目の配列には「4, 5, 6」という値がセットされている
  3. 3つ目の配列には「7, 8, 9」という値がセットされている

このような「配列の中に配列」があるデータ構造が「多次元配列」といいます。

上の図は2次元配列の例になります。

その他にも「3次元配列」、「4次元配列」とずっと続いていきますが、違いは配列がどれだけ入れ子に入っているかだけです。

多次元配列の例
  • 2次元配列 : 「①配列」の中に「②配列」がある
  • 3次元配列 : 「①配列」の中に「②配列」があって、「②配列」の中にも「③配列」がある
  • 4次元配列 : 「①配列」の中に「②配列」があって、「②配列」の中にも「③配列」がある。そして、「③配列」の中にも「④配列」がある。

2次元配列、3次元配列、4次元配列などを1つの言葉でまとめたものが「多次元配列」となります。

JavaScriptの多次元配列の作成方法

この章では、「JavaScriptの多次元配列の作成方法」について解説します。

多次元配列を作る書き方は以下の画像にまとめたとおりです。

多次元配列の作り方多次元配列の作り方

前回の記事でも解説したとおり、通常の配列を作るときは「[]」を使います。

あわせて読みたい
【入門】JavaScriptで配列を作成する方法【定義・初期化】JavaScriptで配列を作成する方法を解説します。JavaScriptで配列を定義する方法は大きく2種類あります。①「[1, 2, 3]」、②「new Array(1, 2, 3)」の2つのうち①で配列を作成することが一般的です。...

多次元配列は、この「[]」の中に別の配列(「[]」)を作れば良いだけなので、「[] ]」の形となります。

以下の画像の赤枠内ではこの「[] ]」を使って多次元配列を作成したサンプルコードとなります。

多次元配列を作成したサンプルコード多次元配列を作成したサンプルコード

上の画像で使っているサンプルコードは以下のリンクから直接確認できます。

多次元配列のサンプル1

JavaScriptの多次元配列内の特定の値を取得・更新する方法

この章では、「多次元配列内の特定の値の取得・更新する方法」を解説します。

基本的な考え方は通常の配列のときと同じで、以下の記事でも解説している「インデックス番号」を使って特定の値を取得・更新できます。

あわせて読みたい
【入門】JavaScriptで配列を作成する方法【定義・初期化】JavaScriptで配列を作成する方法を解説します。JavaScriptで配列を定義する方法は大きく2種類あります。①「[1, 2, 3]」、②「new Array(1, 2, 3)」の2つのうち①で配列を作成することが一般的です。...

取得方法

多次元配列内の特定の値を取得する方法を説明する前に、通常の配列の特定の値を取得する方法をふりかえります。

例えば通常の配列で、1番最初に保存されている値を取得したい場合は「配列[0]」のような形式で値を取得できることを前回記事で解説しました。

このときの「0」はインデックス番号と呼び、先頭から「0番目」、「1番目」、「2番目」と「0」から始まります。

ここで多次元配列に話を戻します。

まず「[ [‘値1’, ‘値2’], [‘値3’, ‘値4’], [‘値5’, ‘値6’] ]」という2次元配列があるとします。

この時1つ目の値である「 [‘値1’, ‘値2’]」を取得したい場合は、通常の配列と同じように「配列[0]」とすることで取得できます。

そして、「配列[0]」は「 [‘値1’, ‘値2’]」という配列ですので、ここで「‘値1’」を取得した場合は、「配列[0][0]」とすれば取得できます。

以下の画像は、ここまで説明してきた「多次元配列内の特定の値の取得方法」をまとめたものになります。

特定の値を取得するサンプルコード特定の値を取得するサンプルコード

上の画像で使っているサンプルコードは以下のリンクから直接確認できます。

多次元配列のサンプル2

更新方法

多次元配列内の特定の値の更新の方法は、前の項目で説明した「取得方法」を理解していればすぐに理解できます。

値の取得では「配列[0][0]」とすることで、2次元配列の1つ目の配列内の1つ目の値を取得できることを説明しました。

更新の場合は、この「配列[0][0]」に対して代入を行えば良いだけです。

つまり「配列[0][0] = ‘新しい値’」とするだけです。

さきほど例に使った2次元配列のデータを使って、「配列[0][0] = ‘新しい値」を実行すると次のようになります。

  • 更新前
    • [ [‘値1‘, ‘値2’], [‘値3’, ‘値4’], [‘値5’, ‘値6’] ]
  • 更新後
    • [ [‘新しい値‘, ‘値2’], [‘値3’, ‘値4’], [‘値5’, ‘値6’] ]

以下の画像は、ここまで説明してきた「多次元配列内の特定の値の更新方法」をまとめたものになります。

特定の値を更新するサンプルコード特定の値を更新するサンプルコード

上の画像で使っているサンプルコードは以下のリンクから直接確認できます。

多次元配列のサンプル3

まとめ

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

今回のまとめ
  • 多次元配列とは、入れ子になった配列のことである(配列の中に配列がある構造)
  • JavaScriptで多次元配列を作るときは「[ [‘値1’, ‘値2’], [‘値3’, ‘値4’], [‘値5’, ‘値6’] ]」のような形式で作る
  • 多次元配列内の特定の値を取得する方法は「配列[0][0]」で取得できる
  • 多次元配列内の特定の値を更新する方法は「配列[0][0] = ‘新しい値’」で更新できる

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

あわせて読みたい
JavaScriptでの多次元配列の作り方JavaScriptでの多次元配列の作り方に学習します。多次元配列というのは「配列の中に別の配列」が入っているような配列のことです。多次元配列の作り方、値の取得方法、値の更新方法は通常の配列と基本は同じなので、多次元配列の概念も掴んでいきましょう。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

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

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

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

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

無料特典を受け取る

 

COMMENT

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