ともすたmedia
予約フォームや予定の入力欄などで、年を図のようにドロップダウンで選択させたいといったことはよくあります。
こんな時、選択肢を手で入力するのは大変ですし、来年になったら更新しなければならないなどでは管理が大変です。そこで、JavaScriptを使って、これを自動的にかつに一気に選択肢を追加していきましょう。
HTMLを準備しよう
まずは適当なフォルダ、例えばここでは「year」などのフォルダに「index.html」という名前でファイルを作成します。
次のようにHTMLの基本タグを入れていきましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>ドロップダウンのパーツは、「<select>」というタグを使っていきます。
<form action="" method="post">
<select name="year" id="year">
<option value="2025">2025年</option>
<option value="2026">2026年</option>
</select>
</form>これを画面に表示すると、ドロップダウンが展開されます。
これを、JavaScriptを使って「今年から、10年後までの選択肢を作る」というプログラムにしていきたいと思います。
繰り返し構文を使おう
このような、同じような処理を何度も行うときに使われるのが「繰り返し構文」という構文で、JavaScriptでは「for構文」と「while構文」があります。まずは「while構文」を使ってみましょう。
「<body>」タグの最後に次のように追加しましょう。
<script>
let i = 0;
while (i < 10) {
document.write(i + '<br>');
i = i + 1;
}
</script>これを画面に表示すると、画面上に0から9までの数字が表示されます。
では、このプログラムの内容を確認していきましょう。
まずはここでは「i」という名前の変数を準備して、初期値として0を代入しています。iというのは、繰り返し構文でよく使われる変数の名前で「index」の頭文字を取ったものと言われています。なお、この「i」は後で内容が変化するため、ここでは定数の「const」ではなく、「let」で宣言をします。
let i = 0;次に、以下の記述を確認してみましょう。
document.write(i + '<br>');これで、画面に「i」と改行を表す「<br>」タグを出力しています。この場合、iには0が代入されているので画面に0と表示されます。
次に、その下を見てみましょう。
i = i + 1;これは、少し特殊な操作で「iに1を加えて、1に代入し直す」という動きになります。これによって、0だったiに1が代入され直します。繰り返し構文には、この変数に再代入するという動きが非常に重要になります。
それでは、while構文を改めて確認してみましょう。
while (i < 10) {
...
}while構文は、その後のかっこの中に「繰り返す条件」を記述します。その後、中括弧が続き、その中に「繰り返したい処理」を記述します。
繰り返す条件は、if構文で紹介したものと同じ「比較演算子」が利用できます。ここでは、「<（未満）」という記号を使って、「iが10未満である」という条件にしています。
つまりここでは、「iという変数の値が10未満の間、中括弧の中の処理を繰り返す」という動きになります。
すると、ここではiが1であり、10未満という条件を満たすため、再度同じ処理が行われます。そのため、画面には「1」が表示されます。
その後、iには1を加えられた2が代入され、10未満の間、2, 3, 4, 5…と9まで画面に表示されます。
そして、さらに1が加えられてiが10になると、条件である「iが10未満」という条件を満たさなくなります。すると、while構文は処理を終了します。こうして、画面には9まで表示されたという訳です。
while構文の注意点
while構文を使う場合、いくつかの注意点があります。
はじめから条件を満たさない場合は1度も実行されない
while構文の前には、条件として使う変数に初期値を入れたり、なにか計算などを行うことになります。例えばこの時、iに12など10以上の値を代入してみましょう。
let i = 12;
while (i < 10) {
...するとこの場合、最初から条件を満たしていないため、一度もプログラムが実行されずに終了します。
またこれは、特にエラーなどになる訳ではないので、しっかり条件を確認しましょう。
条件を満たし続けると無限ループに陥る
逆に、while構文の条件をずっと満たした状態になってしまうと、繰り返しがずっと終わらない「無限ループ」というエラーに陥ってしまいます。
例えばここでは、iに再度代入するときの記号を「-」に打ち間違えてしまったとしましょう。
...
document.write(i + '<br>');
i = i - 1;
...すると、iは0, -1, -2, -3…と、どんどん減ってしまうため、条件である「iが10未満」という条件から外れることができなくなります。すると、while構文はずっと繰り返し続けてしまって、Webブラウザが操作不能に陥ってしまったりします。
無限ループは、利用者の環境に悪影響を及ぼしてしまうので、防ぎたいバグです。必ず、条件と条件に使われている変数の変化を確認するようにしましょう。
インクリメントとデクリメント
先の通り、繰り返し構文では次のように変数自身に再度代入するという操作はよく行われます。
i = i + 1;そこで、このような処理をもっと短い記述で実現できる方法が準備されています。次のように書き換えてみましょう。
i += 1;「=」の代わりに「+=」という記号を間に挟んでいます。これを「代入演算子」といい、左側の変数（i）に、右側の値など（1）を計算して、再度代入するという意味をもっています。
これは、足し算以外の各演算子にも準備されています。
- += … 加算
- -= … 減算
- *= … 乗算
- /= … 除算
インクリメント
さらに、「1を加えて再代入する」という操作は繰り返し構文では非常によく利用されます。そこで、これには専用の演算子が準備されています。次のように書き換えてみましょう。
i++;これでも、同じように1を加えて再代入されます。これを「インクリメント」といい、「1を加えて再代入する」という非常に特殊な演算子です。
この似た記号として、「1を引いて再代入する」という記号も準備されています。
i--;これを「デクリメント」といいます。なお、かけ算・わり算にはこれらの記号はありません。
for構文を利用しよう
繰り返し構文には、while構文の他に「for構文」という構文もあります。次のように書き換えてみましょう。
for (let i=0; i<10; i++) {
document.write(i + '<br>');
}少し特殊な書き方ですが、while構文に比べるとすっきりと書くことができました。これでも同じように動作します。
実は、for構文とwhile構文は書いている内容自体は同じです。while構文では、繰り返し処理するために次のような内容を書かなければなりません。
初期化処理（let i = 0;）
while (条件) {
...
更新処理
}このように、while構文を動作させるには「初期化」と「条件」「更新処理」が揃っていないと、繰り返しが行えません。そこで、for構文ではこれを1行にまとめて記述することができます。
for (初期化処理; 条件; 更新処理) {
...
}このため、すっきりと記述ができるという訳です。
ただし、for構文は初期化や更新の処理が、シンプルなときしか利用できません。プログラムの内容によっては、初期化のための処理に複数行必要だったり、更新するためにif構文を組み合わせるなど、複雑な繰り返し構文があり、この場合はwhile構文が使われます。
年を繰り返し出力しよう
それでは、ここまでの内容をいかして「年」を画面に出力してみましょう。ここでは、2025年から10年間を繰り返してみます。for構文を次のように変更しましょう。
for (let i=2025; i<2035; i++) {
document.write(i + '<br>');
}これで画面には、2025から2034までの数字が表示されます。
ただしこの状態では、2026年になっても最初が2025年のままになってしまいます。そこで、「今年の年」を取得して、そこから10年後までを繰り返すようにしてみましょう。次のように変更します。
const today = new Date();
const thisYear = today.getFullYear();
for (let i=thisYear; i<=thisYear+10; i++) {
document.write(i + '<br>');
}最初に、Dateオブジェクトを取得し、「getFullYear()」メソッドで今年の年を取得し、「thisYear」に代入しました。
const today = new Date();
const thisYear = today.getFullYear();そしたら、iにこれを代入して初期化し、10年後（thisYear+10）まで繰り返すようにfor構文を組み立てています。後は画面に年を表示すれば、できあがりという訳です。こうして、繰り返し構文を使うと何度も同じことをするときに、非常に便利に記述できます。
ドロップダウンを仕上げよう
では最後に、HTMLと組み合わせてドロップダウンに表示してみましょう。
<form action="" method="post"></form>
<script>
let html = '<select name="year" id="year">';
const today = new Date();
const thisYear = today.getFullYear();
for (let i=thisYear; i<=thisYear+10; i++) {
html += '<option value="' + i + '">' + i + '年</option>';
}
html += '</select>';
document.querySelector('form').innerHTML = html;
</script>これで、ドロップダウンに表示できました。
ここでは、「html」という変数に「<select>」タグから始まるHTMLを代入していきます。繰り返し構文で、選択肢である「<option>」タグを作って付け足しています。なお、文字列の連結にも「+=」の演算子は利用できます。
html += '<option value="' + i + '">' + i + '年</option>';これは、「今変数htmlに代入されている内容の最後に、付け足して再代入」という操作になります。
こうして、HTMLができあがったら、「querySelector」メソッドで「<form>」タグに作ったHTMLを差し込みます。
document.querySelector('form').innerHTML = html;こうして、フォームの選択肢などを繰り返し構文で作成すると、管理や制作が簡単になるので、使っていきましょう。
