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

はじめに

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

完成イメージ

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

環境準備

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

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 を作成し、以下のコードを記述します。

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 を作成し、以下のスタイルを追加します。

.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 コンポーネントを読み込みます。

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

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

export default App;

動作確認

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

npm run dev

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

まとめ

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

おまけ

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

そして、自分の写真をジブリ化し、未来を予測して描いてもらいました

すごい。。。