JavaScript

【JavaScript】配列の繰り返し処理でfor文を扱う方法

JavaScriptで条件に応じて繰り返しの処理をするために用意されているのが for文です。

for文は基本となる構文ですが、使い方を間違えるとfor文から抜け出すことができず、永遠に処理をループしてしまうことがあります。

この記事は、for文の使い方とサンプルを用意していますので、JavaScriptのfor文について抑えておきましょう。

for文 について

for文とは、条件指定された回数だけ処理を繰り返して実行するための構文です。この繰り返すことを「ループ」と言ったりします。

同じ処理を何度も繰り返し実行したい場合に利用されるので、プログラミングでは度々登場するほど使用頻度が高い構文の1つです。

同じ処理を何度もコードに書いてしまえば、処理を繰り返すことができます。ただ、コードの修正が必要になった時に同じ部分を何度も修正しなければならなかったり、コードが読みづらくなってしまうというデメリットがあります。

そこでfor文を使うことで処理を簡素化し、コード量が減って読みやすいコードを書くことができます。

例えば、for文なしのループ処理を書くと次のようになります。
const quizs = ['カレー', 'うどん', '牛丼', 'ラーメン', 'ちゃんぽん'];
console.log('今日は' + quizs[0] + 'を食べました。');  // 今日はカレーを食べました。
console.log('今日は' + quizs[1] + 'を食べました。');  // 今日はうどんを食べました。
console.log('今日は' + quizs[2] + 'を食べました。');  // 今日は牛丼を食べました。
console.log('今日は' + quizs[3] + 'を食べました。');  // 今日はラーメンを食べました。
console.log('今日は' + quizs[4] + 'を食べました。');  // 今日はちゃんぽんを食べました。
同じコードが何回も登場している部分があるので、for文でまとめしましょう。
const quizs = ['カレー', 'うどん', '牛丼', 'ラーメン', 'ちゃんぽん']; 
for(let i = 0; i < quizs.length; i++){
    console.log('今日は' + quizs[i] + 'を食べました。');
}
// 今日はカレーを食べました。
// 今日はうどんを食べました。
// 今日は牛丼を食べました。
// 今日はラーメンを食べました。
// 今日はちゃんぽんを食べました。

同じ出力結果になりますが、for文の方が直観的で分かりやすいコードにすることができます。

では、for文の使い方をみてみましょう。

for文 の使い方

ループ処理を制御するfor文の基本的な書き方は次の通りです。

for (初期化式; 条件式; 変数式;) {
//ここに実行する処理を書く
});

中括弧{}の中に実行したい処理を記述します。処理はいくつでも書くことが可能です。

処理文が1つだけなら、ショートコードで書くことも可能です。中括弧を外して次のように1行にして書くことができます。

for (初期化式; 条件式; 変数式;) 実行する処理;

初期化式

カウンター変数の宣言を行い、変数の初期値を設定します。

for文ではカウンター変数はアルファベットの i をよく用いられます。もちろん、変数の名前は自由に書くことができます。

また、初期値については通常0にします。これは配列のインデックス番号が0から開始されるためです。配列以外のループ処理をする場合は0以外の値をセットすることがありますので、ケースバイケースで使い分けをしましょう。

条件式

ループする回数を設定します。この設定を間違えてしまうと永久にfor文から抜け出すことができないので設定には注意が必要です。

例としては、「カウンター変数の値が配列の要素数10より小さい場合に処理を実行する」などの設定をします。

変数式

カウンター変数の値を変化させます。通常は配列を扱うことが多いため、変数の値をインクリメント(1ずつ足す)します。場合によってはデクリメントする場合などがありますので、ケースバイケースで使い分けをしましょう。

for 文の処理の流れ

上記の内容を踏まえて、for文の処理の流れを整理すると処理の流れは次のようになります。

カウンター変数の宣言・初期化など(初期化式)を行います。for文が実行された際に1回だけ実行されます。

繰り返しを行うタイミングで条件式が毎回実行されます。この式が真(true)なら処理が実行され、偽(false)ならfor文が終了します。

