【JavaScript】Windows Webプログラミング入門(第4回)ループ処理

Windows PC

こんにちは、プログラマーのふみです。みなさんはコンピューターでプログラミングができますか?

日本の小学校では、2020年度からプログラミング教育の全面実施が始まります。
そこで、JavaScript(ジャバスクリプト/JS)という言語を Windows 10 に標準搭載されているアクセサリの「メモ帳」に記述して使う、超簡単なプログラミングを4回に分けて紹介しています。

過去の記事はこちら:
【JavaScript】Windows Webプログラミング入門(第1回)プログラムの作成と実行
【JavaScript】Windows Webプログラミング入門(第2回)命令の順番
【JavaScript】Windows Webプログラミング入門(第3回)条件分岐

for 命令を使ったプログラム

まずは、「for ~」でループ処理する方法をサンプルプログラムで紹介します。
「for ~」は有名なループ処理の命令です。

次のコードのプログラムを作成して実行してみましょう。

<script type="text/javascript">
var msg = '';
for (var cnt = 1; cnt <= 3; cnt++) {
  msg = msg + 'こんにちは、世界!';
}
window.alert(msg);
</script>
<noscript>
このブラウザはスクリプトが実行しないように制限されています。
</noscript>

このプログラムを実行すると、「こんにちは、世界!」が3つつながったメッセージが表示されます。

「for」の後ろの変数cnt はループカウンターです。1から始まり、1ずつ増えて、3になったときまで「 { ~ } 」の処理が実行されます。(ループを抜けたとき、変数cnt は4になっています。)
for 命令が3回繰り返されるので、変数msg に「こんにちは、世界!」の文字が3回追加され、最後の window.alert メソッドで変数msg の内容がメッセージで表示されます。

テキストの改行

先ほどのプログラムは3つ横につながったメッセージが表示されましたが、長文になるとメッセージが読みづらくなります。
そこで、テキストを改行する方法を紹介します。

次のコードのプログラムを作成して実行してみましょう。

<script type="text/javascript">
var msg;
for (var cnt = 1; cnt <= 3; cnt++) {
  if (cnt === 1) {
    msg = 'こんにちは、世界!'; // 1回目の処理
  } else {
    msg = msg + '\nこんにちは、世界!'; // 2回目以降の処理
  }
}
window.alert(msg);
</script>
<noscript>
このブラウザはスクリプトが実行しないように制限されています。
</noscript>

このプログラムを実行すると、「こんにちは、世界!」が3つ、改行されてメッセージが表示されます。

\n
改行文字列です。
バックスラッシュと「n」の組み合わせですが、環境によってバックスラッシュは円マークで表示されます。

while 命令を使ったプログラム

次は、「while ~」でループ処理する方法をサンプルプログラムで紹介します。

次のコードのプログラムを作成して実行してみましょう。

<script type="text/javascript">
var msg;
cnt = 0;
while (cnt < 3) {
  cnt++;
  if (cnt === 1) {
    msg = 'こんにちは、世界!'; // 1回目の処理
  } else {
    msg = msg + '\nこんにちは、世界!'; // 2回目以降の処理
  }
}
window.alert(msg);
</script>
<noscript>
このブラウザはスクリプトが実行しないように制限されています。
</noscript>

このプログラムを実行すると、「テキストの改行」で紹介したサンプルプログラムと同じ動作をします。
「while」はループを継続する条件で、指定された条件(cnt < 3)に合致しなくなるとループが終了して次の処理に移ります。
このサンプルプログラムでは、変数cnt は0から始まり、1ずつ増えて、2まで「 { ~ } 」の処理が実行されます。cnt = 3 はwhileの条件から外れるので処理しません。
while 命令は条件が前に置かれているので、ループ開始前に条件に合致しない場合、1回もループ処理をしません。

do ~ whileを使ったプログラム

次は、「do ~ while」でループ処理する方法をサンプルプログラムで紹介します。
「do ~ while」も有名なループ処理の命令です。

次のコードのプログラムを作成して実行してみましょう。

