JavaScriptのfor文基礎をご紹介！ループ処理する方法
- システム
エンジニア - JavaScriptの繰り返し構文がなかなか理解できないので悩んでいます。
- プロジェクト
マネージャー - それは大変ですね。では、繰り返し構文について詳しく見ていきましょう。
JavaScriptの繰り返し処理 – for文の使い方とは？
今回は、JavaScriptの繰り返し構文である、for文の使い方について説明します。
例えば、1から10まで繰り返し処理をしたり、配列の要素数分繰り返し処理したい場面があると思います。
for文の使い方をマスターすれば、繰り返し処理が効率的に実現できます。
JavaScriptのfor文の使い方に興味のある方はぜひご覧ください。
基本的な使い方
JavaScriptのfor文の基本的な使い方を紹介します。
以下のように記述します。
|
1
2
3
4
5
|
for (初期値; 繰り返し条件; 増減値) {
// 繰り返し処理
}
|
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
|
// 0～4まで繰り返し処理
for (let i = 0; i < 5; i++) {
console.log('i = ' + i);
}
|
実行結果は以下のようになります。
|
1
2
3
4
5
|
i = 0
i = 1
i = 2
i = 3
i = 4
|
JavaScriptのfor文はこのように記述します。
配列に対するfor文
JavaScriptでは配列要素の繰り返し処理にfor文が使用できます。
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
|
// 配列の定義
var array = ['data1', 'data2', 'data3', 'data4', 'data5'];
// 配列の要素数分繰り返し
for ( let i = 0; i < array.length; i++ ) {
console.log ( array[ i ] );
}
|
実行結果は以下のようになります。
|
1
2
3
4
5
|
data1
data2
data3
data4
data5
|
配列.lengthで、配列の要素数が取得できます。
0 ～ 配列要素数-1 までの要素を繰り返し処理で出力しています。
また、配列ではfor-of文で繰り返し処理が行えます。
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
|
// 配列の定義
var array = ['data1', 'data2', 'data3', 'data4', 'data5'];
// 配列の要素数分繰り返し
for( var item of array ) {
console.log( item );
}
|
実行結果は以下のようになります。
|
1
2
3
4
5
|
data1
data2
data3
data4
data5
|
lengthを使用することなく、配列要素の繰り返し処理が実現できています。
このように、JavaScriptでは配列要素の繰り返し処理にfor文が使用できます。
for-in文
JavaScriptではオブジェクトの繰り返し処理にfor-in文が使用できます。
見た目はfor-ofとよく似ていますので、間違えないように注意してください。
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// personオブジェクトの生成
var person = {
name: '太郎',
age: 30,
gender: '男'
}
// personオブジェクトの要素を取り出す
for( var item in person ) {
console.log( item + " : " + person[ item ] );
}
|
実行結果は以下のようになります。
|
1
2
3
|
name : 太郎
age : 30
gender : 男
|
このように、JavaScriptではオブジェクトの繰り返し処理にfor-in文が使用できます。
ちなみに、配列に対してfor-in文を使用すると以下のようになります。
|
1
2
3
4
5
6
7
8
9
|
// 配列の定義
var array = ['data1', 'data2', 'data3', 'data4', 'data5'];
// 配列の要素数分繰り返し
for( var item in array ) {
console.log( item );
}
|
実行結果は以下のようになります。
|
1
2
3
4
5
|
0
1
2
3
4
|
実行エラーにはなりませんが、配列のインデックスが出力されます。
break
JavaScriptでは、for文のブロックを抜けるには”break”を使用します。
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
|
// 0～4まで繰り返し処理
for (let i = 0; i < 5; i++) {
// iが3の場合にbreak
if(i == 3) {
console.log('break');
break;
}
console.log('i = ' + i);
}
|
実行結果は以下のようになります。
|
1
2
3
4
|
i = 0
i = 1
i = 2
break
|
iが3になったらbreakすることで、for文のブロックを抜けていることが分かります。
このように、JavaScriptではfor文のブロックを抜けるには”break”を使用します。
continue
JavaScriptでは、for文のブロックをスキップするには”continue”を使用します。
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
|
// 0～4まで繰り返し処理
for (let i = 0; i < 5; i++) {
// iが3の場合にcontinue
if(i == 3) {
console.log('continue');
continue;
}
console.log('i = ' + i);
}
|
実行結果は以下のようになります。
|
1
2
3
4
5
|
i = 0
i = 1
i = 2
continue
i = 4
|
iが3の場合に、continueを実行することでfor文のブロックをスキップします。
このように、JavaScriptではfor文のブロックをスキップするには”continue”を使用します。
forEach
JavaScriptでは、forEach文で繰り返し処理が行えます。
forEach文は配列の繰り返し処理にだけ使用できます。
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
|
let array = [ "item1", "item2", "item3", "item4", "item5" ];
array.forEach( function( item ) {
console.log( item );
});
|
実行結果は以下のようになります。
|
1
2
3
4
5
|
item1
item2
item3
item4
item5
|
配列の要素数分のデータが出力されていることが分かります。
また、JavaScriptではラムダ式である”アロー演算子”を使って、forEachメソッドを記述することができます。
実際のソースコードを見てみましょう。
|
1
2
3
4
|
let array = [ "item1", "item2", "item3", "item4", "item5" ];
array.forEach(item => console.log(item));
|
実行結果は以下のようになります。
|
1
2
3
4
5
|
item1
item2
item3
item4
item5
|
配列の要素数分のデータが出力されていることが分かります。
こちらの方がシンプルですね。
また、配列のインデックスも取得したい場合は以下のように記述します。
|
1
2
3
4
5
6
7
|
let array = [ "item1", "item2", "item3", "item4", "item5" ];
array.forEach( function( item, index ) {
console.log( 'index: ' + index + ', item: ' + item );
});
|
実行結果は以下のようになります。
|
1
2
3
4
5
|
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。お気軽にご登録ください。
JavaScript新着案件New Job
-
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務
月給26万～26万円東京都千代田区(秋葉原駅) -
官公庁向けシステム運用保守/C＃/東京都府中市/【WEB面談可】
月給50万～60万円東京都府中市(中河原駅) -
官公庁向けシステム開発のテスター/C＃/東京都府中市/【WEB面談可】
月給25万～35万円東京都府中市(中河原駅) -
システム開発部門でWeb系のプログラマー/埼玉県川越市/【WEB面談可】/在宅勤務
月給63万～63万円埼玉県川越市(南大塚駅)
関連記事Related Posts
-
JavaScriptでのforEach文の使い方をご紹介！
JavaScriptでのforEachの使い方とは？ 今回は、JavaScriptでのforEach文の使い方について説明します。配列の要素を繰り返し処理する場合などに、forEach文を使用します。 for文とは違った […]
-
jQueryでのクリックイベント on(click) の使い方とは？offメソッドについても紹介！
jQueryでのクリックイベント on(click) の使い方を紹介します！ 今回は、jQueryでのクリックイベントの使い方について説明します。 jQueryでクリックイベントを設定するには、on(click)を使用し […]
-
jQueryのloadとは？loadの使用方法やjQueryを使わずにloadを行う方法を紹介
jQueryのloadとは？ jQueryはJavaScriptで利用できる多機能なライブラリです。その機能の1つであるloadは、自ページとは別のtxtページやhtmlページを読み込んで表示することができる機能です。複 […]
-
JavaScriptでのStringの使い方｜各メソッドをコード付きで紹介
JavaScriptでのStringの使い方とは？ 今回は、JavaScriptでの文字列（String）の使い方について説明します。JavaScriptでは、文字列をダブルクォーテーション（”）で囲みます。 […]
-
JavaScriptのreplaceを解説します！replaceを使用した文字列の置換方法について簡単に紹介！
JavaScriptのreplaceとは？ JavaScriptで文字列の中のある単語を、別の単語に置き換えたいことはよくあると思います。そんな時に役立つのがreplaceメソッドです。replaceは最初に指定した文字 […]
