繰り返し処理
2014年5月18日:JavaScript
プログラムの基本であるループ処理をJavaScriptでどのように記述するかを紹介します。
for文で指定回数繰り返す
まず、for文について解説します。
for文では、ある指定した数、命令を繰り返すことができます。
例えば、
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>サンプル</title> </head> <body> <h1>1から10の和</h1> <p>1から10の和は <script> S=0; for(n=1;n<=10;n++){ S=S+n; } document.write(S); </script>です。 </p> </body> </html>
とコーディングすれば、
「1から10の和は55です。」
と表示されます。
注目すべきは以下の命令です。
<script> S=0; //Sに0を代入 for(n=1;n<=10;n++){ //n=1からはじめ、ループごとにnに1をたす。nが10以下ならループを続ける S=S+n; //Sにnを加える } document.write(S); //Sの値を出力する </script>
コメントを見れば、だいたい命令の意味がわかるかと思います。
for(A;B;C)では、Aで初期条件を定め、Bでループを継続する条件を決めます。
そして、Cでループごとに行う命令を記述します。
よって、今回の場合、n=1,2,3,…,10とカッコ内の命令
S=S+n;
が繰り返されます。これにより
S=1+2+3+…+10
になり、最終的にSは55となり、
document.write(S);
で値が出力されるというわけです。
whileで条件が満たしている間繰り返す
続いてwhileを使ってforと同じことをやってみましょう。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>サンプル</title> </head> <body> <h1>1から10の和</h1> <p>1から10の和は <script> S=0; n=1; while(n<=10){ S=S+n; n++; } document.write(S); //Sの値を出力する </script>です。 </p> </body> </html>
ここで重要な部分が
<script> S=0; n=1; while(n<=10){ S=S+n; n++; } document.write(S); //Sの値を出力する </script>
です。まず、はじめにSとnにそれぞれ0と1を代入しています。
そして、while文でnが10以下なら繰り返しカッコ内の命令が行われます。
そして、カッコ内では
n++;
により、ループごとにnがインクリメント(1くりあげ)されていきます。
そして、いずれnが11になりループを抜けます。
そのループの間、Sに1,2,3,…,10と値がたされていき、最終的に55となり
document.write(S);
で出力されるという流れになっています。
do-whileで繰り返す
では最後の、同様の操作をdo-whileを使って実現します。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>サンプル</title> </head> <body> <h1>1から10の和</h1> <p>1から10の和は <script> S=0; n=1; do{ S=S+n; n++; }while(n<=10) document.write(S); //Sの値を出力する </script>です。 </p> </body> </html>
これも基本的にwhile文と同じですが、while文と異なり、条件分岐が最後にあります。
まず、doにより括弧内の命令をとりあえず実行します。
そして、カッコ内の命令が終わったらwhile(n<=10)でn<=10ならまたカッコ内の動作を続行します。
最後に
以上でループについての命令の解説を終わります。
どれも基本的には同じことをしており、一つだけですべてを補うことが可能です。
気楽に使ってみてください。
著者:安井 真人(やすい まさと)
@yasui_masatoさんをフォロー