いっしー@Webエンジニア
Webツールプログラミング言語プログラミング学習ITニュースIT用語辞典ポートフォリオ

【JavaScript】for文の書き方と使い方の基本

JavaScriptの繰り返し処理で必須のfor文について、初心者向けに解説します。基本的な書き方である「初期化、条件式、変化式」の仕組みから、配列の処理、breakやcontinueを使ったループ制御、二重ループといった応用的な使い方まで、サンプルコードを交えてわかりやすく学べます。

作成日: 更新日:

開発環境

  • OS: Windows10
  • Editor: Visual Studio Code
  • JavaScript: ES6以降

JavaScriptのfor文とは

JavaScriptのfor文は、同じ処理を決められた回数だけ繰り返したいときに使用する構文です。プログラミングでは、このような繰り返し処理を「ループ処理」と呼びます。

JavaScriptのfor文の書き方

for文は、同じ処理を特定の回数だけ繰り返したい場合に使用する、プログラミングの基本的な構文です。

1for (初期化; 条件式; 更新処理) {
2    条件式がtrueの間、繰り返し実行される文
3}

この構文は、主に3つの部分で構成されています。

  • 初期化: 繰り返し処理が始まる前に、最初の1回だけ実行される処理です。一般的には、繰り返し回数を数えるためのカウンター変数をここで準備します。例えば、let i = 0;のように変数を宣言し、初期値を設定します。

  • 条件式: 繰り返しを続けるかどうかを判断するための条件です。この条件式がtrueと評価される間、波括弧{}内の処理が実行されます。falseになると、繰り返しは終了します。例えば、i < 10;と書くと、変数iが10より小さい間は処理が続きます。

  • 更新処理: 波括弧{}内の処理が1回終わるたびに実行される処理です。主にカウンター変数の値を変更するために使われます。例えば、i++と書くと、処理が1回終わるごとに変数iの値が1つ増えます。

  • 繰り返し実行される文: 条件式がtrueである限り、繰り返し実行したい処理を波括弧{}の中に記述します。

この「初期化」「条件式」「更新処理」をうまく組み合わせることで、「〇回繰り返す」といった制御を正確に行うことができます。

サンプルコード

このHTMLファイルは、これから作成する複数のJavaScriptファイルを読み込むための土台となるファイルです。bodyタグ内に記述されたscriptタグによって、各JavaScriptファイルが順番に読み込まれ、実行されます。

javascript/chapter12/index.html

1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>JavaScriptチュートリアル</title>
7  </head>
8
9  <body>
10    <h1>JavaScriptチュートリアル</h1>
11    <script src="./script01.js" defer></script>
12    <script src="./script02.js" defer></script>
13    <script src="./script03.js" defer></script>
14    <script src="./script04.js" defer></script>
15    <script src="./script05.js" defer></script>
16    <script src="./script06.js" defer></script>
17    <script src="./script07.js" defer></script>
18    <script src="./script08.js" defer></script>
19  </body>
20</html>
21

javascript/chapter12/script01.js

これは、繰り返し処理を行うための最も基本的なfor文の例です。 for文は、(初期化式; 条件式; 増減式)という3つの部分から構成されます。

  1. let i = 1;：カウンタとして使う変数iを1で初期化します。
  2. i <= 5;：変数iが5以下である限り、ループ内の処理を繰り返します。
  3. i++：ループ内の処理が1回終わるごとに、変数iの値を1増やします。

この結果、コンソールには1から5までの数値が順番に出力されます。

1// 1から5までの数値を出力する基本的なfor文
2for (let i = 1; i <= 5; i++) {
3  console.log(i);
4}
5

javascript/chapter12/script02.js

for文の初期化式や条件式には、直接数値を書くだけでなく、変数を使用することもできます。 このコードでは、ループの開始値をstart変数、終了値をend変数に格納しています。 このように変数を使うことで、ループの範囲を後から変更しやすくなり、コードが読みやすく、管理しやすくなります。

1// 変数を利用したfor文
2let start = 1;
3let end = 5;
4for (let i = start; i <= end; i++) {
5  console.log(`変数iの値は ${i} です。`);
6}
7

javascript/chapter12/script03.js

for文は配列の各要素を順番に取り出す処理で頻繁に使われます。 array.lengthは配列の要素数を取得します。この例では3です。 配列のインデックスは0から始まるため、カウンタ変数iを0から始め、i < array.lengthという条件でループさせます。 array[i]と記述することで、ループの各回で配列の要素（"apple", "banana", "cherry"）を1つずつ取り出してコンソールに出力しています。

