【JavaScript】for文で処理を繰り返して行う!基本から応用の使い方まで!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2023年02月07日に投稿されました。)

JavaScriptで繰り返し処理を行う方法として、for文があります。

for文とは、設定した処理を指定した回数分行うことができる文法になります。

指定した回数分行うことができるため、何回も同じ処理を行いたい場合にはとても利便性が高いです。

そして、単体だけでなく多重で使用することも可能であり、繰り返し処理に対して繰り返し処理を行うこともできます。

また、文字列だけでなくオブジェクトのデータに対しても使用することができるので、繰り返し処理を行いたい場合はfor文を使用しましょう。

今回はJavaScriptのfor文で処理を繰り返して行う方法について基本から応用まで紹介していきます。

この記事はこんな方におすすめ
・指定した処理を繰り返して行いたい場合
・オブジェクトのデータを取り出して表示したい場合

for文とは

for文とは処理を指定した回数分繰り返して行うことができる文法になります。

記載した処理を条件を満たすまで繰り返して行うようになります。

for文の書き方

for文の書き方は下記のようになります。

for()と記述し、括弧の中に3つのパラメータを指定することで使用できるようになります。

for文のパラメータ

for文のパラメータは下記のようになります。

  1. 初期化式(必須):
    繰り返し処理を開始するための式を指定する
  2. 条件式(必須):
    繰り返し処理を開始するための条件式を指定する
  3. 変化式(必須):
    処理完了後の変化式を指定する

for文は必須パラメータとして、「初期化式」、「条件式」、「変化式」を指定します。

for文で処理を繰り返して行うサンプルコード

for文で処理を繰り返して行うサンプルコードをご紹介します。

ここでは、下記の3つのパターンでfor文を使用します。

  1. パラメータをそれぞれ1つずつ指定する場合
  2. パラメータをそれぞれ複数指定する場合
  3. パラメータをそれぞれ省略する場合

パラメータをそれぞれ1つずつ指定する場合

パラメータをそれぞれ1つずつ指定してfor文を使用します。

● main.js

実行結果

for文のパラメータをそれぞれ1つずつ指定して繰り返し処理を行った結果

for文によって処理が繰り返して行われています。

今回は「10以下」という条件式であるため、「繰り返し処理実行: n回目」という文字列が10個表示されています。

パラメータをそれぞれ複数指定する場合

パラメータをそれぞれ複数指定してfor文を使用します。

こちらは、「カンマ(,)」を使用することで複数のパラメータを指定することができるようになります。

● main.js

実行結果

for文のパラメータをそれぞれ複数指定して繰り返し処理を行った結果

for文によって処理が繰り返して行われています。

今回は「10以下」と「5以下」という条件式であるため、「繰り返し処理実行-1: n回目」と「繰り返し処理実行-2: n回目」いう文字列が5個ずつ表示されています。

パラメータをそれぞれ省略する場合

パラメータをそれぞれ省略してfor文を使用します。

こちらは、何も指定せず「;(セミコロン)」を指定することでパラメータを省略することができます。

しかし、こちらは無限ループが発動してしましますので使用する際には注意が必要です。

● main.js

実行結果

for文のパラメータをそれぞれ省略して繰り返し処理を行った結果

for文によって処理が繰り返して行われています。

今回はパラメータが何もないため、「繰り返し処理実行」という文字列が無限に表示されています。

for文の基本的な使い方

for文の基本的な使い方についてご紹介します。

ここでは、下記の2つのパターンの使い方についてご紹介します。

  1. 同じ処理を指定した条件まで行う
  2. オブジェクトのデータを取り出す

同じ処理を指定した条件まで行う

まず1つ目は、同じ処理を指定した条件まで行う場合に使用することができます。

例えば、同じ処理を100回行う場合に毎回コードを記述すると同じコードが100行続くためとても時間がかかります。

しかし、for文を使用するとコード量が1回と変わらないため、時間をかけることなく簡単に実装することができるようになります。

● main.js

実行結果

for文で同じ処理を指定した条件まで行った結果

for文によって100円玉だと何枚になり、余りがいくらになるのか繰り返し処理で計算しています。

そのため、100円玉が「1201枚」で余りが「50円」となって表示されています。

オブジェクトのデータを取り出す

