PR

JavaScript:for文を用いたループ処理を3分で解説

JavaScript

JavaScriptのfor文は繰り返し処理を実行するための基本的な制御構造です。for文は特定の条件が満たされるまでコードブロックを繰り返し実行します。

↓の例では、0から4までの数字をコンソールに表示。iは初期値0から始まり、各イテレーションで1ずつ増加し、i5になるとループが終了します。

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

// 実行結果
// 0
// 1
// 2
// 3
// 4

このページではJavaScriptの基本となる繰り返し処理の基本・使い方やコツ、注意点を初心者向けにわかりやすく解説します。

このページで学べる内容
  • for文の構文ルール
  • for文の使い方やコツ
  • for文を利用する際の注意点

Webエンジニア/Webデザイナーを目指す方であれば知らないと恥ずかしい超・基本知識の1つです。是非最後までご覧ください。

参考 【JavaScript入門】基本文法/基礎文法を5分で

スポンサーリンク

JavaScript:for文の基本

for文の基本的な構文は以下の通り。

for (初期化式; 条件式; 更新式) {
  // 繰り返し実行されるコード
}
  • 初期化式:ループの開始前に1度だけ実行される式。通常、ループカウンタの初期値を設定します。
  • 条件式:ループの各イテレーションの開始前に評価される式。この条件がtrueの場合、ループ内のコードが実行されます。falseになるとループが終了します。
  • 更新式:ループ内のコードが実行された後に実行される式。通常、ループカウンタを更新します。

ループカウンタイテレーションは、プログラミングにおいてループ処理を理解するために重要な概念です。特に繰り返し処理を行う際に頻繁に使用される用語のため、ここでちょっとだけ補足しておきます。

ループカウンタは、ループが何回実行されたかを追跡するための変数です。通常ループの初期化式で宣言され、ループの更新式で更新されます。ループカウンタの値に基づいて、ループの実行回数を制御することができます。例えば、次のように使用されます。

for (let i = 0; i < 10; i++) {
  // ここで、i はループカウンタ
}

// この例では、iがループカウンタとして機能し、0から始まり
// 1ずつ増加し、9に達した時点でループが終了します。

イテレーションは、ループ内の各繰り返し処理のことを指します。ループが開始されるたびに、イテレーションが1回行われ、ループ内のコードが実行されます。ループの条件式がfalseを返すまで、イテレーションは続きます。上記の例では、ループは合計で10回のイテレーションを行うということになります。

それでは早速具体的にfor文の使い方を見ていきましょう。

以下の例は、for文を用いて1~9までの数字を繰り返し出力する処理です。初期化式、条件式、更新式の役割を少しだけ深堀してご説明していきます。

See the Pen for① by ビズドットオンライン (@BizOnline) on CodePen.

for文:初期化式

初期化式はfor文開始時の変数の値。以下では変数「count」の初期値を「1」としています。

for文が開始される際に変数「count」の値は1から始まるということを示しています。

// 初期化式 → count=1;

for(count=1; count < 10; count++){
    document.write(count); 
}

参考 const:変数宣言

既に、変数「count」が何らか別の値を保持していたとしても、for文の開始時に初期値で上書きされる点に注意が必要です。

See the Pen for② by ビズドットオンライン (@BizOnline) on CodePen.

for文:条件式

条件式はwhile文の場合と同様、ループ処理(繰り返し処理)が実行される条件を記述します。

// 条件式 → count < 10;

for(count=1; count < 10; count++){
    document.write(count); 
}

この場合は、変数「count」が10より小さい場合(1から9の場合)に、ループ処理が実行されることになります。

条件式は、for文が開始された直後1番初めに読み込まるため、もし最初からこの条件式の結果がfalse(条件式が成り立たない)の場合には、ループ処理(繰り返し処理)は一度も実行されません。

for文:更新式

ここには、ループ処理が1回実行された後に、変数 "count" の値がどのように変化するかを記述します。

// 更新始期 → count++

for(count=1; count < 10; count++){
    document.write(count); 
}

「count++」という記述は、「count = count + 1」と同じ意味。つまり値を1増やすということ。このように記述しておくと、for文の処理が終わるたびに変数「count」の値が1ずつ増えるようになります。

もう一度サンプルコードを見直してみましょう。

See the Pen for① by ビズドットオンライン (@BizOnline) on CodePen.

変数「count」が1から9の間、変数の値が画面に出力されていることが理解いただけるでしょうか。これが、JavaScriptのfor文です。

JavaScript:for文の使い方/Tips

ここからは、for文の様々な使い方を実用的なサンプルコードと共に解説していきます。

複数のコードを理解していくことで、for文の使い方をより具体的にイメージできるようになるでしょう。

サンプルコード1 カウントダウン

5から1までカウントダウンし、各数字を表示します。カウントダウンは、ループカウンタを減少させることで実現します。

