JavaScriptでの多次元配列の作り方を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでの多次元配列の作り方について現役エンジニアが解説しています。JavaScriptでは多次元配列を作るためのメソッドがないため1次元配列を組み合わせて作成します。配列リテラルかpushメソッドで配列を追加します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでの多次元配列の作り方について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでの多次元配列の作り方について詳しく説明していくね!

大石ゆかり

お願いします!

 

JavaScriptの配列

JavaScriptで配列を作る方法は2通りあります。

  1. リテラル記法:array = [1,2,3,4]
  2. new演算子:array = new Array(1,2,3,4)

 

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

JavaScriptでは多次元配列を作るためのメソッドなどはありません。なので1次元配列を連続で作ることで、多次元の配列を作ることができます。

var array1 = [1,2,3];
var array2 = [4,5,6];
var array1_2 = [array1,array2];

 

上記array1_2の変数を戻すと以下のようになります。

 

var array1_2 = [
[1,2,3],
[4,5,6]
];

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

多次元配列

var array1 = [1,2,3];
var array2 = [4,5,6];
var array3 = [10,20,30];
var array4 = [40,50,60];

var array1_2 = [array1,array2];
var array3_4 = [array3,array4];

var all_array = [array1_2,array3_4];

 

多次元配列の取り出し

 

console.log(all_array[0][0][0]);
// 1

console.log(all_array[1][0][3]);
// 30

 

多次元配列の追加

var add_array = [7,8,9]
all_array[0][0].push(add_array);
console.log(all_array);
// [[[1,2,3][4,5,6][7,8,9]][[10,20,30,][40,50,60]]]

 

筆者プロフィール

水野大輝(みずのたいき)

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。