Qiita API を使って記事の閲覧数を取得し、表で表示する React をchatGPTに書かせてみる


## はじめに
ここ最近では、AIの力が凄まじいですね。
自分もよくcarsorを利用しており助けてもらっています。
そんな中、chatGPTでどの程度のコードを書けるのかを試してみました。

## 完成イメージ
- ユーザーが自身の Qiita API アクセストークンを入力
- 取得ボタンを押すと、API から記事データを取得
- 記事のタイトル、いいね数、閲覧数を表形式で表示

## 環境準備
React のプロジェクトを用意していない場合は、以下のコマンドで新規作成してください。

```sh
npx create-react-app qiita-view-table
cd qiita-view-table
```

また、スタイルを適用するために CSS ファイルも用意します。

## AIへの依頼
```
https://qiita.com/mokio/items/12f7128c952fec6dec52

コチラの記事で総閲覧数を取得し表示しています
これをreactのみで画面に表形式で表示した物を作ってほしい
```

## コード実装（結果）
### 1. React コンポーネントの作成
`src/QiitaTable.js` を作成し、以下のコードを記述します。

```jsx
import React, { useEffect, useState } from "react";
import "./QiitaTable.css";

function QiitaTable() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [accessToken, setAccessToken] = useState("");

  const fetchData = async () => {
    if (!accessToken) {
      setError("Access token is required");
      return;
    }
    setLoading(true);
    setError(null);
    try {
      const response = await fetch(
        "https://qiita.com/api/v2/authenticated_user/items",
        {
          headers: {
            Authorization: `Bearer ${accessToken}`,
          },
        }
      );
      if (!response.ok) {
        throw new Error("Network response was not ok");
      }
      const items = await response.json();

      // 必要な情報だけを抽出
      const filteredData = items.map((item) => ({
        title: item.title,
        likes_count: item.likes_count,
        page_views_count: item.page_views_count || 0,
      }));

      setData(filteredData);
    } catch (error) {
      setError(error.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <h2>Qiita 記事の閲覧情報</h2>
      <input
        type="text"
        placeholder="Enter your Access Token"
        value={accessToken}
        onChange={(e) => setAccessToken(e.target.value)}
      />
      <button onClick={fetchData}>取得</button>
      {loading && <p>Loading...</p>}
      {error && <p>Error: {error}</p>}
      {data.length > 0 && (
        <table className="qiita-table">
          <thead>
            <tr>
              <th>記事タイトル</th>
              <th>いいね数</th>
              <th>閲覧数</th>
            </tr>
          </thead>
          <tbody>
            {data.map((item, index) => (
              <tr key={index}>
                <td>{item.title}</td>
                <td>{item.likes_count}</td>
                <td>{item.page_views_count}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
}

export default QiitaTable;
```

### 2. CSS の追加
`src/QiitaTable.css` を作成し、以下のスタイルを追加します。

```css
.qiita-table {
  width: 100%;
  border-collapse: collapse;
}

.qiita-table th, .qiita-table td {
  border: 1px solid #ddd;
  padding: 8px;
}

.qiita-table th {
  background-color: #f4f4f4;
  text-align: left;
}
```

### 3. App コンポーネントに組み込む
`src/App.js` に以下のように記述し、`QiitaTable` コンポーネントを読み込みます。

```jsx
import React from "react";
import QiitaTable from "./QiitaTable";

function App() {
  return (
    <div>
      <h1>Qiita 記事データビューア</h1>
      <QiitaTable />
    </div>
  );
}

export default App;
```

## 動作確認
プロジェクトを起動して、動作を確認します。

```sh
npm run dev
```

ブラウザで `http://localhost:3000` にアクセスし、アクセストークンを入力して記事情報が取得できることを確認してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3981477/1c91982b-053a-49cf-9e51-bd53f0c7e848.png)


# まとめ
本記事では、Qiita API を利用して記事情報を取得し、React で表に表示するアプリを作成しました。
必要最低限ですが、動くものが完成したというのに進化を覚えます。


# おまけ
ここ最近では、ジブリ風の絵も描いてくれるそうで、依頼してみました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3981477/014be2ff-ad6e-4c7d-920d-34e86f17d34c.png)

そして、自分の写真をジブリ化し、未来を予測して描いてもらいました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3981477/9a647a5e-0836-467c-a1a9-bb9c875d7388.png)

すごい。。。