はじめに

現場での開発案件で使用した、GitHub APIについて書いていきたいと思います。
以下がGitHub APIのドキュメントになります。
https://docs.github.com/ja/rest?apiVersion=2022-11-28

GitHub APIとは？

このAPIは、GitHub上のデータをJSONで取得することができるAPIになります。
JavaScriptでの実装が一番向いていると思います。

GitHub APIの使用方法

データの取得方法は、GitHub上で指定されているエンドポイントに、ユーザー名などのGitHub上にあるデータを埋め込んで取得します。
例えば...

https://api.github.com/users/hukuryo

取得できるデータ↓

{
  "login": "hukuryo",
  "id": 91451759,
  "node_id": "MDQ6VXNlcjkxNDUxNzU5",
  "avatar_url": "https://avatars.githubusercontent.com/u/91451759?v=4",
  "gravatar_id": "",
  "url": "https://api.github.com/users/hukuryo",
  "html_url": "https://github.com/hukuryo",
  "followers_url": "https://api.github.com/users/hukuryo/followers",
  "following_url": "https://api.github.com/users/hukuryo/following{/other_user}",
  "gists_url": "https://api.github.com/users/hukuryo/gists{/gist_id}",
  "starred_url": "https://api.github.com/users/hukuryo/starred{/owner}{/repo}",
  "subscriptions_url": "https://api.github.com/users/hukuryo/subscriptions",
  "organizations_url": "https://api.github.com/users/hukuryo/orgs",
  "repos_url": "https://api.github.com/users/hukuryo/repos",
  "events_url": "https://api.github.com/users/hukuryo/events{/privacy}",
  "received_events_url": "https://api.github.com/users/hukuryo/received_events",
  "type": "User",
  "site_admin": false,
  "name": null,
  "company": null,
  "blog": "",
  "location": null,
  "email": null,
  "hireable": null,
  "bio": null,
  "twitter_username": null,
  "public_repos": 14,
  "public_gists": 0,
  "followers": 0,
  "following": 0,
  "created_at": "2021-09-27T06:04:09Z",
  "updated_at": "2022-12-15T06:26:44Z"
}

という感じでJSON形式でデータが返ってきます。

JavaScriptでの実装

ここからはGitHub APIの使い方です。
JavaScriptで実装していきます。GitHub APIにはもっとたくさんの機能がありますが、今回はこちらの２つを紹介します。
①ユーザ名の表示
②自分のリポジトリ一覧
を表示するコードを書いていきます。

実装

実装に入ります。コードの説明はソースコード内に記述していきます。
①ユーザ名の表示
ここで使用するエンドポイントとレスポンスで返ってくるJSONは以下です。

エンドポイント

https://api.github.com/users/hukuryo

ユーザー名を格納しているのは、loginというカラムです。

{
  "login": "hukuryo",
  "id": 91451759,
  "node_id": "MDQ6VXNlcjkxNDUxNzU5",
  "avatar_url": "https://avatars.githubusercontent.com/u/91451759?v=4",
  "gravatar_id": "",
  "url": "https://api.github.com/users/hukuryo",
  "html_url": "https://github.com/hukuryo",
  "followers_url": "https://api.github.com/users/hukuryo/followers",
  "following_url": "https://api.github.com/users/hukuryo/following{/other_user}",
  "gists_url": "https://api.github.com/users/hukuryo/gists{/gist_id}",
  "starred_url": "https://api.github.com/users/hukuryo/starred{/owner}{/repo}",
  "subscriptions_url": "https://api.github.com/users/hukuryo/subscriptions",
  "organizations_url": "https://api.github.com/users/hukuryo/orgs",
  "repos_url": "https://api.github.com/users/hukuryo/repos",
  "events_url": "https://api.github.com/users/hukuryo/events{/privacy}",
  "received_events_url": "https://api.github.com/users/hukuryo/received_events",
  "type": "User",
  "site_admin": false,
  "name": null,
  "company": null,
  "blog": "",
  "location": null,
  "email": null,
  "hireable": null,
  "bio": null,
  "twitter_username": null,
  "public_repos": 14,
  "public_gists": 0,
  "followers": 0,
  "following": 0,
  "created_at": "2021-09-27T06:04:09Z",
  "updated_at": "2022-12-15T06:26:44Z"
}

HTMLファイル

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>sample</title>
    </head>
    <body>
    <div><span id='type'></div>
    <script src="main.js"></script>
</body>
</html>

main.js

const type = document.getElementById('type');
const url = 'https://api.github.com/users/hukuryo';
fetch(url)
    .then(response => response.json())
    .then(data => {
        newElement = document.createElement("p");
        newElement.innerHTML = data.login;
        type.appendChild(newElement);
    });

結果が以下の通りです。

②自分のリポジトリ一覧
ここで使用するエンドポイントとレスポンスで返ってくるJSONは以下です。

エンドポイント

https://api.github.com/users/hukuryo/repos

リポジトリ名を格納しているのは、nameというカラムです。

