JavaScript for文の使い方

  • JavaScript
  • 構文
最終更新日:

この記事のポイント

JavaScriptでのループ処理を学ぶ上で、for文は最も基本的な構文です。この記事では、以下の内容について詳しく解説していきます。

  • for文の基本的な書き方と動作原理
  • 配列やオブジェクトを効率的に処理する方法
  • 実際の開発現場で使える実用的なコード例

これらのポイントを押さえることで、JavaScriptの繰り返し処理を自在に扱えるようになります。

目次

for文とは？

for文は、同じ処理を繰り返し実行するための制御構文です。指定した条件が満たされている間、同じコードブロックを何度も実行できます。例えば、配列の全ての要素に対して同じ処理を行ったり、特定の回数だけ処理を反復させたりする際に使用します。

for文には通常のfor文、for...in文、for...of文などの種類があり、それぞれ異なる用途に適しています。プログラミングにおいて繰り返し処理は非常に頻繁に使われるため、for文の使い方を理解することはJavaScript習得の重要なステップとなります。

【関連】
JavaScriptをもっと詳しく学ぶならpaizaラーニング

基本構文

for文の基本的な書き方は、初期化、条件式、増減式の3つの要素から構成されます。最もよく使われる通常のfor文では、カウンター変数を使って指定回数だけループを実行します。また、配列やオブジェクトの要素を順番に処理したい場合は、for...of文やfor...in文を使用します。これらの構文を使い分けることで、さまざまな繰り返し処理を効率的に記述できます。

// 基本的なfor文 for (let i = 0; i < 3; i++) { console.log("カウント: " + i); }







出力結果
カウント: 0
カウント: 1
カウント: 2

  
// 配列を使ったfor...of文
let animals = ["イヌ", "ネコ", "ウサギ"];
for (let animal of animals) {
  console.log("動物: " + animal);
}

  


  







出力結果
動物: イヌ
動物: ネコ
動物: ウサギ
実用例
ここからは、for文を実際のプログラミングで活用する具体的な例を紹介します。日常的な開発でよく遭遇する場面を想定し、配列の操作、文字列の処理、数値計算などさまざまなケースでのfor文の使い方を学んでいきましょう。
各例では、コードの動作を理解しやすくするため、動物を題材にした分かりやすい内容でサンプルを作成しています。これらの実用例を通じて、for文がどのような場面で活躍するかを具体的にイメージできるはずです。
配列の要素を順番に表示
配列に格納された複数の動物名を順番に表示する例です。for文を使って配列の全要素にアクセスし、それぞれをコンソールに出力します。配列の長さに関係なく、全ての要素を自動的に処理できる便利な方法です。

  
let pets = ["ハムスター", "インコ", "金魚", "カメ"];
for (let i = 0; i < pets.length; i++) {
  console.log((i + 1) + "番目のペット: " + pets[i]);
}

  


  







出力結果
1番目のペット: ハムスター
2番目のペット: インコ
3番目のペット: 金魚
4番目のペット: カメ
配列要素の合計を計算
数値が入った配列の全要素を足し合わせる処理です。変数に累積値を保持しながら、for文で配列の各要素を順番に加算していきます。このような累積処理は、統計計算やデータ分析でよく使われる基本的なパターンです。

  
let animalCounts = [5, 3, 8, 2, 7];
let total = 0;
for (let count of animalCounts) {
  total += count;
}
console.log("動物の総数: " + total + "匹");

  


  







出力結果
動物の総数: 25匹
条件に合う要素を抽出
配列から特定の条件を満たす要素だけを取り出す例です。if文とfor文を組み合わせることで、条件にマッチする要素のみを新しい配列に追加できます。データのフィルタリングは実際の開発で頻繁に行われる処理です。

  
let animals = ["ライオン", "ネコ", "トラ", "ヒョウ"];
let bigCats = [];
for (let animal of animals) {
  if (animal.length >= 3) {
      bigCats.push(animal);
    }
}
console.log("大型ネコ科: " + bigCats.join(", "));

  


  







出力結果
大型ネコ科: ライオン, ヒョウ
オブジェクトのプロパティを列挙
オブジェクトが持つ全てのプロパティとその値を表示する例です。for...in文を使用することで、オブジェクトのキーを順番に取得し、対応する値にアクセスできます。動的にオブジェクトの内容を調べたい場合に便利な方法です。

  
let zoo = {
  "サル": 15,
  "ゾウ": 3,
  "キリン": 4
};
for (let animal in zoo) {
  console.log(animal + ": " + zoo[animal] + "頭");
}

  


  







