JavaScriptプログラミング入門講座

while文での繰り返し処理

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
while文を使って、特定の条件を満たすまでの間、処理を繰り返し実行する為の方法を解説致します。
講師:
10:37

字幕

このレッスンではJavaScriptで while文を使ったー 繰り返し処理の方法について 解説していきます まずはダウンロードしてきた ファイルの中にある while.html こちらをエディタで開いておいてください そしてこれがそのファイルを エディタで開いた状態です このファイルは html の中の body タグの中に スクリプトタグを書いており この部分に JavaScript を書いていくことが できる状態となっています このファイルを使って 今回のwhile文についての 解説をやっていきたいと思います それではレッスンを始めて行きましょう while文はJavaScript繰り返し処理を 実行したい時に利用していきます それでは実際にどのように書いていくか やっていきたいと思います まずはこの部分を削除します そしてまずはwhileと書きます そして () {} ; そしてこの{}の間は このように一行改行を入れておきましょう ちなみにこの最後の{}の後の;ですが つけてもつけなくても どちらでも大丈夫です 一般的にはつけない方が多いですが このレッスンではわかりやすいように つけておくことにします そしてこのwhileの後のこの括弧の中に 繰り返すための条件を入力していきます この条件ですが 例えばこのように書きます i<=10 このように書くことで変数 i の値が 10以下の間の時にだけ ここの波括弧の間に書いた繰り返し処理を 実行するといった意味になります となりますと ここの変数 i がこの while 文の始まる前に 先に定義しておく必要がありますね こちらに定義しておきましょう var i = 0; このように書くことでこの i の初期値が 0となっていますね そしてwhile文でこのiが10以下の場合 繰り返しの処理が走る といった状態になります さて次にこちらの繰り返す処理について この{}の間に書いていきます ここではサンプルとしてこのように書きます document.writeln(); そしてここに変数 i を入れておきましょう そしてブラウザで見た時に 分かりやすいように +”” そしてhtmlの改行タグも 連結しておきましょう これでこのwhile文の中に書いたこの処理が iが10以下の時に繰り返し 実行されるという形になります そして最後にもう1つ 大切な記述を書いておきます それは繰り返しのたびにこの変数 i に 1ずつ加算していくという処理です それはこのように書きます 変数 i そして++; こうすることによって この while 文の中で繰り返しが 発生するたびに i に1ずつ加算していく といった状態になります これを書くことによって i が10以下の場合を満たす時にだけ これが実行されるので 要するに0から始まって10以下なので 合計11回処理が繰り返されることになります ちなみにこれを書かないと 大変なことになります 例えばこういう状態です もし先ほどのi++を書かないでいると この変数 i はいつまでたっても 値が0のままです ということはこの while 文の中の 繰り返す条件 i が10以下の時に繰り返す となっているので iがずっと0の状態だと ずっとこの処理が 繰り返されることになります この状態でブラウザで確認してしまいますと ブラウザがその処理に耐えられなくなって 固まって落ちてしまいますので 注意が必要です ですので必ず ここには i++と書いておきましょう それではこの状態でファイルを保存して ブラウザで確認してみたいと思います このhtmlのファイルをブラウザで開きます するとこのように0から始まって 10まで数値が表示されていますね 0から10なので 合計11回繰り返されたことになります それではエディタに戻ります ちなみにもしこの変数 i の 初期値が20だった場合 どうなるでしょう この場合はこのwhile文の中に書いてある 繰り返しの条件 i が10以下の時に当てはまらないので 一回の実行されることはありません 一度この状態で保存して ブラウザで確認してみましょう このファイルをブラウザで開きます するとこのように何も表示されていませんね i が20で 繰り返す条件が i が10以下でしたので 何も処理は実行されなかった という形になります それではエディタに戻ります さてこのwhile文ですが 実はもう1つ種類があります それはdo-whileという書き方です 一度試しに書いてみましょう ここにまずはdoと書きます そして{} そしてwhile(); そしてこの{}はこのように 一行間を空けておきましょう この{}の間には繰り返し処理を 実行したいプログラム そしてwhileの後のこちらの括弧の中には 繰り返すための条件を書くわけです さてこのdo-while文 こちらにも上に書いたこのwhile文と 同じような内容を書いてみましょう こちらの繰り返し実行したい処理を doの間に貼り付けます そしてこのwhileの繰り返す条件の中に こちらの条件をコピーして こちらに貼り付けておきましょう ここまで書いたところで このwhile文と こちらのdo-while文の違いについて 説明したいと思います 今この変数 i の値が20ですね 20ですのでこちらの上のwhile文は この繰り返す条件ー i が10以下の時に処理を繰り返す という風になっているので 条件に満たずに何も実行されませんでした ところがこちらのdo-while文 こちらは上記のwhile文と 条件は全く同じなのですが こちらのdo-while文に関しては まず1回実行した後で このwhileの繰り返す条件と照らし合わせて それに合致するようであれば再度繰り返す 合致しないようであれば そこで処理は終了という形になります 要するにwhile文と do-while文の違いというのは do-while文は必ず一回は 実行するという形になっています それでは一度この状態でブラウザで 確認してみたいと思います まずはファイルを保存しておきます そしてこのhtmlファイルを ブラウザで開きます するとこのように20と出てきましたね それではエディタに戻ります このように今 変数 i の値が20ですので 上のwhile文は条件を満たさずに 何も処理は実行されませんでしたが こちらのdo-while文に関しては 条件は満たさないものの 初めの一回は必ず実行する というような形になっていたので この変数 i の値が一番初めにだけ実行されて ブラウザに出力されたという 状態になっています この2つの違いについても しっかりと覚えておきましょう 以上でレッスンは終了です 今回はJavaScriptでwhile文を使った 繰り返し処理の方法について 解説いたしました プログラミングの中で繰り返し処理は 利用する機会が多いので 別のレッスンで紹介している 同じ繰り返し処理のfor文とあわせて しっかりとマスターしておきましょう

JavaScriptプログラミング入門講座

このコースではプログラミングを学んだことのない方でもわかるように、JavaScriptの基礎について順を追ってひとつひとつ解説していきます。またコースの後半ではHTMLの要素を書き換える方法や、指定した時間に処理を実行するタイマーの使い方などについても学びます。このコースを見てJavaScriptを使った動きのあるWebサイトを製作してみましょう!

5時間18分 (37 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年02月25日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。