Javascriptの主要なfor文の使い方をまとめました

繰り返し処理はプログラミングの基本で、なおかつ繰り返し処理ができるからプログラミングされたシステムに価値があるとも言えます。人間が手作業で繰り返すのが面倒な処理をプログラミングで代行するイメージですが、これができるからこそプログラミングは便利なのです。

プログラミングに必要なアルゴリズムナンバーワンと言っても過言ではないでしょう。そしてそれはJavaScriptでも例外ではなく、JavaScritptにおいても繰り返し処理の基本はfor文です。

そこで、JavaScriptのfor文の使い方を複数紹介していきます。

for文の基本的な用法

for文の基本形は以下になります。

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

それぞれの条件は以下になります。

初期値：繰り返す回数の初期値
条件式：繰り返しを終了する条件
増減値：「初期値」を増減する式

具体的に数値を当てはめてみると以下のようになります。

for ( var i = 0; i < 3; i++ ) {
 　　　　// 繰り返し処理
}

このように記述すると、3回繰り返し処理を行います。カウント用変数iの初期値を0とし、3未満、つまり2になるまで加算していきます。i++という記述は、処理ごとにiを1加算するという記述です。

配列を使ったループ処理

次に、配列に対してループ処理を行います。配列の処理はループとの相性が非常に良いです。なぜなら、配列の長さ分処理を回すようなことも可能だからです。具体的には以下のようになります。

var lists = [ ‘に’, ‘く’, ‘ま’, ‘ん’,];
for ( var i = 0; i < lists.length; i++ ) {
 　　　　console.log ( lists[ i ] );
}

上記のソースコードを実行すると、以下のようにコンソール出力されます。

に
く
ま
ん

lists.lengthというメソッドによって、listsの長さ分ループを回しました。一つ一つ配列から抜き出す処理を記述するのは非常に無駄なので、上記のようにループで回すと配列の出力処理などは便利です。

配列のlength分処理を回すケースは非常に多いので、そういったものがある、と知っておくと良いですね。ちなみに、ループ処理を抜けた際のiは上記の例だと4になっています。lists.lengthは4なので、4未満でiが3のときに処理が終了します。

しかし、実はiに加算して条件を満たさなくなったタイミングでループを抜けています。つまり、たとえば条件がi<4ならiが4になったタイミングでループを抜けているのです。そのままiを使い回す際は、条件を満たさないところまで加算されていることを知っておくと予期せぬエラーを防げます。

continueとbreakで処理をコントロール

if文の中でcontinueやbreakを使用することによって、特定の条件下では処理を行わない、処理を抜ける、といったことが可能になります。具体的には以下のようになります。

continueを使って特定の条件下でのみ処理を実行する

continueを使用したサンプルコードは以下です。

// 10回繰り返す処理
for ( var i = 0; i<10; i++ ) {
 　　　　// 偶数の時(2で割り切れる時)だけ処理を行わない
 　　　　if( i % 2 === 0 ) continue;
 　　　　// カウンタ変数「i」を表示
 　　　　console.log( i );
}

上記のソースコードを実行すると、以下のようにコンソール出力されます。

1
3
5
7
9

continueがあることで、その後の処理を行わずに次のループに進みます。上記の例だと、2で割り切れる、つまり偶数のときはcontinueが実行されます。それにより、コンソール出力はされません。

breakを使って途中で処理を抜ける

breakを使用したサンプルコードは以下です。

var count = 0;
// 無限ループ
for( ; ; ) {
 　　　　// 変数「count」が10より大きくなったら処理を中断する
 　　　　if( count > 10 ) break;
 　　　　console.log( count );
 　　　　count++;
}

上記のソースコードを実行すると、以下のようにコンソール出力されます。

0
1
2
3
4
5
6
7
8
9
10

for( ; ; )という記述で無限ループを作っていますが、count10以上、つまり10になればbreakによって処理を抜けます。無限ループの場合だけでなく、特定の条件に当てはまった際にbreakさせるようなことも可能です。

