JavaScriptのforループの使い方: 基本から応用まで徹底解説

JavaScriptのforループは、指定された回数だけブロック内のコードを実行するための基本的な制御フロー文です。

forループの基本構文
用例
1. 配列
2. HTMLタグを入れて
関数の呼び出し

forループの基本構文

for ([初期化]; [条件]; [最終表現]) {
  // 実行するコード
}

この3つの部分は以下のような役割を持っています：

初期化: ここではループのカウンター変数を初期化します。通常、カウンター変数としてiが用いられます。
条件: この条件が真である限り、ループは繰り返されます。
最終表現: 各ループの終了時に実行される表現で、通常はカウンター変数を増減させます。

基本的なforループの例を見てみましょう。

for (let i = 0; i < 5; i++) {
  console.log(i);
}

このコードは、iが0から始まり、iが5未満である間、iを出力し、各ループの終わりでiを1ずつ増やすという動作をします。

用例

forループは非常に柔軟性があり、さまざまな方法で利用できます。

配列

配列のすべての要素を一つずつコンソールに出力するforループの例を示します。

let 生徒のリスト = ["太郎", "花子", "次郎", "三郎", "四郎"];

for (let i = 0; i < 生徒のリスト.length; i++) {
  console.log("生徒の名前: " + 生徒のリスト[i]);
}

このコードでは、forループを使用して配列生徒のリストの各要素（ここでは生徒の名前）に順番にアクセスします。

ループの条件部分では、変数iが配列の長さ（生徒のリスト.length）未満である限りループが続けられます。ループの各ステップでは、iは1増加し（i++）、これにより次の要素にアクセスします。そして、その生徒の名前がコンソールに出力されます。

配列については別のページで説明します。

HTMLタグを入れて

あまり意味ないですが、このようなことができます。

for (var i = 2; i < 5; i++)
{
 var str = "<p style='font-size:" + i * 5 + "px'>https://codinghaku.com/</p>";
 document.write(str);
}

関数の呼び出し

次の例を見てください。

var sum = 0;
for (var i = 1; i <= 50; i ++) 
  {
   sum += i;
}
document.write("1から50までの整数の和は：" + sum)

このコードは1から50までの整数の和です。

1から100まではどうなりますか。2回書けばいいと思いますね。

var sum1 = 0;
for (var i = 1; i <= 50; i++)
{
    sum1 += i;
}
document.write("1から50までの整数の和は：" + sum1);
document.write("<br/>");
var sum2 = 0;
for (var i = 1; i <= 100; i++)
{
    sum2 += i;
}
document.write("1から100までの整数の和は：" + sum2);

質問です。もし、「50以下、100以下、150以下、200以下、250以下」といった範囲の全整数の合計をそれぞれ求める場合、同じコードを5回も繰り返し書かなければならないことになりませんか？

重複するコードの負担を軽減するために、JavaScriptでは関数の概念が導入されています。

function sum(n) 
{
    var m = 0;
    for (var i = 1; i <= n; i++) 
    {
        m += i;
    }
    document.write(n + "までの整数の和は：" + m + "<br/>");
}

sum(50);
sum(100);
sum(150);
sum(200);
sum(250);

JavaScript forループ

forループの基本構文

用例

配列

HTMLタグを入れて

関数の呼び出し

コメント