JavaScript学習中の者です。
備忘録として学んだことを書いておきます。
今回は基礎編ということで、クイズを1問だけ解くだけのアプリにします。
次回応用編を書きますが、そちらは4問解き続ける仕様で作る予定です。

1. HTMLファイルの編集

HTMLファイルを用意するには、こちらのサイトが便利です。
トップページのダウンロードボタンを押して、ダウンロードしたデータのうち「index.html」だけ使用します。
HTML5 Boilerplate

index.html

<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta property="og:title" content="">
  <meta property="og:type" content="">
  <meta property="og:url" content="">
  <meta property="og:image" content="">

  <link rel="manifest" href="site.webmanifest">
  <link rel="apple-touch-icon" href="icon.png">
  <!-- Place favicon.ico in the root directory -->

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">


  <meta name="theme-color" content="#fafafa">
</head>

<body>

  <div class="container">

    <div class="jumbotron mt-5">
      <div class="d-flex justify-content-center">
        <div id="js-question" class="alert alert-primary" role="alert">
          A simple primary alert—check it out!
        </div>
      </div>

      <div id="js-items" class="d-flex justify-content-center">
        <div class="m-2">
          <button type="button" id="js-btn-1" class="btn btn-primary">Primary</button>
        </div>
        <div class="m-2">
          <button type="button" id="js-btn-2" class="btn btn-primary">Primary</button>
        </div>
        <div class="m-2">
          <button type="button" id="js-btn-3" class="btn btn-primary">Primary</button>
        </div>
        <div class="m-2">
          <button type="button" id="js-btn-4" class="btn btn-primary">Primary</button>
        </div>
      </div>
    </div>
  </div>

  <script src="app.js"></script>
</body>

</html>

ここからはJSファイルを編集していきます。

2. JSファイルの編集

app.js

// (1) まずは問題文、選択肢、答えのプロパティを定義する
const question = '赤い果物は次のうちどれでしょう？';
const answers = [
  'メロン',
  'レモン',
  'バナナ',
  'りんご'
];
const correct = 'りんご';

// (2) HTMLで記述した文言を上で定義した問題文に上書きする。
document.getElementById('js-question').textContent = question;

// (3) HTMLで記述したボタン上のテキストを、上で定義した選択肢に上書きする。
document.getElementsByTagName('button')[0].textContent = answers[0];
document.getElementsByTagName('button')[1].textContent = answers[1];
document.getElementsByTagName('button')[2].textContent = answers[2];
document.getElementsByTagName('button')[3].textContent = answers[3];


// (4) ボタンをクリックした時に正解、不正解を表示させる関数を作る。
// まず、ボタンを表しているのはdocument.getElementsByTagName('button')であることを忘れないこと。
// 正解・不正解をif-elseで表現する。
// $button[0].textContentはあとでe.targetに置き換えることも可能。
// 1個目のボタンにIventListenerを追加する。
document.getElementsByTagName('button')[0].addEventListener('click', () => {
  if(correct === document.getElementsByTagName('button')[0].textContent  ) {
    window.alert('正解!');
  }
  else {
    window.alert('不正解...');
  }
})
// 2個目のボタンにIventListenerを追加する。
document.getElementsByTagName('button')[1].addEventListener('click', () => {
  if(correct === document.getElementsByTagName('button')[1].textContent ) {
    window.alert('正解!');
  }
  else {
    window.alert('不正解...');
  }
})
// 3個目のボタンにIventListenerを追加する。
document.getElementsByTagName('button')[2].addEventListener('click', () => {
  if(correct === document.getElementsByTagName('button')[2].textContent  ) {
    window.alert('正解!');
  }
  else {
    window.alert('不正解...');
  }
})
// 4個目のボタンにIventListenerを追加する。
document.getElementsByTagName('button')[3].addEventListener('click', () => {
  if(correct === document.getElementsByTagName('button')[3].textContent  ) {
    window.alert('正解!');
  }
  else {
    window.alert('不正解...');
  }
})

この時点で、クリックした時にこのように「正解!」「不正解...」のアラートが表示されるようになりました。

3. リファクタリング

これだけでも間違っているわけではないですが、同じようなコードを繰り返している箇所は変数に格納してスッキリさせた方が良いです（リファクタリング）。

app.js

const question = '赤い果物は次のうちどれでしょう？';
const answers = [
  'メロン',
  'レモン',
  'バナナ',
  'りんご'
];
const correct = 'りんご';

document.getElementById('js-question').textContent = question;

// document.getElementsByTagName('button')[0].textContent = answers[0];
// document.getElementsByTagName('button')[1].textContent = answers[1];
// document.getElementsByTagName('button')[2].textContent = answers[2];
// document.getElementsByTagName('button')[3].textContent = answers[3];

// (5) 上の記述に関して、繰り返しているのをすっきりさせるために変数$buttonに格納
const $button = document.getElementsByTagName('button');

$button[0].textContent = answers[0];
$button[1].textContent = answers[1];
$button[2].textContent = answers[2];
$button[3].textContent = answers[3];

// (6) clickした時にfunction e を実行するようにアロー関数で記述する。
// (7) $button[0].textContentをe.targetに置き換えることができる。
// 1個目のボタン
$button[0].addEventListener('click', (e) => {
  if(correct === e.target ) {
    window.alert('正解!');
  }
  else {
    window.alert('不正解...');
  }
})
// 2個目のボタン
$button[1].addEventListener('click', (e) => {
  if(correct === e.target ) {
    window.alert('正解!');
  }
  else {
    window.alert('不正解...');
  }
})
// 3個目のボタン
$button[2].addEventListener('click', (e) => {
  if(correct === e.target ) {
    window.alert('正解!');
  }
  else {
    window.alert('不正解...');
  }
})
// 4個目のボタン
$button[3].addEventListener('click', (e) => {
  if(correct === e.target ) {
    window.alert('正解!');
  }
  else {
    window.alert('不正解...');
  }
})

【JavaScript】クイズアプリを作ってみよう（基礎編）

1. HTMLファイルの編集

2. JSファイルの編集

3. リファクタリング