出力結果
サル: 15頭
ゾウ: 3頭
キリン: 4頭
文字列から文字を抽出
文字列の各文字を一つずつ処理する例です。文字列も配列のように扱えるため、for文を使って各文字にアクセスできます。文字列の解析や変換処理でよく使われるテクニックです。

  
let animalName = "パンダ";
let result = "";
for (let i = 0; i < animalName.length; i++) {
  result += animalName[i] + "・";
}
console.log("分解した動物名: " + result.slice(0, -1));

  


  







出力結果
分解した動物名: パ・ン・ダ
表を作成
数学的な計算を繰り返し処理で行う例です。ネストした（二重の）for文を使用して、掛け算の表を作成します。このような二重ループは、表形式のデータ処理でよく使われる重要なパターンです。

  
console.log("動物の体重計算表（kg）:");
for (let i = 1; i <= 3; i++) {
  let line = "";
  for (let j = 1; j <= 3; j++) {
      line += (i * j) + "kg ";
  }
  console.log("パターン" + i + ": " + line);
}

  


  







出力結果
動物の体重計算表（kg）:
パターン1: 1kg 2kg 3kg
パターン2: 2kg 4kg 6kg
パターン3: 3kg 6kg 9kg
配列の要素を逆順で表示
配列の要素を後ろから前に向かって処理する例です。デクリメント（減算）を使ったfor文により、配列の最後の要素から最初の要素まで逆順でアクセスします。データの逆順表示や逆順処理で活用できる手法です。

  
let safari = ["ライオン", "チーター", "シマウマ", "サイ"];
console.log("サファリツアー（逆順）:");
for (let i = safari.length - 1; i >= 0; i--) {
  console.log("発見: " + safari[i]);
}

  


  







出力結果
サファリツアー（逆順）:
発見: サイ
発見: シマウマ
発見: チーター
発見: ライオン
条件によるループの制御
特定の条件でループを中断したり、特定の要素をスキップしたりする例です。continue文とbreak文を使用することで、ループの流れを柔軟に制御できます。複雑な条件下での処理制御に役立つ重要なテクニックです。

  
let animals = ["イヌ", "ネコ", "ヘビ", "ハト", "クマ"];
console.log("ペットショップの動物チェック:");
for (let animal of animals) {
  if (animal === "ヘビ") {
      console.log(animal + "は危険なのでスキップ");
      continue;
  }
  if (animal === "クマ") {
      console.log(animal + "は緊急停止！");
      break;
  }
  console.log(animal + "は安全です");
}

  


  







出力結果
ペットショップの動物チェック:
イヌは安全です
ネコは安全です
ヘビは危険なのでスキップ
ハトは安全です
クマは緊急停止！
まとめ
for文は、プログラミングにおいて欠かせない繰り返し処理の基本的な制御構文です。配列の操作からオブジェクトの処理まで、さまざまな場面で活用できる汎用性の高い機能として、多くの開発者に愛用されています。
for文の活躍する場面
    

  • 配列やリストの全要素に対する一括処理を行う
    • 

  • データベースから取得した複数のレコードを順次処理する
    • 

  • ユーザーインターフェースで繰り返し要素を動的生成する
    • 

重要なポイント
    

  • 基本構文では初期化、条件式、増減式の3要素を正しく記述すること
    • 

  • for...ofは配列の値、for...inはオブジェクトのキーを扱う際に使用すること
    • 

  • break文やcontinue文を活用してループの流れを適切に制御すること
    • 

これらの知識を身につけることで、for文を使った効率的なプログラミングが可能になります。実際のプロジェクトでも、データ処理や動的なコンテンツ生成など、さまざまな場面でfor文の恩恵を実感できるでしょう。継続的な練習を通じて、より複雑な繰り返し処理も自在に扱えるようになることを目指しましょう。
レベルを更に上げたい方はpaizaプログラミングスキルチェックへ





























  1. paizaラーニングトップ
  2. リファレンス
  3. JavaScriptのリファレンス記事一覧
  4. JavaScript for文の使い方