はじめに

GitHubについて勉強したので、メモとして残していきたいと思います。

GitHub APIとは？

GitHubが提供しているAPIで、GitHubに登録しているユーザーの情報や、そのユーザーのリポジトリの情報など、様々なデータをJSONで取得できるAPIになります。
今回は、取得したリポジトリの一覧を、JavaScriptで画面に表示をしていこうと思います。

リポジトリの情報を取得する

今回は自分が公開をしているGitHubを使用していきます。
以下のURLでAPIを用いて、自分のユーザーデータから、リポジトリ一覧情報を取得することができます。

今回使用するURLはこちらです。hukuryoというユーザーのリポジトリ一覧を取得します。

表示される画面がこちらです。↓

このように、リポジトリの一覧が取得できました。
色々な情報を取得できていますが、nameというカラムがリポジトリの名前になります。

取得したJSONをHTMLに反映する。

次は、取得したJSONをJavaScriptでHTMLに表示していきたいと思います。コードはこちらです。

そしてこれが実際の画面です。↓

ボタンを押すと...

JSONで取得したデータをHTMLに反映することができました！
GitHub APIには、他にも様々な機能があるので下記のURLから調べてみてください！
https://docs.github.com/ja/rest?apiVersion=2022-11-28

以上になります。
[cv:issue_marketplace_engineer]