JavaScriptのfor文基礎をご紹介！ループ処理する方法

Javascript
プログラミング言語

公開日時: 2020-09-29 　更新日時: 2021-10-07

この記事でわかること

システム エンジニア: JavaScriptの繰り返し構文がなかなか理解できないので悩んでいます。

プロジェクト マネージャー: それは大変ですね。では、繰り返し構文について詳しく見ていきましょう。

JavaScriptの繰り返し処理 – for文の使い方とは？

今回は、JavaScriptの繰り返し構文である、for文の使い方について説明します。
例えば、1から10まで繰り返し処理をしたり、配列の要素数分繰り返し処理したい場面があると思います。
for文の使い方をマスターすれば、繰り返し処理が効率的に実現できます。

JavaScriptのfor文の使い方に興味のある方はぜひご覧ください。

基本的な使い方

JavaScriptのfor文の基本的な使い方を紹介します。
以下のように記述します。


for (初期値; 繰り返し条件; 増減値) {
    // 繰り返し処理
}

for (初期値; 繰り返し条件; 増減値) {

// 繰り返し処理

}

実際のソースコードを見てみましょう。


// 0～4まで繰り返し処理
for (let i = 0; i < 5; i++) {
    console.log('i = ' + i);
}

// 0～4まで繰り返し処理

for (let i = 0; i < 5; i++) {

console.log('i = ' + i);

}

実行結果は以下のようになります。

i = 0
i = 1
i = 2
i = 3
i = 4

i = 0

i = 1

i = 2

i = 3

i = 4

JavaScriptのfor文はこのように記述します。

配列に対するfor文

JavaScriptでは配列要素の繰り返し処理にfor文が使用できます。

実際のソースコードを見てみましょう。


// 配列の定義
var array = ['data1', 'data2', 'data3', 'data4', 'data5'];

// 配列の要素数分繰り返し
for ( let i = 0;  i < array.length;  i++ ) {
    console.log ( array[ i ] );
}

// 配列の定義

var array = ['data1', 'data2', 'data3', 'data4', 'data5'];

// 配列の要素数分繰り返し

for ( let i = 0; i < array.length; i++ ) {

console.log ( array[ i ] );

}

実行結果は以下のようになります。

data1
data2
data3
data4
data5

data1

data2

data3

data4

data5

配列.lengthで、配列の要素数が取得できます。
0 ～配列要素数-1 までの要素を繰り返し処理で出力しています。

また、配列ではfor-of文で繰り返し処理が行えます。
実際のソースコードを見てみましょう。


// 配列の定義
var array = ['data1', 'data2', 'data3', 'data4', 'data5'];

// 配列の要素数分繰り返し
for( var item of array ) {
    console.log( item );
}

// 配列の定義

var array = ['data1', 'data2', 'data3', 'data4', 'data5'];

// 配列の要素数分繰り返し

for( var item of array ) {

console.log( item );

}

実行結果は以下のようになります。

data1
data2
data3
data4
data5

data1

data2

data3

data4

data5

lengthを使用することなく、配列要素の繰り返し処理が実現できています。
このように、JavaScriptでは配列要素の繰り返し処理にfor文が使用できます。

for-in文

JavaScriptではオブジェクトの繰り返し処理にfor-in文が使用できます。
見た目はfor-ofとよく似ていますので、間違えないように注意してください。

実際のソースコードを見てみましょう。


// personオブジェクトの生成
var person = {
    name: '太郎',
    age: 30,
    gender: '男'
}

// personオブジェクトの要素を取り出す
for( var item in person ) {
    console.log( item + " : " + person[ item ] );
}

// personオブジェクトの生成

var person = {

name: '太郎',

age: 30,

gender: '男'

}

// personオブジェクトの要素を取り出す

for( var item in person ) {

console.log( item + " : " + person[ item ] );

}

実行結果は以下のようになります。

name : 太郎
age : 30
gender : 男

name : 太郎

age : 30

gender : 男

このように、JavaScriptではオブジェクトの繰り返し処理にfor-in文が使用できます。
ちなみに、配列に対してfor-in文を使用すると以下のようになります。


// 配列の定義
var array = ['data1', 'data2', 'data3', 'data4', 'data5'];

// 配列の要素数分繰り返し
for( var item in array ) {
    console.log( item );
}

// 配列の定義

var array = ['data1', 'data2', 'data3', 'data4', 'data5'];

// 配列の要素数分繰り返し

for( var item in array ) {

console.log( item );

}

実行結果は以下のようになります。

実行エラーにはなりませんが、配列のインデックスが出力されます。

break

JavaScriptでは、for文のブロックを抜けるには”break”を使用します。

実際のソースコードを見てみましょう。


// 0～4まで繰り返し処理
for (let i = 0; i < 5; i++) {
    // iが3の場合にbreak
    if(i == 3) {
        console.log('break');
        break;
    }
    console.log('i = ' + i);
}

// 0～4まで繰り返し処理

for (let i = 0; i < 5; i++) {

// iが3の場合にbreak

if(i == 3) {

console.log('break');

break;

}

console.log('i = ' + i);

}

実行結果は以下のようになります。

i = 0
i = 1
i = 2
break

