先週作ったDjango版小遣い帳アプリをClaude Codeに作ってもらいました。Claude Codeに付いては既に使ってみましたが、なかなか良いコードを作ってくれるので小遣い帳アプリでもためしてみました。
Bing Image Creatorが生成した画像を使っています
仕様もClaudeに作ってもらう
さて、Claude Codeに作ってもらうにはプログラムの仕様が必要ですが、今回は私が書いたDjango版小遣い帳アプリとの違いを見たかったので、Django版小遣い帳アプリの仕様はAIに書いてもらいました。 VS CodeのGitHub Copilotを使いました、GitHub CopilotはAIモデルが指定できます。
Gemini 2.5 Pro Preview
まずは良く使っている、Gemini 2.5 Pro Previewに仕様を書いてもらいました。まあ悪くはないですが何か足りない気がします。
Workspace: Collecting workspace informationこのアプリケーションは、Djangoで構築された「小遣い帳」アプリケーションです。お金の出入りを記録し、残高を管理する機能を提供します。
### 主な機能
#### 1. 入出金一覧表示
記録されたすべての入出金データを日付順に一覧表示します。各項目には、日付、内容、入金額、出金額、そしてその時点での累積残高が表示されます。
- **関連ファイル**:
- ビュー: `allowance_book.views.index`
- テンプレート: index.html
- 残高計算ロジック: `allowance_book.models.Allowance.get_all_with_balance`
#### 2. 新規項目登録
一覧ページの下部にあるフォームから、新しい入出金項目を登録できます。
- **入力項目**:
- 日付 (必須)
- 内容 (必須)
- 入金 (任意、出金と同時入力は不可)
- 出金 (任意、入金と同時入力は不可)
- **バリデーション**:
- 「入金」と「出金」は、どちらか一方を必ず入力する必要があります。両方を同時に入力したり、両方とも未入力にすることはできません。
- **関連ファイル**:
- ビュー: `allowance_book.views.index`
- フォーム: `allowance_book.forms.AllowanceForm`
- テンプレート: index.html
#### 3. 項目削除
一覧表示の各項目にある「削除」ボタンをクリックすることで、そのデータを削除できます。
- **関連ファイル**:
- ビュー: `allowance_book.views.delete`
- テンプレート: index.html
### データモデル
アプリケーションのデータは `Allowance` モデルによって管理されます。
- **モデル**: `allowance_book.models.Allowance`
- **フィールド**:
- `date`: 日付
- `description`: 内容
- `money_in`: 入金額
- `money_out`: 出金額
- `created_at`: 作成日時
- `updated_at`: 更新日時
Claude Sonnet 4
そこで、AIモデルをClaude Sonnet 4に切り替えて、仕様を書いてもらったのが以下になります。技術仕様やルーティング、セキュリティ機能などが書かれていますね。やはりClaudeはソフトウェア開発で強いと言われる事がわりますね！
Workspace: Collecting workspace informationこのDjangoアプリケーションは**小遣い帳管理システム**です。以下に仕様をまとめます。
## 概要
家計管理の一部として、入金・出金を記録し、累積残高を自動計算する小遣い帳アプリケーションです。
## 機能仕様
### 1. データ管理機能
- **データモデル**: `Allowance`クラス
- `date`: 日付（必須）
- `description`: 内容説明（最大255文字、必須）
- `money_in`: 入金額（任意、正の整数）
- `money_out`: 出金額（任意、正の整数）
- `created_at`: 作成日時（自動設定）
- `updated_at`: 更新日時（自動更新）
### 2. 表示機能
- **一覧表示**: index.html
- 日付、内容、入金額、出金額、累積残高を表形式で表示
- 累積残高は`get_all_with_balance`メソッドでSQLウィンドウ関数を使用して自動計算
### 3. 入力機能
- **フォームバリデーション**: `AllowanceForm`
- 日付は必須入力
- 内容は必須入力（最大255文字）
- 入金・出金は任意だが、**どちらか一方のみ入力必須**
- 入金・出金の両方入力または両方未入力は**エラー**
- 金額は正の整数のみ許可
### 4. 削除機能
- **個別削除**: `delete`ビュー
- 各レコードに削除ボタン配置
- POSTリクエストで安全に削除実行
- 削除後は一覧ページにリダイレクト
### 5. セキュリティ機能
- CSRFトークンによる改ざん防止
- HTTPメソッドチェック（削除はPOSTのみ）
## 技術仕様
- **フレームワーク**: Django
- **データベース**: SQLite3（db.sqlite3）
- **フロントエンド**: Tailwind CSS
- **開発サーバー**: `python manage.py runserver`
- **CSSビルド**: `python manage.py tailwind start`
## ルーティング
- `/`: 一覧表示・新規追加
- `/delete`: レコード削除
Claude Codeにアプリを作ってもらう
Claude Sonnet 4が作った仕様書をもとに、Claude Code (モデルはClaude Sonnet 4)に小遣い帳アプリを作ってもらうことにしました。ただし、今までClaudeを使った経験としてUIがダサい事が多かったので画面はモダンなデザインにしてくださいと、コードには適度に日本語のコメントを入れてください を追加しました。
出来たアプリの画面は以下のようになしました。
画面の違い
画面デザインの情報は指定しなかったので、かなり違いますね。
- 今回のアプリは入力フォームが上になりますね。元アプリを作った私の思いは小遣い帳は入力も重要ですが、記録を見る事の方が多いだろうと思い入力フォームを下にしました。やはりコンセプト的なものは伝えないといけませんね。
- 現在の残高や総件数、コピーライトなど仕様にないものを追加してくれました、気が効きますね😃
- しかし、コピーライトの年が2024年なのは何故でしょうか😅
- フォーム入力が成功した場合も成功メッセージが表示されます
- 入金は緑字で＋付き、出金は赤字でー付きで見やすいですね
- 画像ではわかりませんが、今回のアプリでは入金を入力すると出金は入力出来ないようになるJavaScriptが動いています
元のアプリは、サンプルコード・レベルの完成度ですが、今回のアプリは実際に使えそうなレベルだと思います。
コードの違い
元のアプリコードは先週のブログを見てください。
allowance/models.py
小遣い帳のモデル
- 元コードでは集計はSQLで行っていましたが、今回のコードではDjangoのORMを使っていますね。私はSQLの方がわかりやすいと思いますが、ORMではこのように書くのですね
- モデルにもバリデーションのコードがありますね。元コードではバリデーションはformsにしかありませんでしたが、Djangoでは基本的なデータ制約はmodelsに書きフォーム固有のチェックはformsに書くのが推奨されているそうです
- Metaオプションで管理画面で使用される情報を設定しています
from django.db import models
from django.db.models import Sum, Q, Window, F
from django.db.models.functions import RowNumber
class AllowanceManager(models.Manager):
def get_all_with_balance(self):
"""
累積残高を含むクエリセットを返す
SQLウィンドウ関数を使用して累積残高を効率的に計算
"""
return self.get_queryset().annotate(
# 入金・出金の差額を計算
net_amount=models.Case(
models.When(money_in__isnull=False, then=F('money_in')),
default=0,
output_field=models.IntegerField()
) - models.Case(
models.When(money_out__isnull=False, then=F('money_out')),
default=0,
output_field=models.IntegerField()
)
).annotate(
# ウィンドウ関数で累積残高を計算
balance=models.Window(
expression=Sum('net_amount'),
partition_by=[],
order_by=[F('date').asc(), F('id').asc()]
)
).order_by('date', 'id')
class Allowance(models.Model):
"""小遣い帳のデータモデル"""
date = models.DateField(verbose_name="日付") # 日付（必須）
description = models.CharField(max_length=255, verbose_name="内容") # 内容説明（最大255文字、必須）
money_in = models.PositiveIntegerField(null=True, blank=True, verbose_name="入金額") # 入金額（任意、正の整数）
money_out = models.PositiveIntegerField(null=True, blank=True, verbose_name="出金額") # 出金額（任意、正の整数）
created_at = models.DateTimeField(auto_now_add=True, verbose_name="作成日時") # 作成日時（自動設定）
updated_at = models.DateTimeField(auto_now=True, verbose_name="更新日時") # 更新日時（自動更新）
# カスタムマネージャーを設定
objects = AllowanceManager()
class Meta:
verbose_name = "小遣い帳"
verbose_name_plural = "小遣い帳"
ordering = ['date', 'id'] # 日付順、ID順で並び替え
def __str__(self):
return f"{self.date} - {self.description}"
def clean(self):
"""
モデルレベルでのバリデーション
入金・出金のどちらか一方のみ入力を強制
"""
from django.core.exceptions import ValidationError
# 両方入力されている場合
if self.money_in is not None and self.money_out is not None:
raise ValidationError("入金額と出金額の両方を入力することはできません。どちらか一方のみ入力してください。")
# 両方とも入力されていない場合
if self.money_in is None and self.money_out is None:
raise ValidationError("入金額または出金額のどちらかは必ず入力してください。")
allowance/views.py
小遣い帳のコントローラー
- 元コードではデータ保存にAllowanceモデルを使っていますが、今回は
form.save()で済んでいます。これはforms.pyの定義が違うからですね - delete処理は、IDのレコードが存在しない場合やエラー時の処理が、ちゃんと作られていますね
from django.shortcuts import render, redirect, get_object_or_404
from django.contrib import messages
from django.http import Http404
from django.views.decorators.http import require_POST
from .models import Allowance
from .forms import AllowanceForm
def index(request):
"""
メインページ: 一覧表示と新規追加フォームを表示
"""
# フォーム処理
if request.method == 'POST':
form = AllowanceForm(request.POST)
if form.is_valid():
form.save()
messages.success(request, '記録が正常に追加されました。')
return redirect('allowance:index')
else:
# フォームエラーがある場合、エラーメッセージを追加
for field, errors in form.errors.items():
for error in errors:
messages.error(request, error)
else:
form = AllowanceForm()
# 累積残高を含む全レコードを取得
allowances = Allowance.objects.get_all_with_balance()
# 最後のレコード（最新の残高）を取得
last_record = allowances.last() if allowances.exists() else None
context = {
'form': form,
'allowances': allowances,
'last_record': last_record,
}
return render(request, 'allowance/index.html', context)
@require_POST
def delete(request):
"""
レコード削除機能
POSTリクエストのみ受け付け、CSRFトークンで保護
"""
allowance_id = request.POST.get('allowance_id')
if not allowance_id:
messages.error(request, '削除対象のIDが指定されていません。')
return redirect('allowance:index')
try:
allowance = get_object_or_404(Allowance, id=allowance_id)
description = allowance.description # 削除前に内容を保存
allowance.delete()
messages.success(request, f'「{description}」の記録を削除しました。')
except Http404:
messages.error(request, '指定された記録が見つかりません。')
except Exception as e:
messages.error(request, f'削除中にエラーが発生しました: {str(e)}')
return redirect('allowance:index')
allowance/forms.py
バリデーション等を行うモデルフォームです
- Metaオプションで対応するモデルをmodelで、フォームから入力される属性をfieldsで、フォームで使われる属性をの辞書をwidgetsで指定しています
- 入金、出金のエラーチェックはコードで行っていますね、元コードでは
forms.IntegerFieldでバリデーションを定義しています - widgetsでCSSクラス名が定義されているいます。これは良くないのではと思いAIに尋ねてたところ、このCSSクラス名はBootstrap等のCSSフレームワーク使うことを想定だそうです。Tailwind CSSで使うと画面デザイン情報が処理コードに入ってしまい望ましくないですね
from django import forms
from django.core.exceptions import ValidationError
from .models import Allowance
class AllowanceForm(forms.ModelForm):
"""
小遣い帳のフォーム
カスタムバリデーションを含む
"""
class Meta:
model = Allowance
fields = ['date', 'description', 'money_in', 'money_out']
widgets = {
'date': forms.DateInput(
attrs={
'type': 'date',
'class': 'mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm'
}
),
'description': forms.TextInput(
attrs={
'class': 'mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm',
'placeholder': '内容を入力してください'
}
),
'money_in': forms.NumberInput(
attrs={
'class': 'mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm',
'placeholder': '入金額を入力（任意）',
'min': '0'
}
),
'money_out': forms.NumberInput(
attrs={
'class': 'mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm',
'placeholder': '出金額を入力（任意）',
'min': '0'
}
),
}
def clean(self):
"""
フォームレベルでのバリデーション
入金・出金のどちらか一方のみ入力を強制
"""
cleaned_data = super().clean()
money_in = cleaned_data.get('money_in')
money_out = cleaned_data.get('money_out')
# 両方入力されている場合
if money_in is not None and money_out is not None:
raise ValidationError("入金額と出金額の両方を入力することはできません。どちらか一方のみ入力してください。")
# 両方とも入力されていない場合
if money_in is None and money_out is None:
raise ValidationError("入金額または出金額のどちらかは必ず入力してください。")
return cleaned_data
def clean_money_in(self):
"""入金額のバリデーション"""
money_in = self.cleaned_data.get('money_in')
if money_in is not None and money_in <= 0:
raise ValidationError("入金額は正の整数で入力してください。")
return money_in
def clean_money_out(self):
"""出金額のバリデーション"""
money_out = self.cleaned_data.get('money_out')
if money_out is not None and money_out <= 0:
raise ValidationError("出金額は正の整数で入力してください。")
return money_out
allowance/templates/allowance/index.html
テンプレート
- baseテンプレートは使ってないですね。これは1つしかテンプレートがないので良いでしょう
- Tailwind CSSはCDNから全体をロードしています！
django-tailwindを使っているのに台無しです。😅 - フォームのinputタグ等はformsで定義されたものを使っています
{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小遣い帳管理システム</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: {
50: '#eff6ff',
500: '#3b82f6',
600: '#2563eb',
700: '#1d4ed8',
}
}
}
}
}
</script>
</head>
<body class="bg-gray-50 min-h-screen">
<!-- ヘッダー -->
<header class="bg-white shadow-sm border-b border-gray-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center py-6">
<div class="flex items-center">
<div class="flex-shrink-0">
<h1 class="text-2xl font-bold text-gray-900">💰 小遣い帳管理システム</h1>
</div>
</div>
<div class="text-sm text-gray-500">
家計管理をスマートに
</div>
</div>
</div>
</header>
<!-- メインコンテンツ -->
<main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
<!-- メッセージ表示 -->
{% if messages %}
<div class="mb-6">
{% for message in messages %}
<div class="rounded-md p-4 mb-4 {% if message.tags == 'success' %}bg-green-50 border border-green-200{% elif message.tags == 'error' %}bg-red-50 border border-red-200{% else %}bg-blue-50 border border-blue-200{% endif %}">
<div class="flex">
<div class="flex-shrink-0">
{% if message.tags == 'success' %}
<svg class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
{% elif message.tags == 'error' %}
<svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
</svg>
{% endif %}
</div>
<div class="ml-3">
<p class="text-sm {% if message.tags == 'success' %}text-green-800{% elif message.tags == 'error' %}text-red-800{% else %}text-blue-800{% endif %}">
{{ message }}
</p>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
<div class="px-4 sm:px-0">
<!-- 新規追加フォーム -->
<div class="bg-white shadow rounded-lg mb-8">
<div class="px-4 py-5 sm:p-6">
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">新しい記録を追加</h3>
<form method="post" class="space-y-4">
{% csrf_token %}
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
<!-- 日付 -->
<div>
<label for="{{ form.date.id_for_label }}" class="block text-sm font-medium text-gray-700">
日付 <span class="text-red-500">*</span>
</label>
{{ form.date }}
</div>
<!-- 内容 -->
<div>
<label for="{{ form.description.id_for_label }}" class="block text-sm font-medium text-gray-700">
内容 <span class="text-red-500">*</span>
</label>
{{ form.description }}
</div>
<!-- 入金額 -->
<div>
<label for="{{ form.money_in.id_for_label }}" class="block text-sm font-medium text-gray-700">
入金額
</label>
{{ form.money_in }}
</div>
<!-- 出金額 -->
<div>
<label for="{{ form.money_out.id_for_label }}" class="block text-sm font-medium text-gray-700">
出金額
</label>
{{ form.money_out }}
</div>
</div>
<div class="pt-4">
<button type="submit" class="bg-primary-600 border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-colors duration-200">
<svg class="-ml-1 mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
記録を追加
</button>
</div>
</form>
</div>
</div>
<!-- 記録一覧 -->
<div class="bg-white shadow rounded-lg">
<div class="px-4 py-5 sm:p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg leading-6 font-medium text-gray-900">小遣い帳の記録</h3>
<div class="text-sm text-gray-500">
総件数: {{ allowances.count }}件
</div>
</div>
{% if allowances %}
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 rounded-lg">
<table class="min-w-full divide-y divide-gray-300">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">日付</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">内容</th>
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">入金額</th>
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">出金額</th>
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">累積残高</th>
<th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
{% for allowance in allowances %}
<tr class="hover:bg-gray-50 transition-colors duration-150">
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
{{ allowance.date|date:"Y/m/d" }}
</td>
<td class="px-6 py-4 text-sm text-gray-900">
{{ allowance.description }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-right">
{% if allowance.money_in %}
<span class="text-green-600 font-medium">+¥{{ allowance.money_in|floatformat:0 }}</span>
{% else %}
<span class="text-gray-400">-</span>
{% endif %}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-right">
{% if allowance.money_out %}
<span class="text-red-600 font-medium">-¥{{ allowance.money_out|floatformat:0 }}</span>
{% else %}
<span class="text-gray-400">-</span>
{% endif %}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-right font-medium">
{% if allowance.balance >= 0 %}
<span class="text-blue-600">¥{{ allowance.balance|floatformat:0 }}</span>
{% else %}
<span class="text-red-600">¥{{ allowance.balance|floatformat:0 }}</span>
{% endif %}
</td>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium">
<form method="post" action="{% url 'allowance:delete' %}" class="inline" onsubmit="return confirm('「{{ allowance.description }}」の記録を削除しますか？')">
{% csrf_token %}
<input type="hidden" name="allowance_id" value="{{ allowance.id }}">
<button type="submit" class="text-red-600 hover:text-red-900 transition-colors duration-200">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<!-- 最終残高表示 -->
{% if last_record %}
<div class="mt-6 bg-gray-50 rounded-lg p-4">
<div class="flex items-center justify-between">
<span class="text-sm font-medium text-gray-700">現在の残高:</span>
<span class="text-lg font-bold {% if last_record.balance >= 0 %}text-blue-600{% else %}text-red-600{% endif %}">
¥{{ last_record.balance|floatformat:0 }}
</span>
</div>
</div>
{% endif %}
{% else %}
<div class="text-center py-12">
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
<h3 class="mt-2 text-sm font-medium text-gray-900">記録がありません</h3>
<p class="mt-1 text-sm text-gray-500">上記のフォームから最初の記録を追加してください。</p>
</div>
{% endif %}
</div>
</div>
</div>
</main>
<!-- フッター -->
<footer class="bg-white border-t border-gray-200 mt-12">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-sm text-gray-500">
© 2024 小遣い帳管理システム - シンプルで効果的な家計管理
</p>
</div>
</div>
</footer>
<script>
// 日付フィールドのデフォルト値を今日の日付に設定
document.addEventListener('DOMContentLoaded', function() {
const dateField = document.querySelector('input[type="date"]');
if (dateField && !dateField.value) {
const today = new Date();
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0');
const day = String(today.getDate()).padStart(2, '0');
dateField.value = `${year}-${month}-${day}`;
}
});
// 入金額と出金額のどちらか一方のみ入力できるようにするJavaScript
document.addEventListener('DOMContentLoaded', function() {
const moneyInField = document.querySelector('input[name="money_in"]');
const moneyOutField = document.querySelector('input[name="money_out"]');
if (moneyInField && moneyOutField) {
moneyInField.addEventListener('input', function() {
if (this.value) {
moneyOutField.disabled = true;
moneyOutField.classList.add('bg-gray-100');
} else {
moneyOutField.disabled = false;
moneyOutField.classList.remove('bg-gray-100');
}
});
moneyOutField.addEventListener('input', function() {
if (this.value) {
moneyInField.disabled = true;
moneyInField.classList.add('bg-gray-100');
} else {
moneyInField.disabled = false;
moneyInField.classList.remove('bg-gray-100');
}
});
}
});
</script>
</body>
</html>
コード生成
コード生成のログの一部を載せますね、
⏺ 小遣い帳管理システムを作成します。まず、必要なタスクを整理してから実装していきます。
⏺ Update Todos
⎿ ☐ Django プロジェクトとアプリケーションの基本構造を作成
☐ Allowance モデルを定義（日付、内容、入金額、出金額など）
☐ AllowanceForm を作成（バリデーション含む）
☐ ビュー関数を実装（一覧表示、削除機能）
☐ URLルーティングを設定
☐ Tailwind CSS を設定
☐ HTML テンプレートを作成（モダンなデザイン）
☐ データベースマイグレーションを実行
・・・
⏺ 小遣い帳管理システムが完成しました！
🎉 システム完成
以下の機能を持つモダンな小遣い帳管理システムを作成しました：
・・・
🚀 起動方法
# 仮想環境の有効化
source venv/bin/activate
# 開発サーバー起動
python manage.py runserver
# ブラウザでアクセス
# http://127.0.0.1:8000/
システムは完全に動作する状態です！
しかし、実行するとエラーになったので、エラーメッセージをClaude Codeに与えました。
> エラーになりました。対応してください。 Internal Server Error: /
Traceback (most recent call last):
・・・
⏺ エラーを修正します。問題は、空のクエリセットに対してlastフィルターを使用していることです。
⏺ Read(allowance/templates/allowance/index.html)
⎿ Read 20 lines (ctrl+r to expand)
⏺ 問題の箇所を見つけるために、テンプレートの該当部分を確認します。
⏺ Search(pattern: "with allowances\|last", path: "allowance/templates/allowance/index.html", output_mode: "content")
⎿ Found 1 line (ctrl+r to expand)
⏺ 問題は197行目の{% with allowances|last as last_record
%}です。空のクエリセットに対してlastフィルターを使うとエラーになります。テンプレートを修正します。
・・・
⏺ サーバーを再起動して動作確認します。
⏺ Bash(pkill -f "python manage.py runserver")
⎿ Error: Error
⏺ Bash(source venv/bin/activate && python manage.py runserver 8000 &)
⎿ Error: Command timed out after 2m 0.0s Watching for file changes with StatReloader
[25/Jul/2025 15:40:35] "GET / HTTP/1.1" 200 13689
[25/Jul/2025 15:40:57] "POST / HTTP/1.1" 302 0
[25/Jul/2025 15:40:57] "GET / HTTP/1.1" 200 17774
[25/Jul/2025 15:41:35] "POST / HTTP/1.1" 200 19044
⏺ 素晴らしいです！サーバーが正常に動作し、すでにHTTPリクエストが処理されていることが確認できます（200と302のレスポンスコード）。
エラーが修正されました！🎉
修正内容
1. 問題: 空のクエリセットに対して|lastフィルターを使用していた
2. 解決策:
- ビュー側でallowances.last() if allowances.exists() else Noneを使用
- テンプレートでlast_record変数を直接使用
現在の状態
- ✅ サーバーが正常に起動
- ✅ エラーが解消
- ✅ GET/POSTリクエストが正常に処理されている
システムは完全に動作しています！ブラウザで http://127.0.0.1:8000/ にアクセスして小遣い帳システムをご利用ください。
正しくエラー原因を突き止め、対処してますね❗😃
> /exit
Total cost: $1.57
Total duration (API): 8m 42.2s
Total duration (wall): 27h 34m 47.4s
Total code changes: 808 lines added, 56 lines removed
Usage by model:
claude-3-5-haiku: 20.5k input, 952 output, 0 cache read, 0 cache write
claude-sonnet: 95 input, 28.5k output, 2.3m cache read, 115.4k cache write
まとめ
画面
Claude Codeが作ってくれたアプリの画面は素敵なものでした。今回は画面のデザインに付いては全く指定しなかったので素敵な画面を作ってくれたのですが、入力フォームが上に置かれました。
画面のラフな画像（文書？）を渡す。または、アプリのコンセプト／ユースケース／利用ユーザーに付いて定義すると良いのでしょうか？
やはり間違いがある
AIによる生成というか、人間が書いたコードでも間違いがあります。今回はdjango-tailwindを使っているのに、django-tailwindによって生成されたCSSではなくTailwind CSS CDNを使っていました。
Tailwind CSSは多機能なので巨大なCSSファイルが必要で、CDNにあるファイルは400kByteのJavaScriptファイルです。しかし、django-tailwindを使うと、アプリで使っているCSSだけを抽出してCSSファイルを作成するので、このアプリでは30Kbyte位になります。
AIでコードを再構築する意義
従来の人間がコードを書いていた時代では、問題の無いコードを再度書き直す事は、ほとんどありませんでした。今回行った、人間が作ったコードの仕様をAIに書いてもらい、それを基にAIでアプリを書く事も、あまり意味は無いように思えます。
ただし、時間10分位、コスト￥200位で出来るとなると、ここから得られるメリットが僅かでも価値がありますね❗ 今回わたしが得られたものは、
- formsにmodelsを設定（
class Meta: model =）する事で、コードがよりシンプルになる - DjangoのORMでWindow関数を使う方法が判った（たぶん使わないでSQL書くけど・・・）
- formsにも、modelsにもバリデーションを書ける
前回、Djangoのformsを使いましたが、理解が不足していた部分を学ぶ事ができました。また、最初に書いたように素敵な画面を作ってくれました、このような細かな改良も案外面倒ですよね。
