【JavaScript入門】「if」「else if」で条件分岐！簡単おみくじアプリを作ってみよう

条件分岐を行う「if文」を使うと、条件に応じて実行する処理を切り替えることができます。

条件が2つの場合：if と else だけで分岐できます。
条件が3つ以上の場合：else if を使って、複数の条件を設定する必要があります。

この記事では、この else if を使って、簡単なおみくじプログラムを作成していきます。

if文基礎
簡単おみくじの挙動をチェック
コード
コードの解説

if文基礎

おみくじを作る前に、if文の基礎を復習します。
90点以上なら合格、それ以外は不合格と返すコードがこちらです。

if (score >= 90) {
  return '合格';
} else {
  return '不合格';
}

基本もちょっと難しいという方は、こちらのページを先にチェックしてください👇

【JavaScript】if文を使ったサンプルコード

JavaScriptの条件分岐をマスター！ if文、else if、elseの基本がわかるコードサンプル集です。コピペOKなので、初心者の方の学習・復習にぜひご活用ください。

簡単おみくじの挙動をチェック

ボタンを何回かクリックすると結果が変わります

同じ結果が連続して出ることも多いですが、それはたまたま同じ結果が出ただけで、エラーではありません。
3つしか結果がないので、何度も大吉が続いても普通です。そのうち違うものが出ます。

コード

else if を使うと、3つ以上の条件でも分けて処理できます。
それでは、簡単おみくじのコードを見ていきましょう。

<body>
  <button>今日の運勢</button>
  <p></p>
  <script>
    const p = document.querySelector('p');
    const button = document.querySelector('button');

    button.addEventListener('click', function () {
      const num = Math.floor(Math.random() * 3);
      if (num === 0) {
        p.textContent = '大吉';
      } else if (num === 1) {
        p.textContent = '中吉';
      } else {
        p.textContent = '凶';
      }
    });
  </script>
</body>

コードの解説

このコードは、ボタンを押すと「今日の運勢」をランダムに表示する簡単なWebページです。ポイントごとに解説します。

HTML部分

<button>今日の運勢</button>
<p></p>

<button>：ユーザーがクリックするボタン。
<p>：運勢の結果を表示する空の段落。

JavaScript部分

const button = document.querySelector('button');
const p = document.querySelector('p');

ページ内の<button>と<p>を取得して変数に保存しています。

button.addEventListener('click', function () {
  const num = Math.floor(Math.random() * 3);

ボタンがクリックされたときに関数を実行。
Math.random() * 3で0以上3未満のランダムな数を作り、Math.floor()で整数（0, 1, 2）にしています。

Math.random() について詳しく説明しています👇

【JavaScript】Math.random()の使い方｜ランダムな数字を生成する基本をやさしく解説

JavaScript初心者向けに「Math.random()」の使い方をやさしく解説。0以上1未満のランダムな小数の生成から、整数のランダム抽選まで基本を丁寧に紹介。

  if (num === 0) {
    p.textContent = '大吉';
  } else if (num === 1) {
    p.textContent = '中吉';
  } else {
    p.textContent = '凶';
  }
});

0なら「大吉」、1なら「中吉」、2なら「凶」を<p>に表示。

💡ポイント

textContentで文字を置き換えているため、前の結果は消えます。
Math.floor(Math.random() * 3)で0,1,2が同じ確率で出ます。

簡単に言うと、「ボタンを押すとランダムで『大吉・中吉・凶』が表示される」コードです。