JavaScript よくわかる「配列」の基本

JavaScript

あーりーです。

趣味でゆるゆるとJavaScriptの勉強をしています。

今回のテーマは「配列」です。

「配列」とは「変数」がパワーアップしたもの

「配列」とは、「変数」がパワーアップしたものです。

一気にたくさんの情報があつかえる便利な「変数」、みたいな感じです。

変数とは

じゃあ、そもそも変数って何だったかというと…

情報を入れておく箱のようなものです。

 

変数について詳しくは「JavaScriptで「変数」に数字や文字を代入する方法」を見ていただくとして、今回はサラッとだけ復習をしておきたいと思います。

変数についてサラッと復習

変数の使い方を振り返っておきますね。

 

たとえば…

「a」という変数に「100」という情報を入れる場合、こんなふうに書きます。

var a;
a=100;

解説

この部分で「今からaという変数を使いますよ!」と宣言しています。

var a;

 

そして…

この部分で変数aに100を代入しています。

a=100;

合体させて1行にできる

上の例で挙げた2行は、合体させて1行にすることもできます。

やってみましょう。

 

合体!

var a=100;

 

はい。1行で書けました。

たくさんの変数を使いたい場合

ところで。

もしも、たくさんの情報をどんどん変数に代入したいときは、どうしたらいいでしょう?

 

たとえば、「0」「100」「200」「300」「400」「500」といった情報を、次から次へと変数に代入したい場合です。

 

そんなときは、こうなります。

var a=0;
var b=100;
var c=200;
var d=300;
var e=400;
var f=500;

 

ふぅ…。

これだと、いちいち大変です。

配列を使おう

この程度の量ならまだいいですが、情報の数がもっともっと増えると、さらに大変です。

行がどんどん増えていくことになります。

 

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

配列のメリット

「配列」を使えば、たくさんの変数をコンパクトにあつかえます。

同じような種類の情報をまとめて変数に代入したいときに便利です。

配列の基本形

配列の基本形は、こうです。

var 配列名=[値1,値2,値3];

 

「値1、値2、値3…」の部分が、変数に代入したい情報です。

実際に文字や数字をあてはめてみると、下のようになります。

 

var aaa=[0,100,200,300];

 

では、詳しく見てみましょう~。

配列名

赤い部分が配列名です。

var aaa=[0,100,200,300];

 

配列名は、自分がわかりやすいように、ある程度自由に決めることが出来ます。

※JavaScriptのプログラム内で使われることがある文字(ifなど)はNGです。

 

ここでは、「aaa」という配列名にしています。

理由はとくにありません。適当につけた配列名です。

値とは、配列であつかわれる一つ一つの情報のことです。

赤い部分が値です。

var aaa=[0,100,200,300];

 

値は、この例では4つだけですが、カンマで区切ってどんどん増やすことができます。

値はゼロ番目から始まる

値は、左から順番に、0番目、1番目、2番目と数えます。

つまり…

 

0番目の値とは、一番左の赤い部分です。

var aaa=[0,100,200,300];

 

 

1番目の値とは、左から2つめの赤い部分です。

var aaa=[0,100,200,300];

 

 

2番目の値とは、左から3つめの赤い部分です。

var aaa=[0,100,200,300];

 

ポイントは、値はゼロ番目から始まる、ということです。

値を使用するには

代入された値を、プログラムの中で使用するには、つぎのような形式をとります。

配列名[値の番号];

 

では、具体的に見てみましょう。

具体例

aaaという配列があるとします。

これです。(さっきと同じものです)

var aaa=[0,100,200,300];

 

この配列の2番目の値は、「200」です。

(左から、ゼロ番目、1番目、2番目…と数えるので)

 

この「200」をプログラムの中で使いたいときは、こう書きます。

aaa[2];

 


これは、

aaaという配列の2番目

という意味です。

 

こうすることで、「200」が表現できます。

 

つまり…

aaa[2]という変数に「200」という値が代入されているんです。

配列は変数の集まり

var aaa=[0,100,200,300];


この配列を分解して考えてみると…

 

aaa[0]という変数に「0」が代入されている。

aaa[1]という変数に「100」が代入されている。

aaa[2]という変数に「200」が代入されている。

aaa[3]という変数に「300」が代入されている。

 

と、言えます。

 

たくさんの変数が出てきました。

配列とは、変数の集まりなんです。

要素とインデックス

上に書いたように、配列とは変数の集まりです。

この一つ一つの変数のことを「要素」と呼びます。

 

「要素」を区別するためについている数字のことを、インデックスといいます。

この赤い部分のことです。

aaa[0];

aaa[1];

aaa[2];

aaa[3];

次回予告

次回は、配列を実際に使ってJavaScriptで何かやってみようと思います。

追記

次回の記事はこちらです。⇒「配列を使って数字や文字を表示する

 

JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。よろしければご覧ください。

タイトルとURLをコピーしました