繰り返しのfor文を書いてみる

みなさまどうも。いかがお過ごしでしょうか。

続きまして『for文』(ふぉーぶん)というものを使ってみましょう。これはかなり使用頻度が高いです。

『for文』は『繰り返し処理』を行う構文です。これを使うと『console.log()関数』を1万回実行させたりといった暴挙も簡単に行うことができます。(PCに結構負担がかかりますので遊びで実行するときは千回くらいにしておきましょう)

さて、この『for文』ですが、初心者の事故が非常に多い構文です。というのも『for文』の記述を間違えると永遠と処理を続けてしまう処理が簡単に出来上がるからです。プログラミングの世界ではこれを『ループ』といいます。

JavaScriptをローカルで実行させているのであれば、延々と終わらないループ処理を実行させてもみなさんのPCに負担がかかるだけで済みます。しかしそういったJavaScriptが仕込まれたウェブサイトを一般公開してはダメです。それは立派な『ウイルスが仕込まれた悪意あるウェブサイト』になっちゃいますので要注意です。気をつけてくださいね。

さて、では前置きが長くなりましたが『for文』の概要についてみていきましょう。

基本的な構文はこのようになります。

for(var num = 0; num < 10; ++num){
    console.log(num);
}

これで『console.log(num);』が10回実行されます。(0から数え始めているので0～9で10回になります)

なんだかちょっと複雑な感じですね。ではいつもどおり細かく見て行きたいと思います。

まずは『for』と記述してその後に『()』と記述します。

この『()』の中がループをする条件、となっています。ここが慣れないとちょっと難しいです。

『()』の中に注目して『;』ごとに分けて考えていきましょう。『var num = 0』と『num < 10』と『++num』に分かれています。最後の『;』は記述しませんので記述する『;』は2つだけです。

さて最初の『var num = 0』という部分ですが、これは『初期化』と呼ばれる部分になります。

『初期化』は変数の解説の記事でもでてきましたね。要するに『変数に最初に代入する始まりとしての数値』のようなものです。上記の場合は『var num = 0』となっていますので変数『num』の最初の数値は『0』だよー、と宣言しているような感じです。

続いて『num < 10』という部分です。これは変数『num』が『10』以下の場合はループ処理を続けてね、と指示している部分になります。逆に考えると変数『num』が『10』を上回った場合は処理を抜けてね、という指示になります。一般にここの部分は『条件』とか『条件式』とか呼ばれたりしますね。正式名はないっぽいです。

さて最後の『++num』です。これはループ処理を1回行う度に演算される部分です。『++』と記述してありますね、つまり1回処理を行う度に変数『num』の値に『1』を加算しなさい、という指示になります。ここは一般に『更新』もしくは『更新式』、『更新部分』とか言われます。こちらも正式名は恐らくないみたいです。(あったらごめんなさい)

さてじゃあ丸ごと日本語で再確認してみましょう。

「最初に変数『num』に『0』を代入してループ処理1回ごとに変数『num』に『1』を加算して変数『num』が『10』以上になったらループ処理を抜けてね」といった感じです。

さてループ処理で実行させる処理の内容は『{}』の中に記述します。今回は『console.log(num);』と書いてありますね。ここも注目すべきところです。

条件が記述してある『()』の中で使用した変数『num』がそのまま使われています。

条件が記述してある『()』の中で使用した変数をそのまま使用する、という考え方も『for文』を使用するにあたって大切なところになりますね。

では上記のことを踏まえつついつもどおりの応用編です。

配列の数を数える『.length』というのがありましたね。かなり前の記事になってしまいますが覚えてますでしょうか。
※忘れちゃった方はこちら

この『for文』は『.length』と組み合わされる事が多いです。配列の数を数えつつその配列の個数分ループ処理を実行させる、というのはよく使われるアルゴリズムになります。

というわけで書いてみます。

var array = [0, 1, 2, 3, 4, 5];
for(var num = 0; num <= array.length -1 ; ++num){
    console.log(num);
}

こうすると配列の数だけループ処理を行うことができます。

注意すべき点としては前の記事でもありましたが、『.length』は『1』から数え始める、という点があります。今回の『for文』の初期値としては『var num = 0』となっています。つまり『0』から数え始めているので『.length』で取得できる値とは『1』ずれていますね。なので『array.length -1』といった感じで『1』が減算されています。

じゃあ『var num = 1; num <= array.length ; num++』とすればいいんじゃないか、と思うかもしれませんが、配列『array』の中身をみてください。基本的にプログラミングでは『0』から数え始めるのが普通です。初期値を『var num = 1』としてしまうと配列『array』と変数『num』の値が一致しなくなってしまい、逆に面倒くさくなってしまいます。この辺は書いてる内に体感していくかと思います。

今後勉強する内容で『document.getElementsByTagName()』関数というものがあったりします。これはタグの名前でHTML要素を検索して取得するという関数なのですが、その検索結果は配列で返ってきます。

ちょっと難しい構文になってしまうのでここでは紹介しませんが、『document.getElementsByTagName()』関数で取得したHTML要素全てにイベント処理を追加する、といった処理を書く場合などに使用するのが『.length』と組み合わせた『for文』になりますね。これは先の記事で紹介します。

さて『for文』の基本的なところはこんな感じです。『for文』も先の記事でいっぱい出てきます。なので基本だけマスターしたら先の記事に進んで新しい『for文』の使い方をゆっくり学んでいってもらえれば幸いです。

続いての記事では同じく繰り返しの処理を行う『while文』を紹介していきたいと思います。

引き続き頑張っていきましょう。ではー。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

前の記事へ

次の記事へ

Tweet

シェア