2つ目はオブジェクトのデータを取り出す場合に使用することができます。

オブジェクトの値はそれぞれインデックスが割り振られており、取り出す際にそのインデックスを指定する必要があります。

そのため、for文を使用するとインデックスを処理中に増減することができるので、オブジェクトのデータをすべて取り出すことができるようになります。

● main.js

実行結果

for文でオブジェクトのデータを取り出した結果

for文によってオブジェクトのデータを取り出しています。

そのため、コンビニ名が書かれたオブジェクトのデータが表示されています。

for文の応用的な使い方

for文の応用的な使い方についてご紹介します。

ここでは下記の5つのパターンの使い方についてご紹介します。

  1. 繰り返し処理中に条件分岐を行う
  2. 繰り返し処理中に多数の条件分岐を行う
  3. 繰り返し処理を途中で抜ける
  4. 繰り返し処理をスキップをする

繰り返し処理中に条件分岐を行う

繰り返し処理中に条件分岐を行うには、if文を使用します。

if文は条件を満たすか満たさないかで処理を分岐させる文法になります。

そのため、偶数回目はAの処理で奇数回目はBの処理などのように異なる処理を行うことができるようになります。

● main.js

実行結果

for文にif文を使用して繰り返し処理中に条件分岐を行った結果

for文中にif文を使用することで、繰り返し処理中に条件分岐を行っています。

そのため、カウントが偶数の場合と奇数の場合で文字列が異なって表示されています。

繰り返し処理中に多数の条件分岐を行う

繰り返し処理中に多数の条件分岐を行うには、switch文を使用します。

switch文とは、条件によって処理を多数に分岐させる文法になります。

そのため、1回目はAの処理、2回はBの処理、3回目はCの処理などのように値によって異なる処理を行うことができるようになります。

● main.js

実行結果

for文にswitch文を使用して繰り返し処理中に多数の条件分岐を行った結果

for文中にswitch文を使用することで、処理を多数に分岐させています。

そのため、カウントが「1」、「3」、「6」、「8」の場合は指定した文字列が表示され、それ以外は別の文字列が表示されています。

繰り返し処理を途中で抜ける

繰り返し処理を途中で抜けるには、breakを使用します。

breakとは、プログラム内にある処理を中断し、次の処理に移す文法になります。

つまりbreakを使用すると、処理の途中であってもfor文の繰り返し処理を抜けるようになります。

● main.js

実行結果

for文にbreakを使用して繰り返し処理を途中で抜けた結果

for文中にbreakを使用することで繰り返し処理を途中で抜けています。

今回、break文を通るのは8回目のため、8回目の処理でfor文の処理を強制終了しています。

繰り返し処理をスキップをする

繰り返し処理をスキップをするには、continueを使用します。

continueとは、プログラム内にある処理を一時的にスキップして、次の処理を行う文法になります。

つまりcontinueを使用すると、for文の繰り返し処理を一時的にスキップして次の処理を行うようになります。

● main.js

実行結果

for文にcontinueを使用して繰り返し処理をスキップした結果

for文中にcontinueを使用することで繰り返し処理をスキップしています。

今回、contiinueを通るのは3の倍数の回数であるため、3回目、6回目,9回目にはmain()の処理が行われていません。

多重のfor文で繰り返し処理を行う場合

for文は多重の繰り返し処理を行うことも可能です。

多重とは、、for文の中にfor文がある入れ子状態のことをいいます。

多重の繰り返し処理になることから、利便性は高くなりますが、単一の繰り返し処理と比べて内容が複雑になります。

for文を2重にして使用する場合

for文を、2重にして使用します。

2重に使用すると、下記のようなイメージで処理が行われるようになります。

for文を2重にして使用した場合の処理のイメージ

処理の順番
  1. 処理A(1回目)
  2. 処理B(1回目)
  3. 処理B(条件が満たなさくなるまで)
  4. 処理A(2回目)
  5. 処理B(1回目)
  6. 処理B(条件が満たなさくなるまで)
  7. 処理A(条件を満たす最後のn回目)
  8. 処理B(1回目)
  9. 処理B(条件が満たなさくなるまで)
  10. 終了

● main.js

実行結果

for文を2重にして繰り返し処理を行った結果

for文を2重にして繰り返し処理を行っています。

