JavaScript for文の使い方・10選！初心者でも簡単にマスターできる！

はじめに
●JavaScript for文とは
- ○for文の基本構文
●JavaScript for文の使い方
●注意点と対処法
- ○無限ループに注意
- ○ループ内での非同期処理
●カスタマイズ方法
- ○for…of文を利用したループ
- ○for…in文を利用したループ
まとめ

はじめに

この記事を読めば、JavaScript for文を使いこなせるようになります。

JavaScript初心者にもわかりやすく、for文の使い方や注意点、カスタマイズ方法を徹底解説しています。

10種類のサンプルコード付きで、一度読めばfor文を簡単にマスターできます。

●JavaScript for文とは

for文は、JavaScriptにおいて繰り返し処理を行う際に使用される制御構文です。

同じ処理を複数回実行したい場合や、配列やオブジェクトの要素を順番に処理したいときに便利です。

○for文の基本構文

for文の基本構文は次のようになります。

for (初期化式; 条件式; 更新式) {
  // 繰り返し実行される処理
}

初期化式でループカウンタを初期化し、条件式が真である間、繰り返し処理が実行されます。

更新式はループの各イテレーション後に実行され、ループカウンタの値を更新します。

●JavaScript for文の使い方

ここでは、JavaScript for文の使い方を10のサンプルコードで紹介します。

○サンプルコード1：配列の要素を一つずつ表示

このコードでは、for文を使って配列の要素を一つずつ表示するコードを紹介しています。

この例では、配列の長さを取得して、インデックスを利用して要素にアクセスしています。

const fruits = ['apple', 'banana', 'orange'];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

○サンプルコード2：連続した数字を出力

このコードでは、for文を使って連続した数字を出力するコードを紹介しています。

この例では、1から10までの数字を順番に表示しています。

for (let i = 1; i <= 10; i++) {
  console.log(i);
}

○サンプルコード3：テーブルの行を作成

このコードでは、for文を使ってテーブルの行を作成するコードを紹介しています。

この例では、table要素の中にtr要素を追加して、行を作成しています。

const table = document.createElement('table');

for (let i = 0; i < 5; i++) {
  const tr = document.createElement('tr');
  table.appendChild(tr);
}

○サンプルコード4：二重ループで九九の表を作成

このコードでは、二重のfor文を使って九九の表を作成するコードを紹介しています。

この例では、外側のループが掛ける数、内側のループが掛けられる数をそれぞれ繰り返し処理しています。

for (let i = 1; i <= 9; i++) {
  let row = "";
  for (let j = 1; j <= 9; j++) {
    row += `${i * j}\t`;
  }
  console.log(row);
}

○サンプルコード5：配列の合計値を計算

このコードでは、for文を使って配列の合計値を計算するコードを紹介しています。

この例では、配列内の要素を順番に加算して、合計値を求めています。

const numbers = [10, 20, 30, 40, 50];
let sum = 0;

for (let i = 0; i < numbers.length; i++) {
  sum += numbers[i];
}

console.log(sum);

○サンプルコード6：オブジェクトのプロパティを列挙

このコードでは、for…in文を使ってオブジェクトのプロパティを列挙するコードを紹介しています。

この例では、オブジェクトのキーを順番に取得し、それに対応する値を表示しています。

const person = {
  name: "Taro",
  age: 30,
  city: "Tokyo"
};

for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

○サンプルコード7：特定の条件を満たす要素を抽出

このコードでは、for文を使って特定の条件を満たす要素を抽出するコードを紹介しています。

この例では、配列内の要素を順番にチェックし、条件に合致する要素だけを新しい配列に追加しています。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const evenNumbers = [];

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 === 0) {
    evenNumbers.push(numbers[i]);
  }
}

console.log(evenNumbers);

○サンプルコード9：アニメーションの実装

このコードでは、for文とsetInterval関数を使ってアニメーションを実装するコードを紹介しています。

この例では、要素の透明度を徐々に変化させるアニメーションを実現しています。

const element = document.getElementById('example');
let opacity = 0;

const animate = () => {
  if (opacity >= 1) {
    clearInterval(interval);
    return;
  }

  opacity += 0.01;
  element.style.opacity = opacity;
};

const interval = setInterval(animate, 10);

○サンプルコード10：非同期処理とfor文の組み合わせ

このコードでは、async/awaitとfor文を使って非同期処理を実行するコードを紹介しています。

この例では、配列に格納されたURLから順番にデータを取得し、結果を表示しています。

const urls = [
  'https://api.example.com/data1',
  'https://api.example.com/data2',
  'https://api.example.com/data3'
];

async function fetchData() {
  for (const url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  }
}

fetchData();