課題3: 公開APIからデータを取得

課題内容

公開されているAPIからJSONデータを取得し、表示してみましょう。
例：天気API、GitHub API など

解答例

GitHub APIを使用した例

GitHubの公開APIを使用して、特定のユーザーの情報とリポジトリを取得して表示します。

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>GitHub API データ取得</title>
</head>
<body>
  <h1>GitHub ユーザー情報</h1>
  
  <div class="search-container">
    <input type="text" id="username-input" class="search-input" placeholder="GitHubユーザー名を入力" value="octocat">
    <button id="search-button" class="search-button">検索</button>
  </div>
  
  <div id="user-container">
    <!-- ユーザー情報がここに表示されます -->
  </div>
  
  <h2>リポジトリ一覧</h2>
  <div id="repos-container" class="repo-grid">
    <!-- リポジトリ情報がここに表示されます -->
  </div>

  <script src="github-api.js"></script>
</body>
</html>

JavaScript (github-api.js)

// DOM要素の取得
const userContainer = document.getElementById('user-container');
const reposContainer = document.getElementById('repos-container');
const usernameInput = document.getElementById('username-input');
const searchButton = document.getElementById('search-button');

// 初期ロード時にデフォルトユーザーを表示
document.addEventListener('DOMContentLoaded', () => {
  const defaultUsername = usernameInput.value || 'octocat';
  fetchGitHubData(defaultUsername);
});

// 検索ボタンのイベントリスナー
searchButton.addEventListener('click', () => {
  const username = usernameInput.value.trim();
  if (username) {
    fetchGitHubData(username);
  } else {
    showError('ユーザー名を入力してください');
  }
});

// Enterキーでも検索できるようにする
usernameInput.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') {
    searchButton.click();
  }
});

// GitHubデータを取得する関数
function fetchGitHubData(username) {
  // 表示をクリアしてローディング表示
  userContainer.innerHTML = '<div class="loading">ユーザー情報を読み込み中...</div>';
  reposContainer.innerHTML = '<div class="loading">リポジトリ情報を読み込み中...</div>';
  
  // ユーザー情報の取得
  fetch(`https://api.github.com/users/${username}`)
    .then(response => {
      if (!response.ok) {
        throw new Error(`ステータスコード ${response.status}: ${response.statusText}`);
      }
      return response.json();
    })
    .then(userData => {
      displayUserInfo(userData);
      
      // ユーザーのリポジトリ情報を取得
      return fetch(`https://api.github.com/users/${username}/repos?sort=updated&per_page=10`);
    })
    .then(response => {
      if (!response.ok) {
        throw new Error(`ステータスコード ${response.status}: ${response.statusText}`);
      }
      return response.json();
    })
    .then(reposData => {
      displayRepos(reposData);
    })
    .catch(error => {
      showError(`データの取得に失敗しました: ${error.message}`);
    });
}

// ユーザー情報を表示する関数
function displayUserInfo(user) {
  userContainer.innerHTML = `
    <header>
      <img src="${user.avatar_url}" alt="${user.login}のアバター" class="avatar">
      <div class="user-info">
        <h2>${user.name || user.login}</h2>
        <p>${user.bio || '自己紹介はありません'}</p>
        <div class="stats">
          <span class="stat-item">フォロワー: ${user.followers}</span>
          <span class="stat-item">フォロー中: ${user.following}</span>
          <span class="stat-item">公開リポジトリ: ${user.public_repos}</span>
        </div>
        <p>
          <a href="${user.html_url}" target="_blank">GitHubプロフィールを見る</a>
          ${user.blog ? ` | <a href="${user.blog}" target="_blank">ブログ/Webサイト</a>` : ''}
        </p>
      </div>
    </header>
  `;
}

// リポジトリ情報を表示する関数
function displayRepos(repos) {
  if (repos.length === 0) {
    reposContainer.innerHTML = '<p>公開リポジトリがありません</p>';
    return;
  }
  
  let reposHTML = '';
  
  repos.forEach(repo => {
    reposHTML += `
      <div class="repo-card">
        <h3><a href="${repo.html_url}" target="_blank">${repo.name}</a></h3>
        <p>${repo.description || '説明はありません'}</p>
        ${repo.language ? `<span class="repo-lang">${repo.language}</span>` : ''}
        <div class="repo-stats">
          <span>⭐ ${repo.stargazers_count}</span>
          <span>🍴 ${repo.forks_count}</span>
          <span>👁️ ${repo.watchers_count}</span>
        </div>
      </div>
    `;
  });
  
  reposContainer.innerHTML = reposHTML;
}

// エラーメッセージを表示する関数
function showError(message) {
  userContainer.innerHTML = `<div class="error">${message}</div>`;
  reposContainer.innerHTML = '';
}

解説

  1. GitHub APIの利用

    GitHub APIは認証なしでも一定回数まで利用できる公開APIです。ユーザー情報とリポジトリ情報を取得するエンドポイントを使用しています。

  2. 複数のAPIリクエスト

    最初にユーザー情報を取得し、その後でそのユーザーのリポジトリ情報を取得する2段階のリクエストを行っています。Promiseチェーンを使って順次処理しています。

  3. ユーザー検索機能

    入力フォームとボタンを使って、任意のGitHubユーザー名で検索できる機能を実装しています。

  4. エラーハンドリング

    APIリクエストが失敗した場合のエラーハンドリングを実装し、ユーザーにわかりやすいエラーメッセージを表示しています。

  5. ローディング表示

    データ取得中にローディングメッセージを表示することで、ユーザーエクスペリエンスを向上させています。

ポイント

← トップページに戻る