Nagashima Laboratory

おみくじ（JavaScript）

クリックイベントと条件分岐を使って、おみくじを作ります

キーワード：イベント（click）、条件分岐（if/else）

作成例（完成イメージ）

下記の順番で進めます。

  1. HTMLでボタンをつくる
  2. JavaScriptを使って条件を設定をする（イベント + 条件分岐）
  3. CSSでUIを整える

【準備】フォルダ：javascript_fortune

①JavaScriptを書くための準備で作成したフォルダ（空のHTML、CSS、JavaScriptが入っている）を準備します。GitHubからもダウンロードできます。

②フォルダの名前を「javascript_fortune」に変更します

HTMLの準備

まず、コンテンツ部分を用意します。

▼index.html

  <header>
    <h1>Fortune Slip</h1>
  </header>
  <main>
    <button id="drawButton" type="button">おみくじを引く</button>
    <h2 id="resultDisplay">？？？</h2>
  </main>

id="resultDisplay" の部分に結果が表示されます。文言は適宜変更してください。

次にボタンをクリックしたときに、文字が書き換わる仕組みを作ります。

定数を宣言をする（定数を決める）

▼script.js

const drawButton = document.querySelector('#drawButton');
const resultDisplay = document.querySelector('#resultDisplay');

constの後ろに書かれているのが、定数の名前（箱につけるラベル）です。

操作するボタンと結果を表示するテキスト部分をそれぞれ定数に挿入しています。

イベントの設定（動作のきっかけを作る）

addEventListener()を使って、動作を引き起こすためのきっかけを設定します。きっかけにあたるものを「イベント」と言います。

click は クリックしたときに動作するイベントです。

▼script.js

const drawButton = document.querySelector('#drawButton');
const resultDisplay = document.querySelector('#resultDisplay');

// ボタンがクリックされたら、動作させる
drawButton.addEventListener('click', () => {
  //動作を記述
});

文字を書き換える

ボタンをクリックしたときに文字が書き換わる仕組みを作ります。

▼script.js

drawButton.addEventListener('click', () => {
  resultDisplay.textContent = '大吉';
});

ボタンを押すと「大吉」と表示されます。このままだと大吉しか出ませんので、中吉や吉など、他の結果も表示されるように変更します。

ランダムで結果が表示されるようにする

ランダムで結果を表示させたいときは、Math.random()を使います。

▼script.js

drawButton.addEventListener('click', () => {

    // 0から1未満のランダムな数字を生成する
    const randomNumber = Math.random();
    console.log(randomNumber); // コンソールに表示（確認用）

  resultDisplay.textContent = '大吉';
});

Math.random()は、0から1未満の乱数（ランダムな数字）を生成します。コンソールを表示して、ランダムな数字が生成される様子を確認してください。

ランダムな数字によって分岐させる（条件分岐）

値の内容によって、実行するコードを変えたいときには、条件分岐を使います。JavaScriptでは if を使って「条件に当てはまるときには○○○、当てはまらないときには△△△」という設定を行います。この構文は if文 といいます。else を使うと、条件に当てはまらないときの動作を定義できます。

ifのあとに、もう一度条件を追加したいときはelse ifを使います。

▼script.js

    // 0から1未満のランダムな数字を生成する
    const randomNumber = Math.random();

    console.log(randomNumber); // ランダムな数字をコンソールに表示する（確認用）

    // 0.3 未満だったら
    if (randomNumber < 0.3) {
        resultDisplay.textContent = '大吉';

    // 0.8 未満だったら
    } else if (randomNumber < 0.8) {
        resultDisplay.textContent = '中吉';

    // どちらでもない場合
    } else {
        resultDisplay.textContent = '吉';
    }

【応用例】UIを整える

このままだとおみくじとしては簡素なので、CSSでUIを整えます。下記はCSSでのカスタマイズ例です。

【応用例】分岐を増やす

おみくじには、大吉・中吉・吉以外にも結果がありますので、else if で条件を増やして、様々な結果が出るようにします。

【応用例】結果に応じて色を変える

大吉のときは、背景の色を変えるなど、結果によって演出を変えることもできます。

下記はbodyにクラスを追加する例です。

cssでこのクラスに応じた設定をかけば、結果に合わせて色が変わるなどの処理ができます。

▼script.js

// 中略

    // 既存のクラスを削除
    document.body.classList.remove('daikichi', 'chukichi', 'kichi');

    if (randomNumber < 0.3) {
        resultDisplay.textContent = '大吉';
        document.body.classList.add('daikichi');

// 中略

参考書籍・リンク