【初心者向け】javascript練習問題(サイコロ・おみくじ編)

※本サイトはアフィリエイトリンクを掲載しています。
javascript
2023.07.28

問題1 : サイコロ

問題1 : サイコロを振った結果を出力させるコードを実装してください。

画面イメージ

結果：

 

ソースコード解答例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>サイコロ</title>
  </head>
  <body>
    <div><button id="saikoroBtn">サイコロを振る</button></div>
    <div>結果：<span id="saikoro_result"></span></div>
  </body>
  <script>
    $(function() {
      $("#saikoroBtn").click(function() {
        let resultArray = ['1','2','3','4','5','6'];
        let random = Math.floor( Math.random() * resultArray.length );
        $("#saikoro_result").html(resultArray[random]);
      });
    });
  </script>
</html>

 

1～6のランダム整数をMath.random() * 6で生成できます。

 

問題2 : おみくじ

問題2 : 大吉・吉・中吉・小吉・凶・大凶が入っている、おみくじを作成してください。
           それぞれ「結果(大吉など)」「恋愛」「旅行」「仕事」の占い内容を表示してください。
画面イメージ

おみくじ
結果 恋愛 旅行 仕事

 


ソースコード解答例

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>Game</title>
  </head>
  <body>
    <div>おみくじ</div>
    <div><button id="omikuziBtn">おみくじを引く</button></div>
    <table>
      <tr>
        <th>結果</th>
        <th>恋愛</th>
        <th>旅行</th>
        <th>仕事</th>
      </tr>
      <tr>
        <td id="name"></td>
        <td id="love"></td>
        <td id="travel"></td>
        <td id="work"></td>
      </tr>
    </table>
  </body>
  <script>
    $(function() {
      $("#omikuziBtn").click(function() {
        let resultArray = [
          {
             name : '大吉',
             love : '運命の人に出会う',
             travel : '東方面がよい',
             work : '出世する',
          },
          {
             name : '吉',
             love : 'モテ期',
             travel : '東方面がよい',
             work : '大きな仕事を任される',
          },
          {
             name : '吉',
             love : '告白すると良い',
             travel : '西方面がよい',
             work : '新しいことを始めると良い',
          },
          {
             name : '中吉',
             love : 'たくさん出会う',
             travel : '南方面がよい',
             work : '謙虚に頑張ると良い',
          },
          {
             name : '中吉',
             love : 'いい人に出会うが興味を持たれない',
             travel : '南方面がよい',
             work : 'まずまず良い',
          },
          {
             name : '中吉',
             love : '探せば気が合う人に出会う',
             travel : '北がよい',
             work : 'そこそこ良い',
          },
          {
             name : '小吉',
             love : '可もなく不可もなく',
             travel : '北方面がよい',
             work : '現状維持の一年',
          },
          {
             name : '末吉',
             love : 'イメージチェンジをするとよい',
             travel : '海沿いが良い',
             work : '忙しくなる',
          },
          {
             name : '凶',
             love : '上手くいかない',
             travel : 'あったかい所が良い',
             work : '上司と喧嘩する',
          },
          {
             name : '大凶',
             love : '今年はおとなしくしたほうが良い',
             travel : 'いかないほうが良い',
             work : '部下に嫌われる',
          },
        ];
        let random = Math.floor( Math.random() * resultArray.length );
        let keys = Object.keys(resultArray[random]);
        for (i=0; i<keys.length; i++) {
          $("#"+keys[i]).html(resultArray[random][keys[i]]);
        }
      });
    });
  </script>
</html>

 

連想配列でおみくじの内容を定義しています。
テーブルに出力するとき、ループごとに連想配列のkeyを指定して値を取得しています。

 

良くない例①

ランダム整数を生成している所の最大値を固定数値にしてしまう

let random = Math.floor( Math.random() * 4 );

この場合は、仮におみくじの項目に「金運」を追加したくなった場合に、固定値4を変更しなくてはいけません。

固定値ではなくresultArray.lengthとしておけば、配列の変数定義を変更するだけで良いです。

 

良くない例②

おみくじ結果表示を項目ごとに指定してしまう

$("#name").html(resultArray[random].name);
$("#love").html(resultArray[random].love);
$("#travel").html(resultArray[random].travel);
$("#work").html(resultArray[random].work);

こちらも同様に、例えば「金運」という項目が増えた場合に

上記の表示箇所のロジックを追加する必要があります。

下記のようにすれば、項目が増えてもロジックを変更する必要はありません。

for (i=0; i<keys.length; i++) {
  $("#"+keys[i]).html(resultArray[random][keys[i]]);
}

変更が必要なのは連想配列で変数定義している箇所だけです。

 

想定通り動作することに加えて、汎用的に作成できるか。の視点があるとより良いです。
今回の場合は、項目追加の変更があっても変数定義を変えるだけで良いように配慮しました。
ロジックを変更することは、ありません。

 

独学が難しい場合

現場レベルで通用するエンジニアを目指していて、プログラミングスクールを検討している方はRUNTEQがオススメです。

コメント