コードの説明
【概要】
JavaScriptを使ってQiitaAPIからデータの抽出を行ったので、そこで学んだことを共有します。
まず、JavaScriptでGETリスエストをQiitaサーバに送る方法ですが、「axios」を採用しました。
HTML編
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- JavaScriptでGETリクエストを送信するために、axiosを読み込む -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<title>Qiita記事_JavaScriptでQiitaAPIをたたいてみた</title>
</head>
<body>
<!-- ボタンをクリックすると、検索文字で検索が走る -->
検索：<input type="text"><button>検索</button>
<!-- index.jsを読み込む -->
<script src="index.js"></script>
</body>
</html>
JavaScript編
index.js
// ボタンをDOM操作にするためにbutton要素を取得
const button = document.querySelector('button');
button.addEventListener('click',async function(e){
// 検索文字に埋め込まれた文字を取得
const searchvalue=document.querySelector("input").value;
// GETリクエストのパラメータ作成
const queryParam = `title:${searchvalue}`;
const page = 1;
const perPage = 20;
// QiitaAPIにパラメータを埋め込GET送信
const resqiita = await axios.get(`https://qiita.com/api/v2/items?query=${queryParam}&page=${page}&per_page=${perPage}`);
console.log(resqiita);
for(let qiitadata of resqiita.data){
// QiitaAPIで取得した結果を表示させるための要素を作成
const qiitali=document.createElement("li");
const qiitaa=document.createElement("a");
const qiitap=document.createElement("p");
let qiitatitle = qiitadata.title;
let qiitaurl = qiitadata.url;
// 構成
document.body.appendChild(qiitali);
qiitali.appendChild(qiitaa);
//データ挿入
qiitaa.href=qiitaurl;
qiitaa.target="_blank";
qiitaa.textContent=qiitatitle;
}
});
}
実装を終えて
JavaScriptでAPIを使用するための基本的なコードを見てきましたが、
axiosを使用した場合、レスポンスデータがfetchに比べて簡単に処理できるところが良いなと感じました。また、レスポンスデータをJavaScriptでDOMを生成し、リスエストデータに応じてデータを作成する処理を学習できてよかったです。
最後に
簡単なコードでしたが、実際に0からコーディングすると、
コードの意味を読むだけ以上に理解できるので、プログラム勉強の際は手を動かしてコードを確認することが大切だと改めて感じました。手を動かしながらコーディングすると、気になった個所に対して、ログを出力して自分の考えが正しいことを確認することができるので、模写からでいいので様々なコードを書いていこうと思います。
もう一つ重要なこととして、
エラーが発生した際は闇雲に手を動かすのではなく、ログやエラーメッセージを確認して、エラー原因を考察することも必要だと考えているので、今後の学習で実践していきたいです。