初心者による初心者のためのゲームアプリ作成 12

JavaScript 条件分岐

ゲームをしていると選択肢に応じてその後のシナリオが変化するということがよくあると思います。先のように条件に応じてその後、行われる処理を振り分けることを条件分岐といいます。これは、ゲームアプリを作成するうえで欠かすことのできない仕組みです。以下、記述したいと思います。



if文

JavaScriptで条件分岐の仕組みを作るには、ifという命令を使います。if文を使うといろいろな条件によって異なる実行することができます。

if文の書き方は、

if(条件式) {

条件が正しい場合に実行する処理

} else {

条件が正しくない場合に実行する処理

}

ある条件を指定して、その条件が正しかった場合と正しくなかった場合とで、処理を2方向に分岐します。else以降は省略が可能なので、正しくなかった場合は何もしないということにすることもできます。

if文で条件を指定するための「条件式」は、比較演算子という記号を使います。ある2つの値に対して、「等しい・等しくない・小さい・大きい・以下・以上」のうちいずれかの比較を行います。

比較演算子の種類と例

演算子 内容                 条件式の例   結果

==  左辺と右辺が等しい場合は正しい。   1 == 1   正しい

!=  左辺と右辺が等しくない場合は正しい。 1 != 2   正しい

<   左辺が右辺より小さい場合は正しい。  1 < 1    正しくない

<=  左辺が右辺以下の場合は正しい。    1 <= 1   正しい

>   左辺が右辺より大きい場合は正しい。  1 > 1    正しくない

>=  左辺が右辺以上の場合は正しい。    1 >= 1   正しい

この複数ある演算子の中でよく使うのは、2つの値が等しいかどうかを判定する「==」演算子です。イコール記号を2つ繋げて書きます。

では、実践してみましょうか。Monacaにログインし、最小限のテンプレートのプロジェクトを開き、index.htmlを下記のように編集してください。

<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>
<meta http-equiv=”Content-Security-Policy” content=”default-src * data: gap: content: https://ssl.gstatic.com; style-src * ‘unsafe-inline’; script-src * ‘unsafe-inline’ ‘unsafe-eval'”>
<script src=”components/loader.js”></script>
<link rel=”stylesheet” href=”components/loader.css”>
<link rel=”stylesheet” href=”css/style.css”>
<script>
//日付に関する命令を使えるようにする
var date = new Date();
//年、月、日の取得
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
//日本の表記に書き換える
var today = year + “年” + month + “月” + day + “日”;
document.writeln(today);

//曜日を取得
var weekday = date.getDay();
if(weekday == 0) {
document.writeln(“<br>今日は日曜日です。”);
} else {
document.writeln(“<br>今日は日曜日ではありません。”);
}
</script>
</head>
<body>
<br />

</body>
</html>

編集するのは<script></script>タグの中だけです。編集したら、保存をクリックして、プレビュー画面で確認してください。今日は「日曜日」でしたでしょうか。

それでは、ソースコードの説明をします。今日の曜日を取得するには、DateのgetDayという命令を使います。この命令は、曜日を数値に置き換えた結果を取得します。getDayが取得する値は、

曜日       数値

日曜日      0

月曜日      1

火曜日      2

水曜日      3

木曜日      4

金曜日      5

土曜日      6       となります。

Monacaの画面のindex.htmlファイルで説明すると、ソースコードの23行目のif文、if(weekday == 0) で、今日の曜日を表す数値と、日曜日を表す数値「0」が等しいかどうかを比較しています。もし、日曜日であれば等しいので、if文の下の「今日は日曜日です。」というメッセージを表示する処理を行います。もし、違う曜日であれば、等しくないという比較結果になるので、else文の下の「今日は日曜日ではありません。」が表示されます。

これだけだと、日曜日かどうかだけしか判定できなく、つまらないので、次回は、曜日ごとに異なるメッセージが表示できるようにするために、多方向分岐について記述したいと思います。


スポンサーリンク







シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク