前の記事で、繰り返し構文を使って年の一覧を表示しました。このような、数字を繰り返す場合には簡単なのですが、では例えば「都道県の一覧を表示したい」といった場合は繰り返しで処理できないのでしょうか？

このようなときに便利なのが「配列」です。次のようなプログラムを作成してみましょう。

<script>
const prefs = [
  '北海道',
  '青森県',
  '岩手県',
  '宮城県'
];
document.write(prefs[1]);
</script>

これを実行すると、画面には「青森県」と表示されます。

ここでは、「prefs」という変数に値を代入していますが、この時にブラケット記号を使ってカンマ区切りで、各都道府県の値を代入しています。

const prefs = [
  '北海道',
  '青森県',
  '岩手県',
  '宮城県'
];

この時作られるのが「配列」で、これによって1つの変数の中に複数の値をまとめて代入することができます。この時、各値には番号が付加されます。これを「添え字」とか「インデックス」といいます。

そして、この配列から値を取り出したい場合は、何番の値を取り出したいかを、同じくブラケット記号で指定します。

prefs[1]

この時、添え字は「0」から数え始めるのは、北海道は「0」です。青森県が「1」となるので、ここでは画面に青森県が表示されたという訳です。

すべての値を繰り返し構文で表示しよう

このしくみを利用すれば、繰り返し構文を使って配列のすべての内容を表示することができます。次のようにしてみましょう。

for (let i=0; i<4; i++) {
  document.write(prefs[i] + '<br>');
}

for構文を使って、「i」という変数が0から3まで変化します。この時、次のように配列の添え字にこの変数を利用しました。

prefs[i]

すると、添え字の値が0から順番に変化するため、配列の値が順番に取り出されていきます。そして、画面にすべての値が順番に表示されるという訳です。

ただしこのプログラムの場合、配列の値の数が変わってしまうとfor構文の「条件」部分の次の値が変化してしまいます。

i<4

この「4」というのは配列に代入されている要素の数と一致していなければなりません。そこで、これを数字で指定せずに「プロパティ」を使ってその場で算出します。次のように書き換えましょう。

for (let i=0; i<4; i++) {
↓
for (let i=0; i<prefs.length; i++) {

実は、「prefs」という配列は単なる変数ではなく「Arrayオブジェクト」というオブジェクトです。そのため、これ自身がメソッドやプロパティを持っています。ここでは、「length」という配列の値の数を表すプロパティを使って、繰り返し構文の条件を指定しました。

これによって、配列の値の数分だけ繰り返しが行われるようになります。

for of構文を使おう

ここまで、for構文を使って繰り返しの処理を行ってきましたが、実は配列の繰り返しには専用の構文が準備されています。それが「for of構文」です。次のように書き換えましょう。

for (pref of prefs) {
  document.write(pref);
}

非常に簡単な記述になりました。for of構文は、次のような書式で指定します。

for (変数 of 配列) {
  ...
}

この場合、「prefs」という配列から値を順番に1つずつ取り出して、「pref」という変数に代入されます。そのため、処理の中では添え字なども必要なく、変数「pref」をそのまま利用すれば良いということになります。

forEachメソッドを使おう

もうひとつ、先の通り配列は「Array」オブジェクトなので、メソッドが準備されています。その中に「forEachメソッド」という、繰り返しを行えるメソッドがあります。次のように書き換えましょう。

prefs.forEach((pref, index) => {
  document.write(pref + '<br>');
});

これでも同じように画面に全件が表示されます。

どの方法を使って問題ありませんが、「for of」構文などが使いやすいかもしれません。

配列を操作するメソッドいろいろ

Arrayオブジェクトには、配列を操作するためのメソッドが他にもいろいろ準備されています。それぞれ紹介しましょう。

末尾に値を追加するpush

次のように追加しましょう。

prefs.push('秋田県', '山形県');

配列の最後に指定された値が追加されます。

先頭に値を追加するunshift

配列の先頭に値を追加するには「unshift」メソッドを使います。

prefs.unshift('あいうえお');

末尾から値を削除するpop

末尾から値を削除するには「pop」メソッドを使います

prefs.pop();

先頭から値を削除するshift

先頭から値を削除するには「shift」メソッドを使います。

prefs.shift();

値を置き換える

配列に代入されている値を書き換えるには、次のように添え字を指定して値を代入することで行えます。

prefs[0] = 'ほっかいどう';

また、「splice」メソッドを使うとまとめて置き換える事ができます。

prefs.splice(1, 2, ‘あおもり’, ‘いわて’);

次のように書式を指定します。

Array.splice(挿入する添え字, 削除する個数, 置き換える値1, 置き換える値2, ...);

置き換える値を省略すると、間の値を削除することもできます。

prefs.splice(1, 2);

ドロップダウンリストを作ってみよう

それでは、ここまで学んだ内容を活かして、都道府県のドロップダウンリストを作ってみましょう。次のようになります。

<div class="container"></div>

<script>
let html = '<select name="pref" id="pref">';
prefs.forEach((pref, index) => {
  html += '<option value="' + pref + '">' + pref + '</option>';
});
html += '</select>';
document.querySelector('.container').innerHTML;
</script>

これでドロップダウンリストができあがります。

前の記事と同様に、「html」という変数を準備して「<select>」タグを作り、「option」タグを繰り返し構文で次々に作り出します。

そして、「querySelector」メソッドで「.container」というクラスの「<div>」タグにできあがったHTMLを挿入しているという訳です。

document.querySelector('.container').innerHTML;

このように、作成していくと良いでしょう。