i = 0

i = 1

i = 2

break

iが3になったらbreakすることで、for文のブロックを抜けていることが分かります。
このように、JavaScriptではfor文のブロックを抜けるには”break”を使用します。

continue

JavaScriptでは、for文のブロックをスキップするには”continue”を使用します。

実際のソースコードを見てみましょう。


// 0～4まで繰り返し処理
for (let i = 0; i < 5; i++) {
    // iが3の場合にcontinue
    if(i == 3) {
        console.log('continue');
        continue;
    }
    console.log('i = ' + i);
}

// 0～4まで繰り返し処理

for (let i = 0; i < 5; i++) {

// iが3の場合にcontinue

if(i == 3) {

console.log('continue');

continue;

}

console.log('i = ' + i);

}

実行結果は以下のようになります。

i = 0
i = 1
i = 2
continue
i = 4

i = 0

i = 1

i = 2

continue

i = 4

iが3の場合に、continueを実行することでfor文のブロックをスキップします。
このように、JavaScriptではfor文のブロックをスキップするには”continue”を使用します。

forEach

JavaScriptでは、forEach文で繰り返し処理が行えます。
forEach文は配列の繰り返し処理にだけ使用できます。

実際のソースコードを見てみましょう。


let array = [ "item1", "item2", "item3", "item4", "item5" ];
array.forEach( function( item ) {
   console.log( item ); 
});

let array = [ "item1", "item2", "item3", "item4", "item5" ];

array.forEach( function( item ) {

console.log( item );

});

実行結果は以下のようになります。

item1
item2
item3
item4
item5

item1

item2

item3

item4

item5

配列の要素数分のデータが出力されていることが分かります。

また、JavaScriptではラムダ式である”アロー演算子”を使って、forEachメソッドを記述することができます。
実際のソースコードを見てみましょう。


let array = [ "item1", "item2", "item3", "item4", "item5" ];
array.forEach(item => console.log(item));

let array = [ "item1", "item2", "item3", "item4", "item5" ];

array.forEach(item => console.log(item));

実行結果は以下のようになります。

item1
item2
item3
item4
item5

item1

item2

item3

item4

item5

配列の要素数分のデータが出力されていることが分かります。
こちらの方がシンプルですね。

また、配列のインデックスも取得したい場合は以下のように記述します。


let array = [ "item1", "item2", "item3", "item4", "item5" ];

array.forEach( function( item, index ) {
  console.log( 'index: ' + index + ',  item: ' + item );
});

let array = [ "item1", "item2", "item3", "item4", "item5" ];

array.forEach( function( item, index ) {

console.log( 'index: ' + index + ', item: ' + item );

});

実行結果は以下のようになります。

index: 0,  item: item1
index: 1,  item: item2
index: 2,  item: item3
index: 3,  item: item4
index: 4,  item: item5

index: 0, item: item1

index: 1, item: item2

index: 2, item: item3

index: 3, item: item4

index: 4, item: item5

このように、JavaScriptではforEach文で繰り返し処理が行えます。

システム エンジニア: なるほど！for分を理解すれば繰り返し構文もマスターできそうです！

プロジェクト マネージャー: ご理解いただけたようで安心しました。ぜひ実際にコードを書いてマスターしてください。

まとめ

いかがでしたでしょうか。
JavaScriptの繰り返し構文である、for文の使い方について説明しました。
for文を使用すれば、配列の要素数分繰り返したり、オブジェクトの要素数分繰り返すことができます。

ここで紹介したfor文やforEach文以外にも繰り返し構文があるので勉強してみてください。
ぜひご自身でソースコードを書いて、理解を深めてください。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

JavaScriptのfor文基礎をご紹介！ループ処理する方法

JavaScriptの繰り返し処理 – for文の使い方とは？

基本的な使い方

配列に対するfor文

for-in文

break

continue

forEach

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

JavaScript新着案件New Job

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務

官公庁向けシステム運用保守/C＃/東京都府中市/【WEB面談可】

官公庁向けシステム開発のテスター/C＃/東京都府中市/【WEB面談可】

システム開発部門でWeb系のプログラマー/埼玉県川越市/【WEB面談可】/在宅勤務

JavaScriptのfor文基礎をご紹介！ループ処理する方法

JavaScriptの繰り返し処理 – for文の使い方とは？

基本的な使い方

配列に対するfor文

for-in文

break

continue

forEach

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

JavaScript新着案件New Job

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務

官公庁向けシステム運用保守/C＃/東京都府中市/【WEB面談可】

官公庁向けシステム開発のテスター/C＃/東京都府中市/【WEB面談可】

システム開発部門でWeb系のプログラマー/埼玉県川越市/【WEB面談可】/在宅勤務

関連記事Related Posts

JavaScriptでのforEach文の使い方をご紹介！

jQueryでのクリックイベント on(click) の使い方とは？offメソッドについても紹介！

jQueryのloadとは？loadの使用方法やjQueryを使わずにloadを行う方法を紹介

JavaScriptでのStringの使い方｜各メソッドをコード付きで紹介

JavaScriptのreplaceを解説します！replaceを使用した文字列の置換方法について簡単に紹介！