【React】GitHub APIを使ってみる

投稿日 7月 2, 2023
著者しんぺー
カテゴリー React

ReactでGitHub APIを使用してみたいと思います。

完成形のイメージ

See the Pen Ajax by shimpei (@shimpei) on CodePen.

CodePenでReactを使用する方法はこちら

概要

Fetch APIを使用して指定したURLからデータを取得します。
取得したデータをReact要素として画面に表示させたいと思います。

コード

HTML

<div id="root"></div>

JSX

const userID = "MICROBE1985";

fetch(`https://api.github.com/users/${encodeURIComponent(userID)}`)
  .then(response => {
    console.log(response.status);
    return response.json();
  })
  .then(userInfo => {
    console.log(userInfo);
    ReactDOM.render(<App userInfo={userInfo} />, document.getElementById("root"));
  });

function App({ userInfo }) {
  return (
    <>
      <h1>GitHub User Info</h1>
      <p><a href="https://api.github.com/users/MICROBE1985" target="_blank">https://api.github.com/users/{userID}</a>ユーザー情報を取得できるGitHub APIが用意されている。</p>
      <div>
        <ol>
          <li>{userInfo.login}</li>
          <li>{userInfo.id}</li>
          <li>{userInfo.node_id}</li>
          <li><img src={userInfo.avatar_url} alt="" width="150" /></li>
          <li>{userInfo.gravatar_id}</li>
          <li>{userInfo.url}</li>
          <li>{userInfo.html_url}</li>
          <li>{userInfo.followers_url}</li>
          <li>{userInfo.following_url}</li>
          <li>{userInfo.gists_url}</li>
          <li>{userInfo.starred_url}</li>
          <li>{userInfo.subscriptions_url}</li>
          <li>{userInfo.organizations_url}</li>
          <li>{userInfo.repos_url}</li>
          <li>{userInfo.events_url}</li>
          <li>{userInfo.received_events_url}</li>
          <li>{userInfo.type}</li>
          <li>{userInfo.site_admin}</li>
          <li>{userInfo.name}</li>
          <li>{userInfo.company}</li>
          <li>{userInfo.blog}</li>
          <li>{userInfo.location}</li>
          <li>{userInfo.email}</li>
          <li>{userInfo.hireable}</li>
          <li>{userInfo.bio}</li>
          <li>{userInfo.twitter_username}</li>
          <li>{userInfo.public_repos}</li>
          <li>{userInfo.public_gists}</li>
          <li>{userInfo.followers}</li>
          <li>{userInfo.following}</li>
          <li>{userInfo.created_at}</li>
          <li>{userInfo.updated_at}</li>
        </ol>
      </div>
    </>
  );
}

解説

const userID = "GitHubユーザーID";

//1.APIリクエストの送信
fetch(`https://api.github.com/users/${encodeURIComponent(userID)}`)
  //2.レスポンスの処理
  .then(response => {
    console.log(response.status);
    return response.json();
  })
  // 3.id="root"の要素に取得したユーザー情報をレンダリング
  .then(userInfo => {
    console.log(userInfo);
    ReactDOM.render(<App userInfo={userInfo} />, document.getElementById("root"));
  });

APIリクエストの送信
- Fetch APIを使用して指定したURLからデータを取得
  encodeURIComponentはユーザーIDがURLに含まれる可能性のある特殊文字をエンコードするために使用しています。
レスポンスの処理
- リクエストが成功した場合の処理。
  responseオブジェクトには、APIからのレスポンスに関する情報が含まれています。
- response.json()は、レスポンスの本文をJSON形式で解析するためのメソッドです。
id=”root”の要素に取得したユーザー情報をレンダリング
- コンポーネントにユーザー情報をpropsとして渡し、id=”root”の要素ににレンダリングします。画面に表示されます。