ChatGPTはQiitaAPIを知っているか？

# はじめに
この記事は、[QiitaAPI Advent Calendar 2024](https://qiita.com/advent-calendar/2024/qiitaapi)の14日目の記事となります。

アドベントカレンダのリストを見ていて、今、QiitaAPIに辿り着いた者の記録です。

# ChatGPTはQiitaAPIを知っているか

ChatGPT先生に聞いてみる。

![スクリーンショット 2024-12-20 14.12.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/58c8096b-f20f-3395-a0dd-f81ed6e67f7b.png)
![スクリーンショット 2024-12-20 14.12.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/4ff64633-0963-ce29-d2a1-ebaed82f65b7.png)
![スクリーンショット 2024-12-20 14.12.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/f0ad99a5-73e0-7298-1c30-3eaf0fa1648c.png)

なるほど。
アクセストークンはここから発行できるみたいだ。

https://qiita.com/settings/applications

>![スクリーンショット 2024-12-20 14.16.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/ffc790f8-e257-2c40-319f-c22256a708dd.png)
>![スクリーンショット 2024-12-20 14.17.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/768c0f1a-e1b7-c1a3-cd6a-c9422d9a4ea3.png)

# アプリを作ってもらう

知っているのなら、ChatGPT先生にアプリを作ってもらおう。

![スクリーンショット 2024-12-20 14.12.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/130e4660-fbba-1861-dda8-61e7862db044.png)
![スクリーンショット 2024-12-20 14.12.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/f9c043a5-59b8-0870-4439-2a67f169eb6e.png)
![スクリーンショット 2024-12-20 14.12.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/9b8666f3-433c-f9e8-f28d-4be0f600b7db.png)
![スクリーンショット 2024-12-20 14.13.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/05e26a88-1800-79e5-e580-17e9a69c6e04.png)
![スクリーンショット 2024-12-20 14.13.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/1cfe2b40-4af6-ebf8-7936-f330f36ffdec.png)
![スクリーンショット 2024-12-20 14.13.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/6232b717-c49f-1a2e-bf77-9e0a9c88df35.png)
![スクリーンショット 2024-12-20 14.13.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/3dc7c8d9-160a-1339-7c41-a34cc7290305.png)
![スクリーンショット 2024-12-20 14.13.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/adc6c003-09fc-ff51-81b9-4d1ce96cd2d8.png)

「コードスニペット共有アプリ」は面白いかも。
複数の記事で同じようなコードスニペットが使われているものをランキングしてくれるのは欲しいかも。

ただ今日は基本的な作り方を知りたいので単純なものをリクエストしてみよう。

![スクリーンショット 2024-12-20 14.13.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/9bcef538-1f2d-6ee2-5874-15bb2f91149b.png)
![スクリーンショット 2024-12-20 14.13.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/67224744-3c24-92fd-8dcb-e2065ca24888.png)
![スクリーンショット 2024-12-20 14.14.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/12f4a5f4-0b55-6a0d-79bf-9840bbfb1665.png)

```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();
```
![スクリーンショット 2024-12-20 14.23.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/36a0bae6-8810-a16d-9468-25304b2e4619.png)

```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');
```
![スクリーンショット 2024-12-20 14.24.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/e90294aa-dfb0-e433-21f0-75353bdfd5b3.png)

```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();
```
![スクリーンショット 2024-12-20 14.25.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/c5d7c6bd-1e67-dadc-7253-a7d604a8e056.png)

```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();
```
![スクリーンショット 2024-12-20 14.26.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/6cb5a55d-81d4-90d2-a1ae-85d0b60322e6.png)

```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');
```
![スクリーンショット 2024-12-20 14.27.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/fdf13160-faa3-aa42-3bba-223571e519fc.png)

いいねいいね。動くんかな？
どれにしようかな・・。
選べるようにしてもらおう！


![スクリーンショット 2024-12-20 14.28.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/ae335278-9e93-2c9c-e1fd-d4bba6ce02fc.png)

![スクリーンショット 2024-12-20 14.29.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/aa608d55-78a9-d3a1-25d6-3ecca6c6cfc0.png)

```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>
```

![スクリーンショット 2024-12-20 14.30.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/af5c0e4f-a9a7-44af-2295-1c2c6d28cdf5.png)

ブラウザでこのhtmlファイルを開いてみよう。

![スクリーンショット 2024-12-20 14.32.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/ad1a5938-6860-7401-e2fc-f19b90eea4a1.png)

いい感じ。１を押してみる。

![スクリーンショット 2024-12-20 14.33.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/e9ff159b-6186-ccf1-3348-0a6aa71bffdf.png)

おお、表示された。
２を押してみる。

![スクリーンショット 2024-12-20 14.35.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/6a696ad9-18db-3e62-b3e1-c154fb77c643.png)

QiitaAPIのランダム記事をリクエストしてみよう。

![スクリーンショット 2024-12-20 14.35.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/e6a30263-598d-16b4-b48a-adf32347356c.png)

グッドグッド。
３を押してみる。

![スクリーンショット 2024-12-20 14.36.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/12c975f3-0c0c-26a0-c1e2-ed1cd12f468d.png)

改行位置の調整は必要そうだが、情報はちゃんと取れている様子。
４を押してみる。
![スクリーンショット 2024-12-20 14.37.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/7bed42b3-b02e-a406-6a1c-28322b664fb7.png)

良さげ。Python強いな。
５を押してみる。
![スクリーンショット 2024-12-20 14.40.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/033b2054-93b4-2c9c-11e8-a43c2deca75a.png)
ユーザー　Qiitaのフォロアー数を見てみよう。
![スクリーンショット 2024-12-20 14.40.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/5262e6c5-ab5d-671a-9e8e-4aefff3207f3.png)

６０万人？？
>![スクリーンショット 2024-12-20 14.45.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/bcc0fc32-681e-4844-668d-13f4db6e19f8.png)

445565人となっているが？


試しに
>     output.textContent = `${userId} のフォロワー数: ${user.followers_count}`;
を
>     output.textContent = `${userId} のフォロワー数: ${user.description}`;
に変えると、下記のように正しく表示されるから、ChatGPT先生のコードは間違っていないと思われるのですが・・。

![スクリーンショット 2024-12-20 14.56.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/7fc72de1-c6a2-d62d-bd5c-13812159d276.png)

１５万人どこ行ったの？？　んーミステリー。

というわけで、ChatGPTはQiitaAPIを知っていました。そして闇をあばこ・・・・。

最後までご覧いただきありがとうございました。