LoginSignup
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@hukuryo(hukuryo)

GitHub APIについて

Last updated at Posted at 2023-01-29

はじめに

現場での開発案件で使用した、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);
    });

結果が以下の通りです。
スクリーンショット 2023-01-29 20.05.07.png

②自分のリポジトリ一覧
ここで使用するエンドポイントとレスポンスで返ってくる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);
        };
    });

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

スクリーンショット 2023-01-29 20.45.04.png
リポジトリ名の一覧を表示することができました。

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?