BUNCHO METHOD コードを楽しむプログラミング情報メディア

【レッスン#5】 「繰り返し処理」を学ぶプログラミング教材

プログラミング教材#5ではfor文を使って同じ作業を繰り返し実行する方法を学びます。繰り返しはプログラミングの重要なポイントです。

プログラミング教材#5の概要

プログラミング教材#5のサンプルコード①

See the Pen 教材#5-1-1 by programmingbird (@programmingbird) on CodePen.

「手動」による繰り返しのサンプル

ボタンを押すと、0〜5までの数字が1マスずつ横に並んだ表(テーブル)が表示されます。

サンプルコード①はプログラミングによる「繰り返し」を使っていない例です。JavaScriptの//「アクション」の設定の部分を見ていただければわかると思いますが、表示したい内容をひたすらコードの中に書き込んであります。

"<table><tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr></table>"

この部分ですね。※ちなみに<table>、<tr>、<td>はそれぞれHTMLタグでテーブル(表)を表示するためのものです。<table>で表全体を、<tr>が表の「1行(横方向)」のまとまりを、<td>が1つずつのマスを意味づけします。

0〜5ぐらいであればこのように「手動」でコードをたくさん書くこともできますが、例えば100回繰り返したいときはなかなかつらそう。規則的な作業の繰り返しこそ、プログラミングで自動化したいものです。これを実現したものが次のサンプルコード②です。

プログラミング教材#5のサンプルコード②

See the Pen 教材#5-2-1 by programmingbird (@programmingbird) on CodePen.

実行結果はサンプルコード①と同じですがテーブルを表示する部分のコードが全く違います。詳しく解説します。

プログラミング教材#5 サンプルコード②の解説

JavaScript //「アクション」の設定

まず最初のvar str = "<table><tr>";ここでstrという変数を用意して中身にテーブルタグの最初の部分(繰り返しに入る前まで)を入れています。このstrに繰り返し処理(詳しくはこのあと解説)を使って必要なタグを自動的に追加していき、最後にstr += "</tr></table>";でタグをきちんと閉じてからoutput.innerHTML = str;で一気に表示させようとしています。

for文による繰り返し処理の基本形

はじめに繰り返し処理を制御するfor文の基本形を押さえておきましょう。

for ( ☆ ; ○ ; △ ) { ◇ }
☆…初期値、○…終了条件、△…増減式、◇…繰り返す処理内容

サンプルコード②の具体例で確認します。まず☆の部分(初期値)はvar i = 0 おなじみのvarで変数iを用意し初期値として0をセットしています。この変数iで繰り返しの回数をカウントしていくことになります。そのためこのような変数をカウンターと呼ぶことがあります。

次に○の部分(終了条件)はi < 6 ちょっと回りくどいですが「iが6未満の間は繰り返しを続けて、そうでなくなったら終了しなさい」という条件になります。

△の部分(増減式)はi++ プログラミング教材#3 変数と演算の基本で出てきた「1増やす」演算子ですね。これは繰り返しを1回やるごとにカウンターを1増やすということを意味します。

ここまでをまとめると、カウンターi=0から繰り返しを初めて1,2,3…と1回繰り返すごとにiを1ずつ増やしていって、i<6じゃなくなったら、すなわちiが6になった時点で終了。つまり、i=0,1,2,3,4,5 と6回繰り返す処理ということです。

そして繰り返す処理内容◇は、サンプルコード②ではstr += "<td>" + i + "</td>";となっています。 +=というのはプログラミング教材#3 変数と演算の基本で出てきた加算代入、つまりstr = str + ○と同じ意味でしたね。ここではfor文の繰り返しが実行されるたびに、strに"<td>" + i + "</td>"を継ぎ足していくイメージになります。HTMLタグは文字列なのでダブルクオーテーション(“)で囲んであります。続く+はこの場合「文字列を結合」するための演算子ですね。iはカウンターとして使っている変数なのでその値がHTMLタグの間にくっつけられることになります。例えばi=1のときであれば<td>1</td>になり、それがstrに継ぎ足されていくわけです。

さて、6回の繰り返しが終了し、そのあとstr += "</tr></table>";でタグがきちんと閉じられたら、それをoutput.innerHTML = str;で画面に表示できました。

サンプルコード①に手動で直接書き込まれていたHTMLタグと、サンプルコード②で繰り返し処理により書き出されたHTMLタグ(最終的にできあがった文字列str)は全く同じものになったわけです。

100回繰り返しも楽勝!

CodePen上でi<6の部分をi<100に上書きして実行してみてください。一瞬で0〜99までの表がずらっと表示されたことと思います。このように、for文による繰り返し処理が使えるようになると、手動では気が遠くなるような表現を一瞬で作り出すことができます。

2重の繰り返し処理に挑戦

プログラミング教材#5のサンプルコード③

See the Pen 教材#5-3 by programmingbird (@programmingbird) on CodePen.

for文を入れ子にして2重の繰り返し

ボタンを押すと、縦横に数字がぎっしり詰まったテーブルが表示されたと思います。ちょうど九九の表を大きく広げたような感じですね。これは、for文を別のfor文で繰り返すことで2重の繰り返し処理をさせた結果です。サンプルコード③のポイントを具体的に見てみましょう。

プログラミング教材#5 サンプルコード③の解説

JavaScript //「アクション」の設定

サンプルコード②から追加・変更されている部分だけをチェックします。

一番のポイントはfor (var j = 0; j < 20; j++) {}という変数jをカウンターとした新しい繰り返しで変数iの繰り返しそのものを囲んでいる点です。「繰り返すことを繰り返す」わけですね。

変数iの繰り返しはサンプルコード②と同じく横方向にマスを追加していくものです(回数は20回になっています)

iのループが終了するとstr += "</tr>";で「行(横方向)」を一度閉じますが、テーブル全体を閉じる</table>はまだ付けずに、jの繰り返しによりまたiの繰り返しをi=0から始めることになります。jの繰り返しも20回繰り返すように書いてあるのでトータルで20行分繰り返し、ようやく最後にstr += "</table>";でテーブル全体を閉じてできあがりです。

尚、各マスに表示される内容はi * jとなっていますね。カウンターの変数iとjの積(かけ算の答え)です。実行結果をよく見て確認してみてください。