GitHub REST APIでユーザー検索アプリをJavaScriptで実装しよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、GitHUB REST APIを使って、ユーザー検索アプリを作成します。

demoは「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

CSS版

ページ(HTML)の作成

最初にページを作成しましょう。

このHTMLをブラウザ上で表示すると以下のようになります。

このHTMLですが、axiosも導入しています。GETリクエストをAPIに送るためです。

これは「cdnjs」というサイトから取得しています。

以前は、JavaScriptのfetchでリクエストを送っていましたが、axiosの方が使いやすいですね。

スタイル(CSS)を装飾

次にスタイルを記述しましょう。

ここまで実装すると以下のようになります。

JavaScriptの実装

今回、やることは以下の3つです。

ユーザー検索機能 1. AxiosでGitHubユーザー情報を取得
2. プロフィールカードを作成
3. リポジトリ情報をカードに追加

AxiosでGitHubユーザー情報を取得

GitHubのユーザー情報を取得できるエンドポイントは、公式に簡潔にまとめられています。

このエンドポイントにaxiosでリクエストを送り、情報を取得します。

要素の取得

画面操作に必要な要素を取得します。

Getリクエストの送信

axiosを使って、GitHub APIにGetリクエストを送りましょう。

上記は、bradtraversyさんのユーザー情報を取得してます。ブラウザのコンソールを確認するとその情報が出力されていることがわかります。

これでもいいのですが、async/awaitを使って非同期処理にしましょう。

「{ data } 」は不思議な感じがしますが、これはJavaScriptの機能です。取得したデータの中にdataプロパティが存在していた場合、同名の変数に格納できます。

dataプロパティには、以下のデータが格納されています。

サブミットイベントの登録

次に、ユーザー検索のためにsubmitイベントを登録します。これは、検索窓からユーザー情報を入力後、Enterを押したときに発火するイベントです。

プロフィールカード作成

次は、画面に表示するプロフィールカードを作成しましょう。

HTMLテンプレートの埋め込み

プロフィールカードは、JavaScriptの変数にHTMLテンプレートを直接埋め込んで作成します。

cardHTMLには、JavaScriptのテンプレートリテラルを利用して、組み込み式を扱うことをできるようにしています。

この関数は、getUser関数の中から呼び出します。

適当に入力してみましょう。

データ取得失敗時の処理

axiosのGetリクエストエラーで、データの取得に失敗した場合の処理を考えましょう。

これをgetUser関数の中から呼び出します。

404は、リクエスト先のページがない場合に発生するエラーコードです。

エンドポイントを以下のように修正して、プログラムを実行してみましょう。

リポジトリ情報をカードに追加

最後に、GitHubのリポジトリ情報を取得して、カードに追加する処理を実装します。

レポジトリ情報の取得

GitHubユーザーのレポジトリ情報を取得します。

この処理をgetUser関数の中で呼び出します。

addReposToCard関数は、これから作ります。

リポジトリ情報をカードに追加

リポジトリの情報を取得できたら、カードに追加します。

これでOKです。

検索してみましょう。

これで完成ですね。

おわりに

今回のGitHub REST APIアプリケーションも面白かったですね!Go言語でも実装してみようと思います^^

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍


コメントを残す