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

2020年3月30日システムJavaScript,プログラム入門

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

どうも、UT(@ut_1029)です。

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

プログラミング歴

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

ループ処理の基礎知識

ループ処理について

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

と悩むと思います。

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

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

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

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

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

ループ処理とは

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

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

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

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

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

ループ処理とは

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

for文とwhile文について

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

for文のループ処理

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

for文の構文

for (初期化式; 条件式; 変化式) {
}
  • 初期化式
    • ループ処理をはじめるときに実行する処理
    • 初期化式は最初の1回だけ実行
  • 条件式
    • ループ処理を続ける条件
    • ループ処理が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重ループの処理の流れをイメージしやすくなる

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

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

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

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

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);

サンプルの解説

  • 1行目
    • 配列kukuを宣言
  • 2行目
    • 九九表の行数である9回forでループ
    • 外側のループ
  • 3行目
    • 配列kuku[行数]を追加
    • 九九表の1行追加するイメージ
  • 4行目
    • 九九表の列数である9回forでループ
    • 内側のループ
  • 5行目
    • 配列kuku[行数][列数]を追加
    • 九九表の1列追加するイメージ
  • 6行目
    • 内側ループの閉じタグ
  • 7行目
    • 外側ループの閉じタグ
  • 8行目
    • 配列kukuを出力

サンプルのポイント

  • 配列kukuへ値を格納している「kuku[gyo – 1][retu – 1]」と「- 1」している理由
    • これは変数gyoと変数retuを「0」ではなく「1」から始めているためので
    • 配列の添字は「0」から始まる
    • なので、配列へ値を格納する際にgyoとretuを「- 1」している

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

まとめ:ループの繰り返し処理を理解するコツをわかりやすく解説

今回はプログラミングのループ処理について解説しました。

ループ処理の基礎知識まとめ
  • for文
    • 指定した回数だけ繰り返し処理を行うループ処理
  • while文
    • 条件式が true を返すまで繰り返し処理を行うループ処理

ループ処理は2重ループになると一気に複雑となり難しくなります。

もし2重ループが複雑に感じた際は「最初に作るデータや結果をイメージ」や「表をイメージして処理の流れを理解」してみてください。

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

ループ処理を理解するための練習方法について

ループを理解するには今回紹介した九九表を作成するサンプルのようなをプログラミングを実装すると理解が深まります。

試しにチャレンジしてみてください。

プログラミング学習について

プログラミングは奥が深くすべてを理解することが難しいです💦

なので、プログラミングの基礎を一通り学習してから理解できていなかった内容を深堀して学習すればいいんです。

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

ここまで読んでもらいありがとうございます!

ループとは?プログラミング初心者が悩む繰り返し処理のループについて解説
プログラミング基礎講座

UTの日常では、プログラミングを0から始める方法や基礎知識を解説しています。ぜひ他の記事もご覧ください。

プログラミング未経験から今すぐに始める方法について解説します。なにから始めたらいいのかわかない人は是非ご覧ください。

プログラミング未経験から独学で基礎勉強を始めた人向けに理解するコツやポイントをサンプルコードを使って解説します。

基礎学習ばかりだと勉強に飽きたり身につかなかったりします。プログラミング初心者からステップアップする基礎知識を使ったプログラムのサンプルコードをまとめて紹介します。

UT
UTの日常
UTの日常

1985年生まれ1児の父親です。ブログとか副業で収入を得る手段を模索中であります。(無理しない程度が理想wだから実績が出ないorz)
UTのプロフィール
Amazon欲しいものリスト

2020年3月30日システムJavaScript,プログラム入門

Posted by UT