[
  {
    "id": 427581204,
    "node_id": "R_kgDOGXxfFA",
    "name": "-",
    "full_name": "hukuryo/-",
    "private": false,
    "owner": {
      "login": "hukuryo",
      "id": 91451759,
      "node_id": "MDQ6VXNlcjkxNDUxNzU5",
      "avatar_url": "https://avatars.githubusercontent.com/u/91451759?v=4",
      "gravatar_id": "",
      "url": "https://api.github.com/users/hukuryo",
      "html_url": "https://github.com/hukuryo",
      "followers_url": "https://api.github.com/users/hukuryo/followers",
      "following_url": "https://api.github.com/users/hukuryo/following{/other_user}",
      "gists_url": "https://api.github.com/users/hukuryo/gists{/gist_id}",
      "starred_url": "https://api.github.com/users/hukuryo/starred{/owner}{/repo}",
      "subscriptions_url": "https://api.github.com/users/hukuryo/subscriptions",
      "organizations_url": "https://api.github.com/users/hukuryo/orgs",
      "repos_url": "https://api.github.com/users/hukuryo/repos",
      "events_url": "https://api.github.com/users/hukuryo/events{/privacy}",
      "received_events_url": "https://api.github.com/users/hukuryo/received_events",
      "type": "User",
      "site_admin": false
    },
    "html_url": "https://github.com/hukuryo/-",
    "description": null,
    "fork": false,
    "url": "https://api.github.com/repos/hukuryo/-",
    "forks_url": "https://api.github.com/repos/hukuryo/-/forks",
    "keys_url": "https://api.github.com/repos/hukuryo/-/keys{/key_id}",
    "collaborators_url": "https://api.github.com/repos/hukuryo/-/collaborators{/collaborator}",
    "teams_url": "https://api.github.com/repos/hukuryo/-/teams",
    "hooks_url": "https://api.github.com/repos/hukuryo/-/hooks",
    "issue_events_url": "https://api.github.com/repos/hukuryo/-/issues/events{/number}",
    "events_url": "https://api.github.com/repos/hukuryo/-/events",
    "assignees_url": "https://api.github.com/repos/hukuryo/-/assignees{/user}",
    "branches_url": "https://api.github.com/repos/hukuryo/-/branches{/branch}",
    "tags_url": "https://api.github.com/repos/hukuryo/-/tags",
    "blobs_url": "https://api.github.com/repos/hukuryo/-/git/blobs{/sha}",
    "git_tags_url": "https://api.github.com/repos/hukuryo/-/git/tags{/sha}",
    "git_refs_url": "https://api.github.com/repos/hukuryo/-/git/refs{/sha}",
    "trees_url": "https://api.github.com/repos/hukuryo/-/git/trees{/sha}",
    "statuses_url": "https://api.github.com/repos/hukuryo/-/statuses/{sha}",
    "languages_url": "https://api.github.com/repos/hukuryo/-/languages",
    "stargazers_url": "https://api.github.com/repos/hukuryo/-/stargazers",
    "contributors_url": "https://api.github.com/repos/hukuryo/-/contributors",
    "subscribers_url": "https://api.github.com/repos/hukuryo/-/subscribers",
    "subscription_url": "https://api.github.com/repos/hukuryo/-/subscription",
    "commits_url": "https://api.github.com/repos/hukuryo/-/commits{/sha}",
    "git_commits_url": "https://api.github.com/repos/hukuryo/-/git/commits{/sha}",
    "comments_url": "https://api.github.com/repos/hukuryo/-/comments{/number}",
    "issue_comment_url": "https://api.github.com/repos/hukuryo/-/issues/comments{/number}",
    "contents_url": "https://api.github.com/repos/hukuryo/-/contents/{+path}",
    "compare_url": "https://api.github.com/repos/hukuryo/-/compare/{base}...{head}",
    "merges_url": "https://api.github.com/repos/hukuryo/-/merges",
    "archive_url": "https://api.github.com/repos/hukuryo/-/{archive_format}{/ref}",
    "downloads_url": "https://api.github.com/repos/hukuryo/-/downloads",
    "issues_url": "https://api.github.com/repos/hukuryo/-/issues{/number}",
    "pulls_url": "https://api.github.com/repos/hukuryo/-/pulls{/number}",
    "milestones_url": "https://api.github.com/repos/hukuryo/-/milestones{/number}",
    "notifications_url": "https://api.github.com/repos/hukuryo/-/notifications{?since,all,participating}",
    "labels_url": "https://api.github.com/repos/hukuryo/-/labels{/name}",
    "releases_url": "https://api.github.com/repos/hukuryo/-/releases{/id}",
    "deployments_url": "https://api.github.com/repos/hukuryo/-/deployments",
    "created_at": "2021-11-13T05:50:23Z",
    "updated_at": "2021-11-14T02:16:48Z",
    "pushed_at": "2021-11-14T02:16:46Z",
    "git_url": "git://github.com/hukuryo/-.git",
    "ssh_url": "git@github.com:hukuryo/-.git",
    "clone_url": "https://github.com/hukuryo/-.git",
    "svn_url": "https://github.com/hukuryo/-",
    "homepage": null,
    "size": 704,
    "stargazers_count": 0,
    "watchers_count": 0,
    "language": "HTML",
    "has_issues": true,
    "has_projects": true,
    "has_downloads": true,
    "has_wiki": true,
    "has_pages": false,
    "has_discussions": false,
    "forks_count": 0,
    "mirror_url": null,
    "archived": false,
    "disabled": false,
    "open_issues_count": 0,
    "license": null,
    "allow_forking": true,
    "is_template": false,
    "web_commit_signoff_required": false,
    "topics": [

    ],
    "visibility": "public",
    "forks": 0,
    "open_issues": 0,
    "watchers": 0,
    "default_branch": "main"
  }

このようなデータがリポジトリの数の分だけ表示されるが、今回は省略します。

こちらがソースコードになります。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>sample</title>
    </head>
    <body>
    <div><span id='type'></div>
    <script src="main.js"></script>
</body>
</html>

main.js

const type = document.getElementById('type');
const url = 'https://api.github.com/users/hukuryo/repos';
fetch(url)
    .then(response => response.json())
    .then(data => {
        for(let i = 0; i < data.length; i++){
        newElement = document.createElement("p");
        newElement.innerHTML = data[i].name;

        type.appendChild(newElement);
        };
    });

結果はこちらになります。

リポジトリ名の一覧を表示することができました。