実行する処理は②の条件式がtrueのみ実行されます。

変数式の操作が行われて、②の条件式が実行されます。(ループする)

for 文の使用例

数値を倍に変換する

for文を利用して配列内にある数値を倍に変換します。
const values = [1, 2, 3, 4, 5];
for(let i = 0; i < values.length; i++){
    console.log(values[i] * 2);
}
実行結果
// 2 
// 4
// 6
// 8
// 10

配列の要素に2を掛けることで倍数になって出力しています。配列の要素数の回数だけ(5回)繰り返し処理されていることが分かります。

配列の要素の長さを取得する

配列内の要素数だけ処理を繰り返し、各要素の長さを取得します。
const values = ['かぼちゃ', '玉ねぎ', '人参', '肉', 'じゃがいも'];
for(let i = 0; i < values.length; i++){
    console.log(values[i].length);
}
実行結果
// 4
// 3
// 2
// 1
// 5

for文をネスト(入れ子)する

for文の中にfor文をネストすることができます。2回for文を使うことで掛け算の九九をつくれます。

ソースコードは次の通りです。
for(let a = 1; a <= 9; a++){
    for(let b = 1; b <= 9; b++){
        console.log(`${a} x ${b} = ${a * b}`)
    }
}
実行結果
// 1 x 1 = 1
// 1 x 2 = 2
// 1 x 3 = 3
// 1 x 4 = 4
// 1 x 5 = 5
// ...

コンソールに文字列の中に変数の値をいれて出力するために、テンプレートリテラルを使用しています。

