目次


JavaScript 言語入門, 第 7 回

ループ

Comments

コンテンツシリーズ

このコンテンツは全7シリーズのパート#です: JavaScript 言語入門, 第 7 回

このシリーズの続きに乞うご期待。

このコンテンツはシリーズの一部分です:JavaScript 言語入門, 第 7 回

このシリーズの続きに乞うご期待。

Interactive code: When you see Run at the top of a code sample, you can run the code, check the results, make changes, and run it again.

編集者による注記: このシリーズは、対話式コーディング機能を追加して更新されています。コード・リストに「実行」ボタンがある場合、そのコードを実行して結果を確認し、コードを変更してから再度実行して、その成果を確認できることを意味します。

配列をトピックにしたチュートリアルで説明したように、配列は再利用可能なデータを大量に格納する優れた方法ですが、それは手始めに過ぎません。for ループと while ループによって、これらの配列を繰り返し処理し、それぞれの値にアクセスして、その値を使ってスクリプトを実行することができます。

for ループ

JavaScript 言語で最もよく使用されるタイプのループは、for ループです。for ループは通常、数値が代入される 1 つの変数からなります。その変数を比較演算子と併せて使用して、別の値と比較することによって、最終的に数値がインクリメント/デクリメントされるという仕組みです。通常、for ループ内での比較では、初期変数の数値が別の数値よりも小さいか、大きいかが判断されます。この条件が true である間はループが実行されて、変数がインクリメント/デクリメントされ、条件が false に評価されるまで続きます。

以下のリストに一例として、数値が配列の長さよりも小さい間は実行される for ループをどのようにして作成するのかを示します。この例での for ループは、コンソールにログを 10 回出力します。

Show result

ループ内の最初の部分 (var i = 1) は、ループの開始時に 1 回だけ実行されます。変数 i は、ループの実行回数を追跡するために使用されます。

2 番目の部分 (i <= 10) は、ループ処理が繰り返されるときに、ループ内のコードを実行する前にチェックされます。この文が true であればループ内のコードが実行されます。false であれば、ループが完了します。i <= 10; という文は、ループの実行回数が 10 回以下である間はループを継続することを意味します。

最後の部分 (i++) は、ループが終了するたびに実行されます。この文は、各ループの後に 1 を加えて変数をインクリメントします。i の値が 11 に達すると、console.log(i) 文をもう 1 度実行することなく、ループが終了します。

以下に、for ループを作成して配列を繰り返し処理する例を示します。配列の length プロパティーは、配列の要素の数と等しい値になります。ここでも注意しなければならないのは、配列では ID が 0 から始まることです。したがって、配列に要素が 4 つあるとしたら、length プロパティーは 4 になりますが、配列内の ID は 0、1、2、3 となり、4 という ID はありません。

挑戦!

Try icon「実行」をクリックして、for ループによる配列の繰り返し処理の結果を確かめてください。その後、変数を変更してから、もう一度「実行」をクリックし、その結果を確認してください。

Show result

次の演習では、以下のフォーマットでアスタリスクの行を出力します。
*
**
***
****
このような行を n 回出力します。

挑戦!

Try icon まず、「実行」をクリックして、このままの状態のコードを実行した場合に出力される結果を確かめます。その後、for ループの仕組みを十分に理解するために、コードにいろいろと手を加えてください。

Show result

while ループ

もう 1 つのタイプのループは while ループです。while ループは for ループよりも処理速度に優れていますが、配列を繰り返し処理するのには適していません。while ループが適しているのは、特定の条件が true である限りスクリプトを実行するといった場合です。以下に、数値の変数が 10 より小さい間は実行される while ループの作成方法を示します。

while ループ内のスクリプトには、while ループの条件が false になるまで数値の変数を繰り返し処理する行が含まれていることに注意してください。この行がなければ、無限ループに陥ることになります。

挑戦!

Try icon まず、「実行」をクリックしてループが何回実行されるかを確かめた上で、while ループ内の値を変更して、ループの実行回数がどのように変わるのかを確認してください。

Show result

挑戦!

Try icon「実行」をクリックして、while ループが 0 から「maxNum」までの範囲にあるすべての偶数を出力することを確かめてください。次に、変数を変更してスクリプトを実行すると、その変更がどのように反映されるのかを確認してください。

Show result

まとめ

今回のチュートリアルでは、for ループと while ループを紹介しました。これらのループを使用することで、配列を繰り返し処理し、配列の値にアクセスし、それらの値を使ってスクリプトを実行することができます。JavaScript 言語は、最もよく使用されている言語の 1 つであると言えます。なぜなら、これまでのチュートリアルを通じて理解できたように、この単純ながらも充実したスクリプト言語には、さまざまな可能性があるからです。Web サイトの訪問者が Web ページをロードした後、そのページを操作するためのツールは JavaScript 言語によって提供されることは重要です。皆さんがJavaScript ライブラリーの仕組みを理解し、それらのライブラリーを使用して Web ページのクライアント・サイドのロジックを作成するプロセスを習得する際に、このチュートリアル・シリーズでこれまで学んだ知識が役立つことを願います。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development
ArticleID=1049333
ArticleTitle=JavaScript 言語入門, 第 7 回: ループ
publish-date=09072017