DESIGNMAP

  1. TOP
  2. 公開講座
  3. ゼロから始めるJavaScript入門
  4. 繰り返し処理(for文、for of文) ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.7】

繰り返し処理(for文、for of文) ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.7】

今回は繰り返し処理の基礎となるfor文、for of文を学んでいきます。

Atomで新規ファイルをつくり「文字列型 ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.2】」で作った「js-study」フォルダ内に、「for1.html」というファイル名で保存します。

以下のコードを書いて保存します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script>
      for (var num = 1; num <= 10; num++) {
        console.log(num);
      }
    </script>
  </body>
</html>

Google Chromeで「for1.html」を開き、JavaScriptコンソールを開きます。1から10までが出力されていれば成功です。

for文は以下のような書式です。

for (初期化の式; 繰り返しを継続する条件式; 実行後の式) {
	ループを継続する条件式がtrueの時に実行される文
}

まず初期化の式が実行され、繰り返しを継続する条件式が実行され、trueを返せば、ブロック内の処理が実行されます。実行後に、実行後の式が実行され、巻き戻って再度、繰り返しを継続する条件式が実行されます。もしfalseならば、forは終了します。

具体的に読んでみましょう。

for (var num = 1; num <= 10; num++) {

まず、var num = 1;が実行されます。次にnum <= 10;が実行されます。numの値は1ですので、trueを返し、console.log(num);が実行されます。

ブロック内の処理が終わると、num++が実行され、numの値が1つ足されます。numの値は2になります。再度、num <= 10;が実行されます。trueを返し、またconsole.log(num);が実行されます。ブロック内の処理が終わると、num++が実行され、numの値が1つ足され、3になります。

これを繰り返していくと、numの値が11の時に、num <= 10;falseを返し、for文の外に抜けます。

配列に繰り返し処理をしてみよう

前回学んだ配列の値を繰り返し出力するコードを書いてみましょう。
「js-study」フォルダ内に、「for2.html」というファイル名で保存します。
以下のコードを書いて保存します。

コードは<script>以前、</script>以降のコードは「for1.html」と同じなので掲載は省略しています。

var fruits = ["りんご", "いちご", "みかん", "ぶどう"];
for (var idx = 0; idx < fruits.length; idx++) {
  console.log(fruits[idx]);
}

Google Chromeで「for2.html」を開き、JavaScriptコンソールをみると下記のように出力されていれば成功です。

りんご
いちご
みかん
ぶどう

fruits.lengthは、配列の要素数を取得できます。4が取得できるので、コードは

 (var idx = 0; idx < 4; idx++) 

のように読んでください。

まず、var idx = 0;が実行されます。次にidx < fruits.length;が実行され、idx変数の値はゼロですので、条件式はtrueを返します。

console.log(fruits[idx]);が実行されます。fruits[0]なので「りんご」が出力されます。

idx++が実行され、idx変数の値は1になります。再度、idx < fruits.length;が実行されます。idx変数の値は1ですので、条件式はtrueを返します。

console.log(fruits[idx]);が実行されます。fruits[1]なので「いちご」が出力されます。

この処理が繰り返され、idx変数の値が4になったときに、idx < fruits.length;falseを返し、for文は終了します。

実際の配列の繰り返し処理には、ECMAScript 2015以降はfor of文が便利です。後述します。

繰り返しを途中でやめる

以下のコードを書いて「js-study」フォルダ内に、「for3.html」というファイル名で保存します。
コードは<script>以前、</script>以降のコードは「for1.html」と同じなので掲載は省略しています。

var fruits = ["りんご", "いちご", "みかん", "ぶどう"];
for (var idx = 0; idx < fruits.length; idx++) {
  if (fruits[idx] === "みかん") {
    break;
  }
  console.log(fruits[idx]);
}

Google Chromeで「for3.html」を開き、JavaScriptコンソールをみると下記のように出力されていれば成功です。

りんご
いちご

3回目のループのときに、if (fruits[idx] === "みかん") {trueを返すので、 break;が実行されます。breakはループの外にでます。

breakは、for文だけでなく、後述するfor of 文、別な回に説明するwhile文にも使えます。

繰り返しの特定の回をスキップする

以下のコードを書いて「js-study」フォルダ内に、「for4.html」というファイル名で保存します。
コードは<script>以前、</script>以降のコードは「for1.html」と同じなので掲載は省略しています。

var fruits = ["りんご", "いちご", "みかん", "ぶどう"];
for (var idx = 0; idx < fruits.length; idx++) {
  if (fruits[idx] === "みかん") {
    continue;
  }
  console.log(fruits[idx]);
}

Google Chromeで「for4.html」を開き、JavaScriptコンソールをみると下記のように出力されていれば成功です。

りんご
いちご
ぶどう

3回目のループのときに、if (fruits[idx] === "みかん") {trueを返すので、continue;が実行されます。continueはブロック内の処理をスキップして、「実行後の式」(idx++)にジャンプします。「実行後の式」が実行され、「繰り返しを継続する条件式」に戻ります。特定の回の実行をスキップしたいときに使います。

continueは、for文だけでなく、後述するfor of 文、別な回に説明するwhile文にも使えます。

for of

forループで配列を出力したときに、配列の要素数や繰り返しを継続する条件式などを考慮する手間がありました。ECMAScript 2015から導入されたfor of 文を使うと、もっと楽に繰り返し処理ができます。

以下のコードを書いて「js-study」フォルダ内に、「forof1.html」というファイル名で保存します。
コードは<script>以前、</script>以降のコードは「for1.html」と同じなので掲載は省略しています。

var fruits = ["りんご", "いちご", "みかん", "ぶどう"];

for (var v of fruits) {
  console.log(v);
}

Google Chromeで「forof1.html」を開き、JavaScriptコンソールをみると下記のように出力されていれば成功です。

りんご
いちご
みかん
ぶどう

繰り返しの終了を書く必要がないし、配列のインデックスを指定する手間もありません。記述が圧倒的に楽です。

for of 文は配列だけはありません。

var str = "こんにちは";

for (var v of str) {
  console.log(v);
}
こ
ん
に
ち
は

配列も文字列も同じコードで繰り返しの処理を記述しているところがすごいです。

for of 文は正確に解説すると、Iterableインターフェースに準拠したオブジェクトであれば、繰り返し処理が可能です。Iterableインターフェースに準拠したオブジェクトは、配列、文字列、マップ、セット等が挙げられます。

Iterableインターフェースとは何かという説明が必要ですが、これは後の回で「イテレーター」を取り上げる予定なので、そのときに解説します。

次回はwhile文を使った繰り返し処理を学びます。

スポンサーリンク

関連記事

プロフィール

DESIGNMAP
ディレクター
ON VISITINGを制作・運営。
お問い合わせ