JavaScriptのループ処理を学ぼう

JavaScriptでは、ループ文を利用し、処理を複数回繰り返すことがあります。ループ処理を利用することで、特定の処理を繰り返し行うことが可能になります。

JavaScriptに限らず、プログラミングでは同じような処理を繰り返し実行することがあります。その際にループ処理を利用することで、効率の良いプログラムが記述できるようになります。また、可読性や保守性がアップするといったメリットもありますので、こちらの記事で基本をしっかりと学んでいきましょう。

for文

まず最も頻出である、for文を利用してループ処理を行う方法を学んでいきます。

for文とは

for文は、特定の処理を複数回繰り返す際に利用します。

あらかじめ繰り返し回数を決めて実行することが多いです。

基本構文

基本構文を元に解説していきます。

for (初期化; 条件; 加算式){ 
　//繰り返し行う処理 
}

初期化

条件などで利用するカウンター用の変数を宣言し、初期化します。こちらはループ処理が実行される前に一度だけ行われます。

条件

ループ処理を行う条件を指定します。「真偽値が返される条件式」を指定し、trueが返されている間、ループ処理を実行します。

加算式

初期化箇所で宣言したカウンター用変数の値を加算し、更新します。加算式に指定した処理は、{}内の処理が実行された後に行われます。また、減算も可能です。

実装してみる

for文を利用し、コンソールにテキストを表示する

コンソールに「n回目のループ処理」と表示します。

ループは10回繰り返しますので、「~」には1~10が入ります。

for (let i = 1; i <= 10; i++){
  console.log(`${ i }回目のループ処理`);
} 

初期化

初期化箇所で、変数iを宣言しています。

「n回目のループ処理」の「n」のカウントは1から始めたいので、1を代入しています。

条件

先ほど宣言した変数iを利用し、「iが10以下」の間、ループ処理を実行するといった条件を指定しています。変数iにはループ処理が行われる度に1が加算されます。iの値が10を超えるとfalseが返され、ループ処理が終了します。

加算式

変数iに1を加算し、iの値を更新しています。

処理

変数iは、処理内でも利用できます。ここでは変数iと「回目のループ処理」を文字列連結し、console.log()で表示しています。

変数と文字列などを連結したい場合、上記のように全体をバッククォート、変数を${}で囲みます。

continue文

continue文を利用することで、特定の回をスキップさせることが可能になります。

変数iが5だった場合、処理をスキップします。

for (let i = 1; i <= 10; i++){
  if (i === 5){
    continue;
  }
 
  console.log(`${ i }回目のループ処理`);
} 

if文を利用し、変数iの値が5の場合にcontinue文を実行しています。

break文

break文を利用することで、特定の回でループ処理を強制終了させることが可能になります。

変数iが5だった場合、処理を強制終了します。

for (let i = 1; i <= 10; i++){
  if(i === 5){
    break;
  }
 
  console.log(`${ i }回目のループ処理`);
} 

if文を利用し、変数iの値が5の場合にbreak文を実行しています。

for文以外に、for-in文、for-of文も存在しますので、ご自身で実装してみてください。

while文

こちらのセクションでは、while文を利用してループ処理を行う方法を学んでいきます。

while文とは

while文とは、for文同様、特定の処理を複数回繰り返す際に利用します。

繰り返し回数が決まっていない場合に利用すると便利です。

for文

あらかじめ繰り返し回数が決まっている場合に利用するとよい。

while文

繰り返し回数が決まっていない場合に利用するとよい。

雛形解説

雛形について解説します。

while (条件) {
  //繰り返し行う処理
} 

条件

ループ処理を行う条件を指定します。「真偽値が返される条件式」を指定し、trueが返されている間、ループ処理を実行します。

実装してみる

変数numの値が50以下の間、ループ処理を行います。

また、変数numにはループ毎に3を加算していきます。

let num = 1;
 
while(num <= 50){
  console.log(num)
  num += 3;
} 

変数num

変数numを宣言し、1を代入します。for文同様、変数numは条件式と処理内で利用します。

条件

先ほど宣言した変数numを利用し、「numが50以下」の間、ループ処理を実行するといった条件を指定しています。numの値が50を超えるとfalseが返され、ループ処理が終了します。

処理

変数numの値をconsole.log()を利用し、表示しています。

変数numの更新

num += 3;で、変数numに3を加算し、numの値を更新しています。加算式など、値を更新する処理を記述し忘れてしまうと無限ループに陥ってしまいますので注意してください。

while文でも、contenue文、break文が利用できますので、ご自身で実装してみてください。

forEachメソッド

こちらのセクションでは、forEachメソッドを利用してループ処理を行う方法を学んでいきます。

forEachメソッドとは

forEachメソッドは、配列に対して、ループ処理を行う際に利用します。

for文で実装することも可能ですが、forEachメソッドを利用することで、効率の良いプログラムの記述が可能になります。また、保守性がアップするといったメリットもありますので、こちらのセクションで基本をしっかりと学んでいきましょう。

雛形解説

雛形について解説します。

配列.forEach(コールバック関数); 

配列にforEach(コールバック関数)を指定します。

配列に対して、forEach()を指定した場合、配列内のデータの数だけループ処理が実行されます。4つのデータが格納されている配列に対して処理を行なった場合、ループ処理は4回行われます。

実装してみる

配列の中身を「index番号 : 配列に格納されているデータ」の形で、コンソールに表示します。

const language = ['HTML', 'CSS', 'JavaScript', 'PHP'];
 
language.forEach(function(lang, index){
  console.log(`${index} : ${lang}`);
}); 

それでは、個別に解説していきたいと思います。

const language = ['HTML', 'CSS', 'JavaScript', 'PHP'];

この部分で、HTML, CSS, JavaScript, PHPが入った配列を作成しています。

language.forEach(function(lang, index){
 
});

先ほど作成したlanguageという配列に対して、forEach()を指定し、配列の中身をindex番号付きで出力します。

コールバック関数の引数lang

ループ毎に配列のデータが格納されます。上記のコードだと、1回目のループ処理ではHTMLが、2回目のループ処理ではCSSが格納されます。

コールバック関数の引数index

第二引数を指定した場合、その引数にはindex番号が格納されます。index番号はゼロから始まりますので、1回目のループ処理では0が、2回目のループ処理では1が格納されます。

console.log(`${index} : ${lang}`);

コールバック関数に指定した引数を文字列連結し、console.log()を利用し表示しています。

まとめ：使い分けを意識しよう

今回は、ループ処理について解説しました。

記事内でも解説しましたが、ループ処理には複数の構文があり、実装する処理によって構文を使い分けます。暗記する必要はありませんが、ループ処理を実装する際は、どの構文を利用すべきか確認しましょう。

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー