ChatGPTのコードとclaudeのコードを比較してみる

以前、claudeにスクショをぶん投げてコードにさせてみた。

せっかくなのでどんな感じに違うのかChatGPTにも出力させてみた。

今回もclaudeと同じように雑な投げ方してみました。

ページのスクショ
React.js / Next.js
書け

だけ。

結果

import { css, Global } from '@emotion/react';

export const GlobalStyles = () => (
  <Global
    styles={css`
      body {
        margin: 0;
        font-family: 'Arial', sans-serif;
        background-color: #1a1a1a;
        color: #fff;
      }
      a {
        text-decoration: none;
        color: inherit;
      }
    `}
  />
);

import styled from '@emotion/styled';

const HeaderWrapper = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #282828;
`;

const Title = styled.h1`
  font-size: 1.5rem;
`;

const Nav = styled.nav`
  display: flex;
  gap: 20px;

  a {
    color: #fff;
    font-weight: bold;
    &:hover {
      text-decoration: underline;
    }
  }
`;

const Header = () => (
  <HeaderWrapper>
    <Title>jabiの筆跡</Title>
    <Nav>
      <a href="#all">ALL</a>
      <a href="#childcare">育児</a>
      <a href="#hobbies">趣味</a>
      <a href="#dev">開発</a>
    </Nav>
  </HeaderWrapper>
);

export default Header;

import styled from '@emotion/styled';

const PostWrapper = styled.div`
  background-color: #333;
  border-radius: 10px;
  overflow: hidden;
  margin: 10px 0;
`;

const Image = styled.img`
  width: 100%;
  height: 200px;
  object-fit: cover;
`;

const Content = styled.div`
  padding: 20px;
`;

const Title = styled.h2`
  font-size: 1.2rem;
  margin-bottom: 10px;
`;

const Date = styled.p`
  font-size: 0.8rem;
  color: #aaa;
`;

const Post = ({ image, title, date }) => (
  <PostWrapper>
    <Image src={image} alt={title} />
    <Content>
      <Title>{title}</Title>
      <Date>{date}</Date>
    </Content>
  </PostWrapper>
);

export default Post;

import styled from '@emotion/styled';

const Sidebar = styled.div`
  background-color: #282828;
  padding: 20px;
  border-radius: 10px;
  margin-top: 20px;
`;

const Avatar = styled.img`
  border-radius: 50%;
  width: 80px;
  height: 80px;
  margin-bottom: 10px;
`;

const Name = styled.h3`
  font-size: 1rem;
`;

const About = () => (
  <Sidebar>
    <Avatar src="/avatar.png" alt="jabi" />
    <Name>jabi</Name>
    <p>DJするリトルトゥース。</p>
    <p>娘溺愛中。</p>
  </Sidebar>
);

export default About;

import Header from '../components/Header';
import Post from '../components/Post';
import About from '../components/About';
import { GlobalStyles } from '../styles/global';

const Home = () => {
  const posts = [
    {
      image: '/images/post1.jpg',
      title: '子どもを預けて夫婦で遊びに出てみる',
      date: '2024.12.11',
    },
    {
      image: '/images/post2.jpg',
      title: '書籍紹介 / リデザイン・ワーク',
      date: '2024.12.10',
    },
    {
      image: '/images/post3.jpg',
      title: 'ペヤング、平辛ちょ、UFO、合体',
      date: '2024.12.09',
    },
  ];

  return (
    <>
      <GlobalStyles />
      <Header />
      <main style={{ display: 'flex', gap: '20px', padding: '20px' }}>
        <div style={{ flex: 3 }}>
          {posts.map((post, index) => (
            <Post key={index} {...post} />
          ))}
        </div>
        <div style={{ flex: 1 }}>
          <About />
        </div>
      </main>
    </>
  );
};

export default Home;

うーん…

ツッコミどころは多いですね。