【JavaScript入門】JavaScriptの繰り返し文を学ぼう – for文 –

はじめに

「JavaScript入門」は、プログラミングを始めたい方、JavaScriptを勉強したい方向けにJavaScriptの基礎と実践を学ぶシリーズです。

初めての方は、まずこちらからお読みください。

【JavaScript入門】はじめに

本章では、JavaScriptの繰り返し文、for文について学びます。

繰り返し文とは、同じ処理を繰り返すための文です。プログラミングでは頻繁に使います。

本題に入る前に、繰り返し文を理解するためにこちらを確認しておきましょう。

サンプルコードをダウンロードしよう

次のリンクから、サンプルコードをダウンロードしてください。

サンプルコードをテキストエディタで開いてみよう

「Visual Studio Code」から、先ほどダウンロードしたファイルから「006 繰り返し文」を選択して開いてみましょう。

開くと次のような画面になります。

サンプルコードをChromeで開いてみよう

サンプルコードの「スタート」の「index.html」をChromeで開いてみましょう。

繰り返し文ってなに

繰り返し文とは、同じ処理を繰り返すため の文です。

繰り返し文は、ある条件を満たす間は処理を繰り返す という性質があります。

例えば、メールを100人分送る必要があるとします。

プログラムの中にメールを送る処理を100個書くのは効率がよくありませんね。

ですので、「メールを送る」という処理は1つだけ書いて、それを100人分だけ実行させてあげればいいのです。

その際に、「条件」と「繰り返しで使う処理」をプログラムに教えてあげます。

この繰り返す処理のことを「loop（ループ）」と呼びます。

流れが輪のようなので、英語ではloop(輪)を意味しています。

何のために繰り返し文があるの？

プログラミングでは、同じ処理を行うために同じコードを何度も書くことはありません。

その代わりに、繰り返し文を使って同じ処理を共通化させます。

なぜなら、一つのコードで同じ処理を行うことで 効率よく行うことができるから です。

for文

JavaScriptのループ処理には、「for文（フォー文）」を使うことができます。

for文は、決まった回数だけ 処理を実行したいときに使用します。

先ほど話した通り、プログラムには繰り返しする「条件」と「繰り返しで使う処理」を教えてあげる必要があります。

書き方を見てみましょう。

for文の書き方

for文のフォーマットは次のようになります。

for (初期化式; 条件; 増分式) {
  繰り返しで使う処理
}

これだけだと、イメージがしづらいですね。

実際に、コードを見てみましょう。

次のコードは、コンソールに10回「こんにちは」を出力しています。

for (let i = 0; i < 10; i += 1) {
  console.log("こんにちは")
}

一つずつ分解すると、次のようになります。

では、for文がどのような流れで実行されているのか見てみましょう。

for文の流れ

for文は次のような流れで実行されています。

「初期化式」では、「i」という変数を作っています。

そして、「条件」で比較演算子を使って i < 10 という式を評価しています。

この条件が満たされたら次のステップに進みます。

もし、条件が満たされなければfor文の処理は終了します。

つまり、変数「i」が10より少ない間は処理が繰り返される ということです。

では、その変数はどこで増えているのでしょうか。

それは、ステップ4の「増分式」です。

「増分式」で、i += 1 という式を実行して変数の値を更新しています。

let i = 0
i = i + 1

let i = 0
i += 1

上記のようなステップを繰り返して、最終的に 10より大きくなったら 繰り返し処理を終了しています。

for文を書いてみよう

では、実際にfor文を書いてみましょう。

サンプルコードの「スタート」フォルダの「index.js」を開いてみましょう。

「for文を書いてみよう」と記述がされています。

その真下に、次のように書いてください。

// for文を書いてみよう
for (let i = 0; i < 10; i += 1) {
  console.log("こんにちは")
}
for (let i = 0; i < 10; i += 1) {
  console.log("おはよう")
}
for (let i = 0; i < 10; i += 1) {
  console.log(i)
}

Chromeのコンソールで確認すると、次のように出力されているのが分かります。

for文を応用してみよう

for文を使って、少し応用してみましょう。

1から10までの合計を求めてそれを変数に代入してみましょう。

同様に、サンプルコードの「スタート」フォルダの「index.js」を開いてみましょう。

「for文を応用してみよう」と記述がされています。

その真下に、次のように書いてください。

// for文を応用してみよう
let total = 0
for (let i = 0; i < 10; i += 1) {
  total += i + 1
}
console.log(total)

Chromeのコンソールで確認すると、次のように出力されているのが分かります。

変数「i」に1を足した結果を変数「total」に代入しています。

これが10回繰り返されて、最終的に合計値が求められます。

インクリメント演算子

for文の「増分式」には インクリメント演算子 という演算子を使うことがよくあります。

実際に見てみましょう。

for (let i = 0; i < 10; i++) {
  console.log("こんにちは")
}

「i++」に注目してください。

この「++」がインクリメント演算子です。

これは、次のコードの省略した書き方になります。

i += 1

既存の変数に 1を足してインクリメントする という意味です。

逆に1を引くのを デクリメント と言います。

まとめると、次のようになります。

まとめ

本章では、JavaScriptの繰り返し文、for文について学びました。

最後にもう一度、重要なことを確認しましょう。

次章は、JavaScriptの配列について解説します。