JavaScript 基礎2

乱数

乱数とは

乱数とは、ランダムに見える数値をプログラム内で生成させるための仕組みです。

規則性がない適当な数字のことを指します。

サイコロをイメージするとわかりやすいかもしれません。

参考

乱数とは|「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

JavaScriptで乱数を使用する

JavaScriptで乱数を生成させるにはMath.random()関数を使用します。

0以上1未満の乱数を生成

let randomNum = Math.random()
console.log(randomNum);

2つの値の間の乱数を生成

以下は1以上7未満の乱数を生成させています。

const max = 7;
const min = 1;

let randomNum = Math.random() * (max - min) + min;
console.log(randomNum);

2つの値の間のランダムな整数を生成

const max = 7;
const min = 1;

let randomNum = Math.floor(Math.random() * max) + min;
console.log(randomNum);

// 0〜7までのランダムな整数を生成する
randomNum = Math.floor(Math.random() * (max + 1));
console.log(randomNum);

繰り返し処理 while

whileとは

whileforと同様にループ処理を行う命令です。

whileは特定の条件がtrue(真)を返す間処理を繰り返します。

let count = 1;

while (count < 11) {
  console.log(count, "回目のループです");
  count++;
}

break 命令

breakは現在のループを強制的に中断させる命令です。

let i;
let sum = 0;
for (i = 1; i < 100; i++)
{
    sum += i;
    if (sum > 1000)
    {
        break;
    }
}

console.log("合計が1000を超えるのは、1〜", i, "を加算したときです"); // 「合計が1000を超えるのは、1〜45を加算したときです」と出力される

無限ループ

無限ループとは、永遠に終了しない(終了条件がtrueにならない)ループのことです。以下のコードは無限ループを起こします。

let count = 1;

while (count < 11) {
  console.log(count, "回目のループです");
}

無限ループは、コンピューターへの極端な負荷の原因です。

アプリだけではなく、コンピューターそのものがフリーズする可能性があります。

そのため、必ず繰り返し処理では、ループを正しく終了する方法を用意します。

ここまでで、無限ループが危険なものと説明をしましたが、プログラミングのテクニックとして意図的に無限ループを用意することがあります。

let inputCommand;

while (true)
{
    inputCommand = prompt("1、2、3のどれかを入力してください。");
    if (inputCommand == "1")
    {
        console.log("1が入力されました");
        break;
    }
    else if (inputCommand == "2")
    {
        console.log("2が入力されました");
        break;
    }
    else if (inputCommand == "3")
    {
        console.log("3が入力されました");
        break;
    }
        console.log("入力が間違っています");
}

上記はユーザーからの入力が正しいものになるまで、入力を求めるプログラムです。

正しい値がユーザーから入力されたループを抜けます。

多次元配列

多次元配列とは

多次元配列とは一次元配列以外の配列のことを指します。

変数は値を入れておく箱です。

配列は複数の変数を1まとまりにしたものです。

変数の箱を横一列に並べた配列を一次元配列といいます。

変数の箱を横と縦に並べた配列を二次元配列といいます。

変数の箱を横と縦に並べ、更に積み重ねたものを三次元配列といいます。

// 二次元配列の場合
let array = [
  ["apple", "orange", "peach"],
  ["orange", "grape", "berry"],
  ["grape", "apple", "orange"]
];

console.log(array[0][1]); // 「orange」と出力される

フローチャート

フローチャートとは|「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

ゲーム プローチャート書き方 | 鶴が語るゲームプランナー話

じゃんけんプログラムをつくってみよう

乱数・繰り返し処理(while/break)・多次元配列を使ってじゃんけんをするプログラムを作成します。

フローチャート

今回作成するプログラムのフローです。

コーディング

今回はJSFiddleを使ってコーディングを行います。

JavaScriptでユーザーの入力を受け付ける手段はいくつか有りますが、今回はprompt()を使用します。

// ユーザーの入力を受け付ける
function getPlayerCommand() {
  let playerCommand;

  while (true) {
    let input = prompt('0〜2の数字のうちどれか1つを入力してください。\n0:グー, 1:チョキ, 2:パー');
    if (input == '0' || input == '1' || input == '2') {
      playerCommand = Number(input);
      break;
    }
  }
  
  return playerCommand;
}

function getNpcCommand() {
  // 0〜2の乱数を生成
  return Math.floor(Math.random() * 3);
}

const Hands = ["グー", "チョキ", "パー"];
const Results = [
  ["引き分け", "あなたの勝ち", "あなたの負け"],
  ["あなたの負け", "引き分け", "あなたの勝ち"],
  ["あなたの勝ち", "あなたの負け", "引き分け"]
];

const playerCommand = getPlayerCommand();
const npcCommand = getNpcCommand();

document.write("<p>あなた:" + Hands[playerCommand] + "</p>");
document.write("<p>相手:" + Hands[npcCommand] + "</p>");
document.write("<p>" + Results[playerCommand][npcCommand] + "</p>");