【ISSUE】GitHub APIでユーザーの情報をJSONで取得し、画面に表示する

0

2024年12月23日 8:40

はじめに

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

GitHub APIとは?

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

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

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

img

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

img

表示される画面がこちらです。↓
スクリーンショット 2023-01-22 9.14.18.png

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

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

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

img

img

そしてこれが実際の画面です。↓
スクリーンショット 2023-01-22 9.18.18.png

ボタンを押すと...

スクリーンショット 2023-01-22 9.19.25.png

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

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

0

診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。