1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

【JavaScript入門】for文を使って繰り返し処理をする方法

【JavaScript入門】
Pocket

プログラムの中で繰り返しを行う場合は、While文やfor文やforeach文など様々な構文を使用できます。それぞれが特徴を持った繰り返し構文であり、用途に合わせて使っていきます。

for文とは

for文は繰り返しを行う構文です。たくさんある繰り返し構文の中でも、繰り返し回数がわかる場合はfor文を使用します。逆に繰り返し回数がわからない場合は、While文などを使用することになります。

for文の構文

それでは、for文の基本構文を見てみましょう。

for文の構文は、初期値、条件式、値の増減式が指定されます。それぞれの構成は、「;(セミコロン)」で区切られます。
それぞれの単語についてご説明します。
・初期値:初めに変数に設定する値です。
・条件式:繰り返し処理を行うかどうか判断を行う式です。条件式が真ならば繰り返します。
・増減式:変数の増減を設定します。

実際にfor文を書いてみよう

それでは、実際にサンプルのプログラムを使って解説していきます。
以下は、for文を用いたサンプルコードです。まず、サンプルコードをテキストエディタに入力したら、ファイル名をindex.html、文字コードをUTF-8にして保存してください。

保存したファイルをブラウザで開くと、次のように出力されます。

0123456789

このサンプルでは、変数 i を宣言し、i の値によって繰り返し処理を行うか否かを判断しています。
まず、初期値は「var i = 0」と書いてあります。ここでは変数 i を宣言し、それと同時に i の初期値として0を代入しています。
次に、条件式は「i < 10」と書いてあります。これは、i < 10を満たしている限りは繰り返し処理を行う、ということを意味します。逆に、i < 10を満たさなくなった瞬間に、繰り返し処理はもう行われなくなるということです。
そして、増減式には「 i++」と書いてあります。この式は「 i = i + 1」と同じ意味です。繰り返し処理を行った後に、毎回「 i++」を実行する、つまり1回繰り返し処理をすると i が1増える、ということになります。
以上より、このプログラムの詳しい処理の流れは以下のようになります。

繰り返し1回目:i=0、i<10を満たすので繰り返し処理を実行
繰り返し2回目:i=1、i<10を満たすので繰り返し処理を実行



繰り返し10回目:i=9、i<10を満たすので繰り返し処理を実行
繰り返し11回目:i=10、i<10を満たさないので繰り返しはしない。for文から脱出し、繰り返し処理を終了する

breakとcontinue

繰り返し処理には、途中で繰り返し処理を抜けるbreakと、実行中の処理を飛ばし、次の繰り返し処理に移るcontinueがあります。

それでは、具体例を見てみましょう。

break(ループを止める)

break文を使って、先ほどのサンプルコードの繰り返し処理を途中で抜けるようにします。ある条件に当てはまった場合、breakが適用され、for文から抜けます。

「i==5」となった時に、for文を抜けるため以下のように出力されます。

01234

continue(ループをスキップする)

continue文を使って、特定の処理を飛ばして、繰り返し処理の先頭に戻ります。

「i==5」となった時に、for文を飛ばし次の処理に移るため、以下のように出力されます。

012346789



いかがでしたか。サンプルを使って、for文による繰り返し処理を実際に確かめてみましょう。

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加

おすすめスクール

全国30校舎で展開されるヒューマンアカデミーのWeb講座は修了者数4万人超、講師とカリキュラムの満足度がどちらも9割を超えています。就職や転職に必要なレベルの実務スキルを身に付けられます。

WebCampは、一ヶ月の短期集中でWebデザイン、プログラミングスキルを習得するスクールです。学習効果の高い反転授業(自主学習でインプット、講義でアウトプット)を採用し、年間1000名を輩出しています。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

イチ押しランキング

1リナックスアカデミー

リナックスアカデミー

2システムアーキテクチュアナレッジ

システムアーキテクチュアナレッジ

3WEB塾

WEB塾

メールマガジン

ページ上部へ戻る