そのため、「n回目」の文字列の後に「この処理を実行n-m回目」の文字列が繰り返して表示されています。

for文を3重にして使用する場合

for文を、3重にして使用します。

3重に使用すると、下記のようなイメージで処理が行われるようになります。

for文を3重にして使用した場合の処理のイメージ

処理の順番
  1. 処理A(1回目)
  2. 処理B(1回目)
  3. 処理C(1回目)
  4. 処理C(条件が満たなさくなるまで)
  5. 処理B(2回目)
  6. 処理C(1回目)
  7. 処理C(条件が満たなさくなるまで)
  8. 処理B(条件を満たす最後のn回目)
  9. 処理C(1回目)
  10. 処理C(条件が満たなさくなるまで)
  11. 処理A(2回目)
  12. 処理A(条件を満たす最後のn回目)
  13. 終了

● main.js

実行結果

for文を3重にして繰り返し処理を行った結果

for文を3重にして繰り返し処理を行っています。

そのため、「n回目」の文字列の後に「n-m回目」、その後に「この処理を実行n-m-o回目」の文字列が繰り返して表示されています。

for文と組み合わせて使用できる便利なメソッド

for文と組み合わせて使用できる便利なメソッドについてご紹介します。

substr() / substring()

substr()やsubstring()とは、指定した文字列から一部の文字列を取得するメソッドになります。

そのため、for文の中でsubstr()やsubstring()を使用することで、文字の一部を連続で取得することができます。

● main.js

実行結果

for文の中でsubstr()やsubstring()を使用した結果

for文にsubstr()やsubstring()を使用することで、指定した文字列の一部を連続で取得しています。

もし、、substr()やsubstring()について詳しく知りたい場合は下記の記事をご参考下さい。

replace()

replace()とは、文字列を指定した文字列に置換するメソッドになります。

そのため、for文の中でreplace()を使用することで、該当するすべての文字列を置き換えることができます。

● main.js

実行結果

for文の中でsreplace()を使用した結果

for文にreplace()を使用することで、指定した文字列から「もじ」という文字列を「文字」に置き換えています。

もし、、replace()について詳しく知りたい場合は下記の記事をご参考下さい。

push() / unshift()

push()やunshift()とは、配列に指定した要素を追加するメソッドになります。

そのため、for文の中でpush()やunshift()を使用することで、配列に要素を連続で追加することができます。

● main.js

実行結果

for文の中でunshift()やpush()を使用した結果

for文にunshift()やpush()を使用することで、配列の要素が繰り返して追加されています。

もし、ush()やunshift()について詳しく知りたい場合は下記の記事をご参考下さい。

shift() / pop()

shift()やpop()とは配列に指定した要素を削除するメソッドになります。

for文の中でshift()やpop()を使用することで配列の要素を連続で削除することができます。

● main.js

実行結果

for文の中でuhift()やpop()を使用した結果

for文にshift()やpop()を使用することで、配列の要素が繰り返して削除されています。

もし、shift()やpop()について詳しく知りたい場合は下記の記事をご参考ください。

appendChild() / insertBefore()

appendChild()やinsertBefore()とは指定した要素をHTML要素として挿入するメソッドになります。

そのため、for文の中でappendChild()やinsertBefore()を使用することで、HTML要素を連続で挿入することができます。

● index.html

● main.js

実行結果

for文の中でappendChild()やinsertBefore()を使用した結果

for文にappendChild()やinsertBefore()を使用することで、HTML要素が連続で追加されています。

もし、appendChild()やinsertBefore()について詳しく知りたい場合は下記の記事をご参考ください。

for文の実践的な使い方

for文の実践的な使い方についてご紹介します。

オブジェクトのデータを表示する

例えば、for文で「名前」、「年齢」、「性別」が書かれたデータを画面に表示します。

● index.html

● main.js

実行結果

for文でオブジェクトのデータを表示した結果

for文によってオブジェクトのデータが画面に表示されています。

そのため、オブジェクト内にある「名前」「年齢」「メールアドレス」がテーブルでそれぞれ表示されています。

ゲームのオブジェクトを作成する

例えば、for文でブロック崩しのブロックを作成します。

● index.html

● style.css

● main.js

実行結果

for文でゲームのオブジェクトを作成した結果

for文によってオブジェクトが作成されています。