<script type="text/javascript">
var msg;
cnt = 0;
do {
  cnt++;
  if (cnt === 1) {
    msg = 'こんにちは、世界!'; // 1回目の処理
  } else {
    msg = msg + '\nこんにちは、世界!'; // 2回目以降の処理
  }
} while (cnt < 3);
window.alert(msg);
</script>
<noscript>
このブラウザはスクリプトが実行しないように制限されています。
</noscript>

このプログラムを実行すると、先ほどのサンプルプログラムと同じ動作をします。
「do」の後ろ、「while」はループを継続する条件で、指定された条件(cnt < 3)に合致しなくなるとループが終了して次の処理に移ります。
「do ~ while」は条件が後ろに置かれているので、ループ開始前に条件に合致しなくても、最低1回のループ処理をします。

テキストに含まれる改行を数える

条件を上手に設定すると、ループカウンターを使わないでループを制御することもできます。

次のコードのプログラムを作成して実行してみましょう。

<script type="text/javascript">
var msg = '';
while ((msg.split('\n')).length <= 2) {
  if (msg === '') {
    msg = 'こんにちは、世界!'; // 1回目の処理
  } else {
    msg = msg + '\nこんにちは、世界!'; // 2回目以降の処理
  }
}
window.alert(msg);
</script>
<noscript>
このブラウザはスクリプトが実行しないように制限されています。
</noscript>

このプログラムを実行すると、先ほどのサンプルプログラムと同じ動作をします。
「msg.split(‘\n’)」は変数msg を改行の数で区切って分割(配列化)しています。
「.length 」は配列の最大値を返すプロパティです。2つを組み合わせる事で、変数msg の改行文字列の数 + 1(変数msg テキストの行数)を返しています。
つまり、ループの継続条件は「変数msg のテキストが2行以下」になっています。
ループの継続条件を変えることによって、同じ動作でもループカウンターを不要にしています。

今回使用したコードについて

split メソッド

構文
str.split( separator[, limit] )

テキスト「str」を配列化するときに使うメソッドです。「separator」に設定した文字で区切って分割、配列化します。
split メソッドで作られる配列の次元は1です。
配列の要素数は「separator」に設定した文字で分割できなかったときは「1」、1回分割できたときは「2」、以降は分割が増える毎に「3, 4, …」と増えていきます。

「limit」は分割してできる配列の要素数の上限を設定できます。無制限に分割するときは省略します。

length プロパティ

構文
Array( length )

配列「 Array 」の要素数を返すプロパティです。
split メソッドで分割した配列を Array に設定すると、split メソッドの「separator」に設定した文字の数+1を返します。

まとめ

  • for 命令は条件が合致している間、処理が繰り返される。
  • while 命令はループ開始前に条件に合致しない場合、1回もループ処理をしない。
  • do ~ while 命令は最低1回、ループ処理をする。
  • 「(str.split(separator)).length – 1」で、テキスト「str」に含まれる特定の文字「separator」の数を取得できる。

おわりに

JavaScriptのwebプログラミング入門はこれで終了です。
第1回~第4回までご理解いただけましたでしょうか。
すべて理解できたあなたは、すでに優秀なプログラマーです。

これまで、命令の順番(逐次処理)、条件分岐ループ処理について説明しました。
JavaScriptだけでなく、多くのプログラムはこの3つの処理の組み合わせで動いています
コンピューター言語によって、記述のしかたが異なるだけです。

オブジェクトの指定等の細かい記述のしかたについては、プログラムを作りながら覚えていけば良いと思います。
コードの記述のしかたがわからない場合、私が学生の頃は書籍で調べるしか方法がありませんでしたが、今はGoogle検索ですぐに調べられます。

JavaScript はワードプレスの記事に組み込むこともできるので、ある程度プログラミングできるようになったら、JavaScript を活用した素敵なwebサイトを作成してみましょう。

ありがとうございました。

他言語のプログラミング入門の記事はこちら:
【VBScript】Windows メモ帳プログラミング入門(第1回)プログラムの作成と実行
【VBScript】Windows メモ帳プログラミング入門(第2回)命令の順番
【VBScript】Windows メモ帳プログラミング入門(第3回)条件分岐
【VBScript】Windows メモ帳プログラミング入門(第4回)ループ処理

コメント

タイトルとURLをコピーしました