繰り返し

while 文

while 文を用いると、ある条件が満たされている間実行され続けるプログラムを記述することができます。次のプログラムを実行すると、画面には 01234 のように表示されます。

let i = 0;
while (i < 5) {
  document.write(i);
  i += 1;
}
document.write("終了");

プログラムの実行の流れを確認してみましょう。

while 文は、次のように記述します。

while (条件式) {
  処理;
}

while 文の実行に差し掛かると、まずは条件式が評価されます。この結果が true であれば、波括弧内の処理が実行され、false であれば終了します。波括弧内の処理が終わると、再び条件式が評価されます。以上の繰り返しです。

これをフローチャートの形式で表すと、次のようになります。

課題

1 から 10 までの整数の合計を計算するプログラムを作ってみましょう。

ヒント

1 から 10 まで順番に増えていく変数 i と、合計値を保存しておく変数 sum を用意しましょう。

解答

let i = 1;
let sum = 0;
while (i <= 10) {
  sum += i;
  i += 1;
}
document.write(sum);

GitHub で表示このプログラムを実行する

for 文

for 文は、while 文にほんの少しだけ機能を追加したものになります。

先ほどのプログラムは、 for 文によって次のように書き換えられます。

for (let i = 0; i < 5; i += 1) {
  document.write(i);
}
document.write("終了");

for 文の文法は次の通りです。

for (初期化; 条件式; 更新式) {
  処理;
}

while と構造が似ていますが、条件式のほかに初期化と更新式が加えられています。通常、繰り返しを扱うプログラムでは、while の例における変数 i のように、一番はじめに現在の繰り返し回数を表す変数を用意し、ループの終わりでその変数を更新します。

これらをより便利に記述できるのが for 文、というわけです。

課題

前項で書いた 1 から 10 までの整数の合計を計算するプログラムを for 文を用いて書き換えてみましょう。

解答

let sum = 0;
for (let i = 1; i <= 10; i += 1) {
  sum += i;
}
document.write(sum);

GitHub で表示このプログラムを実行する

ネストされたループ

for 文や while 文は、ネストして使用することができます。次のプログラムは、(x, y) = (0, 0) から始まって (x, y) = (4, 4) まで画面に表示します。

for (let x = 0; x < 5; x += 1) {
  for (let y = 0; y < 5; y += 1) {
    document.write(`(x, y) = (${x}, ${y})<br>`);
  }
}

GitHub で表示このプログラムを実行する

テンプレートリテラル

テンプレートリテラルは、文字列をプログラム中に記述する方法の一種です。ただ、文字列中に別の式を埋め込めるという特徴があります。

const string1 = "10から2を引くと" + (10 - 2) + "です。";
const string2 = `10から2を引くと${10 - 2}です。`;

通常の文字列は " (ダブルクォーテーション) で囲って記述するのに対し、テンプレートリテラルでは ` (バッククォーテーション) を用います。

課題

HTML の table, tr, td タグを用いて、九九の表を画面に表示させてみましょう。

解答

開きタグと閉じタグをどのタイミングで出力すべきかに注意しましょう。

document.write("<table>");
for (let x = 1; x <= 9; x += 1) {
  document.write("<tr>");
  for (let y = 1; y <= 9; y += 1) {
    document.write(`<td>${x * y}</td>`);
  }
  document.write("</tr>");
}
document.write("</table>");

GitHub で表示このプログラムを実行する