1// 配列をfor文でループする
2const array = ["apple", "banana", "cherry"];
3for (let i = 0; i < array.length; i++) {
4  console.log(array[i]);
5}
6

javascript/chapter12/script04.js

break文は、ループ処理を途中で強制的に終了させるために使用します。 この例では、iが5になったときにif (i === 5)の条件が真となり、break文が実行されます。 その結果、for文はその時点で終了し、ループから抜け出します。 そのため、コンソールには0から4までの数値が出力され、5以降は出力されません。

1// breakを使用して特定の条件でfor文を抜ける
2for (let i = 0; i < 10; i++) {
3  if (i === 5) {
4    break; // 5でループを終了
5  }
6  console.log(i);
7}
8

javascript/chapter12/script05.js

continue文は、現在の回のループ処理をスキップし、次の回の処理に進むために使用します。 この例では、i % 2 === 0（iを2で割った余りが0、つまりiが偶数）の場合にcontinue文が実行されます。 continueが実行されると、その回のconsole.log(i)は実行されず、すぐに次のループ（i++）に進みます。 結果として、コンソールには奇数（1, 3, 5, 7, 9）のみが出力されます。

1// continueを使用して特定の条件をスキップ
2for (let i = 0; i < 10; i++) {
3  if (i % 2 === 0) {
4    continue; // 偶数をスキップ
5  }
6  console.log(i);
7}
8

javascript/chapter12/script06.js

for文の初期化式と増減式では、カンマ(,)で区切ることで複数の変数を同時に操作できます。 このコードでは、変数iを0から1ずつ増やし、同時にもう一つの変数jを10から1ずつ減らしています。 ループの継続条件はi < 5のみで判定されます。 このように、関連する複数のカウンタを1つのfor文で管理することができます。

1// 複数の変数を操作するfor文
2for (let i = 0, j = 10; i < 5; i++, j--) {
3  console.log(`i: ${i}, j: ${j}`);
4}
5

javascript/chapter12/script07.js

変数がどの範囲で有効かを示すものを「スコープ」と呼びます。 for文の()内でletを使って宣言された変数iは、for文のブロック（{}）内でのみ有効です。 しかし、この例ではブロック内でvarを使ってinnerVarを宣言しています。varで宣言された変数のスコープは関数単位（この場合はグローバルスコープ）になるため、for文の外からでもアクセスできてしまいます。 意図しない場所で変数が参照・変更されることを防ぐため、現在のJavaScriptではvarの使用は避け、letやconstを使うことが推奨されています。

1// for文の中と外での変数のスコープ
2for (let i = 0; i < 5; i++) {
3  var innerVar = i * 10; // ※varを使うとスコープが関数単位になる
4  console.log(`innerVar: ${innerVar}`);
5}
6console.log("for文の外でもinnerVarにアクセス可能:", innerVar);
7

javascript/chapter12/script08.js

for文の中にさらにfor文を記述することで、処理を入れ子（ネスト）にすることができます。これは二重ループと呼ばれます。 この例は、九九の表を作成するものです。

  1. 外側のループ（変数i）が段（1の段、2の段...）を制御します。
  2. 内側のループ（変数j）が各段でかける数（1から9まで）を制御します。
  3. 外側のループが1回実行される間に、内側のループが最後まで（1から9まで）実行されます。
  4. 内側のループで計算結果をrowという文字列に追記していき、内側のループが終了した時点でconsole.log(row)を実行して1行分を出力しています。
1// 九九の表を作成する練習問題
2for (let i = 1; i <= 9; i++) {
3  let row = "";
4  for (let j = 1; j <= 9; j++) {
5    let result = i * j;
6    row += `${i}×${j}=${result}\t`;
7  }
8  console.log(row); // 各行の九九を出力
9}
10

おわりに

今回はJavaScriptのfor文について、「初期化式」「条件式」「変化式」を組み合わせた基本的な書き方を学びました。for文は、指定した回数だけ処理を繰り返すだけでなく、配列の要素を一つずつ取り出して処理する際にも非常に役立ちます。さらに、breakやcontinueを使えばループの途中で処理を中断したりスキップしたりと、より細かな制御が可能です。二重ループのように応用することで複雑な処理も実現できる、プログラミングの重要な基礎となりますので、ぜひ何度もコードを書いて使い方に慣れていきましょう。

【JavaScript】for文の書き方と使い方の基本 | いっしー@Webエンジニア