JavaScript

【超初心者 JavaScript】配列、多次元配列の使い方と解説

【超初心者 JavaScript】配列、多次元配列の使い方と解説

配列とは

今回は配列について解説させていただきます。

まずプログラミングでは、変数というデータに名前を付ける事が頻繁に行われます。

変数についてはこちらで解説しています。

【超初心者 JavaScript】変数の使い方と解説
【超初心者 JavaScript】変数の使い方と解説

目次1 変数とは何か2 変数の宣言3 変数の定義3.1 ① var,let,const の中から1つ選んで宣言する3.2 ②変数の名前の自分で決める3.3 ③使いたい値を代入する4 変数を使う4.1 ...

続きを見る

 

変数は基本的に1個のデータしか定義できません。

それが10個程度なら全然大変じゃありませんが、5000個定義するとなったら

Naza
やってられない

となる訳です。

 

そこで登場するのが「配列」です。

配列はたくさんのデータを保管しておける便利なものなのです。

 

よく変数や配列を解説する時に、「箱」の様な例えがあります。

しかし、自分は「箱」と言うよりも、引き出しに番号がついてる「タンス」と言う感覚の方がしっくりきます。

 

イメージ画像

 

 

配列を定義

配列を定義方法は以下の様な形になります。

let 「変数名を決める」 = [ 代入したい値①, 代入したい値②, 代入したい値③, ・・・・・・・  ];

 

①変数の定義と同じ様に宣言する。(ここでは let を使用)
②変数名を自分で決める。
③ [] の中に代入したい値を複数入れる。

※代入する値はカンマ,で区切ります。

 

値を代入して定義してみる

実際に値を代入して、配列を定義してみましょう。

let english = [ "eat", "open", "drive" ];

let で宣言。
english と変数名を自分で決める。
[] の中に文字列を3個代入。

これで定義はできました。

 

配列に代入されている値の使い方

定義は出来たので、配列の値を使って何か表示させてみましょう。

let english = [ "eat", "open", "drive" ];
document.write( english[ 1 ] );

配列に入っている値を使う時は、変数名[ 使いたい値の番号 ] となります。
それでは実行してみましょう。

 

実行結果

open

 

個目に代入した筈の eat が表示されませんでした。

Naza
何で個目の open が実行されるん?

 

これは何故かというと、配列に代入された値は0から数え始めるからです。

注意ポイント

[ "eat" が番目の値,  "open"が番目の値,  "drive"が番目の値 ]

 

それをふまえて eat を表示させてみます。

let english = [ "eat", "open", "drive" ];
document.write( english[ 0 ] );

実行結

eat

これで出来ましたね。

 

Naza
タネが分かれば簡単じゃん

 

 

多次元配列を使ってみる

配列には多次元配列と呼ばれる配列の中に配列を作るという事が可能です。

 

二次元配列

まずは二次元配列を定義してみます。

let english = [
   [ "eat",   "open",    "drive" ],      // 0番目の配列
   [ "イート", "オープン", "ドライブ" ],      // 1番目の配列
   [ "食べる", "開ける",   "運転する" ]      // 2番目の配列
];

 

見やすいように改行をしています。

注意ポイント

配列[] と配列[] の間もカンマ,で区切る。

 

これで先ほどと同じ様に実行してみます。

let english = [
    [ "eat",   "open",    "drive" ],      // 0番目の配列
    [ "イート", "オープン", "ドライブ" ],      // 1番目の配列
    [ "食べる", "開ける",   "運転する" ]      // 2番目の配列
];
document.write( english[ 0 ] );

 

実行結果

eat,open,drive

 

配列の番目に入っている値が全部表示されました。

続いて、二次元配列の中から1個だけ値を表示させてみます。

「ドライブ」を表示させる。

let english = [
  [ "eat", "open", "drive" ],       // 0番目の配列
  [ "イート", "オープン", "ドライブ" ],   // 1番目の配列
  [ "食べる", "開ける", "運転する" ]    // 2番目の配列
];
document.write( english[ 1 ][ 2 ] );

実行結果

ドライブ

 

ポイント

二次元配列の中から値を1個だけ取り出す時は [ 配列の番号 ][ 配列の中にある値の番号] となります。

今回のパターンだと、「ドライブ」という単語は番目の配列の中の番目の値なので、 english[ 1 ][ 2 ]  となります。

 

三次元配列

配列の中に配列を作って、さらにその中に配列を作るという三次元配列も可能です。

「スマイル」を表示させてみる。

let english = [
    [ 							// 0番目の配列
        [ "eat",   "open",    "drive" ],		// の中の0番目の配列
        [ "イート", "オープン", "ドライブ" ],	// の中の1番目の配列
        [ "食べる", "開ける",   "運転する" ]	// の中の2番目の配列
    ],
    [ 							// 1番目の配列
        [ "move",  "cry",   "swim" ],		// の中の0番目の配列
        [ "ムーブ", "クライ", "スイム" ],		// の中の1番目の配列
        [ "動く",  "泣く",   "泳ぐ" ]		  // の中の2番目の配列
    ],
    [ 							// 2番目の配列
        [ "live",   "close",    "smile" ],		// の中の0番目の配列
        [ "リブ", "クローズ", "スマイル" ],	 // の中の1番目の配列
        [ "住む", "閉める",   "笑顔" ]		 // の中の2番目の配列
    ]
];
document.write( english[ 2 ][ 1 ][ 2 ] );

 

実行結果

スマイル

 

もはやメチャクチャですが、番目の配列の中の番目の配列の中の番目の値なので english[ 2 ][ 1 ][ 2 ] となります。

 

Naza
流石にキツい

 

 

まとめ

今回は配列について解説させていただきました。

①変数を定義。
② [] の中に色々なデータを代入する。

ザックリですが、この配列を使いこなせれば値の代入がずっと楽になりますね!
代入する値を変えてみたり、四次元配列など挑戦して慣れましょう!

最後まで、読んでいただきありがとうございます。

 

以上。

-JavaScript

© 2021 Nazaブログ