claude
Claude
Talk with Claude, an AI assistant from A...
claude.ai
そもそもclaudeは開発に特化してるものらしいので比較すべきではないですが、ChatGPTより正確なコードを出してくると聞いたのでとりあえずclaudeに登録してコーディングさせてみる。
とりあえず私のこのブログのページのスクショをとってぶん投げてみた。
渡す情報は
- ページのスクショ
- React.js / Next.js
- 書け
だけ。
当たり前ですけど、ちゃんと開発で使う時はもっとちゃんと情報は渡した方が良いですｗ
結果
import React from 'react';
import { Home } from 'lucide-react';
const BlogLayout = () => {
const posts = [
{
id: 1,
category: 'ALL',
title: '子どもを預けて夫婦で遊びに出てみる',
excerpt: '今までいくつかの記事で書いてきたが、我々夫婦はクラブDJをしている。仕事にしても...',
stats: { daily: 0, weekly: 0, monthly: 0, total: 0 },
date: '2024.12.11',
image: '/api/placeholder/400/250'
},
{
id: 2,
category: 'ALL',
title: '書籍紹介 / リデザイン・ワーク',
excerpt: 'コピペのような働き方が変わった人は多いと思います。私はエンジニアなので比較的対応...',
stats: { daily: 0, weekly: 0, monthly: 0, total: 0 },
date: '2024.12.10',
image: '/api/placeholder/400/250'
}
];
return (
<div className="min-h-screen bg-gray-900 text-white">
{/* Header Image */}
<div className="relative h-64 w-full">
<img
src="/api/placeholder/1200/400"
alt="Header"
className="w-full h-full object-cover"
/>
<div className="absolute top-4 left-4 bg-black/50 px-3 py-1 rounded">
父親目線の育児記録
</div>
<h1 className="absolute bottom-4 left-4 text-3xl font-bold">
jabiの筆跡
</h1>
</div>
{/* Navigation */}
<nav className="bg-gray-800 p-4">
<ul className="flex space-x-8 max-w-5xl mx-auto">
<li className="cursor-pointer">ALL</li>
<li className="cursor-pointer">育児</li>
<li className="cursor-pointer">趣味</li>
<li className="cursor-pointer">開発</li>
</ul>
</nav>
{/* Main Content */}
<div className="max-w-5xl mx-auto p-4 grid grid-cols-1 md:grid-cols-3 gap-8">
{/* Posts Section */}
<div className="md:col-span-2 space-y-6">
{posts.map(post => (
<div key={post.id} className="bg-gray-800 rounded-lg overflow-hidden">
<img
src={post.image}
alt={post.title}
className="w-full h-48 object-cover"
/>
<div className="p-4">
<span className="bg-gray-700 px-2 py-1 rounded text-sm">
{post.category}
</span>
<h2 className="text-xl font-bold mt-2">{post.title}</h2>
<p className="text-gray-400 mt-2">{post.excerpt}</p>
<div className="flex items-center justify-between mt-4 text-sm text-gray-400">
<div className="flex space-x-4">
<span>本日: {post.stats.daily}</span>
<span>週: {post.stats.weekly}</span>
<span>月: {post.stats.monthly}</span>
<span>全体: {post.stats.total}</span>
</div>
<span>{post.date}</span>
</div>
</div>
</div>
))}
</div>
{/* Sidebar */}
<div className="space-y-6">
{/* About Section */}
<div className="bg-gray-800 rounded-lg p-4">
<h2 className="text-xl font-bold mb-4">About jabi</h2>
<div className="flex flex-col items-center">
<img
src="/api/placeholder/120/120"
alt="Profile"
className="rounded-full w-24 h-24"
/>
<h3 className="text-xl mt-4">jabi</h3>
<p className="text-gray-400 text-center mt-2">
- jabi（じゃび）-<br />
DJするリトルトゥース。<br />
中学時代から西武ライオンズ一筋。<br />
娘溺愛中。
</p>
<div className="mt-4">
<Home className="w-6 h-6" />
</div>
</div>
</div>
{/* Archive Section */}
<div className="bg-gray-800 rounded-lg p-4">
<h2 className="text-xl font-bold mb-4">過去の記事</h2>
<div className="flex justify-between items-center text-gray-400">
<span>2024年12月</span>
<span>11</span>
</div>
</div>
</div>
</div>
</div>
);
};
export default BlogLayout;あんな雑な投げ方でこれだけのものを提出してくるのはすごいですね。
特に指定はしていないけど、cssはTailwind CSSをデフォルトで使ってくるみたいですね。
package.jsonやTailwind CSSのconfig等、見たければ聞けばばっちり答えてきます。
当たり前だけど自分で別コンポネントにしたり、ツリー構造設計したりと色々調整はしなければならないけど、単体のコンポネントでたたき台として数秒でこれ出してくるのは本当に便利ですね。
噂通りChatGPT（pro）よりはるかに良いコードを出してくるので、開発関係はclaudeの方が良さそう。
他にも良さげなものがあれば使ってみたいと思います！
