markdown

はじめに (対象読者・この記事でわかること)

この記事は、プログラミング初心者や JavaScript の基礎を学び始めた方を対象にしています。
配列に格納された複数の生徒データ（名前と得点）から、for 文だけを使って最高得点者の名前を取り出す方法が具体的に理解できるようになります。

背景として、教材や小規模なウェブアプリで「点数が一番高い人」をリアルタイムに表示したいケースが多く、複雑なライブラリを使わずにシンプルに実装できるテクニックは、コードの可読性と保守性を高めるうえで非常に有用です。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。

  • HTML と JavaScript の基本的な書き方が分かること
  • 変数、配列、オブジェクトの扱いに慣れていること

概要と背景

JavaScript では、配列の走査に for ループが最も古典的な手段です。Array.prototype.reduce や Array.prototype.find といった高階関数を使えば同様の処理は一行で書けますが、学習初期段階では基礎的な構文を自力で組み立てることが重要です。

本稿では、次のポイントを中心に解説します。

  1. データ構造の決定 – 生徒情報をオブジェクトの配列で管理する理由
  2. 変数の初期化 – 最高得点と最高得点者名を保持する変数の扱い方
  3. for 文での走査ロジック – 条件分岐と変数更新の実装手順
  4. 結果の出力 – コンソールや HTML に表示させる方法

これらを段階的に実装すれば、「配列と for 文だけで最高得点者を特定できる」という最小限のコードが完成します。コードを読むだけでなく、実際に手を動かしながら挙動を確認することで、ループ処理全体の流れが自然に身につくでしょう。

実装ステップとコード解説

本セクションでは、実際に手を動かしながらコードを書いていく手順を詳述します。各ステップにサンプルコードと期待される出力を併記し、途中で遭遇しやすいエラーや注意点も合わせて解説します。

ステップ1：データの用意と変数の初期化

まずは生徒データをオブジェクトの配列として定義します。次に、最高得点と最高得点者名を保持する変数を -Infinity と空文字で初期化しておきます。

Js

// 生徒データ（名前と得点のペア）
const students = [
    { name: "山田太郎",   score: 78 },
    { name: "鈴木花子",   score: 92 },
    { name: "佐藤次郎",   score: 85 },
    { name: "高橋三郎",   score: 92 }, // 同点があるケース
    { name: "伊藤四季",   score: 67 }
];

// 最高得点とそのときの名前を格納する変数
let highestScore = -Infinity;   // どんな正の数よりも小さい初期値
let topStudent   = "";          // 空文字で初期化

ポイント解説

  • -Infinity を使うと、配列内の任意の数値と比較した際に必ず更新が走ります。0 から始めると負の得点がある場合に正しく動作しません。
  • 名前を空文字にしておくことで、後続の if 文で topStudent がまだ設定されていないか判定できます。

ステップ2：for 文で配列を走査し、最高得点者を判定

次に for ループで配列全体を走査します。各要素（生徒オブジェクト）に対して、現在の score が highestScore より大きいかどうかを比較し、条件を満たしたら変数を更新します。

Js

for (let i = 0; i < students.length; i++) {
    const student = students[i]; // 現在の要素を取得

    // 最高得点より大きい場合は更新
    if (student.score > highestScore) {
        highestScore = student.score; // 新しい最高得点を記録
        topStudent   = student.name; // 最高得点者の名前を記録
    }
}

ポイント解説

  • students[i] で取得したオブジェクトは const で宣言しても問題ありません。変更しない限り再代入は起きませんが、参照自体はループ毎に新しい変数に格納しています。
  • if (student.score > highestScore) の比較は「厳密に大きい」ことだけを評価します。そのため、同点が発生した場合は 最初に出てきた 生徒が残ります。同点処理を変えたい場合は別途ロジックを追加します（例：配列に全員の名前を格納する、または最新のものを上書きするなど）。

ステップ3：結果の出力

走査が終わったら、コンソールや HTML に結果を表示します。ここではシンプルに console.log と、実際にブラウザで見るための DOM 操作の 2 パターンを示します。

Js

// コンソールへの出力
console.log(`最高得点は ${highestScore} 点、最高得点者は ${topStudent} さんです。`);

// HTML への出力（任意の要素に表示）
document.getElementById('result').textContent = 
    `最高得点は ${highestScore} 点、最高得点者は ${topStudent} さんです。`;

HTML 例 html <div id="result"></div>

ハマった点やエラー解決

1. students[i] が undefined になるケース

  • 原因：for ループの上限条件を i <= students.length と書いてしまうと、最後のイテレーションで i が配列長に達し、students[students.length] が undefined になる。
  • 解決策：上限は必ず i < students.length と書く。

2. 最高得点が負の数の場合に正しく更新されない

  • 原因：初期値を 0 にしていると、全ての得点が負の場合に if (score > 0) が常に偽になる。
  • 解決策：初期値を -Infinity に変更する（上記コード参照）。

3. 同点が出たときに「全員」名前を取得したい

  • 原因：単純な > 比較では同点の後続要素は無視される。
  • 解決策：配列 topStudents を用意し、>= 比較で同点時は名前を追加するロジックに変更する。
Js

let highestScore = -Infinity;
let topStudents  = [];

for (let i = 0; i < students.length; i++) {
    const s = students[i];
    if (s.score > highestScore) {
        highestScore = s.score;
        topStudents  = [s.name];        // 新しい最高得点 → 配列リセット
    } else if (s.score === highestScore) {
        topStudents.push(s.name);       // 同点 → 配列に追加
    }
}
console.log(`最高得点は ${highestScore} 点、最高得点者は ${topStudents.join('、')} さんです。`);

解決策まとめ

  • 上限条件は必ず < を使用し、インデックスエラーを防ぐ。
  • 初期値は -Infinity にして、負のスコアでも対応可能にする。
  • 同点処理が必要な場合は配列 を活用し、>= または === で条件分岐を拡張する。

まとめ

本記事では、JavaScript の for 文だけを用いて、配列に入った生徒データから最高得点者の名前を抽出する一連の手順 を解説しました。

  • 配列とオブジェクトでデータを整理し、highestScore と topStudent を初期化
  • for ループで全要素を走査し、条件分岐で最高得点と名前を更新
  • 結果をコンソールや HTML に出力し、実際の UI へ反映
  • エラー原因（インデックス範囲、負のスコア、同点処理）とその対策を提示

この手法をマスターすれば、シンプルかつ可読性の高いコードで「トップスコア」ロジックを実装できるようになります。次のステップとして、reduce や filter といった高階関数で同様の処理を行う方法や、非同期データ取得（fetch API）と組み合わせた実装にも挑戦してみましょう。

参考資料

```