JavaScriptに限らずプログラムしている同じ処理を繰り返し行いたいケースが出てきます。WEBサイトの制作で例を挙げると、下記のようなものはループ処理で表示されることもあります。
- お知らせ一覧に各記事の日付とタイトルにリンクをつけて５件表示したい
- 表組み（table)にデータを流し込む
ループ処理（繰り返し）にはいくつか種類がありますが、ここではよく使うものを勉強していきたい思います。
for
for文は回数の条件を指定してループさせる書き方で、下記のように記述します。
for ( 初期値; 条件式; 増減値 ) {
// 繰り返す処理
}基本形の使い方として、繰り返している回数をコンソールに表示する方法を書いてみましょう。
for ( let i = 0; i < 10; i++) {
console.log("ループ処理の" + ( i + 1 ) + "回目です。");
}
// ループ処理の1回目です。
// ループ処理の2回目です。
// ...
// ループ処理の10回目です。- 初期値：変数 i に0を代入
- 条件式：i が10未満になるまで繰り返す
- 増減値： ループが終わるたびにiに1を足す
増減値に書かれたi++はインクリメントと呼ばれ、この場合ループが終了するたびにiに1が足されていき0→1→2… と増えていきます。iが0から始まり最終的に10以上になったとき、ループ処理が終了するというプログラムになっています。
console.log内で(i + 1)としているのは( )がないと前後の文字と一緒に結合されてしまうため、( )で区切ってその部分だけを演算させています。
for文は配列やオブジェクトのデータを繰り返して参照する場合にもよく使われます。
const ary = ["山田", "鈴木", "田中", "佐藤", "高橋"]
for (let i = 0; i < ary.length; i++) {
console.log(ary[i]);
}
// 山田 鈴木 田中 佐藤 高橋このようにするとary[0],ary[1],ary[2]…と順番にコンソールへ名前が出力されていきます。
for-in
for-in文はオブジェクトの処理に適しており、下記のように記述します。
for ( 変数 in オブジェクト ) {
// 繰り返す処理
}ここで指定した変数にはオブジェクトのkeyが代入されてきますので、値を取り出すには下記のように記述します。
const namelist = { name01: "山田", name02: "鈴木", name03: "田中"}
for( list in namelist) {
console.log(namelist[list]);
}
// 山田 鈴木 田中forEach
forEach文は配列をループ処理させるのに適しており、下記のように記述します。
変数名.foreach(コールバック関数)
関数の細かい説明はまた別の記事でしますが、今のところはコールバック関数となっているところに繰り返しする処理を書くものとしておきます。
次の例では配列にオブジェクトを含む変数の値を続けて参照するプログラムになります。
const ary = [
{
id: 1,
name: "山田"
},
{
id: 2,
name: "鈴木"
},
{
id: 3,
name: "田中"
}
]
ary.forEach( value => {
console.log( "ID:" + value.id + "は" + value.name + "さんです。" );
});
// ID:1は山田さんです。
// ID:2は鈴木さんです。
// ID:3は田中さんです。このケースはJSONデータをHTMLに変換して出力する際によく使われるやり方なので、使い慣れて居た方が良いと思います。
ループ処理の途中で抜ける、処理をスキップする
ループ処理中に何らかの理由で処理をやめたい場合はbreakを使用します。
下記のプログラムだと iが3の場合にbreakを実行し、ループ処理を抜けるようなプログラムになっています。
for ( let i = 0; i < 10; i++) {
if ( i === 3 ) break
console.log(i);
}
// 0 1 2極端な例なので実際にはこんな書き方はしません。3で抜けるならそもそも10回ループしない方が良いです。
break後に書かれた処理は実行されず、以降の繰り返し処理もされません。
次に処理を特定の場合だけスキップさせたい場合はcontinueを使用します。
continue後に書かれた処理は実行されず、ループ処理の先頭に戻って次の処理を開始します。
for ( let i = 0; i < 10; i++) {
if( i % 2 === 0) continue;
console.log(i);
}
// 1 3 5 7 9終わりに
ループ処理は同じ処理を繰り返す際に使われるプログラムで、たくさんの場所で使われることになります。他にもfor-of文やwhile文などのループ処理もありますが、多く覚えようとすると大変なので今回はなるべく数を絞らせていただきました。
ここまで読んでくださり、ありがとうございました。
参考記事
ループと反復処理 – JavaScript | MDN
制作協力
サムネイル制作：うみ Twitter
コメント