そのため、ブロック崩しのブロックが画面に表示されています。

繰り返し処理を行う方法の一覧

先ほどまでfor文で繰り返し処理を行ってきましたが、他にも繰り返し処理を行うことができる方法は存在します。

そのため、ここでは繰り返し処理を行う方法の一覧についてご紹介します。

while文

while文とは、for文と同様に繰り返し処理を行う文法になります。

しかし、for文と違って回数指定がなく、条件が一致しなくなるまでずっと処理を行い続けるようになります。

● main.js

実行結果

while文で繰り返し処理を行った結果

while文によって繰り返し処理が行われています。

今回は条件が10以下であるため「この処理を実行する: n回目」という文字列が10個表示されています。

do-while文

do-while文とはwhile文と同様に、繰り返し処理を回数指定することなく行う文法になります。

しかし、最後に条件を調べるため最低1回は繰り返し処理が行われるようになります。

● main.js

実行結果

do-while文で繰り返し処理を行った結果

do-while文によって繰り返し処理が行われています。

今回は条件が10以下であるため「この処理を実行する: n回目」という文字列が10個表示されています。

for-in文

for-in文とはfor文と同様に繰り返し処理を行う文法になります。

しかし、オブジェクトに対して繰り返し処理を行い、キーや値を取得することができます。

● main.js

実行結果

for-in文を使用して繰り返し処理を行った結果

for-in文によってオブジェクトに対して繰り返し処理が行われています。

そのため、オブジェクトに格納されているキーや配列内に格納されている値が表示されています。

for-of文

for-of文とはこちらもfor文と同様に繰り返し処理を行う文法になります。

しかし、配列の要素を取り出しながら、繰り返し処理を行うことができます。

● main.js

実行結果

for-of文を使用して繰り返し処理を行った結果

for-of文によって配列に対して、繰り返し処理が行われています。

そのため、配列に格納されているコンビニ名の要素が表示されています。

forEach()

forEach()とは配列に格納されている要素に対して繰り返し処理を行うメソッドになります。

配列用のメソッドのため、配列の繰り返し処理の際に使用することができます。

● main.js

実行結果

for-in文を使用して繰り返し処理を行った結果

forEach()によって配列の要素に対して繰り返し処理が行われています。

そのため、配列に格納されているコンビニ名の要素が表示されています。

もし、forEach()について詳しく知りたい場合は下記の記事をご参考ください。

Sossy

配列に対して繰り返し処理を行う場合は、for文のインデックスを指定するよりもこちらのメソッドを使用した方が楽です。

まとめ

⚫︎ for文とは処理を指定した回数分繰り返して行うことができる文法である

⚫︎ for文を使用するには下記のパラメータを指定する
・初期化式(必須)
・条件式(必須)
・変化式(必須)

⚫︎ パラメータをそれぞれ1つずつ指定してfor文を使用すると、処理が指定した回数分行われる

⚫︎ パラメータをそれぞれ複数指定してfor文を使用すると、どちらかが条件を満たすと処理が終了する

⚫︎ パラメータを省略してfor文を使用すると、処理が無限に行われる

⚫︎ for文の基本的な使い方として下記のような方法がある
・同じ処理を指定した条件まで行う
・オブジェクトのデータを取り出す

⚫︎ for文の応用的な使い方として下記のような方法がある
・繰り返し処理中に条件分岐を行うにはif文を使用する
・繰り返し処理中に多数の条件分岐を行うにはswitch文を使用する
・繰り返し処理を途中で抜けるにはbreakを使用する
・繰り返し処理をスキップをするにはcontinueを使用する

⚫︎ for文は単体だけでなく、多重にして繰り返し処理を行うことができる

⚫︎ 下記のメソッドはfor文と組み合わせて使用すると便利である
・substr()やsubstring()
(文字列の一部を連続で取得することができる)
・replace()
(指定した文字列に連続で置き換えることができる)
・push()やunshift()
(指定した配列に要素を連続で追加することができる)
・shift()やpop()
(指定した配列の要素を連続で削除することができる)
・appendChild()やinsertBefore()
(指定した場所にHTML要素を連続で挿入することができる)

⚫︎ for文だけでなく下記のような方法でも繰り返し処理を行うことができる
・while文
・do-while文
・for-in文
・for-of文
・forEach()

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA