はじめに
APIについて勉強すべく，JavaScript (React) を使ってQiita API v2から自分の記事を取得して表示させてみたので，簡単にまとめておきます．
手順
Qiita API v2ではGETメソッドによって投稿の取得ができます．
1. アクセストークンの発行
Qiita API v2のドキュメントで仕様について確認したところ，アクセストークンをリクエストに含める必要があるようです．
アクセストークンの発行については他の記事で丁寧に紹介されているので，ここでは割愛します．
2. 投稿の取得
投稿の取得は以下のコードで実装できます．
（以下のコードで使用しているaxiosについてはこちら）
// 投稿の取得
fetchPosts = async () => {
const res = await axios.get(
'https://qiita.com/api/v2/authenticated_user/items',
{
headers: {
Authorization: 'Bearer [ここにアクセストークンをいれる]>',
},
}
);
console.log(res);
return res.data;
};
fetchPostsを実行すると，取得した記事がコンソールに表示されます．
3. 必要なデータを表示
上に示した表示結果から分かるように，返されるオブジェクトにはconfigやstatusなど不要な情報が多く含まれています．
記事を表示するだけならdata内の一部の情報のみで十分です．
返される項目についての詳細は，Qiita API v2ドキュメントから確認できます．
今回は，以下の情報を表示しました．
- ユーザのプロフィール画像
- ユーザ名
- ユーザID
- 記事タイトル
- LGTM数
- タグ
- 投稿日時
例えば，返ってきたデータをresとしたとき，ユーザ名(name)はres.data.nameで取得できます．
表示の詳細についてはここでは割愛しますが，React，Tailwind等を使ってこのように実装しました．
これで自分好みにデザインした第2のQiitaの完成です．
ちなみに，返されるオブジェクトの中には記事のURLも含まれているので、クリックするとその記事に飛ぶような処理も実装できます．(実は実装済み)