はじめに

現場での開発案件で使用した、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上にあるデータを埋め込んで取得します。
例えば...

取得できるデータ↓

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

JavaScriptでの実装

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

実装

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

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

HTMLファイル


結果が以下の通りです。

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

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

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

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

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

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