Skip to content

[JavaScript]繰り返し文とは

ma-san
ma-san(鈴木正行)

効率化に必須となる繰り返し文を覚えることでJavaScriptの幅が広がります。

条件式を使って処理を繰り返す#

まずはWhile文を覚える。While文は条件を満たす限り繰り返し処理を行う。

Whileの中にtrueかfalseを返す式を書きます。条件を受け取るという意味合いでは前項のif文に似た処理となります。

while(条件) {
  繰り返したい処理
}

数値が0になるまで繰り返す、という処理の場合。

let number = 10000;
while(number >= 0) {
  console.log(number);
  number = number - 1020;
}

10000という数値から1020を引きつづける。
数値が0以下になった場合、繰り返し処理が終了する。

「number = number - 1020;」という計算はなかなかとっつきにくい印象がありますが、とっつきやすい計算方法は下記の通りとなります。= の認識として一般的には「等しい」という意味合いですがプログラムの場合は意味も異なります。こればかりは慣れが必要です。

number += 1020; //右辺を左辺に足す
number -= 1020; //右辺を左辺から引く
number *= 1020; //右辺を左辺に掛ける
number /= 1020; //右辺を左辺から割る

処理を10回繰り返す#

for文を使うことで何回繰り返す、などの処理が簡単になります。

for文は決まった回数を繰り返したいときに向いています。

for(初期化;継続条件;最終式) {
  繰り返したい処理
}

while文と似ていますがカウントするための式を付け足したもの、という感覚でまずは大丈夫です。

for(let count = 0; count < 10; count++) {
  console.log('繰り返し文');
}

文の中に見慣れない「count++」はcountの値を1増やすという意味となります。1ずつカウントアップする処理はよく使うため、覚えておくと便利です。もちろん、意味合いとしては「count += 1」と同じになります。

for(let count = 0; count < 10; count++) {
  console.log(count +'回目の繰り返し文');
}

カウントアップしていくたびに数値は更新されていきます。その「たび」を表示することで現在の数値を表示し、最終的に10回目の繰り返しで終了します。
慣れていない方にとっては違和感を感じるかもしれませんが、一回目のカウントアップ時点では数値は0をいれているため0回目、と表示されることになります。あくまで入っている数値を表示するだけとなります。

様々な繰り返し処理#

逆に繰り返したり、繰り返し処理を組み合わせることが可能。

繰り返し処理は一方通行ではない。条件式を変更することで様々な処理が可能になります。

for(let count = 10; count > 0; count--) {
  console.log(count +'回目の繰り返し文');
}

10という数値からカウントダウンを行い、0になるまで繰り返し処理を行います。

for(let count1 = 1; count1 < 10; count1++) {
  for (let count2 = 1; count2 < 10; count2++) {
    console.log(count1 * count2);
  }
}

2つの繰り返し処理を行うことで九九の計算を行うことも可能です。

for(let count1 = 1; count1 < 10; count1++) {
  for (let count2 = 1; count2 < 10; count2++) {
    console.log(count1 + '×' + count2 + '=' + count1 * count2);
  }
}

結果だけではなく途中の計算式を表示する、ということも可能になります。

お仕事・当サイトへ興味を持っていただいた方

お問い合わせはこちらから

お問い合わせを頂く際はご確認ください

プライバシーポリシー

ma-san(鈴木正行)
テクニカルディレクター / Webデザイナー

「ma-san web design」の管理者。東京都・千葉県・宮城県仙台市を中心に企業のWebデザイン/マーケティング/IT戦略のプランニングからWebサイト構築・運用をしています。
Webアクセシビリティ」を中心に、「変わりゆくWebと共にサービス・サイトを改善していくこと」を重視します。
当サイトではお仕事のご相談からナレッジシェアを中心に活動していきます。

るり
未来へ繋がるWebの可能性。
お客様のサービスを、Webサイト制作を通じてサポートいたします。
Accessible Web Design.

Recommendation

るり

Webアクセシビリティの重要性について 当サイトが最も注力したい「Webアクセシビリティ」について、ぜひ多様な方々と共に学びながら充実化させ、普及活動に勤しみたいと考えています。

るり

初めて依頼を検討している方 初めてWebサイト制作を依頼する方へ。Webサイトを作りたいと思ったときに参考にしていただけると幸いです。

るり

Webサイトの基本 サーバーの準備からドメイン契約。Webサイトに必要なデータや情報を一通り纏めることで初めてWebサイト制作に携わる方々の学習の一助になれば幸いです。