JavaScriptでfor文を使ってループ処理する方法【初心者向け】｜現役エンジニアが解説
JavaScriptで【for文】を使ってループ処理する方法を初心者向けに解説した記事です。ループ処理を行えるwhile文との説明。応用編として、for文を配列で使う方法、ジャンプ文 （breakとcontinue）も解説。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptについてプログラミング初心者向けに紹介した記事です。今回は、JavaScriptでfor文を使ってループ処理する方法について解説します。
また、入門向けのJavaScriptを学習サイトも紹介しているので、合わせてご覧ください。
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。
今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
目次
for文とは
for文とは、繰り返し処理を実行するためのJavaScriptの構文です。また、JavaScriptだけでなく、ほとんどのプログラミング言語に実装されている構文でもあります。
田島メンター！繰り返し文やループ処理というのは何でしょうか？
同じような処理を何度も書かないで、1文で繰り返して処理することが出来るんだ。
必要な回数だけ連続して処理してくれるんですか？
そうそう。繰り返し文は他のプログラミング言語でも使うので、覚えておきたいね。では、書き方などを見てみよう！
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」プロパティを使うと自動的に配列の大きさを取得できるので、この指定方法が一番効率が良いのです。
配列と繰り返し文は相性が良いんですか？
配列って[0]や[1]というふうに添え字を増やしていくと値にアクセス出来るよね。単純に増やしていけば良いっていうのは繰り返し文と親和性が高いと言えるよね。
なるほど、そうですね！
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
まとめ
今回はfor文の構文や使い方をご紹介しました。for文は特殊な記法が必要ですので、実際に何度も手を動かして覚えてしまいましょう。
JavaScriptのwindow.openメソッドの使い方も説明しているので、合わせてご覧ください。
執筆してくれたメンター
| 寺谷文宏
Webアプリケーションエンジニアとして数多くのプロジェクトを経験し、 TechAcademyではフロントエンド、Javaコースを担当。 |
TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。
挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
