【JavaScript】得点から合否を判定して合格者を表示する

JavaScriptを使った「データの処理と結果の表示」のコードをご紹介します。
具体的には、90点以上のスコアを持つ人を合格と判定し、その名前をリストとして出力する機能を持っています。
動作を確認するため、次に示すコードをコピー＆ペーストして実行してください。

コード
コードの概要
1. JavaScript処理の詳細
2. 処理結果
あわせて読みたい

コード

<body>
  <h1>合格者リスト</h1>
  <ul></ul>
  <script>
    const persons = [
      { name: '佐藤', score: 92 },
      { name: '鈴木', score: 84 },
      { name: '田中', score: 96 },
      { name: '高橋', score: 78 },
      { name: '伊藤', score: 90 },
    ];

    const ul = document.querySelector('ul');

    const passedPersons = [];

    for (person of persons) {
      if (person.score >= 90) {
        passedPersons.push(person.name);
      }
    }

    for (passedPerson of passedPersons) {
      const newLi = document.createElement('li');
      newLi.textContent = passedPerson;
      ul.append(newLi);
    }
  </script>
</body>

90点以上の3人の名前が表示されました。
点数を変更したら、表示される名前が変わることを確認してみましょう。

コードの概要

このコードは、JavaScriptで定義された人物とその点数のデータを処理し、特定の合格基準（90点以上）を満たした人の名前だけを抽出し、それをHTMLのリスト (<ul>) としてページに動的に表示するものです。

JavaScript処理の詳細

1. データ定義と要素の取得

const persons = [
  { name: '佐藤', score: 92 },
  { name: '鈴木', score: 84 },
  { name: '田中', score: 96 },
  { name: '高橋', score: 78 },
  { name: '伊藤', score: 90 },
];

const ul = document.querySelector('ul');

const passedPersons = [];

persons配列:
const persons = [...] では、受験者データがオブジェクトの配列として定義されています。各オブジェクトはname（名前）とscore（点数）というプロパティを持ちます。これは、処理すべき元データとなります。
ul要素の取得:
const ul = document.querySelector('ul'); によって、HTML内の空のリスト要素 (<ul>) を取得し、変数ulに格納しています。これは、後で合格者の名前を表示するための「器」となります。
passedPersons配列:
const passedPersons = []; で、合格者の名前を格納するための空の配列を初期化しています。

2. 合格者の抽出（1回目のループ処理）

for (person of persons) {
  if (person.score >= 90) {
    passedPersons.push(person.name);
  }
}

この最初のfor...ofループは、定義されたpersons配列の要素（各受験者のオブジェクト）を一つずつ取り出し、条件判定を行うために使われています。
条件判定:
if (person.score >= 90) が合格基準です。オブジェクトのscoreプロパティが90点以上であるかをチェックしています。
名前の抽出と格納:
条件がtrue（90点以上）の場合、passedPersons.push(person.name); が実行され、その受験者の名前（nameプロパティの値）だけをpassedPersons配列に追加しています。
このループの結果、passedPersons配列には ['佐藤', '田中', '伊藤'] が格納されます。

3. 合格者リストの動的生成と表示（2回目のループ処理）

for (passedPerson of passedPersons) {
  const newLi = document.createElement('li');
  newLi.textContent = passedPerson;
  ul.append(newLi);
}

この2回目のfor...ofループは、抽出されたpassedPersons配列の要素（合格者の名前）を一つずつ取り出して処理するために使われています。
要素の生成:
const newLi = document.createElement('li'); によって、HTMLのリストアイテム要素 (<li>) を新しく作成しています。
内容の設定:
newLi.textContent = passedPerson; で、作成した<li>要素のテキスト内容を、現在の合格者の名前に設定しています。
要素の追加（DOM操作）:
ul.append(newLi); によって、取得しておいた<ul>要素の中に、新しく作成し内容を設定した<li>要素を追加しています。

処理結果

このJavaScriptコードが実行されると、HTMLの<ul></ul>タグの中に以下の内容が動的に挿入され、ブラウザに表示されます。

<ul>
  <li>佐藤</li>
  <li>田中</li>
  <li>伊藤</li>
</ul>

コード