【JavaScript入門】for文の使用方法「業務で使えるサンプル有」

どうも、カメ助(@kamesuke_blog)です。

プログラミング言語JavaScriptのfor文を使った繰り返し処理について、ITエンジニアの筆者が初心者向けに丁寧に解説します

本記事を読めば、JavaScript for文の書き方・使い方について理解できます。

for文のサンプルコードを用意しましたのでご自由にお使いください。

最後には理解度テストがありますので、全問正解してJavaScriptのfor文マスターになりましょう!!

目次

for文を使用したサンプル

はじめに、「for文がどのようなものか?」イメージを掴んでもらうために基本的なサンプルコードを2つ用意しましたのでご覧ください。

基本:配列の中身を順番に出力する

配列の中身の値を出力するプログラムです。最も基本的なfor文の使用例なので覚えておきましょう。

九九の計算を行う

九九の計算(1×1~9×9)を行うプログラムです。

以上、for文を使ったサンプルでした。ここからは、for文の基本的な書き方について解説していきます。

for文の基本的な書き方

for 文を書くときの書式は次の通りです。Javaなどの他プログラミング言語も基本的には同じです。

実際にプログラムでは以下のように記述します。

こちらについて、詳しく解説します。

①:初期化式

繰り返し処理用のカウンタ変数を初期化します。for文の最初に一度だけ実行されます。この初期化は省略可能ですが、特別な理由がない場合は省略しない方がいいです。

記述例

最初は「let i = 0」と覚えておきましょう。 

カウンタ変数「i」を定義し、その初期値を「0」にすることを意味しています。 

②:条件式

繰り返し処理の条件式を記述します。ループ前に評価され、結果が真(true)の場合に、波括弧{…}内の処理④が実行されます。条件式が省略された場合は、常に真(true)になります。(無限ループになるので注意!!)

記述例

i < 10」と記述することで、カウンタ変数「i」が10未満の間、繰り返し処理を行います。 

③:加算式

ループの前に実行される式で、カウンタ変数の加算を行います。この式も省略可能ですが、その場合は波括弧{…}内の処理④で変数の加算処理などを記述する必要があります。

記述例

i++:カウンタ変数を+1する。 

i = i + 2:カウンタ変数を+2する。(1つ飛ばしで繰り返し処理をする) 

条件式に使用する比較演算子

for文の条件式に使用する比較演算子の一覧です。for文を使用する際に確認することが多いと思うので記載しておきます。

演算子意味備考
>より大きい
>=以上
<より小さい
<=以下アロー関数「=>」と間違えないように注意
==等しいデータ型については比較対象外
!=等しくないデータ型については比較対象外
===値が等しい、かつデータ型も等しい
!==値が等しくない、またはデータ型が異なる
比較演算子一覧
カメ助

「=>」はアロー関数という別のものを指すので注意しましょう!

for文のサンプルコード

for文を使用したサンプルコードを5つ用意しました。

サンプル1:0~4の数字を順に出力

出力結果

加算式に「i++」を指定しているので、繰り返し処理毎にカウンタ変数「i」を+1し、「i」の値を出力します。

サンプル2:配列のデータをすべて出力

出力結果

条件式に「lists.length」を使っています。これは配列の要素数を取得するメソッドで、今回の場合は「i < 3」と同じ意味になります。

あとは、加算式に「i++」を指定しているので、繰り返し処理毎にカウンタ変数「i」を+1し、lists[ i ]で順番に配列のデータを出力します。

サンプル3:0~10の数字の内、偶数のみ出力

出力結果

加算式に「i=i+2」を指定しているので、繰り返し処理毎にカウンタ変数「i」を+2します。

そのため、0、0+2=2、2+2=4、4+2=6、・・・と偶数のみ出力します。

サンプル4:0~4を数字の大きい順に出力

出力結果

初期化式でi=4を指定し、加算式に「i–」を指定しているので、繰り返し処理毎にカウンタ変数「i」を-1します。そのため、4、4-1=3、3-1=2、2-1=1、・・・と大きい数字から順に出力します。

理解度テスト

難易度Debut★

問題:次のソースコードの「XXX」の部分を埋めて、「0~10」までを順番にコンソールへ出力するプログラムを完成させてください。

カメ助

ヒント!:サンプル1を参考に初期値、条件式、加算式を記述しよう!

[expander_maker id=”1″ more=”答え” less=”答えを隠す”]
[/expander_maker]

難易度Regular★★

問題:次のソースコードの「XXX」の部分を埋めて、配列(lists)の要素をすべてコンソールへ出力するプログラムを完成させてください。

カメ助

ヒント!:サンプル2を参考に初期値、条件式、加算式を記述しよう!

[expander_maker id=”1″ more=”答え” less=”答えを隠す”]
[/expander_maker]

難易度Pro★★★

問題:「10~100」までを順番にコンソールへ出力するプログラムを作成してください。なお、数値は「10, 20, 30,…, 100」と出力させて下さい。

[expander_maker id=”1″ more=”答え” less=”答えを隠す”]
[/expander_maker]

難易度Master★★★★

問題:以下のソースコードと出力結果が同じになるように、配列とfor文を使用したプログラムを作成してください。

[expander_maker id=”1″ more=”答え” less=”答えを隠す”]
[/expander_maker]

難易度Master+★★★★★

問題:「0~100」までの数値を順番に要素に持つ配列を作成し、その配列の全要素をコンソールへ出力するプログラムを作成してください。

[expander_maker id=”1″ more=”答え” less=”答えを隠す”]
[/expander_maker]

まとめ

最後に、これまで学習してきたfor文の使い方をまとめておきます。

まずは基本的なfor文による繰り返し処理をおさらいしましょう!

for()の引数に初期化式「let i = 0」、条件式「i < 10」、加算式「i++」をそれぞれ設定することでループ処理を実現しています。

同様に、配列の各要素を1つずつ繰り返し処理することも簡単です。

ポイントは、条件式に配列の要素数を取得するメソッドである「lists.length」を利用している点です。

これにより、配列の各要素をすべて1つずつ処理できます。

今回は以上で終了です。お疲れさまでした!

おまけ:for文のメリットは?

for文を使うメリットは、プログラムのソースコード量を少なくできることです。for文を使用しなくても、処理する回数分だけソースコードを記述すれば同じことが実現可能ですが、数百回、数千回の繰り返し処理を行う場合には現実的ではありません。

また、一般的にソースコード量が大きくなるとバグ(不具合)が発生しやすくなります。

さらに、実際の業務では、ソースコードを修正する場合がよくあります。その際に、ソースコード量が少ない(修正箇所が少ない)ほうが修正漏れを防ぎやすいです。

カメ助

for文を積極的に使用し、ソースコード量を少なくするように心がけよう!!

こちらはjavascriptのサンプルコードが豊富なのでオススメの1冊です。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

この記事を書いた人

大阪でITエンジニアしています。(8年目に突入)
趣味でウェブサイトに関することをいろいろと勉強しています。

勉強した内容やプログラミングに関する情報を中心に役立つ情報を発信するべく日々ブログを更新しています。

3度の飯よりも「柿の種」をこよなく愛する関西人。

コメント

コメント一覧 (8件)

コメントする

目次
閉じる