for (let i = 5; i >= 1; i--) {
  console.log(i); // 出力: 5, 4, 3, 2, 1
}

サンプルコード2 配列の要素を順番に処理

配列内の各要素を順に処理し表示します。この使い方は、配列やリストのデータを扱う際に非常に頻繁に用いられます。

const fruits = ["りんご", "バナナ", "チェリー"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]); // 出力: りんご, バナナ, チェリー
}

サンプルコード3 二重ループを使った多次元配列の処理

多次元配列、例えば行列やテーブルのデータを処理する場合に利用します。この例では、3x3の二次元配列を処理しています。

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

for (let i = 0; i < matrix.length; i++) {
  for (let j = 0; j < matrix[i].length; j++) {
    console.log(matrix[i][j]); // 1行目: 1, 2, 3、2行目: 4, 5, 6、3行目: 7, 8, 9
  }
}

サンプルコード4 ステップ値を変更してカウントアップ

特定のステップ値でカウントアップすることもできます。この例では、2ずつ増加させながらカウントアップしています。

for (let i = 0; i < 10; i += 2) {
  console.log(i); // 出力: 0, 2, 4, 6, 8
}

これらのサンプルコードは、for文の基本的な使い方から少し応用的な使い方までをカバーしています。それぞれのコードスニペットにおいて、実行結果をコメントで明記していますので、参考にしてください。

for文を利用する際の注意点

for文を使用する際にはいくつかの注意点があります。基本的な利用方法と合わせて以下の注意点を理解しておくことでバグの回避や効率的なコードの記述に役立ちます。

注意点1:無限ループの回避

条件式が常にtrueを返すようなコードを記述してはいけません。無限ループはプログラムをフリーズさせたり、想定外の挙動を引き起こす可能性があります。

例えば以下のコードは条件が常に「true」となるため、永遠に処理が続いてしまう → プログラムがフリーズするまで止まりません。

// 注意: このコードは無限ループを引き起こします
for (let i = 0; i >= 0; i++) {
  console.log(i); // このコードは無限に実行されます
}

注意点2:ループカウンタのスコープ

letキーワードを使ってループカウンタを宣言することで、そのスコープをループ内に限定することが重要です。これにより、ループ外でカウンタが予期せずにアクセスされることを防ぎます。

for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}
// i はここでは参照できない

注意点3:ループ内での条件式の変更

ループの条件式に関連する変数は、ループ内で意図的に変更する場合を除き、慎重に扱うべき。予期せず条件を変更すると、ループの挙動が不安定になる可能性があります。

let count = 5;
for (let i = 0; i < count; i++) {
  console.log(i); // 0, 1, 2, 3, 4
  // 某条件下でcountを変更する
  if (i === 2) count = 3; // この変更はループに影響しないが、一般には避けた方が良い
}

注意点4:ループ内での非効率な処理

特に配列の長さなど、ループの条件式で評価される値が毎回変わらない場合は、ループの外で一度計算しておくことで効率を向上させることができます。

// 悪い例
const array = [1, 2, 3, 4, 5];
for (let i = 0; i < array.length; i++) { // array.lengthが毎回評価される
  console.log(array[i]);
}

// 良い例
const array = [1, 2, 3, 4, 5];
const length = array.length; // ここで一度計算
for (let i = 0; i < length; i++) { // 計算済みの値を使用
  console.log(array[i]);
}

これらの注意点を理解し、適切に対応することで、より安全で効率的なコードを書くことができます。

スキルアップを手軽に!
話題のサブスク型プログラミングスクールをご紹介。

SAMURAI TERAKOYAblank
月額2,980円から始める-入会金不要/途中解約自由。無料体験プランからスタート可能!​
飲み会1回分以下の料金で継続的なスキルアップを。

Freeks(フリークス)
blank
月額10,780円でJavaScript、Pythonなどのカリキュラムが
学び放題
質問し放題転職サポート制度あり。

ウズウズカレッジ/CCNAコース用
月額33,000円(税込)〜インフラエンジニアの登竜門「CCNA」取得を目指す。
コース受講→転職成功で【実質全額無料】(最大240,000円)

このWebサイトは現役のエンジニアが以下3点を目的として運営しています。

  1. 勉強:一度理解した内容を忘れないように。
    → アウトプットは「最強のインプット」である! 
  2. 備忘:忘れたとしても後から見返せるように。
    → 未来の自分への「お手紙」を書いています。 
  3. 共有:〇〇ってこうだったんだ!の感動をシェアできるように。
    → あなたの知識は誰かにとっての「価値ある情報」です。 

副業ブログの始め方はこちらから

スポンサーリンク
JavaScriptWEBデザイン
シェアする
ビズドットオンラインをフォローする
タイトルとURLをコピーしました