JavaScriptでサッカーの試合データを取得して表示する

サッカーの試合情報をWebページに表示する場合、APIからデータを取得してJavaScriptで加工する方法が便利です。

今回は、サッカーの試合データを取得して、チーム名・試合日時・ステータスなどを一覧表示する基本的な方法を紹介します。

1. APIからデータを取得する

JavaScriptのfetch()を使うと、HTTP APIからJSONデータを取得できます。

async function getMatches() {
  const response = await fetch("https://example.com/api/matches");

  if (!response.ok) {
    throw new Error(`HTTP error: ${response.status}`);
  }

  const data = await response.json();

  console.log(data);
}

getMatches();

実際のアプリケーションでは、利用するサッカーAPIのエンドポイントに置き換えます。

2. 試合データを確認する

APIから次のようなJSONが返ってくるとします。

{
  "matches": [
    {
      "homeTeam": "Team A",
      "awayTeam": "Team B",
      "date": "2026-10-05",
      "time": "19:00",
      "status": "Scheduled"
    }
  ]
}

JavaScriptでは、それぞれの値を簡単に取得できます。

const match = data.matches[0];

console.log(match.homeTeam);
console.log(match.awayTeam);
console.log(match.date);
console.log(match.status);

3. 試合一覧をHTMLに表示する

取得したデータをHTMLへ追加してみます。

function renderMatches(matches) {
  const container = document.querySelector("#matches");

  container.innerHTML = "";

  matches.forEach(match => {
    const element = document.createElement("div");

    element.innerHTML = `
      <h3>${match.homeTeam} vs ${match.awayTeam}</h3>
      <p>${match.date} ${match.time}</p>
      <span>${match.status}</span>
    `;

    container.appendChild(element);
  });
}

HTML側には表示用の要素を用意します。

<div id="matches"></div>

4. 今日の試合だけ表示する

日付を比較すれば、特定の日の試合だけを表示することもできます。

const today = new Date().toISOString().slice(0, 10);

const todayMatches = data.matches.filter(match => {
  return match.date === today;
});

renderMatches(todayMatches);

これによって、APIから取得した試合データを日付ごとに整理できます。

5. エラー処理を追加する

APIを利用する場合は、通信エラーやデータ取得エラーへの対応も重要です。

async function loadMatches() {
  try {
    const response = await fetch("https://example.com/api/matches");

    if (!response.ok) {
      throw new Error("Failed to fetch match data");
    }

    const data = await response.json();

    renderMatches(data.matches);
  } catch (error) {
    console.error(error);

    document.querySelector("#matches").textContent =
      "試合データを取得できませんでした。";
  }
}

loadMatches();

ユーザーにエラー状態を分かりやすく表示しておくと、Webアプリケーションの使いやすさも向上します。

参考

サッカー関連のWebサービスを実装する際のUIや情報構成の参考として、以下のサイトも確認できます。

6. 追加できる機能

基本的な試合一覧が完成したら、さらに次のような機能を追加できます。

• リーグ別のフィルタリング
• チーム名検索
• 試合日による検索
• 試合ステー