🏗️

REACTコードをChatGPTv3.5にレビュー

に公開
React
tech

はじめに

  • REACTコーディングのお作法を学ぶためにChatGPTに教えてもらう。
  • 「自分としては、これで良いんじゃねえの」くらいのコードを書く。
import { FC, memo, useCallback, useState } from "react";
import { PrimaryButton } from "../atoms/button/PrimaryButton";

export const Home: FC = memo(() => {
    const [count, setCount] = useState(0);
    const onClickCountUp = useCallback(() => setCount(count + 1), [
        count,
        setCount
    ]);

    return (
        <>
            <p>This is count up test page.</p>
            <p>{count}</p>
            <PrimaryButton onClick={onClickCountUp}>Count Up</PrimaryButton>
        </>
    );
});

ChatGPT v3.5殿に改善事項を確認する

  • 改善後のコード
import React, { FC, memo, useCallback, useState } from "react";
import { PrimaryButton } from "../atoms/button/PrimaryButton";

const Home: FC = memo(() => {
  const [count, setCount] = useState(0);

  const onClickCountUp = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <p>This is a count-up test page.</p>
      <p>Count: {count}</p>
      <PrimaryButton onClick={onClickCountUp}>Count Up</PrimaryButton>
    </div>
  );
});

export default Home;
  1. import React を追加しました：Reactコンポーネントを定義する場合、Reactをインポートすることが一般的です。
  2. <div>要素を使用しました：Reactコンポーネントは常に1つのルート要素で囲む必要があります。したがって、<>と</>の代わりに<div>と</div>を使用してコンテンツを囲みました。
  3. テキストメッセージを改善：テキストメッセージをより明示的にし、カウントの表示に"Count:"というラベルを追加しました。
  4. 不要な変数を削除：countとsetCountはonClickCountUpでのみ使用されるため、不要な変数を削除しました。
  • コーディングは「大体これでいーんじゃねーの」くらいのコードを入力して、ChatGPTに整形してもらって終わり見たいな世界になっていくのかも知れない、というかもうなってるのか。

Discussion