Vanilla JSでGitHubSearchAPIを叩いてみた

動機

VanillaJS・・・フレームワークやライブラリを使わない素のJavaScriptの事。

以下の記事に感銘を受けて、１から勉強をしようとやってみた。
あと、フレームワークを使ったら負けという謎の考えを持っていた。（負の歴史）

2019年版最先端のフロントエンド開発者になるために学ぶべきこと

上記の記事の最初のタスクに挑戦してみた。

APIを叩くのは初心者にとっては最初の難関（だと思っている）

環境

・node -　v10.16.0
・npm -　 v 6.9.0

GitHubSearchAPIの叩き方

以下のURLを参照：

（https://developer.github.com/v3/search/#search-repositories ）

例えば、Reactという名前を含むリポジトリ情報をスター順に取得したい場合、

https://api.github.com/search/repositories?q=React+in:name&sort=stars&order=desc

のURLで取得できる。

{言語名}in:name

で{ }に入力された言語が含まれたリポジトリを取得。

 sort=stars

はスター順に取得することを示している。

fetch APIを使ってみる

これまた初心者にとっては難関。

そもそもfetchAPIとは

ざっくりと。
・HTTP通信を行うためのAPI
・ページ全体を再読み込みすることなくURLからデータを取得できる（いわゆる非同期処理）。
・返り値はPromiseが返ってくる。

使い方

URLを渡してあげる

const searchId = 'React'
fetch(`https://api.github.com/search/repositories?q=${searchId}+in:name&sort=stars&order=desc`)

JSON形式にして取得　&&　エラーハンドリング

function fetchSearchInfo(searchId) {
 return fetch(
     `https://api.github.com/search/repositories?q=${serchId}+in:name&sort=stars&order=desc`
 )
     .then((response) => {
       if (!response.ok) {
         throw new Error(`${response.status}: ${response.statusText}`);
       } else {
         return response.json();
       }
     })
     .catch((error) => {
       throw new Error('ネットワークエラー');
     });
}

fetchはPromiseを返すので、thenで処理を繋げて書くことができる。
また、catchでエラー処理をまとめることができる。

実際にやってみる

実践です！

HTMLの雛形を用意する

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>GitHubAPIApp</title>
 <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
 <header> 
   <div class="header-container">
     <h1 class="header-logo">GitHub Repository Ranking</h1>
   </div>
 </header>
 <main>
   <div class="main-container">
     <p class="maincopy">GitHubの人気リポジトリを読んで、勉強しよう！
     <br>気になるプログラミング言語を入力して、検索してみてください。</p>
     <input id="searchId" type="text" placeholder="検索ワードを入力してください"/>
     <button onclick="main();">検索</button>

     <div id="result"></div>
   </div>
 </main>
  <footer>
    <div class="footer-container">
      <p class="copyright">©Ryu-sou</p>
    </div>
 </footer>

 <script src="src/index.js"></script>

</body>
</html>

入力情報を取得

index.js

function getSearchId() {
 const value = document.getElementById('searchId').value;
 return encodeURIComponent(value);
}

fetchAPIによるHttp通信

先ほどのやつ

index.js

function fetchSearchInfo(searchId) {
 return fetch(
     `https://api.github.com/search/repositories?q=${searchId}+in:name&sort=stars&order=desc`
 )
     .then((response) => {
       if (!response.ok) {
         throw new Error(`${response.status}: ${response.statusText}`);
       } else {
         return response.json();
       }
     })
     .catch((error) => {
       throw new Error('ネットワークエラー');
     });
}

async/awaitで非同期処理

上記の関数を用いて、async/awaitで非同期通信を行う。
forで10回反復処理を行い、データを表示させます。

index.js

async function main() {
 try {
   while (result.firstChild) result.removeChild(result.firstChild);
   const searchId = getSearchId();
   const searchInfo = await fetchSearchInfo(searchId);
   for (let i =0; i < 10; i++) {
     createView(searchInfo.items[i]);
   }
 } catch (error) {
   console.error(`eエラーが発生しました(${error})`);
 }
}

awaitは前の処理が終わるのを待ってから、以下の処理を行うので
データを取得　→　反復処理　という処理の流れを同期処理のように記述することができます。

終わりに

全コードおよび詳細は以下のnoteにまとめてあるので、気になる方はご覧ください！

(https://note.mu/youheyhey0505/n/n63801ef022fc)

課題

・リクエスト回数には制限がある。
・そもそもタスクは（今週の）ランキングトップ10を表示させるだった。(そもそも）