読者です 読者をやめる 読者になる 読者になる

指定した回数だけ処理を繰り返す - for文

JavaScript基礎

for文

  1. 指定した回数だけ処理を繰り返す
  2. 変数「i」の初期値(「i」は、indexの意)
  3. 処理を1回実行するたびに、変数「i」の値をどのように変更するか


for ( 変数の初期値; 繰り返し条件; 変数の変更 ) {
  実行される処理
}

変数の値を1ずつ増やす演算子
  • 「++」
  • 「i++」は、「i = i + 1;」と同じ


《for文の利用》

  • カウンタ変数名は「i」(indexの意)とすることが慣例です
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>for文の利用</title>
<script>
  for (var i = 1 ; i <= 5 ; i++) {
    console.log( i + '回目' );
  }
</script>
</head>
<body>
</body>
</html>


《実行結果》

  1. 変数 i に1が代入される(初期化式)
  2. i が5以下かどうか検証される(継続条件式)
  3. i の値がコンソールに表示される
  4. i に1加算される(増減式)
  5. 継続条件式の結果がfalseになるまで(2~4)を繰り返す


年齢の選択肢をドロップダウンに表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>for文の練習(2)</title>
</head>
<body>
<p>年齢を選択してください。</p>
<select>
<script>
var i;
for (i=20; i<=70; i++) {
	document.write('<option value=" i ">' + i + '歳</option>');
}
</script>
</select>
</body>
</html>


和暦(平成)と西暦を並べて表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>for文の練習(3)</title>
</head>
<body>
<table>
<tr><th>和暦(平成)</th><th>西暦</th></tr>
<script>
var i;
for (i = 1; i <= 25; i = i +1) {
	document.write('<tr><td>' + i + '</td>');
	document.write('<td>' + (i + 1988) + '</td></tr>');
}
</script>
</table>
</body>
</html>

2の倍数を合計してダイアログで表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>繰り返し処理</title>
</head>
<body>
<h3>偶数の合計</h3>
<p>以下のボタンをクリックすると、<br>
2、4、6、8、…、100を全て合計した結果を表示できます。</p>
<p><button onclick="total()">計算結果</button></p>
<script>
function total() {
  var ans = 0;
  for (i=2 ; i<=100 ; i+=2) {
    ans += i;
  }
  alert('2、4、6、8、…、100の合計は、' + ans+ 'です');
}
</script>
</body>
</html>

演習問題

1~100までの合計をダイアログボックスに表示させなさい

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>繰り返し処理</title>
</head>
<body>
<h3>合計</h3>
<p>以下のボタンをクリックすると、<br>
1~100を全て合計した結果を表示できます。
</p>
<p><button onclick="total()">計算結果</button></p>
<script>
function total(){
  var ans = 0;
  for (i=1 ; i<=100 ; i++){
    ans += i;
  }
  alert('1~100の合計は、' + ans+ 'です');
}
</script>
</body>
</html>


入力した数字までの合計をダイアログで表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>繰り返し処理</title>
</head>
<body>
<h3>合計</h3>
<p>以下のボタンをクリックすると、<br>
入力した数字までの合計を求めて表示します。</p>
<p><button onclick="total()">数字を入力する</button></p>
<script>
function total(){
  var ans = 0;
  var maxNum;
	
maxNum = prompt('数字を入力してください。', '半角数字');
  for (i=1 ; i<=maxNum ; i++){
    ans += i;
  }
  alert('1~' + maxNum + 'の合計は、' + ans+ 'です');
}
</script>
</body>
</html>

for文の応用例

  • カウントダウン
for (var i = 5 ; i >= 1 ; i--) {  }

配列とfor文

  • 配列のインデックスをカウンタ変数で指定することで、配列の要素に対して1つずつ順に処理を実行できます
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>配列とfor文</title>
<script>
  var number = [ 10, 20, 30 ];
  for (var i = 0 ; i < number.length ; i++) {
    console.log(number[i]);
  }
</script>
</head>
<body>
</body>
</html>


《実行結果》

  • number.lengthは、配列numberの要素数を表します
  • よって、for文の継続条件は「i の値が0から3未満まで」になります
  • 配列numberのインデックスは先頭から順に、0、1、2ですから、ちょうどカウンタ変数の値がインデックスと対応します

for-in文

  • 任意の文字列をキーとする連想配列は、通常のfor文では扱うことができません
  • 連想配列の要素を1つずつ処理する場合、for文ではなく「for-in文」を利用します


for(var 変数名 in 連想配列名) {
   連想配列名 [ 変数名 ] とすることで各要素を参照できる
}

  • for-in文は、連想配列の要素数分繰り返しを実行します
  • 繰り返すたびに変数の連想配列のキーのうちいずれか1つが代入されます


連想配列とfor-in文》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>連想配列とfor-in文</title>
<script>
  var favorites = {
    food : 'カレーライス',
    color : '青',
    number : 7
  };
  for (var key in favorites) {
    console.log(key + ' : ' + favorites[key]);
  }
</script>
</head>
<body>
</body>
</html>


《実行結果》

  1. 連想配列favorites の要素数が3つなので、for-in文の繰り返し回数は3回です
  2. 1回目の繰り返し処理では、変数key の中に「food」が代入されます
  3. 2回目は「color」、3回目は「number」というように、1回分の繰り返しごとにキーが1つずつ取得されます


キーが取得される順番は保証されないため、配列の先頭要素から順序どおりに処理をしたい場合には、for-in文は適しません。

  • while文に「カウント制限」を付け加えたものが、for文
  • 配列の要素を1つずつ処理する場合は、for文を使う
  • 連想配列の要素を1つずつ処理する場合は、for-in文を使う

まとめ

  • 処理を繰り返すには、for文を使用する
  • 制御変数は、ループのカウンタとして使用する変数
  • 変数の値を1増やすのは「++」演算子、1減らすのは「--」演算子