こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
実装するもの
今回は、GitHUB REST APIを使って、ユーザー検索アプリを作成します。
demoは「こちら」で確認できます。
環境構築
簡単な環境構築をお願いします。
必要なファイルは、以下の通りです。
|
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css |
CSS版
ページ(HTML)の作成
最初にページを作成しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Github Profiles</title> </head> <body> <form class="user-form" id="form"> <input type="text" id="search" placeholder="Search a Github User"> </form> <main id="main"></main> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.min.js" integrity="sha512-DZqqY3PiOvTP9HkjIWgjO6ouCbq+dxqWoJZ/Q+zPYNHmlnI2dQnbJ5bxAHpAMw+LXRm4D72EIRXzvcHQtE8/VQ==" crossorigin="anonymous"></script> <script src="script.js"></script> </body> </html> |
このHTMLをブラウザ上で表示すると以下のようになります。
このHTMLですが、axiosも導入しています。GETリクエストをAPIに送るためです。
|
1 2 |
// axios導入cdn <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.min.js" integrity="sha512-DZqqY3PiOvTP9HkjIWgjO6ouCbq+dxqWoJZ/Q+zPYNHmlnI2dQnbJ5bxAHpAMw+LXRm4D72EIRXzvcHQtE8/VQ==" crossorigin="anonymous"></script> |
これは「cdnjs」というサイトから取得しています。
以前は、JavaScriptのfetchでリクエストを送っていましたが、axiosの方が使いやすいですね。
スタイル(CSS)を装飾
次にスタイルを記述しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); * { box-sizing: border-box; } body { background-color: #2a2a72; color: #fff; font-family: 'Poppins', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .user-form { width: 100%; max-width: 700px; } .user-form input { width: 100%; display: block; background-color: #4c2885; border: none; border-radius: 10px; color: #fff; padding: 1rem; margin-bottom: 2rem; font-family: inherit; font-size: 1rem; box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05), 0 15px 40px rgba(0, 0, 0, 0.1); } .user-form input::placeholder { color: #bbb; } .user-form input:focus { outline: none; } .card { max-width: 800px; background-color: #4c2885; border-radius: 20px; box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05), 0 15px 40px rgba(0, 0, 0, 0.1); display: flex; padding: 3rem; margin: 0 1.5rem; } .avatar { border-radius: 50%; border: 10px solid #2a2a72; height: 150px; width: 150px; } .user-info { color: #eee; margin-left: 2rem; } .user-info h2 { margin-top: 0; } .user-info ul { list-style-type: none; display: flex; justify-content: space-between; padding: 0; max-width: 400px; } .user-info ul li { display: flex; align-items: center; } .user-info ul li strong { font-size: 0.9rem; margin-left: 0.5rem; } .repo { text-decoration: none; color: #fff; background-color: #212a72; font-size: 0.7rem; padding: 0.25rem 0.5rem; margin-right: 0.5rem; margin-bottom: 0.5rem; display: inline-block; } @media (max-width: 500px) { .card { flex-direction: column; align-items: center; } .user-form { max-width: 400px; } } |
ここまで実装すると以下のようになります。
JavaScriptの実装
今回、やることは以下の3つです。
ユーザー検索機能
1. AxiosでGitHubユーザー情報を取得
2. プロフィールカードを作成
3. リポジトリ情報をカードに追加
2. プロフィールカードを作成
3. リポジトリ情報をカードに追加
AxiosでGitHubユーザー情報を取得
GitHubのユーザー情報を取得できるエンドポイントは、公式に簡潔にまとめられています。
|
1 2 3 4 5 6 7 |
GET /users GET /users/{username} GET /users/{username}/followers GET /users/{username}/following GET /users/{username}/following/{target_user} GET /users/{username}/gpg_keys GET /users/{username}/keys |
このエンドポイントにaxiosでリクエストを送り、情報を取得します。
要素の取得
画面操作に必要な要素を取得します。
|
1 2 3 4 |
// 要素を取得 const main = document.getElementById('main') const form = document.getElementById('form') const search = document.getElementById('search') |
Getリクエストの送信
axiosを使って、GitHub APIにGetリクエストを送りましょう。
|
1 2 3 4 5 6 7 8 9 10 11 |
// エンドポイント const APIURL = 'https://api.github.com/users/' function getUser(username) { // axiosでリクエストを送る axios.get(APIURL + username) .then(res => console.log(res)) .catch(err => console.log(err)) } getUser('bradtraversy') |
上記は、bradtraversyさんのユーザー情報を取得してます。ブラウザのコンソールを確認するとその情報が出力されていることがわかります。
これでもいいのですが、async/awaitを使って非同期処理にしましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
async function getUser(username) { // axiosでリクエストを送る try { const { data } = await axios(APIURL + username) console.log(data) } catch(err) { console.log(err) } } getUser('bradtraversy') |
「{ data } 」は不思議な感じがしますが、これはJavaScriptの機能です。取得したデータの中にdataプロパティが存在していた場合、同名の変数に格納できます。
dataプロパティには、以下のデータが格納されています。
サブミットイベントの登録
次に、ユーザー検索のためにsubmitイベントを登録します。これは、検索窓からユーザー情報を入力後、Enterを押したときに発火するイベントです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
form.addEventListener('submit', (e) => { // ページリダイレクトをキャンセル e.preventDefault() // 入力文字を取得 const user = search.value if(user) { // ユーザー情報取得 getUser(user) // 検索窓をクリア search.value = '' } }) |
プロフィールカード作成
次は、画面に表示するプロフィールカードを作成しましょう。
HTMLテンプレートの埋め込み
プロフィールカードは、JavaScriptの変数にHTMLテンプレートを直接埋め込んで作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// プロフィールカード作成 function createUserCard(user) { const cardHTML = ` <div class="card"> <div> <img src="${user.avatar_url}" alt="${user.name}" class="avatar"> </div> <div class="user-info"> <h2>${user.name}</h2> <p>${user.bio}</p> <ul> <li>${user.followers} <strong>Followers</strong></li> <li>${user.following} <strong>Following</strong></li> <li>${user.public_repos} <strong>Repos</strong></li> </ul> <div id="repos"></div> </div> </div> ` main.innerHTML = cardHTML } |
cardHTMLには、JavaScriptのテンプレートリテラルを利用して、組み込み式を扱うことをできるようにしています。
この関数は、getUser関数の中から呼び出します。
|
1 2 3 4 5 6 7 8 |
async function getUser(username) { try { const { data } = await axios(APIURL + username) createUserCard(data) } catch(err) { console.log(err) } } |
適当に入力してみましょう。
データ取得失敗時の処理
axiosのGetリクエストエラーで、データの取得に失敗した場合の処理を考えましょう。
|
1 2 3 4 5 6 7 8 9 10 |
// エラー発生時のカード function createErrorCard(msg) { const cardHTML = ` <div class="card"> <h1>${msg}</h1> </div> ` main.innerHTML = cardHTML } |
これをgetUser関数の中から呼び出します。
|
1 2 3 4 5 6 7 8 9 10 11 |
async function getUser(username) { // axiosでリクエストを送る try { const { data } = await axios(APIURL + username) createUserCard(data) } catch(err) { if(err.response.status == 404) { createErrorCard('No profile with this username') } } } |
404は、リクエスト先のページがない場合に発生するエラーコードです。
エンドポイントを以下のように修正して、プログラムを実行してみましょう。
|
1 2 |
// エンドポイント const APIURL = 'https://api.github.com/users23r23r3/' |
リポジトリ情報をカードに追加
最後に、GitHubのリポジトリ情報を取得して、カードに追加する処理を実装します。
レポジトリ情報の取得
GitHubユーザーのレポジトリ情報を取得します。
|
1 2 3 4 5 6 7 8 9 10 |
// レポジトリの情報を取得 async function getRepos(username) { try { const { data } = await axios(APIURL + username + '/repos?sort=created') addReposToCard(data) } catch(err) { createErrorCard('Problem fetching repos') } } |
この処理をgetUser関数の中で呼び出します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
async function getUser(username) { // axiosでリクエストを送る try { const { data } = await axios(APIURL + username) createUserCard(data) getRepos(username) } catch(err) { if(err.response.status == 404) { createErrorCard('No profile with this username') } } } |
addReposToCard関数は、これから作ります。
リポジトリ情報をカードに追加
リポジトリの情報を取得できたら、カードに追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// レポジトリをカードに追加する function addReposToCard(repos) { const reposEl = document.getElementById('repos') repos .slice(0, 5) .forEach(repo => { const repoEl = document.createElement('a') repoEl.classList.add('repo') repoEl.href = repo.html_url repoEl.target = '_blank' repoEl.innerText = repo.name reposEl.appendChild(repoEl) }) } |
これでOKです。
検索してみましょう。
これで完成ですね。
おわりに
今回のGitHub REST APIアプリケーションも面白かったですね！Go言語でも実装してみようと思います^^
それでは、また！
JavaScriptまとめ
JavaScript ソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
// 要素を取得 const main = document.getElementById('main') const form = document.getElementById('form') const search = document.getElementById('search') // エンドポイント const APIURL = 'https://api.github.com/users/' async function getUser(username) { // axiosでリクエストを送る try { const { data } = await axios(APIURL + username) createUserCard(data) getRepos(username) } catch(err) { if(err.response.status == 404) { createErrorCard('No profile with this username') } } } // レポジトリの情報を取得 async function getRepos(username) { try { const { data } = await axios(APIURL + username + '/repos?sort=created') addReposToCard(data) } catch(err) { createErrorCard('Problem fetching repos') } } // プロフィールカード作成 function createUserCard(user) { console.log(user) const cardHTML = ` <div class="card"> <div> <img src="${user.avatar_url}" alt="${user.name}" class="avatar"> </div> <div class="user-info"> <h2>${user.name}</h2> <p>${user.bio}</p> <ul> <li>${user.followers} <strong>Followers</strong></li> <li>${user.following} <strong>Following</strong></li> <li>${user.public_repos} <strong>Repos</strong></li> </ul> <div id="repos"></div> </div> </div> ` main.innerHTML = cardHTML } // エラー発生時のカード function createErrorCard(msg) { const cardHTML = ` <div class="card"> <h1>${msg}</h1> </div> ` main.innerHTML = cardHTML } // レポジトリをカードに追加 function addReposToCard(repos) { const reposEl = document.getElementById('repos') repos .slice(0, 5) .forEach(repo => { const repoEl = document.createElement('a') repoEl.classList.add('repo') repoEl.href = repo.html_url repoEl.target = '_blank' repoEl.innerText = repo.name reposEl.appendChild(repoEl) }) } // submitイベントの登録 form.addEventListener('submit', (e) => { // ページリダイレクトをキャンセル e.preventDefault() // 入力文字を取得 const user = search.value if(user) { // ユーザー情報取得 getUser(user) // 検索窓をクリア search.value = '' } }) |
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/190f24cd.7532be9b.190f24ce.766b3442/?me_id=1213310&item_id=18177978&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F4111%2F9784774184111.jpg%3F_ex%3D240x240&s=240x240&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。