こんにちは、プログラマーのふみです。みなさんはコンピューターでプログラミングができますか？
日本の小学校では、2020年度からプログラミング教育の全面実施が始まります。
そこで、JavaScript（ジャバスクリプト／JS）という言語を Windows 10 に標準搭載されているアクセサリの「メモ帳」に記述して使う、超簡単なプログラミングを4回に分けて紹介しています。
過去の記事はこちら：
【JavaScript】Windows Webプログラミング入門（第1回）プログラムの作成と実行
【JavaScript】Windows Webプログラミング入門（第2回）命令の順番
【JavaScript】Windows Webプログラミング入門（第3回）条件分岐
CONTENTS
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回）ループ処理
コメント