【JavaScript】Windows Webプログラミング入門（第3回）条件分岐

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

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

過去の記事はこちら：
【JavaScript】Windows Webプログラミング入門（第1回）プログラムの作成と実行
 【JavaScript】Windows Webプログラミング入門（第2回）命令の順番

CONTENTS

1 二択で問いかけるメッセージを表示する
2 プログラムは条件を設定して処理を分岐できる
3 まとめ

二択で問いかけるメッセージを表示する

window.alert メソッドには問いかけるメッセージを表示させることができません。
問いかけるメッセージは confirm() メソッドを使います。
次のコードのプログラムを作成して実行してみましょう。

<script type="text/javascript">
window.alert(confirm('「OK」か「キャンセル」を押してください'));
</script>
<noscript>
このブラウザはスクリプトが実行しないように制限されています。
</noscript>

このプログラムを実行すると、メッセージ「「OK」か「キャンセル」を押してください」が表示されると共に、「OK」と「キャンセル」のボタンが表示されます。

「OK」をクリックすると「true」、「キャンセル」をクリックすると「false」が表示されます。

ここで使っている confirm() メソッドは、第1回の講座で使った window.alert メソッドの中に組み込んでいます。
最初の「OK」、「キャンセル」の確認のメッセージは、confirm() メソッドが使われています。
メッセージが表示されたときにクリックしたボタンに応じた値（戻り値）が confirm() メソッドに付加され（confirm() メソッドが文字に置き換わる）、window.alert メソッドで戻り値が表示される仕組みになっています。

後で解説する、変数を使ったコードを参考にすると、この仕組みがよりわかると思います。

プログラムは条件を設定して処理を分岐できる

JavaScript に限らず、コンピューターで使われるプログラムは、条件で分岐するコードがあります。
これは多くのプログラムに共通する処理の一つです。

If構文を使ったプログラム

まずは、「if構文」と呼ばれている「if ～」で処理する方法をサンプルプログラムで紹介します。
if構文は条件分岐の処理の中では非常に有名です。

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

<script type="text/javascript">
if (confirm('あなたは20歳以上ですか？20歳以上はOKをクリックしてください')) {
  window.alert('あなたはお酒が飲める年齢です');
} else {
  window.alert('あなたはお酒が飲めない年齢です');
}
</script>
<noscript>
このブラウザはスクリプトが実行しないように制限されています。
</noscript>

このプログラムを実行すると、メッセージ「あなたは20歳以上ですか？20歳以上はOKをクリックしてください」が表示されると共に「OK」と「キャンセル」のボタンが表示されます。

ここで「OK」をクリックすると、confirm() メソッドが true になります。
すると、if の条件が一致（true）になり、if の次の行のメッセージ表示が実行されます。
その後の処理は else 以降の処理を飛ばして「 } 」の後に移ります。

一方、「キャンセル」をクリックすると、 confirm() メソッドが false になります。
if の条件が不一致（false）になり、else の次の行のメッセージ表示が実行されます。
その後の処理は「 } 」の後に移ります。

2行目と4行目の window.alert メソッドは、条件分岐で処理されている事をわかりやすくするために左側を半角スペース2つ分開けています。

変数の使い方

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

<script type="text/javascript">
var over20 = confirm('あなたは20歳以上ですか？20歳以上はOKをクリックしてください');
var msg
if (over20) {
  msg = '飲める';
} else {
  msg = '飲めない';
}
window.alert('あなたはお酒が' + msg + '年齢です');
</script>
<noscript>
このブラウザはスクリプトが実行しないように制限されています。
</noscript>

このプログラムを実行すると、一つ前のサンプルコードと同じ動作をします。
ここでは変数を使っています。変数とは数値や文字を一時的に保管する要素です。

数学に例えると、方程式に出てくる「x」や「y」のようなものです。
しかし、変数は値を上書きできたり、文字やオブジェクトを代入できるところが、数学の「x」、「y」とは異なります。

var
変数を宣言するコードです。
半角スペースを開けた後の文字が変数として宣言されます。
var は省略可能ですが、グローバル変数が混在するとバグの原因になるので、var による変数宣言はするものと覚えましょう。