JavaScriptでfor文を使ってループ処理する方法【初心者向け】｜現役エンジニアが解説

JavaScriptについてプログラミング初心者向けに紹介した記事です。今回は、JavaScriptでfor文を使ってループ処理する方法について解説します。

また、入門向けのJavaScriptを学習サイトも紹介しているので、合わせてご覧ください。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。
 

今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

目次

• for文とは
• for文の構文
• for文を使って実際にプログラムを書いてみよう
• まとめ

for文とは

for文とは、繰り返し処理を実行するためのJavaScriptの構文です。また、JavaScriptだけでなく、ほとんどのプログラミング言語に実装されている構文でもあります。

 

 

[PR] コーディングで副業する方法とは

for文の構文

for文の正式な構文は以下の通りです。

for ([初期化式]; [条件式]; [加算式])

セミコロンで区切られた3つのブロックで構成されています。もっと具体的に解説すると、以下のように記述できます。

 for ( カウンタ変数定義と初期化 ; 繰り返し回数の指定 ; カウンタ加算幅 ){
   // 実際に実行する処理
 }

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

１．カウンタ変数定義と初期化

for文は、処理中に「今、何回目の繰り返し処理中か」をカウントするための変数定義が必要です。そのため、3つあるブロックの1つめで、まず変数定義と初期化処理をします。

Javaなどの他プログラミング言語もこのような定義方法になっており、i=0で初期化するのが慣例ですので、覚えてしまいましょう。忘れてしまっても、構文を見ながらプログラミングすれば大丈夫です。

２．繰り返し回数の指定

プログラミングする時には、この部分に注意しましょう。何回繰り返し処理をしたいのか、この部分で指定します。

３．カウンタ加算幅

i++と記述することで、カウンタを1ずつ加算するという意味になります。「i = i + 2 」と記載することで、処理を一つスキップしながら繰り返し処理をする、といった操作も可能です。

慣れない方は、常に「i++」と記述しておけば間違いありません。

for文を使って実際にプログラムを書いてみよう

今回は、2つのサンプルプログラムをご紹介します。

１．カウンタを利用した基本的なプログラム

JavaScript

 for (let i = 0; i < 3; i++) {
   console.log("現在" + (i+1) + "回目の処理です。");
 }

実行結果

現在1回目の処理です。
現在2回目の処理です。
現在3回目の処理です。

この例では、for文中の処理部分で、カウンタ変数をプログラミングに利用可能なことがわかると思います。カウンタは0から始まるため、今回は( i + 1 )の形で処理しました。

２．配列を利用したプログラム

JavaScript

 let fruits = ["apple", "orange", "melon"]; // 長さが３の配列

 for (let i = 0; i < fruits.length; i++) {
   console.log( fruits[i] );
 }

実行結果

apple
orange
melon

配列は、fruits[0]のような形で、インデックスに整数を指定して値を出力することができます。for文は、カウンタiを0から1ずつ加算するため、配列の値を全て出力するプログラムに最適化されています。

また、2つ目のブロックで fruits.length の形で繰り返し回数を指定しています。これも決まった形ですので、覚えてしまうと良いでしょう。

このように指定する理由は、配列は fruits[5] のように、本来の長さを超えるインデックス値を指定した場合にエラーになってしまうためです。

もちろん i < 3 と指定しても動作はするのですが、配列の「length」プロパティを使うと自動的に配列の大きさを取得できるので、この指定方法が一番効率が良いのです。

 

まとめ

今回はfor文の構文や使い方をご紹介しました。for文は特殊な記法が必要ですので、実際に何度も手を動かして覚えてしまいましょう。

 

JavaScriptのwindow.openメソッドの使い方も説明しているので、合わせてご覧ください。

 

執筆してくれたメンター

寺谷文宏 Webアプリケーションエンジニアとして数多くのプロジェクトを経験し、 フロントエンドからサーバーサイドまで総合的な開発を得意としています。 TechAcademyではフロントエンド、Javaコースを担当。

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。