ループの繰り返し処理を理解するコツをわかりやすく解説【JavaScript基礎講座】

2020年3月30日2022年12月8日プログラム基礎JavaScript

ループの繰り返し処理を理解するコツをわかりやすく解説【プログラミング初心者の入門講座】

プログラミングの勉強を始めると出会う基本知識のループ処理について解説します。

プログラミング歴

この記事を書いている僕は、プログラミング歴10年以上のプログラマーです。
詳細：プログラミング未経験の新卒が10年間プログラマーとして仕事して思うこと

Contents

1. ループ処理の基礎知識
2. 2重ループについて
- 2.1. 2重ループを理解するコツ
- 2.2. 2重ループのサンプルコード
3. まとめ：ループの繰り返し処理を理解するコツをわかりやすく解説
- 3.1. ループ処理を理解するための練習方法について

ループ処理の基礎知識

ループ処理について

ループ処理の書き方がわかない
2重ループがややこしくて難しい

と悩むと思います。

ループ処理はわかるけど、２重ループになると難しい💦

確かに２重ループはすごく複雑ですよね。

ただ２重ループを使いこなせるようになるとプログラミング技術が飛躍的にアップします。というのも何度も同じプログラムを書かなくて済みます。

ループを自然と使えるようになると短いプログラムコードでプログラミングすることが出来ます！

プログラミングの基礎知識であるループ処理について簡単に解説します。

ループ処理とは

ループ処理とは、同じ処理を繰り返し行うプログラムのことをいいます。

繰り返しするのをループっていうのはなんとなくわかります。

プログラムで繰り返し処理をするループを行うには、「for文」や「while文」を使います。

注意ですが、for文の構文などはプログラミング言語によって違います。

ちなみにループ処理を行うのに「for文」や「while文」以外にもありますが、ここでは基本となるfor文とwhile文を中心に解説をおこないます。

ループ処理とは

ループ処理とは、同じ処理を繰り返し行うプログラムのことをいいます。

for文とwhile文について

プログラムでループ処理を際に使う代表的な「for文」と「while文」について簡単なサンプルを使って解説します。

for文のループ処理

for文は「指定した回数だけ繰り返し処理」を行います。

for文の構文

for (初期化式; 条件式; 変化式) {
}

初期化式
- ループ処理をはじめるときに実行する処理
- 初期化式は最初の１回だけ実行
条件式
- ループ処理を続ける条件
- ループ処理が1週回るたびに判定
変化式
- ループ処理が実行された時に実行する処理
- ループ処理が1週回るたびに実行

for文を使ったサンプル

for (var count = 0; count < 10; count++) {
}

補足

count++のような式をインクリメントといいます。

while文のループ処理

while文は「条件式が true を返すまで繰り返し処理」を行います。

while文の構文

while (条件式) {
}

while文を使ったサンプル

var count = 0;
while (count < 10) {
    count++;
}

forとwhileのどちらを使えばいいの？

ループ処理をプログラミングする際にforとwhileのどちらを使えばいいの？と思います。

ループ処理でforとwhileどちらを使った方がいいの？

プログラムの処理によって向き不向きがありますが、使いやすい方でループ処理をプログラミングすればいいと思います。

ちなみに自分はループ処理でプログラミングする際は「for」をよく使います。

ループ処理とは

for文
- 指定した回数だけ繰り返し処理を行うループ処理
while文
- 条件式が true を返すまで繰り返し処理を行うループ処理

ループ処理のプログラミング例

では、実際にループ処理のプログラミング例をJavaScriptで解説します。

プログラミングは「習うより慣れろ」が重要で、実際にプログラミングすることが近道だったりします。

サンプル：配列をfor文でループする

プログラムで配列をfor文でループする基本的なサンプルコードを解説します。

var gokei = 0;
var hairetu = [10,30,20,54,101];
for (var i = 0; i < hairetu.length; i++) {
    gokei += hairetu[i];
}
console.log("配列の合計は「" + gokei + "」です。");

サンプルの解説

1行目
- 変数gokeiへ数字の0を代入
2行目
- 配列hairetuへ5つの数字を格納
3行目
- hairetuの要素数である5回forでループ
4行目
- hairetuに格納された数字をgokeiへ加算
5行目
- for文の閉じタグ
6行目
- console.logでgokeiの値を出力

配列については前回の記事で紹介しました。
記事：配列とは？プログラミング初心者が悩む配列について解説

2重ループについて

ループ処理で難しいポイントである2重ループについて解説します。

普通のループはわかるけど、2重ループになると難しくなります💦

わかります。2重ループになると途端に値の変化をイメージできなくなります。

2重ループを理解するコツ

2重ループを理解するコツについて紹介します。

作りたいデータをしっかりイメージ

2重ループを理解するコツは「作りたいデータをしっかりイメージする」ことにあります。

2重ループは「作りたいデータ」や「出力する結果」を最初にしっかりイメージすることです。

表をイメージする

2重ループを理解するコツは「表をイメージ」することです。

表ですか？

はい、表です。

表をイメージすると「2重ループの処理の流れ」がイメージしやすくなります。

2重ループの外側
- 表だと行
2重ループの内側
- 表だと列

2重ループを理解するコツ

作りたいデータや出力する結果のイメージをしっかり最初にする
表をイメージすると、2重ループの処理の流れをイメージしやすくなる

2重ループのサンプルコード

では、実際に2重ループのプログラミング例をJavaScriptで解説します。

サンプル：配列へ九九表を格納

２重ループで配列へ九九表を格納するサンプルコードを解説します。

var kuku = [];
for (var gyo = 1; gyo <= 9; gyo++) {
    kuku[gyo - 1] = [];
    for (var retu = 1; retu <= 9; retu++) {
        kuku[gyo - 1][retu - 1] = gyo * retu;
    }
}
console.log(kuku);

サンプルの解説