10分でわかる!ループ(反復処理) -はじめてのプログラミング体験

はじめてのプログラミング体験

これまで基本的な構文と変数条件分岐(if文)基本的な構文と変数関数とプログラミングを体験しましたが、いよいよ最終回です。今回はループ(反復処理)を学びましょう。

ここでの目的は実際のプログラミングを一度経験することです。習得ではないので、プログラミングした気分になって読むだけでも大丈夫です。プログラミングがまったくのはじめてなら「はじめてのプログラミング体験レッスン一覧」から始めましょう。

ループの基礎知識

ループとは同じ処理を何度も繰り返すことで、反復や繰り返しとも言われます。ループには様々な構文がありますが、もっともよく使われるfor文を紹介します。

コーディングを習得するなら構文を覚える必要がありますが、ここではプログラミングを体験することが目的なので、構文紹介は必要最小限にします。

for文

まずは実例を見てみましょう。

for (var i = 0; i < 3; i++) {
    document.write('わん');
}

実行結果

forループ実行結果

「わん」が3回繰り返し表示されます。次に3を5に書き換えてみましょう。

for (var i = 0; i < 5; i++) {
    document.write('わん');
}

実行結果

forループの実行例

「わん」が5回繰り返し表示されます。

for文を構文としてまとめると以下となります。

for ([初期化式]; [条件式]; [加算式]) {
繰り返す処理
}

体系化すると難しく感じますが、for (var i = 0; i < 5; i++) { … } は、変数iを0から5を超えないよう、1ずつ増やしながら … という処理を繰り返すという意味になります。

while文

for文と同様にwhile文もよく利用されます。同じ処理を繰り返す点ではfor文とまったく同じですが、while文は条件式だけを指定して条件を満たす間ずっと処理を繰り返します。

while文はとても重要ですが、正しく使わないと簡単に無限ループを引き起こしています。JavaScriptの場合だとブラウザをクラッシュさせてしまうので、ここではあえて紹介しないことにします(と言いつつも下の項目で少しだけ紹介しています)。

無限ループのサンプル

漫画・アニメ・ドラマで「無限ループ」言葉を一度は目に(耳に)したことがあるのではないでしょうか。無限ループはプログラミングから日常用語になった言葉ですが、本当の(本物の?)無限ループを経験してみましょう。

while文で「わんわんわん」と表示するには以下のように書きます。

var i = 0;
while (i < 3) {
    document.write('わん');
    i++;
}

しかし以下のように i++; をうっかり忘れてしまうだけで、document.write(‘わん’); という処理を無限に繰り返す、つまり無限ループになってしまいます。※ブラウザがフリーズ・クラッシュしてしまう場合があるので実行しないでください。

var i = 0;
while (i < 3) {
    document.write('わん');
}

漫画やアニで描かれる無限ループは極めて特殊な状況で発生することが多いですが、じつは単純な記述ミスで簡単に起こってしまうものだったりします。

ループは身近な存在

基礎的なソースコードではループの重要性がいまいちピンとこないかもしれません。プログラミング教育用アプリによくある「キャラクターの移動」や「映像や音の再生」でもループの重要性はあまり伝わらないかもしれません。というのもループは専門知識が必要なデータベースと合わせてはじめて大活躍する処理だからです。

繰り返しているイメージがわかないかもしれませんが、スマホの画面に並ぶアイコン一覧、Amazonの商品一覧、Googleの検索結果一覧、TwitterやInstagramのタイムライン、LINEアプリのメッセージ画面、受信メール一覧、アドレス一覧などアプリケーションの「一覧表示」は(多くの場合)データベースからデータを取得して、繰り返し表示するというループ処理が使われています。

ループ処理のないアプリはないと言っても良いほどに定番の処理です。

この記事のソースファイルはこちらからダウンロードできます。実際のソースコードを体験してみましょう。

お疲れ様でした。はじめてのプログラミング体験は以上で終了です。プログラミングというものが「謎だらけのブラックボックス」だったり「得体の知れない怖いもの」でなくなったなら幸いです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です