JavaScriptでは他のプログラミング言語同様にfor文とwhile文でのループ処理があります。この記事では、for文、while文の基本的な使い方から、for-in文やfo-of文などの応用的な使い方まで幅広く説明しています。
JavaScriptのループ処理とは
どのプログラミング言語でも必ず実装されている機能がいくつかありますが、その一つがループ処理です。ループ処理とは、言葉どおり同じ処理を繰り返し行うプログラミング手法のことです。
色々な条件を指定することができますが、条件には、繰り返しを止める条件や、繰り返しを続ける条件など、色々な形で指定することができます。
Pythonなどの他の言語でもfor文やwhile文でループ処理するようになっており、JavaScriptが同じ名称でループ処理が実装されていることが多いです。
JavaScriptだけでなくプログラミングにおいて必須の概念ですので、この記事を参考に自身でもオリジナルコードを作り、JavaScriptのループ処理をマスターしてしまいましょう。
JavaScriptのfor文の使い方
JavaScriptのfor文は、決められた回数だけループ処理を実行する機能です。どれだけ続けるか指定し、基本的にはその条件を満たすまで同じ処理が繰り返し実行されます。
例えば、10回だけ同じ処理を実行したい、配列の要素の数だけ繰り返し処理を実装したいなど、こういった場合に使われます。
for文の基本的な使い方
JavaScriptのfor文の基本的な使い方はいたって簡単で、初期化式と繰り返しの条件式、加算式を決め、波括弧({})内で繰り返し処理を行うコードを記述するだけです。
4つのポイントがありますが、初期化式、繰り返しの条件式、加算式は１セットの概念です。繰り返し処理は一般的な実装と同じようにコーディングするだけです。基本構造は以下のようになりますので、確認してみましょう。
// for文の基本的な使い方(基本構造)
for ( [初期化式]; [条件式]; [加算式or減算式] ) {
// 実行コード
}for文の宣言の後に丸括弧内に初期化式、条件式、加算式が書かれています。そして、そのあとの波括弧内で実行コードが記載されます。
これで指定した条件下で実行コードが繰り返し実行されます。これがJavaScriptのfor文の基本的な使い方になります。次のコード例でさらに理解を進めていきましょう。
// for文の基本的な使い方(コード例)
var sumNumber = 1;
for (var i = 1; i <= 10; i++) {
sumNumber *= i;
}
console.log(sumNumber)
//戻り値
3628800このfor文では初期化式は”var i=1″、繰り返し条件は”i <= 10″、加算式は”i++”(iが1つずつ増えていく)です。実行コードはiの値をどんどん掛け合わせていくコードです。
つまり、このコードは、iは1から始まり、毎回iの値がsum_numberに掛け合わされていき、実行されるごとにiの値が1ずつ加算され、iが10になるまでこの処理が繰り返されるということを意味します。
加算式についてはマイナス記号を使った減算式でも指定することができます。次のコード例をみてみましょう。
// for文の基本的な使い方(コード例-減算式を使用した場合)
var sumNumber = -1;
for (var i = -1; i >= -10; i--) {
sumNumber *= i;
console.log(i)
}
console.log(sumNumber)
//戻り値
-1
-2
-3
-4
-5
-6
-7
-8
-9
-10
-36288001ずつ値が減じているのがわかります。このように初期化式、繰り返し条件、加算式(減算式)、実行コードを指定することで、for文を実装することができます。
for文とif文を合わせて使う
JavaScriptのfor文では、実行コード部分にif文を実装し、複数の条件のもとで繰り返し処理を実行するコードを実装することができます。
if文は、ご存知のように複数の条件を指定し、条件ごとに実行コードを変えることができる機能です。for文と並びプログラミング言語の学習の中で最も基本的な機能の1つです。ここではfor文とif文を組み合わせたコードをみていきます。
まずは以下の基本構造を見て、その構造を理解しましょう。
// for文とif文の組み合わせ(基本構造)
for ([初期化式]; [条件式]; [加算式or減算式]) {
if (条件式) {
// 実行コード1
} else {
// 実行コード2
}
}for文の中に各種の条件を指定したif文を記載しています。else-if文は複数記載することができます。for文とif文を組み合わせることで、ループ処理の中で複数の処理を実行することができます。それでは次はコード例を見てみましょう。
// for文とif文の組み合わせ(コード例)
// 基本的な使い方1(if文と一緒に使う)
var sumNumber = 0;
var evenNumber = [];
var nonEvenNumber = [];
for (var i = 0; i <= 10; i++) {
sumNumber += i;
if (sumNumber % 2 === 0) { //偶数になった時のiを格納する配列
evenNumber.push(i);
} else { //奇数になった時のiを格納する配列
nonEvenNumber.push(i);
}
}
console.log('sumNumber: '+sumNumber);
console.log('evenNumber: '+evenNumber);
console.log('nonEvenNumber: '+nonEvenNumber);
// 戻り値
sumNumber: 55
evenNumber: 0,3,4,7,8
nonEvenNumber: 1,2,5,6,9,10上記コードは非常に簡単なコードで、iが0から始まり、iの値を順々に足し合わせながら(sumNumber)、偶数であれば偶数の配列(evenNumber)にiの値を格納し、奇数であれば奇数の配列(nonEvenNumber)にiの値を格納しています。
iが1つずつ増えていくループ処理の中で、if文を使って偶数と奇数で処理を分けています。
for文のループ処理をbreakを使って途中で抜ける方法
先ほどfor文の中でif文を使う方法をみてきましたが、JavaScriptのfor文とif文との組み合わせの中で、break文を使うことでループ処理から抜け出すことができます。
繰り返し処理が行われるコードを書く中で特定の条件下ではループ処理から抜け出し、次の処理に移りたい場合があります。こう言った場合にfor文とif文を組み合わせ、さわにbreak文を使うことで意図したとおりにループ処理から抜け出し次のコードへと進むプログラムを書くことができます。
まずは以下のコードで基本構造を確認してみましょう。
// for文とbreak文(基本構造)
for ([初期化式]; [条件式]; [加算式or減算式]) {
if (条件式) { // 条件式は複数設定可能
break;
} else if (条件式) {
// 実行コード1
} else {
// 実行コード2
}
}for文の中にif文による条件分岐が記載され、さらに所定のif文の中でbreak文を記載していることが確認できます。break文はif文ではなく、else-if文の中でもelse文の中でも記載することができます。
また、綺麗な書き方ではないですが、複数のif文、else-if文の中に記載することもできます。基本コードが理解できましたら、次は実際のコード例をみてみましょう。
// for文とbreak文(コード例)
var sumNumber = 0;
for (var i = 0; i <= 100; i++) {
if (sumNumber > 1000) {
var breakpoint = i;
break;
} else {
sumNumber += i;
}
}
console.log('sumNumber: '+sumNumber);
console.log('breakpoint: '+breakpoint);
// 戻り値
sumNumber: 1035
breakpoint: 46上記コードでは、0から始まる整数を順番に足し合わせた結果、どの値で総和が1000を越すかを調べるコードです。
便宜上、iが100になるまでforループが続くように条件が指定されていますが、if文の条件分岐の中で総和が1000を超えた場合にbreak文に到達し、ループ処理から抜け出るように設定されています。
このように、for文とif文、break文を活用することで一定の条件に適合した場合にループ処理から抜け出すプログラムを作り出すことができます。
continueを使って特定のタイミングだけ処理を実行する方法
さきほどはfor文、if文、break文を組み合わせることでループ処理から抜け出すプログラムを紹介しましたが、continue文の場合、一定の条件に合致した時にはループ処理で指定したプログラムを実行せずに、次のループへと移ることができます。
基本的な構造はbreak文を活用した場合と同じで、if文の中でcontinue文を指定するだけです。以下に記載した基本的なコード構造で確認してみましょう。
// for文とcontinue文(基本構造)
for (初期化式; 条件式; 加算式or減算式) {
if (条件式) { // 条件式は複数設定可能
continue;
} else if (条件式) {
// 実行コード1
} else {
// 実行コード2
}
}break文の場合と同じようにfor文の中にif文による条件分岐が記載され、さらに所定のif文の中でcontinue文が記載されていることが確認できます。複数のif文、else-if文の中に記載することもできます。次のコード例でJavaScriptでfor文、if文、continue文を使う際の具体的な挙動を確認しましょう。
// for文とcontinue文(コード例)
var sumNumber = 0;
var sqrtArray = []
for (var i = 0; i <= 100; i++) {
if (Math.sqrt(i) === Math.round(Math.sqrt(i))) {
sumNumber += i;
} else {
sumNumber += i
continue;
}
console.log("i= "+i.toString())
sqrtArray.push(i)
}
console.log(sumNumber);
console.log(sqrtArray);
// 戻り値
i= 0
i= 1
i= 4
i= 9
i= 16
i= 25
i= 36
i= 49
i= 64
i= 81
i= 100
sumNumber: 5050
SqrtArray: 0,1,4,9,16,25,36,49,64,81,100上記のプログラムは平方数を配列であるsqrtarrayに格納するプログラムです。contine文の使い方がわかるように「console.log(“i= “+i.toString())」というコードを入れています。”toString”メソッドは、数値オブジェクトを文字列オブジェクトに変えるメソッドです。
平方数でない場合、continue文によってこのコードが実行されていないことが確認できます。このようにcontinue文を使用すると、if文で指定した条件に合致した場合はその後の処理は飛ばされ、次のループ処理が開始されることがわかります。
break文とcontinue文は一緒に使うこともできる
for文とif文の使いたいに関する最後では応用となる使い方を紹介します。今まで紹介してきたbreak文とcontinue文ですが、これらは同時に使うことができます。
break文、continue文を一緒に使うことができることで、より柔軟にコードを書くことができます。ここでは早速具体的なコード例を見てみましょう。
// break文とcontinue文を一緒に使う(コード例)
var sumNumber = 0;
var sqrtArray = []
for (var i = 0; i <= 500; i++) {
if (sumNumber >= 2000) {
var breakpoint = i;
break;
} else if (Math.sqrt(i) === Math.round(Math.sqrt(i))) {
sumNumber += i;
} else {
sumNumber += i
continue;
}
console.log("i= "+i.toString())
sqrtArray.push(i)
}
console.log('sumNumber: '+sumNumber);
console.log('breakpoint: '+breakpoint);
console.log('SqrtArray: '+sqrtArray);// 戻り値
i= 0
i= 1
i= 4
i= 9
i= 16
i= 25
i= 36
i= 49
sumNumber: 2016
breakpoint: 64
SqrtArray: 0,1,4,9,16,25,36,49上記はbreak文とcontinue文で紹介したコード例を組み合わせたプログラムです。break文とcontinue文の使い方を理解できて入れば簡単に理解できるでしょう。
for文とif文の組み合わせは、JavaScriptを学習する中で最も基本的なことの一つです。ご自身でも色々なオリジナルコードを考え、for文とif文の使い方をマスターしましょう。
for-in文の基本的な使い方
javaScriptのfor-in文はオブジェクトに対して使える機能で、オブジェクトのプロパティなどへアクセスする際に使用されます。JavaScriptはオブジェクト指向プログラミングの1種で、データや関数などがオブジェクトとして1つのまとまりになります。ここではfor-in文の使い方をみていきましょう。
オブジェクトの中身を繰り返す
JavaScriptのfor-in文はオブジェクトの中身を繰り返し呼び出します。オブジェクトはプロパティやメソッドなどを持ちますが、for-in文ではこれらを呼び出すことができます。for-in文の基本的な構造を下記で確認してみましょう。
for (var item in someObject) {
// 実行コード
}非常にシンプルな構造になっていることがわかります。someObjectにはなんらかのオブジェクトを指定するだけです。次はコード例をみて、具体的な挙動を確認しましょう。
// for-inオブジェクトの使い方
var myFeautures = {
FirstName: 'Taro',
FamilyName: 'Yamada',
Height: 198.0,
Weight: 108.5,
Job: 'programmer',
Hobby: 'basket ball'
}
for (var item in myFeautures) {
console.log(item+" - "+myFeautures[item]);
}
// 戻り値
FirstName - Taro
FamilyName - Yamada
Height - 198
Weight - 108.5
Job - programmer
Hobby - basket ball上記のコード例ではmyFeauturesというオブジェクトを作成し、各種プロパティを指定しています。for-in文ではこのmyFeauturesを対象のオブジェクトに指定しており、各プロパティに順々にアクセスしています。
for-in文ではこのようにオブジェクトの中身と言えるものにアクセスすることができます。
for-in文の挙動に関する注意点とその対策
JavaScriptのfor-in文ではオブジェクトの中身にアクセスすることができますが、アクセスする範囲などには注意が必要です。
JavaScriptのオブジェクト指向では、プロトタイプチェーンと言われる構造で作られており、内部でチェーンのようにオブエクトを継承することで、より抽象的なオブジェクトを生成しています。
例えば、異なるオブエジェクト間で同名で同じような機能をもったメソッドを利用できることがありますが、これは内部的に同じオブジェクトを参照しているからです。
for-in文を無条件で使用すると、この内部で継承しているオブジェクトにもアクセスし、結果的に意図しない実装となることがあります。下記のコードで確認してみましょう。
// for-in文で注意したい挙動(コード例)
var myFeautures = {
FirstName: 'Taro',
FamilyName: 'Yamada',
Height: 198.0,
Weight: 108.5,
Job: 'programmer',
Hobby: 'basket ball'
}
Object.prototype.calcurateBMI = function(weight, height) {
BMI = weight / ((height/100)**2)
return BMI
};
for (var item in myFeautures) {
console.log(item+" - "+myFeautures[item]);
}// 戻り値
FirstName - Taro
FamilyName - Yamada
Height - 198
Weight - 108.5
Job - programmer
Hobby - basket ball
calcurateBMI - function(weight, height) {
BMI = weight / ((height/100)**2)
return BMI
}Object.prototype.calcurateBMIでmyFeaturesが内部で継承している大元のオブジェクトにcalcurateBMIメソッドを追加していますが、for-in文ではこのオブジェクトのメソッドにまでアクセスしてしまっていることがわかります。
これを理解していないとfor-in文の中で指定したコードがcalcurateBMIメソッドにまで適用され、無用なエラーや不必要な挙動が引き起こされる可能性があります。こういった場合には以下のように実装すると不安定なコードを生み出さずに済みます。
// for-in文(意図しないコード例対策編)
var myFeautures = {
FirstName: 'Taro',
FamilyName: 'Yamada',
Height: 198.0,
Weight: 108.5,
Job: 'programmer',
Hobby: 'basket ball'
}
Object.prototype.calcurateBMI = function(weight, height) {
BMI = weight / ((height/100)**2)
return BMI
};
for (var item in myFeautures) {
if (myProperty.hasOwnProperty(item)) {
console.log(item+" - "+myFeautures[item]);
}
}FirstName - Taro
FamilyName - Yamada
Height - 198
Weight - 108.5
Job - programmer
Hobby - basket ball“hasOwnProperty”メソッドを使うことでmyFeautresオブジェクトに直接紐づいているプロパティのみが参照されるようになりました。このようなメソッドを活用することで、エラーの回避やバグのあるプログラムを回避することができます。
for-of文による繰り返し処理
JavaScriptのfor-of文は、配列オブジェクトやDOMなどの各要素にアクセスすることができます。JavaScriptの配列オブジェクトやDOMではイテレータという機能を内部で持っています。
これは端的にいうと繰り返し処理の中で順々に要素を返し、途中で停止した場合でも内部で停止時点を記憶しており、再開された場合にその中止点から値を返していく仕組みです。この機能を活用することで、for-of文では配列などの各要素にアクセスすることができます。
ここではfor-of文の使い方について説明していきます。
基本的な使い方
for-of文の基本的な使い方はいたって簡単でfor文の条件式で配列オブジェクトやDOMを指定するだけです。以下が基本構造なります。確認してみましょう。
// for-of文(基本構造)
for (var item of ArrayOBJ) {
// 実行コード
}基本構造はfor文、for-in文と同じ構造になっていることがわかります。次は具体的なコード例をみてみましょう。
//for-of文
var myPets = ['dogs', 'cats', 'birds', 'lions', 'pandas'];
for (var i of myPets) {
console.log(i);
};
// 戻り値
dogs
cats
birds
lions
pandasコード例をみると配列の各要素にアクセスできていることがわかります。このようにfor-of文は配列の各要素にアクセスできるJavaScriptの機能で、非常に使い勝手も良く利用シーンも多い機能の一つです。ぜひマスターしてしまいましょう。
forEach文で配列の中身を繰り返す
forEach文は配列オブジェクトでだけ使うことができるJavaScriptの機能で、配列の要素を順に返してくれます。for文のようですが、厳密には配列オブジェクトのメソッドです。ここではforEach文について説明していきます。
基本的な使い方
JavaScriptのforEach文は配列オブジェクトのメソッドであり、配列オブジェクトにつなぎ合わせ、内部で実行コードを指定するだけです。早速コード例をみてみましょう。
var myPets = ['dogs', 'cats', 'birds', 'lions', 'pandas'];
var pets = "";
var i = 0
myPets.forEach(function(value) {
if (i < myPets.length-2) {
pets += value+', ';
} else if (i === myPets.length-2) {
pets += value+' and ';
} else {
pets += value
}
i += 1
});
console.log('I have '+pets)
//戻り値
I have dogs, cats, birds, lions and pandas配列オブジェクトの各要素にアクセスされ、順々に処理されていることがわかります。このようにforEachメソッドを使うことで、配列オブジェクトを有効活用することができます。
forEach文のコールバック関数で使う3つの引数
forEach文の内部で指定する関数のことをコールバック関数と呼びますが、コールバック関数では3つの引数を使うことができます。この3つの引数はそれぞれ、value、index、arrayです。以下でそれぞれの役割をみていきましょう。
value
value引数は、コールバック関数の第1引数になるもので、アクセスしている配列オブジェクトの要素を格納します。アクセスしている要素に対してなんらかの処理をしたい場合に利用します。
index
index引数は、コールバック関数の第2引数であり、アクセスしている配列オブジェクトの要素のインデックス番号を返します。要素の順番などを明示したいときに便利です。
array
array引数は、第3引数であり、アクセスしている配列オブジェクト自身を指します。この値だけはループしている間も全く値が変わることはありません。
3つの引数を検証
それでは、これら3つの引数を検証してみます。下記のコードを確認ください。
//コールバック関数の3つの引数の検証
var myPets = ['dogs', 'cats', 'birds', 'lions', 'pandas'];
var pets = "";
var i = 0
myPets.forEach(function(value, index, array) {
if (i < myPets.length-2) {
pets += value+', ';
} else if (i === myPets.length-2) {
pets += value+' and ';
} else {
pets += value
}
i += 1
console.log('value: '+value+" |index: "+index+" |array: "+array);
});
console.log('I have '+pets)
// 戻り値
value: dogs |index: 0 |array: dogs,cats,birds,lions,pandas
value: cats |index: 1 |array: dogs,cats,birds,lions,pandas
value: birds |index: 2 |array: dogs,cats,birds,lions,pandas
value: lions |index: 3 |array: dogs,cats,birds,lions,pandas
value: pandas |index: 4 |array: dogs,cats,birds,lions,pandas
I have dogs, cats, birds, lions and pandas上記を見ると各引数の値の移り変わりが理解できます。オリジナルコードで自身でも試してみてください。
forEach文では途中で抜け出せない
forEach文はfor文とは異なり、内部で指定したコードの実行中に抜け出すことはできません。break文のように途中で抜け出す処理を行いたい場合は、forEach文の代わりにsome関数を使います。コード例をみて確認してみましょう。
//コールバック関数の3つの引数の検証
var myPets = ['dogs', 'cats', 'birds', 'lions', 'pandas'];
var pets = "";
var i = 0
myPets.some(function(value, index, array) {
if (i < myPets.length-2) {
pets += value+', ';
} else if (i === myPets.length-2) {
pets += value+' and ';
return true;
} else {
pets += value
}
i += 1
console.log('value: '+value+" |index: "+index+" |array: "+array);
});
console.log('I have '+pets)
// 戻り値
value: dogs |index: 0 |array: dogs,cats,birds,lions,pandas
value: cats |index: 1 |array: dogs,cats,birds,lions,pandas
value: birds |index: 2 |array: dogs,cats,birds,lions,pandas
I have dogs, cats, birds, lions andsome関数を使うことで、ループ処理の途中で抜け出せていることがわかります。配列オブジェクトではforEachとsomeというメソッドがあります。これらのメソッドをうまく使いこなし、配列オブジェクトをどんどん活用していきましょう。
while文による繰り返し処理について
最後はwhile文です。while文もまたfor文と同じようにループ処理を実装するための機能ですが、for文とは異なり、繰り返し回数が決まっていない時に主に使われます。基本構造は以下になります。for文とほとんど同じです。
while (条件式) {
// 実行コード
}実際のコード例は以下になります。
var count = 0;
var sumNumber = 0;
var i = 0;
while ( sumNumber <= 1000 ) {
sumNumber += i;
i += 1;
}
console.log(sumNumber);
console.log(i);
// 戻り値
1035
46上記はfor文の最初のコード例で出したものと同じ、自然数を順に足していき、その総和が1000を越える時のiの値を算出したプログラムです。
このようにfor文とwhile文はともにループ処理を行う類似の機能ですが、使い場面によりどちらを使うべきかが変わるので、色々なコードを書いて慣れていきましょう。
JavaScriptのループ処理をマスターしよう
以上がJavaScriptのループ処理についての記事ですが、プログラムを書く時必ずといって良いほど使用する機能ですので、色々なオリジナルコードをどんどん作り、マスターしていきましょう。
