はじめに
この記事は、QiitaAPI Advent Calendar 2024の14日目の記事となります。
アドベントカレンダのリストを見ていて、今、QiitaAPIに辿り着いた者の記録です。
ChatGPTはQiitaAPIを知っているか
ChatGPT先生に聞いてみる。
なるほど。
アクセストークンはここから発行できるみたいだ。
アプリを作ってもらう
知っているのなら、ChatGPT先生にアプリを作ってもらおう。
「コードスニペット共有アプリ」は面白いかも。
複数の記事で同じようなコードスニペットが使われているものをランキングしてくれるのは欲しいかも。
ただ今日は基本的な作り方を知りたいので単純なものをリクエストしてみよう。
1.js
const fetchTopArticle = async () => {
const res = await fetch('https://qiita.com/api/v2/items?page=1&per_page=100', {
headers: { Authorization: 'Bearer YOUR_ACCESS_TOKEN' }
});
const articles = await res.json();
const topArticle = articles.sort((a, b) => b.likes_count - a.likes_count)[0];
console.log(`今日の注目記事: ${topArticle.title} - ${topArticle.url}`);
};
fetchTopArticle();
2.js
const fetchRandomArticleByTag = async (tag) => {
const res = await fetch(`https://qiita.com/api/v2/tags/${tag}/items?per_page=10`, {
headers: { Authorization: 'Bearer YOUR_ACCESS_TOKEN' }
});
const articles = await res.json();
const randomArticle = articles[Math.floor(Math.random() * articles.length)];
console.log(`ランダム記事: ${randomArticle.title} - ${randomArticle.url}`);
};
fetchRandomArticleByTag('JavaScript');
3.js
const fetchMyLatestPosts = async () => {
const res = await fetch('https://qiita.com/api/v2/authenticated_user/items?per_page=5', {
headers: { Authorization: 'Bearer YOUR_ACCESS_TOKEN' }
});
const myPosts = await res.json();
myPosts.forEach(post => console.log(`${post.title} - ${post.url}`));
};
fetchMyLatestPosts();
4.js
const fetchPopularTags = async () => {
const res = await fetch('https://qiita.com/api/v2/tags?sort=count&per_page=10');
const tags = await res.json();
tags.forEach(tag => console.log(`${tag.id} (${tag.items_count} articles)`));
};
fetchPopularTags();
5.js
const fetchUserFollowers = async (userId) => {
const res = await fetch(`https://qiita.com/api/v2/users/${userId}`);
const user = await res.json();
console.log(`${userId} のフォロワー数: ${user.followers_count}`);
};
fetchUserFollowers('example_user');
いいねいいね。動くんかな？
どれにしようかな・・。
選べるようにしてもらおう！
qiita_app.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Qiita API サンプル</title>
</head>
<body>
<h1>Qiita API 実行アプリ</h1>
<p>以下から選択してください:</p>
<button onclick="executeFunction(1)">1. 今日の注目記事</button>
<button onclick="executeFunction(2)">2. タグ別ランダム記事</button>
<button onclick="executeFunction(3)">3. 自分の最新投稿</button>
<button onclick="executeFunction(4)">4. 人気タグ表示</button>
<button onclick="executeFunction(5)">5. ユーザーのフォロワー数</button>
<div id="output" style="margin-top: 20px; padding: 10px; border: 1px solid #ccc;">
<strong>結果:</strong>
<p id="result"></p>
</div>
<script>
const accessToken = "YOUR_ACCESS_TOKEN"; // ここにQiitaのアクセストークンを入力
async function executeFunction(choice) {
const output = document.getElementById("result");
output.textContent = "実行中...";
try {
switch (choice) {
case 1:
await fetchTopArticle(output);
break;
case 2:
const tag = prompt("タグを入力してください（例: JavaScript）:");
if (tag) await fetchRandomArticleByTag(tag, output);
break;
case 3:
await fetchMyLatestPosts(output);
break;
case 4:
await fetchPopularTags(output);
break;
case 5:
const userId = prompt("ユーザーIDを入力してください（例: example_user）:");
if (userId) await fetchUserFollowers(userId, output);
break;
default:
output.textContent = "無効な選択です。";
}
} catch (error) {
output.textContent = `エラーが発生しました: ${error.message}`;
}
}
async function fetchTopArticle(output) {
const res = await fetch('https://qiita.com/api/v2/items?page=1&per_page=100', {
headers: { Authorization: `Bearer ${accessToken}` }
});
const articles = await res.json();
const topArticle = articles.sort((a, b) => b.likes_count - a.likes_count)[0];
output.textContent = `今日の注目記事: ${topArticle.title} - ${topArticle.url}`;
}
async function fetchRandomArticleByTag(tag, output) {
const res = await fetch(`https://qiita.com/api/v2/tags/${tag}/items?per_page=10`, {
headers: { Authorization: `Bearer ${accessToken}` }
});
const articles = await res.json();
const randomArticle = articles[Math.floor(Math.random() * articles.length)];
output.textContent = `ランダム記事: ${randomArticle.title} - ${randomArticle.url}`;
}
async function fetchMyLatestPosts(output) {
const res = await fetch('https://qiita.com/api/v2/authenticated_user/items?per_page=5', {
headers: { Authorization: `Bearer ${accessToken}` }
});
const myPosts = await res.json();
output.textContent = "最新投稿:\n" + myPosts.map(post => `${post.title} - ${post.url}`).join("\n");
}
async function fetchPopularTags(output) {
const res = await fetch('https://qiita.com/api/v2/tags?sort=count&per_page=10');
const tags = await res.json();
output.textContent = "人気タグ:\n" + tags.map(tag => `${tag.id} (${tag.items_count} articles)`).join("\n");
}
async function fetchUserFollowers(userId, output) {
const res = await fetch(`https://qiita.com/api/v2/users/${userId}`);
const user = await res.json();
output.textContent = `${userId} のフォロワー数: ${user.followers_count}`;
}
</script>
</body>
</html>
ブラウザでこのhtmlファイルを開いてみよう。
いい感じ。１を押してみる。
おお、表示された。
２を押してみる。
QiitaAPIのランダム記事をリクエストしてみよう。
グッドグッド。
３を押してみる。
改行位置の調整は必要そうだが、情報はちゃんと取れている様子。
４を押してみる。
良さげ。Python強いな。
５を押してみる。
ユーザー Qiitaのフォロアー数を見てみよう。
６０万人？？
445565人となっているが？
試しに
output.textContent = `${userId} のフォロワー数: ${user.followers_count}`;
を
output.textContent = `${userId} のフォロワー数: ${user.description}`;
に変えると、下記のように正しく表示されるから、ChatGPT先生のコードは間違っていないと思われるのですが・・。
１５万人どこ行ったの？？ んーミステリー。
というわけで、ChatGPTはQiitaAPIを知っていました。そして闇をあばこ・・・・。
最後までご覧いただきありがとうございました。