LoginSignup
2

More than 5 years have passed since last update.

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

Posted at

※こちらの記事は、プロスタ編集部が学習者の多いJavaScriptの文法記事を公開することで、皆様の学習にお役に立ちたい意図で投稿しております。
参考サイト:【JavaScript入門】for文を使って繰り返し処理をする方法

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

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

目次
1 for文とは
2 for文の構文
3 実際にfor文を書いてみよう
4 breakとcontinue
   4.1 break(ループを止める)
   4.2 continue(ループをスキップする)

for文とは

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

for文の構文

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

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

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

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

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

<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset = "UTF-8">
<title>JavaScrip forの使い方</title>
</head>
<body>
<script type="text/javascript">
for (var i = 0; i < 10; i++) {
    document.write (i);
}
</script>
</body>
</html>

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

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文から抜けます。

<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <title>JavaScriptでfor文</title>
  </head>
  <body>
    <script>
      for (var i = 0; i < 10; i++) {
        if (i == 5) {
         break;
        }
        document.write (i);
      }
    </script>
  </body>
</html>

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

01234

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

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

<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <title>JavaScriptでfor文</title>
  </head>
  <body>
    <script>
      for (var i = 0; i < 10; i++) {
        if (i == 5) {
         continue;
        }
        document.write (i);
      }
    </script>
  </body>
</html>

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

012346789

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2