【JavaScript】１分で理解できる！for文を用いたループ処理

JavaScriptでfor文を利用したループ処理（繰り返し処理）の実装方法を解説します。

ループ処理を記述する方法には、for文の他にwhile文がありますが、利用頻度は圧倒的にfor文の方が高いです。

このページでは、for文の利用方法と構文ルールをサンプルコードを用いながら端的に解説します。

JavaScript初心者であれば押さえておきたい超・基本知識です。是非最後までご覧ください。

ループ処理（繰り返し処理）とは？

ループ処理（繰り返し処理）とは、その名の通り同じ処理を複数回繰り返す処理のことです。

例えば、「こんにちは！」という文字を１００回表示させたい場合。この場合、ループ処理を用いないと「こんにちは！」という処理を１００個記述しなければなりません。

ループ処理を用いることで、複数回必要とする処理も１回の記述で行うことができます。

プログラムの中では、このように同じ処理を複数回繰り返す必要があるシーンがよく登場します。この繰り返し処理をマスターできないと、非常に冗長なわかりづらいコードとなってしまうのです。

ここからは、具体的に繰り返し処理の１つ「for文」の使い方・書き方を解説します。

JavaScript：for文

for (初期値; 条件式; ステップ) {
　　繰り返し処理
}

基本的な構文は、while文と似ていますがforの後の（　）の中が少々複雑です。

以下のサンプルコードをもとに、１つずつ詳しく補足していきます。

See the Pen for① by ビズドットオンライン (@BizOnline) on CodePen.

初期値

初期値は、for文開始時の変数の値です。

以下では、変数「count」の初期値を「１」としています。for文が開始される際に、変数「count」の値は１から始まるということを示しています。

for(count=1; count < 10; count++){
    document.write(count);　
}

既に、変数「count」が何らか別の値を保持していたとしても、for文の開始時に初期値で上書きされます。

See the Pen for② by ビズドットオンライン (@BizOnline) on CodePen.

条件式

条件式は、while文の場合と同様、ループ処理（繰り返し処理）が実行される条件を記述します。

count < 10

この場合は、変数「count」が１０より小さい場合（１から９の場合）に、ループ処理が実行されることになります。

条件式は、for文が開始された直後、一番初めに読み込まるため、もし最初からこの条件式の結果がfalse（条件式が成り立たない）の場合には、ループ処理（繰り返し処理）は一度も実行されません。

ステップ（増減式）

ステップは別名「増減式」とも呼ばれます。

ここには、ループ処理が１回実行された後に、変数「count」の値がどのように変化するかを記述します。

count++

「count++」という記述は、「count = count + 1」と同じです。つまり、値を１増やすということ。

このように記述しておくと、for文の処理が終わるたびに変数「count」の値が１ずつ増えるようになります。

さて、もう一度サンプルコードを見直してみましょう。

See the Pen for① by ビズドットオンライン (@BizOnline) on CodePen.

変数「count」が１から９の間、変数の値が画面に出力されていることが理解いただけるでしょうか。

これが、JavaScriptのfor文です。

for文のメリット

for文はwhile文と違い、無限ループに陥る危険性が非常に低いです。

while文は条件式で利用する変数の増減式を記述しなくても利用できるのにして、for文では必ず増減式が必要となるためです。（増減式を忘れた場合は、構文エラーとなり処理が行われません。）

かならずしも、上記の使い分けだけが正解ではありませんが、できるだけfor文を利用した方がGoodです。

JavaScriptをコーディングする人の中には、while文を嫌う人も一定数存在するのも事実です。

JavaScriptを体系的に学びたい方は

プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。

そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。

各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。

おすすめプログラミングスクールTOP５【現役エンジニア推薦】

プログラミングスキルを習得したい社会人・学生の方へおすすめしたいプログラミングスクールをニーズ別に３つに絞ってご紹介します。本当に未経験からでも実務レベルのスキルはみにつくか？現役エンジニアが口コミや実体験をもとに解説します。

it-biz.online

2022.01.13