あーりーです。
趣味でJavaScriptをゆっくり勉強しています。
JavaScriptの記事は「初心者のための超わかりやすいJavaScript入門」にまとめてあります。よろしければご覧ください。
きょうのテーマは「二次元配列」です。
名前だけ聞くとすごく難しそうですね。
でも、心配いりません。
すごくカンタンな話です。
配列とは
「二次元配列」の話に入る前に、そもそも「配列」とは何かを確認しておきます。
「配列」とは、箱の集まりです。
その箱には、いろんな情報をしまっておくことができます。
箱にしまった情報は、箱の名前や番号を指定することで、あとから自由に呼び出せます。
「配列」について詳しくは、過去記事の「よくわかる配列の基本」や「配列を使って数字や文字を表示する」をご覧ください。
二次元配列とは
では…
「二次元配列」とは何でしょう。
「二次元配列」とは、箱の中にさらに箱がある状態です。
ひとつの箱の中をのぞき込むと、そこにさらにいくつかの小さな箱があって、情報が分類されて入っているイメージです。
箱の中に箱がある。
それが「二次元配列」です。
実際に見てみましょう。
二次元配列のサンプル
こちらです。
<html> <head> </head> <body> <script> var x=[["あ","い"],["う","え"]]; document.write(x[0][0]); document.write(x[0][1]); document.write(x[1][0]); document.write(x[1][1]); </script> </body> </html>
緑色の部分がJavaScriptです。
サンプルの実行結果
上の内容をメモ帳などのエディタにコピペしてHTML形式で保存し、そのファイルを開くと…
ブラウザには「あいうえ」という文字が表示されます。
どんな仕組みでそうなるのか、見ていきますね。
二次元配列の構造
サンプルのこの部分が二次元配列です。
var x=[["あ","い"],["う","え"]];
「x」という配列の中に、大きな箱が2つあります。
1つ目の大きな箱が、この赤い部分です。
var x=[["あ","い"],["う","え"]];
この大きな箱の中には、さらに小さな箱があって、それぞれ「あ」「い」という情報が入っています。
2つ目の大きな箱が、この赤い部分です。
var x=[["あ","い"],["う","え"]];
この大きな箱の中には、さらに小さな箱があって、それぞれ「う」「え」という情報が入っています。
箱は0番目から数えはじめる
上の説明では、1つ目の箱を「1つ目」と数えました。
当たり前のことですよね。
ところが…
配列では、1つ目の箱を「0番目」と数えます。
2つ目の箱を「1番目」と数えます。
数える数字のスタートが「1」ではなく「0」なんです。
そういう決まりなんです。
箱の中の情報
上の数え方を踏まえて、二次元配列の何番目の箱にどんな情報が入っているのかを見直してみましょう。
0番目の箱（大きな箱）の中の、0番目の箱（小さな箱）に入っている情報は、以下の赤い部分です。
var x=[["あ","い"],["う","え"]];
0番目の箱（大きな箱）の中の、1番目の箱（小さな箱）に入っている情報は、以下の赤い部分です。
var x=[["あ","い"],["う","え"]];
1番目の箱（大きな箱）の中の、0番目の箱（小さな箱）に入っている情報は、以下の赤い部分です。
var x=[["あ","い"],["う","え"]];
1番目の箱（大きな箱）の中の、1番目の箱（小さな箱）に入っている情報は、以下の赤い部分です。
var x=[["あ","い"],["う","え"]];
箱の中の情報を呼び出す
二次元配列の情報を呼び出すときには、何番目の箱かを指定します。
それをやっているのが、この赤い部分です。
document.write(x[0][0]); document.write(x[0][1]); document.write(x[1][0]); document.write(x[1][1]);
念のため、1行ずつ確認してみますね。
もう理解したよ、という方は読み飛ばしてください。
1行目です。
document.write(x[0][0]);
「x」という配列の、0番目の箱（大きな箱）の中の、0番目の箱（小さな箱）に入っている情報が呼び出されています。
つまり「あ」です。
2行目です。
document.write(x[0][1]);
「x」という配列の、0番目の箱（大きな箱）の中の、1番目の箱（小さな箱）に入っている情報が呼び出されています。
つまり「い」です。
3行目です。
document.write(x[1][0]);
「x」という配列の、1番目の箱（大きな箱）の中の、0番目の箱（小さな箱）に入っている情報が呼び出されています。
つまり「う」です。
4行目です。
document.write(x[1][1]);
「x」という配列の、1番目の箱（大きな箱）の中の、1番目の箱（小さな箱）に入っている情報が呼び出されています。
つまり「え」です。
こうして「あ」「い」「う」「え」という情報が呼び出されます。
文字を表示
呼び出した情報を画面に表示する命令が、この赤い部分です。
document.write(x[0][0]);
というわけで…
呼び出された情報が一文字ずつ表示されて、画面には「あいうえ」と出ることになります。
配列の中に配列がある
二次元配列とは何かをもう一度確認しておくと…
箱の中に箱がある状態です。
言い換えると、配列の中に配列がある状態です。
今回のサンプルは、2つ箱の中に、さらに2つの箱があるものでした。
箱の数はもっと増やすことができます。
さらに…
箱の中の箱の中にまた箱を入れることで、三次元配列とかもできるようです。
でも、そこまでしちゃうとややこしいですよね（汗）
今回はこれでおしまいです。
お付き合いありがとうございました。
JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。よろしければご覧ください。
