配列JavaScript入門

更新日:2018.06.22
  1. HOME
  2. JavaScript入門
  3. 配列

今回は配列について解説していきます。 配列は、順番の付いた変数だと思って下さい。 配列はJavaScriptにおいてよく用います。 配列を上手に使うと、すっきりしたスクリプトを書くことができます。

配列の宣言

配列は以下のようにして宣言します。

var 配列名 = new Array()
配列を宣言します。配列名は任意に付けることができます。

これで、順番の付いた変数を作ることができます。例えば1つ目の変数を取得したい場合は、 配列名[0]というように、半角大括弧で何番目かを指定できます。配列は0から始まります。

配列に値を代入する

配列に値を代入するには、次のようにします。

var yobi = new Array();
yobi[0] = "日曜日";
yobi[1] = "月曜日";
yobi[2] = "火曜日";

また、下のように直接値を指定することもできます。

var yobi = new Array("日曜日","月曜日","火曜日");

new Array()の括弧の中に順番に値を記入していきます。値と値の間は半角コンマで区切ります。

以下のように改行して記述することも可能です。この時、一番最後にも勢い余ってコンマを入れてしまうことがありますが、 それだとエラーが出るので気を付けて下さい。

var yobi = new Array(
"日曜日",
"月曜日",
"火曜日"  //最後にコンマは付けない!
);

このような方法で、配列に値を指定していきます。

配列を使って今日の曜日を表示する

前のページではSwitch文を使って今日の曜日を表示させましたが、このページは配列を使って表示させてみましょう。

<script>

//配列yobiに各曜日の名称を入れる
var yobi = new Array();

yobi[0] = "日曜日";
yobi[1] = "月曜日";
yobi[2] = "火曜日";
yobi[3] = "水曜日";
yobi[4] = "木曜日";
yobi[5] = "金曜日";
yobi[6] = "土曜日";

//今日の日付データを取得し、それから曜日を取得する
var today = new Date();
var week  = today.getDay();

document.write("今日は"+yobi[week]+"です!");

</script>

サンプル(別窓)

サンプルを見てみると、本日の曜日が表示されると思います。

サンプルの説明

では、上記サンプルを細かく見ていくことにしましょう。

配列yobiに各曜日の名称を入れる

var yobi = new Array();

yobi[0] = "日曜日";
yobi[1] = "月曜日";
yobi[2] = "火曜日";
yobi[3] = "水曜日";
yobi[4] = "木曜日";
yobi[5] = "金曜日";
yobi[6] = "土曜日";

まずはnew Array()を使って配列yobiを宣言しています。そして日曜日から順番に曜日名を入れていきます。 配列は0から始まることを忘れないようにしましょう。

今日の日付データを取得し、それから曜日を取得する

var today = new Date();
var week  = today.getDay();

これは、前のページに出てきた今日の曜日を取得する命令文です。 詳しくはまた別のページで解説します。 1行目は本日の日付データ一式を取得して変数todayに格納しています。 2行目はその中から曜日の部分を取得して、変数weekに格納します。

前のページでも述べましたが、曜日のデータは数値になっています。 日曜日が「0」,月曜日が「1」,…,土曜日が「6」となります。 ですから、配列yobiに格納した曜日名と配列の順番が対応しています。

曜日を書き出す

document.write("今日は"+yobi[week]+"です!");

最後に、document.write()を使って曜日を書き出します。配列yobiの大括弧内には変数weekが指定されています。 上に述べたように、変数weekは数値です。 もし今日が木曜日なら変数weekの値は4です。yobi[4]は「木曜日」ですからそれが表示されるという訳です。


配列は次に出てくるfor文(繰り返し文)と組み合わせることにより威力を発揮します。 プログラムにおいて配列と繰り返し文は避けて通れない重要な命令と言えるでしょう。 しっかり理解できるよう頑張って下さい。

楽天booksのJavaScript解説本 JavaScriptワークブック第3版 JavaScript基礎入門 プログラミングTypeScript 作りながら学ぶWebプログラミング実践入門 新しいJavaScriptの教科書 子どもから大人までスラスラ読めるJavaScriptふりがなKidsプログラミン 30時間アカデミック JavaScript入門 確かな力が身につくJavaScript「超」入門 第2版 いちばんやさしいJavaScriptの教本第2版 HTML&CSS JavaScriptプログラミング基礎演習ワークブック

Supported by Rakuten Developers