はじめに
GitHubについて勉強したので、メモとして残していきたいと思います。
GitHub APIとは？
GitHubが提供しているAPIで、GitHubに登録しているユーザーの情報や、そのユーザーのリポジトリの情報など、様々なデータをJSONで取得できるAPIになります。
今回は、取得したリポジトリの一覧を、JavaScriptで画面に表示をしていこうと思います。
リポジトリの情報を取得する
今回は自分が公開をしているGitHubを使用していきます。
以下のURLでAPIを用いて、自分のユーザーデータから、リポジトリ一覧情報を取得することができます。
https://api.github.com/users/GitHubの登録ユーザー名/repos
今回使用するURLはこちらです。hukuryoというユーザーのリポジトリ一覧を取得します。
https://api.github.com/users/hukuryo/repos
表示される画面がこちらです。↓
このように、リポジトリの一覧が取得できました。
色々な情報を取得できていますが、nameというカラムがリポジトリの名前になります。
取得したJSONをHTMLに反映する。
次は、取得したJSONをJavaScriptでHTMLに表示していきたいと思います。コードはこちらです。
script.js
const button = document.getElementById('click');
const type = document.getElementById('type');
button.addEventListener('click', () => {
let 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("div");
newElement.innerHTML = data[i].name;
type.appendChild(newElement);
console.log(data[i].name);
}
});
});
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample</title>
</head>
<body>
<button id='click'>sample</button>
<div><span id='type'></div>
<script src="script.js"></script>
</body>
</html>
そしてこれが実際の画面です。↓
ボタンを押すと...
JSONで取得したデータをHTMLに反映することができました！
GitHub APIには、他にも様々な機能があるので下記のURLから調べてみてください！
https://docs.github.com/ja/rest?apiVersion=2022-11-28
以上になります。