for-inを使ってオブジェクトの中身を取り出す

for-inの基本的な構文は以下のようになります。

for( 変数 in オブジェクト ) {
 　　　　// 処理
}

上記のように記述すると、オブジェクトから取得したプロパティを一つずつ変数に代入されます。取得できるプロパティがなくなったタイミングで処理が終了します。具体的なソースコードは以下のようになります。

var myInformation = {
 　　　　name: 'manglobe ',
 　　　　age: 40,
 　　　　address: '東京都世田谷区'
}
for( var item in myInformation ) {
 　　　　console.log( item );
}

上記のソースコードを実行すると、以下のようにコンソール出力されます。

name
age
address

myInformationというオブジェクトの中から、三つのプロパティをすべて取り出すまで繰り返し処理を行いました。

for-ofで配列の中身分処理を繰り返す

for-ofの構文は以下になります。

for ( 変数 of 配列 ) {
// 繰り返し処理
}

for-ofはオブジェクトではなく配列に対して使用するロジックです。つまりfor-ofを使わなくても普通のfor文で処理を記述することもできるのですが、for-ofを使用した方が処理が短く済みます。

var lists = [0, 1, 2, 3, 4, 5];
for( var item of lists ) {
 　　　　console.log( item );
}

上記のソースコードを実行すると、以下のように出力されます。

0
1
2
3
4
5

for-ofによって配列の中身をすべて出力しています。配列の長さを記述したりlengthを指定する必要もないので、for-ofは記述に慣れると便利です。

forEachで配列分出力する

forEachの構文は以下のようになります。

var array = [配列データ];
array.forEach( コールバック関数 )

具体的なサンプルコードは以下になります。

var lists = [0, 1, 2, 3, 4, 5];
lists.forEach( function( value ) {
 　　　　console.log( value );
});

上記のコードを実行すると、以下のようにコンソール出力されます。

0
1
2
3
4
5

引数のvalueに配列の中身が一つづつ格納され、それをコンソール出力しています。for文をベースに、そこから派生するコードについても紹介してきました。for文はJavaScriptにおいて非常に重要な概念ですが、構造自体はシンプルで簡単です。

そのため、上記の内容を把握しておけばある程度使いこなせるでしょう。とはいえ頻繁に使用するコードは勝手に覚えるので、概要だけ把握しておけば問題ないかと思います。また上記の内容を把握しておけば、JavaScript以外のfor文にも対応できます。

案件量が豊富なアルマサーチ

最後に、アルマサーチのご紹介！

アルマサーチはフリーランス向けに案件をご紹介することに特化したエージェントサービスです。豊富な案件量から、安定して継続的な案件のご紹介を実現しており、口コミから登録エンジニアが急増中です。

アルマサーチが選ばれる理由

1. 豊富な案件量。週3?4日の案件や在宅リモート案件も。
2. 優秀なコンサルタント陣。
3. 案件に参画後もしっかりサポート。

豊富な案件量

フリーランス向けに特化し、業界屈指の案件量を誇ります！週3?4日の案件や、在宅リモート案件もありますし、その他あらゆる希望をしっかりお伝えください。最適な案件のご紹介をさせていただきます。

優秀なコンサルタント陣

技術に疎く、開発の希望を伝えても響かないエージェント・・・嫌ですよね。アルマサーチにはそのような者は一切おりません！さらに独立にまつわる税金や保険関係に詳しいスタッフが徹底的にサポートさせていただきます。

案件に参画後もしっかりサポート

常駐先が決まった瞬間に、一度も連絡が取れなくなるエージェント・・・いますよね？アルマサーチでは、そのようなことは一切ありません！常に電話やメールは即対応しますし、月に１度のランチミーティングなどから現場の状況を細かくヒアリングし、就業環境改善に尽力いたします。