テンプレートリテラルは文字列をバッククオート(`)で囲みます。さらに${…}の書式で中括弧の中に変数や演算などを書くことで値を展開することができます。

偶数と奇数を判定する

for文とif文を組み合わせて使用することがよくあります。

次の例では数字が偶数であるか奇数であるかを判定することができます。
const values = [0, 1, 13, 46, 55];
for(let i = 0; i < values.length; i++){
    let str;
    if (values[i] % 2 == 0){
        str = '偶数';
    }else{
        str = '奇数';
    }
    console.log(`${values[i]}は${str}です`);
}
実行結果
// 0は偶数です
// 1は奇数です
// 13は奇数です
// 46は偶数です
// 55は奇数です

for-of 文の使用例

for文のもう一つの構文として、for-of 文があります。

この構文を使う場面として配列内の要素を扱うことが挙げられます。配列の要素を1つずつ取り出して、配列に格納されている順番に繰り返し処理を行います。ループ処理は要素の数だけ実行されます。

for文と異なり、初期化式・条件式の実行・変数式の実行の3つが不要です。

配列の各要素に繰り返し処理を行いたい時に使うことができます。

for-of 文を使った例が次の通りです。
const values = [0, 1, 13, 46, 55]; 
for(let value of values){
    console.log(value); 
}
実行結果
// 0
// 1
// 13
// 46
// 55

このようにfor文と比較するとよりシンプルに記述することができます。

ただ、for-of 文は要素のインデックス番号を取得することができません。こういう場合は for 文を利用するといいでしょう。

break 文の使用例

for文は繰り返し処理中に途中で処理を強制的にループから抜け出すことが可能です。これを行うのが break 文です。

下の図にあるようにbreak文が実行される if条件が真(true)なら break文でfor文を終了します。

break が呼び出されると、そこから1番内側の for文を抜け出します。
const values = [0, 1, 13, 46, 55];
for(let i = 0; i < values.length; i++){
    if (values[i] == 13){
        break;
    }
    console.log(values[i]);
}
実行結果
// 0
// 1

if条件で配列の要素が「13」ならbreakが実行され、for文から抜けていることが実行結果から分かります。

またfor文がネストされているときは、breakが呼び出されたfor文のみから抜け出します。
for(let a = 1; a <= 9; a++){
    for(let b = 1; b <= 9; b++){
        if (b == 2){
            break;
        }
        console.log(`${a} x ${b} = ${a * b}`)
    }
}
実行結果
// 1 x 1 = 1
// 2 x 1 = 2
// 3 x 1 = 3
// 4 x 1 = 4
// 5 x 1 = 5
// 6 x 1 = 6
// 7 x 1 = 7
// 8 x 1 = 8
// 9 x 1 = 9

実行結果の通り、内側のfor文でbreakが呼ばれても、外側のfor文は抜け出していないことが分かります。

ループ処理を途中で止めたい場合には break文が役立ちますので、覚えておきましょう。

continue 文の使用例

for文のループ内で条件によって実行する処理をスキップさせる場合は、continue文を使います。

下の図のようにループ処理中にスキップされると次の処理が実行されます。

たとえば、配列の要素が偶数だったら出力しないようにしてみましょう。
const values = [0, 1, 13, 46, 55]; 
for(let i = 0; i < values.length; i++){
    let str; 
    if (values[i] % 2 == 0){
        continue;
    } 
    console.log(values[i]); 
}
実行結果
// 1
// 13
// 55

break文は「処理を中断させる」ことができる一方、continue文は「処理をスキップする」ので、その後のfor文は実行されます。これらの違いに注意して使い分けをしましょう。

まとめ

この記事ではプログラムでよく使用する for文を使った繰り返し処理について解説をしました。

for文を使うことで繰り返しする処理をまとめることができます。

条件によってループ処理を中断させたり、スキップするにはcontinue文やbreak文を利用することで、より細かく制御することが可能です。

JavaScriptのfor文は基本となる構文なので、ぜひ抑えておきましょう。

以上、最後まで読んでいただきありがとうございました。

関連記事

【JavaScript】配列(Array)の基本的な使い方を紹介!「JavaScriptで配列(Array)を使用するには?」JavaScript 初心者の方に配列の基本的な使い方を詳しくまとめました。使用頻度が高い JavaScriptの配列を初期化・追加・検索・展開・連想配列の使用方法について解説をしていますので、ぜひ参考にしてみてください。...
【JavaScript】forEachメソッドで配列の要素を取得する方法JavaScriptのforeachメソッドで配列の要素を取得・Indexの取得など使い方や使用例、メリットとデメリットなどを解説します。これからJavaScriptをはじめる初心者の方や復習をしたい方に向けて分かりやすく説明をしています。...
【JavaScript】新しい配列を生成するmapメソッドを理解するJavaScript のArrayオブジェクトの便利メソッド map() を利用してみましょう。mapメソッドは元の配列データをCallback関数で処理し、新しい配列として生成することができます。利用頻度が高いmapメソッドを理解して扱えるようになりましょう。...
【JavaScript】便利な正規表現の使い方を理解する便利な正規表現を扱えるようになりましょう。JavaScripでは「正規表現」を使うための記述方法やメソッドの使用方法を詳しく説明しています。正規表現を使いこなせると、プログラミングの幅がぐっと広がりますので、ぜひ本記事を参考にしてみてください。...
【JavaScript】if文で条件分岐をしよう!使い方の基礎と注意点を解説JavaScriptの「if文」の基本的な使い方と注意点を解説した記事です。「if 文」や「else if」、「else」などを上手に使うことで複数の条件を組み合わせて複雑な分岐をすることが可能です。JavaScriptのプログラミングで必須の構文(if文)をマスターしましょう。...
プログラミングを学習したいなら…

プログラミングスキルを身に付けるなら、プログラミングを効率良く学べる
プログラミングスクール」がオススメです。

特にこんな方にオススメ!!
これからエンジニアを目指したい
プログラミングの専門性を高めたい
プログラミングを学んで副業をしたい
エンジニアに転職して年収をアップさせたい

プログラミングを触ったことがない未経験からでも、プログラミングスクールで学習すれば、エンジニアへ就職・転職することも可能です。

あなたの「行動力」と「やる気」で、あなたの人生を大きく変えるチャンスになることでしょう。

プログラミングスクールに興味がある方は是非チェックしてみてください。

> プログラミングを学ぶ <

COMMENT

メールアドレスが公開されることはありません。

CAPTCHA