お役立ち情報

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

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文にも対応できます。

キャリアカウンセリングのプロとして
あなたに合った案件をご案内します。

まずはお気軽にお問い合わせください!

イメージ