【JavaScript】
for文・for in文・for of文・forEach()を使って繰り返し・配列(array)の繰り返し処理を行う方法
いろいろなfor文
投稿日 2025/01/21 更新日 2025/01/23
こんにちは。IT業界歴５年目の「元木皇天」です。
今回はJavaScriptで、for文・for in文・for of文・forEach()を使って繰り返し処理・配列(array)の繰り返しを行う方法について解説いたします。
やりたいこと
JavaScriptで繰り返し処理を行う。
参考文献
・JavaScript コードレシピ集
・javascript ドキュメント - for
・javascript ドキュメント - for in
・javascript ドキュメント - for of
・javascript ドキュメント - Array.prototype.forEach()
環境
・OS：MacOS Sequoia 15.0
・Google Chrome：Ver 131.0.6778.265
for文の使い方
一般的な繰り返し処理ではfor文を使用します。
以下は0~9までをコンソールに出力するコードです。
for(let i=0; i<10; i++){
console.log(i);
}
以下、各要素についての解説です。
-
let i=0
→for文の中で使用する変数iを宣言し、初期値に0を代入する -
i<10
→繰り返しを行うかどうか判定する箇所です。この場合は、変数iが10よりも小さい場合に繰り返し処理を続けます。 -
i++
→変数iに1を足してインクリメントしています。 -
console.log(i)
→コンソールに変数iの値を出力します。
変数iが0の値から始まり、順番にコンソールログに値を出力していきます。
iの値が10になると、「i<10」の条件を満たさなくなるため、繰り返し処理が終了します。
また、配列を繰り返し処理する場合は以下のように記載します。
以下は'aaa', 'bbb', 'ccc'が出力されるコードです。
const array = ['aaa', 'bbb', 'ccc'];
for(let i=0; i<array.length; i++){
console.log(array[i]);
}
//以下のように出力されます。
//aaa
//bbb
//ccc
先ほど「i<10」と記載した箇所を「i<array.length」と記載しています。
これにより、配列の長さである「3」よりも変数iが小さい場合繰り返し処理が行われるようになり、array[0], array[1], array[2]が得られて、各要素も文字列がコンソールに出力されるという感じになります。
for in文の使い方
for in文は主に配列の繰り返し処理で使用します。
構文としては以下のようになります。
for({要素のインデックス値} in {配列}){
//処理
}
以下は使用例です。
const array = ['aaa', 'bbb', 'ccc'];
for(let i in array){
console.log(i)
console.log(array[i]);
}
//以下のように出力されます。
//0
//aaa
//1
//bbb
//2
//ccc
「let i」の部分に配列のインデックス値が入るため、先ほど紹介したfor文(array.lengthを使用する方法)よりも簡単に記載ができます。
ただ、新しいJavaScriptのバージョンを使用できる環境であれば、この後紹介するfor of文を使用した方が、より簡易的に記述ができるので、そちらがおすすめです。
for of文の使い方
for of文も主に配列の繰り返し処理で使用します。
構文としては以下のようになります。
for({要素} of {配列}){
//処理
}
以下は使用例です。
const array = ['aaa', 'bbb', 'ccc'];
for(let item of array){
console.log(item);
}
//以下のように出力されます。
//aaa
//bbb
//ccc
「let item」の部分に配列の各要素の値が入るため、先ほど紹介したfor in文よりも要素を使用するだけであれば簡単に記述ができます。
forEach()の使い方
最後に紹介するのはforEach()メソッドです。
これまで紹介したものとは異なり、メソッドになります。
構文は以下の通りです。
forEach(({要素}, {インデックス}, {元の配列}) =>{
//処理
});
なお、要素・インデックス・元の配列については、省略可能です。
以下は使用例です。
const array = ['aaa', 'bbb', 'ccc'];
array.forEach((item) => {
console.log(item);
});
//以下のように出力されます。
//aaa
//bbb
//ccc
一見すると、for ofと同じような動作になりますが、forEach()はメソッドのため、メソッドチェインでfilter(), map()などの処理と合わせて使用することが可能となっています。
以下はforEach()とfilter()を使用して、'bbb'の値のみ取得する例です。
const array = ['aaa', 'bbb', 'ccc'];
array.filter((item) => {
return item === 'bbb';
}).forEach((item) => {
console.log(item);
});
//以下のように出力されます。
//bbb
まとめ
JavaScriptで繰り返し処理を行うには
for文・for in文・for of文・forEach()を使用する。
