Claude Code 実践
この章では、Claude Codeを使用して、私たちの説明プロンプトを通じてウォール・ストリート・ジャーナル風のニュースカードアプリを開発する方法を紹介します。
プロセス全体では、できるだけコードを一行も書かず、自然言語による説明だけでAIにプロジェクト全体を完成させます。
目標：React + Tailwind CSSを使用して、ウォール・ストリート・ジャーナル風のニュースカードジェネレーターを作成する
機能特性:
- クラシックなWSJデザインスタイル（セリフフォント、シンプルなレイアウト）
- ニュースカード生成（タイトル、要約、著者、時間）
- 画像のアップロードとプレビューに対応
- 画像への書き出し機能
- レスポンシブデザイン
- リアルタイムプレビュー編集
技術スタック:
- React 18
- Tailwind CSS 3
- Vite（ビルドツール）
- html2canvas（画像書き出し）
完全な開発フロー
フェーズ1：プロジェクトの初期化）
Step 1: プロジェクト構造の作成
ターミナルを開き、Claude Codeを起動します：
cd ~/projects claude
Claude Codeに入力します：
我要创建一个新的 React 项目，使用 Vite 作为构建工具 项目名称：wsj-news-card-generator 要求： 1. 使用 Vite 创建 React 项目 2. 集成 Tailwind CSS 3. 添加必要的依赖：html2canvas（用于导出图片） 4. 创建清晰的文件夹结构 请给我完整的命令行步骤
Claudeは以下のような内容を返します：
Claude Codeが完全な操作手順を示してくれるので、その内容に従ってプロジェクト作成を完了し、以下の手順でファイルを一つずつ作成しながら、少しずつ調整していきます。
また、プロンプトで自動作成するように設定することもできます。実行権限があることを確認してください。
自動作成の過程では、いくつかのプロンプトが表示されるので、選択しyes、Enterキーを押すだけです：
完了すると、以下のような完全なプロジェクト構造が生成されます：
次に、Claude Codeで続けて：
现在帮我配置 Tailwind CSS 修改 tailwind.config.js，添加自定义配置： 1. 添加 WSJ 风格的颜色（深灰色文字、金色强调色） 2. 添加衬线字体（Playfair Display, Merriweather） 3. 扩展阴影效果
Claudeがtailwind.config.jsを生成します：
引き続きCSSを設定します：
修改 src/index.css，导入 Tailwind 和字体
フェーズ2：コアコンポーネントの作成
Step 2: プロジェクトのファイル構造を作成
创建以下文件夹结构：
src/
components/
NewsCard.jsx # 新闻卡片组件
NewsCardEditor.jsx # 编辑器组件
ExportButton.jsx # 导出按钮组件
utils/
exportImage.js # 导出图片工具函数
App.jsx
main.jsx実行過程では、ずっとyes：
Step 3: NewsCardコンポーネントの開発
创建 src/components/NewsCard.jsx 要求： 1. 华尔街日报经典风格的新闻卡片 2. 包含：大标题、副标题、正文摘要、作者、日期、分类标签 3. 可选的特色图片（如果提供） 4. 使用 Tailwind 类名，体现 WSJ 的排版美学 5. 添加金色装饰线条 6. 卡片尺寸：适合社交媒体分享（1200x630px）
実行過程では、ずっとyes：
ClaudeがNewsCard.jsxを生成します：
Step 4: エディターコンポーネントの作成
创建 src/components/NewsCardEditor.jsx 要求： 1. 左侧是表单编辑区域 2. 右侧是实时预览区域 3. 表单包含：分类、标题、副标题、摘要、作者、日期、图片上传 4. 使用受控组件 5. 图片上传支持拖拽和点击 6. 优雅的表单设计，符合 WSJ 风格
Step 5: エクスポート機能の作成
创建 src/components/ExportButton.jsx 要求： 1. 使用 html2canvas 导出卡片为 PNG 2. 显示加载状态 3. 点击后自动下载 4. 优雅的按钮设计
フェーズ3：最適化と拡張
Step 7: プリセットテンプレート機能の追加
在 NewsCardEditor 组件中添加预设模板功能 要求： 1. 创建 3-5 个不同主题的新闻模板 2. 用户可以快速选择模板 3. 选择后自动填充表单 4. 在编辑器上方显示模板选择器
完成イメージ：
中国語の情報に適した内容に変更してもらう
すべての説明を中国語に変更し、中国語の情報を生成するニュースに適しています。
完成イメージ：
