2025.08.10（更新日: 2025.08.13）
ChatGPT 5で作る「買い物リスト作成アプリ」
はじめに
ChatGPT 5の回答
いいね、その仕様なら「iPhoneで使えるWebアプリ（PWA化も可）」が相性バッチリ。DockerでDjango REST + Vue 3のフルスタック雛形と、ブログ記事の下書きまで用意してキャンバスに置きました。すぐ動かせます。
やること（超短縮版）
- プロジェクト直下で
docker compose up --build - ブラウザで http://localhost:5173 を開く
同一Wi-FiのiPhoneからはPCのLAN IPでhttp://<PCのIP>:5173
入っているもの
- 見出し（セクション）作成・編集・削除
- アイテム追加／数量欄
- ドラッグ&ドロップで並べ替え（vuedraggable）
- チェックで削除（APIの
toggle(hard_delete)で実装） - Django REST（List/Section/Item + 並び替えAPI）
- Docker（Postgres/Backend/Frontend）
- ブログ記事スケルトン（そのまま清書OK）
次の一手、選べます
- PWA対応してホーム画面から起動できるようにする（iPhone向けアイコン/manifest/Service Worker）
- ソフト削除にして「購入済み」リストへ移動
- 認証（簡易トークン or セッション）を追加
- UIをTailwindで整える
どれから行く？
まずはPWA化でホーム画面追加までやっちゃう？それとも「購入済み」タブを作ってチェック＝移動に変更する？
一歩ずつ
全体像を提示してくれた。
ちんぷんかんぷんな部分が多い。
一歩ずつしか進めない。
人間はそういう生き物だ。
プロジェクト作成
以下のディレクトリ構造を作成する。
// Directory layout:
// .
// ├─ docker-compose.yml
// ├─ backend/
// │ ├─ Dockerfile
// │ ├─ requirements.txt
// │ ├─ manage.py
// │ ├─ shopping_backend/
// │ │ ├─ __init__.py
// │ │ ├─ settings.py
// │ │ ├─ urls.py
// │ │ └─ asgi.py
// │ └─ shopping/
// │ ├─ __init__.py
// │ ├─ models.py
// │ ├─ serializers.py
// │ ├─ views.py
// │ ├─ urls.py
// │ └─ admin.py
// └─ frontend/
// ├─ Dockerfile
// ├─ package.json
// ├─ vite.config.js
// ├─ index.html
// └─ src/
// ├─ main.js
// ├─ App.vue
// └─ components/
// └─ ShoppingList.vue雛形配置完了。
起動
hiroki@shibatahiroshitakanoiMac shopping_list_app % docker compose up --build以下のエラーが出て、うまくいかない。
hiroki@shibatahiroshitakanoiMac shopping_list_app % docker compose up --build
WARN[0000] /Users/hiroki/Downloads/python/shopping_list_app/docker-compose.yml: the attribute `version` is obsolete, it will be ignored, please remove it to avoid potential confusion
unable to get image 'postgres:16': Cannot connect to the Docker daemon at unix:///Users/hiroki/.docker/run/docker.sock. Is the docker daemon running?原因は二つだそうだ。
以下は無視でOK。
WARN[0000] /Users/hiroki/Downloads/python/shopping_list_app/docker-compose.yml: the attribute `version` is obsolete, it will be ignored, please remove it to avoid potential confusion Dockerに接続できないという以下のエラーを解決する必要がある。
unable to get image 'postgres:16': Cannot connect to the Docker daemon at unix:///Users/hiroki/.docker/run/docker.sock. Is the docker daemon running?
Dockerアイコンは出てこない。
docker infoはエラー。
以下は削除した。
最初のエラーは出なくなった。
hiroki@shibatahiroshitakanoiMac shopping_list_app % docker compose up --build
unable to get image 'shopping_list_app-backend': Cannot connect to the Docker daemon at unix:///Users/hiroki/.docker/run/docker.sock. Is the docker daemon running?このルートを通っていこう。
対応OSの確認から。
現行+過去2世代とのこと。
現行がmacOS Sequoia。
自分は、Sonomaを使っている。
Docker Desktopが使えるはずだ。
まずはDockerにサインインした。
以下のデスクトップアプリをダウンロードする。
すでにあったが、上書きした。
このアイコンをクリックして、PCのパスワードを入力した。
Docker desktopの起動に成功した。
dockerコマンドが使えた。
hiroki@shibatahiroshitakanoiMac shopping_list_app % docker compose up --build
[+] Running 15/15
✔ db Pulled 10.9s
✔ 19a781737ad0 Pull complete 0.5s
✔ d7f875e2b62b Pull complete 0.9s 5にログを投げたら、2点修正が必要とのこと。
頼もしい。
症状1
frontend: sh: vite: not found
→ bind mountで /app をホスト側で上書き → コンテナ内で入れた node_modules が見えなくなってます。症状2
backend: DB接続失敗で即終了
→ Postgresの起動完了前にDjangoがmigrateを実行して落ちてます（DBはその直後にReady）。修正1
1) docker-compose.yml を修正
frontend に匿名ボリューム /app/node_modules を追加（これで上書きされない）
db にヘルスチェックを追加
backend を service_healthy まで待つようにfrontend に匿名ボリューム /app/node_modules を追加（これで上書きされない）
services:
frontend:
volumes:
- ./frontend:/app
- /app/node_modulesdb にヘルスチェックを追加
services:
db:
healthcheck:
test: ["CMD-SHELL", "pg_iserady -U shopping -d shopping"]
interval: 2s
timeout: 2s
retries: 20backend を service_healthy まで待つように
services:
backend:
command: bash -c "python wait_for_db.py && python manage.py migrate && python manage.py runserver 0.0.0.0:8000"
depends_on:
db:
condition: service_healthy
restart: on-failure修正2
backend に待機スクリプトを追加backend/wait_for_db.py を作成
import os, time, psycopg2
host = os.getenv("DB_HOST", "db")
db = os.getenv("DB_NAME", "shopping")
user = os.getenv("DB_USER", "shopping")
pwd = os.getenv("DB_PASSWORD", "shopping")
port = int(os.getenv("DB_PORT", "5432"))
for i in range(60):
try:
conn = psycopg2.connect(host=host, dbname=db, user=user, password=pwd, port=port)
conn.close()
print("DB is ready.")
break
except Exception as e:
print(f"Waiting for DB... ({i+1}/60) {e}")
time.sleep(1)
else:
raise SystemExit("DB is not ready, abort.")再起動
docker compose down -v
docker compose up --build出ればOK：
- frontend：
VITE ... readyとLocal: http://localhost:5173 - backend：
Starting development server at http://0.0.0.0:8000/
エラーだった。
5に相談。
docker-compose.yml を少し戻す
db の healthcheck: ブロックをまるごと削除。
backend の depends_on: も「condition指定なし」に変更（- db のみ）。db の healthcheck: ブロックをまるごと削除。
services:
db:
image: postgres:16
environment:
POSTGRES_DB: shopping
POSTGRES_USER: shopping
POSTGRES_PASSWORD: shopping
volumes:
- dbdata:/var/lib/postgresql/data
ports:
- "5432:5432"
backend:backend の depends_on: も「condition指定なし」に変更（- db のみ）。
backend:
depends_on:
- db
restart: on-failure再起動（完全リセット）
docker compose down -v
docker compose up --buildフロントエンドはうまく起動したようだ。
frontend-1 |
frontend-1 | > shopping-frontend@0.0.1 dev
frontend-1 | > vite --host 0.0.0.0
frontend-1 |
frontend-1 |
frontend-1 | VITE v5.4.19 ready in 868 ms
frontend-1 |
frontend-1 | ➜ Local: http://localhost:5173/
frontend-1 | ➜ Network: http://172.19.0.4:5173/DBも準備OK。
backend-1 | DB is ready.この画面が開けた。
画像とログを5に送った。
新規ファイル作成
backend/shopping_backend/wsgi.py（内容はキャンバスの通り）
compose の backend コマンドを差し替え
wait_for_db.py → makemigrations → migrate → runserver の順に実行する版
（キャンバスの「docker-compose.yml (FIXED)」を参照） backend:
command: bash -c "python manage.py migrate && python manage.py runserver 0.0.0.0:8000"
volumes:
- ./frontend:/app
hiroki@shibatahiroshitakanoiMac shopping_list_app % docker compose down -v
[+] Running 5/5
✔ Container shopping_list_app-frontend-1 Removed 2.1s
✔ Container shopping_list_app-backend-1 Removed 1.2s
✔ Container shopping_list_app-db-1 Removed 0.4s
✔ Volume shopping_list_app_dbdata Removed 0.1s
✔ Network shopping_list_app_default Removed hiroki@shibatahiroshitakanoiMac shopping_list_app % docker compose up --build上記でエラー発生か？
2点だけ直せばOKとのこと。
backend/shopping_backend/__init__.py … 空ファイルでOK（これがないとパッケージとして認識されません）なかった。
作成した。
backend/shopping_backend/wsgi.pyこれは大丈夫。
（すでに作っていれば、場所がずれてないかだけ再確認：backend/shopping_backend/wsgi.py）場所がずれていた。
正しい場所に移した。
control + Cでストップして、
コンテナ内で一度だけnpmを入れるコマンドを入力する。
hiroki@shibatahiroshitakanoiMac shopping_list_app % docker compose exec frontend sh -lc "npm i"
service "frontend" is not runningfrontendが起動していない。
1は直した。
コンテナを起動
別ターミナルでnpm install
hiroki@shibatahiroshitakanoiMac shopping_list_app % docker compose run --rm frontend sh -lc "npm i"
[+] Creating 2/2
✔ Container shopping_list_app-db-1 Running 0.0s
✔ Container shopping_list_app-backend-1 Recreated 0.5s
[+] Running 1/1
✔ Container shopping_list_app-backend-1 Started 0.2s
added 55 packages, and audited 56 packages in 17s
10 packages are looking for funding
run `npm fund` for details
2 moderate severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.全体再起動
うまくいった。
frontend-1 | > shopping-frontend@0.0.1 dev
frontend-1 | > vite --host 0.0.0.0
frontend-1 |
frontend-1 |
frontend-1 | VITE v5.4.19 ready in 856 ms
frontend-1 |
frontend-1 | ➜ Local: http://localhost:5173/
frontend-1 | ➜ Network: http://172.19.0.4:5173/
見出しを追加しても何も起きない。
ターミナルのログ
backend-1 | Bad Request: /api/sections/
backend-1 | [10/Aug/2025 14:27:59] "POST /api/sections/ HTTP/1.1" 400 53backendが正常に起動しているか
ターミナルで docker compose logs backend を実行
→ Starting development server at http://0.0.0.0:8000/ が出ていればOK
マイグレーション作成 & 反映hiroki@shibatahiroshitakanoiMac shopping_list_app % docker compose exec backend bash -lc "python manage.py makemigrations shopping && python manage.py migrate"
Migrations for 'shopping':
shopping/migrations/0001_initial.py
- Create model List
- Create model Section
- Create model Item
Operations to perform:
Apply all migrations: admin, auth, contenttypes, sessions, shopping
Running migrations:
Applying shopping.0001_initial... OK（任意）最初のリストを1件だけ作っておく
（フロントからも作れるけど、動作確認が早いです）hiroki@shibatahiroshitakanoiMac shopping_list_app % docker compose exec backend python manage.py shell -c "from shopping.models import List; List.objects.get_or_create(name='My List')"ブラウザを更新して、
http://localhost:5173 を開き、
見出し追加 → アイテム追加 → 並べ替え → チェックで削除
を試す。追加できた！
アイテムの追加
並べ替え
チェックすると削除される
バツを押しても削除された。
PWA化
hiroki@shibatahiroshitakanoiMac shopping_list_app % docker compose run --rm frontend sh -lc "npm i -D vite-plugin-pwa"
[+] Creating 2/2
✔ Container shopping_list_app-db-1 Running 0.0s
✔ Container shopping_list_app-backend-1 Recreated 1.9s
[+] Running 1/1
✔ Container shopping_list_app-backend-1 Started 0.4s
npm warn deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated source-map@0.8.0-beta.0: The work that was done in this beta branch won't be included in future versions
added 306 packages, and audited 362 packages in 50s
96 packages are looking for funding
run `npm fund` for details
2 moderate severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
export default defineConfig({
plugins: [
vue(),
VitePWA({
registerType: 'autoUpdate',
devOptions: { enabled: true }, // 開発中でもSWを試せる
manifest: {
name: '買い物リスト',
short_name: '買い物リスト',
description: '見出し・並べ替え・チェック削除ができる買い物リスト',
theme_color: '#ffffff',
background_color: '#ffffff',
display: 'standalone',
start_url: '/',
icons: [
{ src: '/icons/icon-192.png', sizes: '192x192', type: 'image/png' },
{ src: '/icons/icon-512.png', sizes: '512x512', type: 'image/png' },
{ src: '/icons/maskable-512.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' }
]
},
workbox: {
// 静的アセットは事前キャッシュ、APIは“キャッシュしない”で常に最新
runtimeCaching: [
{
urlPattern: /^https?:\/\/[^/]+\/api\//,
handler: 'NetworkOnly',
}
],
}
})
],
// SWを自動登録（更新も自動反映）
if ('serviceWorker' in navigator) {
import('virtual:pwa-register').then(({ registerSW }) => registerSW())
}
たぶん、うまく行った。
http://localhost:5173にアクセスできなかった。
これがなかった！
import { VitePWA } from 'vite-plugin-pwa' // ←これが必要！
PCでフロントが起動できた。
PCのIPを調べる。
スマホでアクセスできた。
機内モードだと動かせなかった。
オフライン対応
docker compose up –buildはうまく行ったようだ。
スマホで機内モードに変更すると以下のようになる。
商品の追加ができる。
チェックボックスを押すと削除される。
PCブラウザでは何も変化がない。
スマホをPCと同じWifiに繋ぐ。（機内モード解除）
削除したはずのりんごが復活した。
PCの画面をリロードすると、スマホと同じ状態になった。
ログはこちら。
backend-1 | [10/Aug/2025 18:40:52] "POST /api/items/ HTTP/1.1" 201 131
backend-1 | [10/Aug/2025 18:40:53] "POST /api/items/ HTTP/1.1" 201 131
backend-1 | [10/Aug/2025 18:40:53] "GET /api/lists/1/ HTTP/1.1" 200 411
backend-1 | [10/Aug/2025 18:41:04] "GET /api/lists/ HTTP/1.1" 200 413
backend-1 | [10/Aug/2025 18:41:04] "GET /api/lists/1/ HTTP/1.1" 200 411
backend-1 | [10/Aug/2025 18:41:32] "GET /api/lists/ HTTP/1.1" 200 413
backend-1 | [10/Aug/2025 18:41:32] "GET /api/lists/1/ HTTP/1.1" 200 411ちんぷんかんぷん
ChatGPT 5の力を借りて、Vue.js、Docker、Djangoなどの技術を使って、オリジナルアプリを作ってみたが、正直な感想は見出しの通り。
これから、一つ一つ理解していこう。
理解することで、この世界と一つになることができる。
この記事の要約
以下の記事「ChatGPT 5で作る『買い物リスト作成アプリ』」を簡潔にまとめました。
要約（超簡潔版）
- 目的
ChatGPT-5に「買い物リスト用のWebアプリ（PWA対応）」のコードを生成してもらい、すぐ動くテンプレートを手に入れる。 - 構成内容
- フロントエンド：Vue 3＋vuedraggable、チェック・並べ替えなどのUI
- バックエンド：Django REST API（List／Section／ItemのCRUD＋並び替え対応）
- Docker：PostgreSQL＋backend＋frontendを連携する構成
- ブログ記事下書き付きで、ドキュメントをそのまま使える
- 実行手順
docker compose up --buildでアプリ起動http://localhost:5173をPC＆iPhoneからアクセスして動作確認
- ステップアップ案
- PWA化（ホーム画面追加、Service Worker）
- チェック済アイテムを「購入済みタブ」へ移動（ソフト削除）
- 認証機能の追加（トークン or セッション）
- UIをTailwind CSSで整える
- 作者の感想
技術要素が多く「ちんぷんかんぷん」だが、ひとつずつ理解を深めたいという前向きな姿勢。
詳しく知りたい部分はどこ？
必要であれば、以下のような情報も提示できます：
- 実際の
docker-compose.ymlやファイル構成 - PWA化の具体的なコードや設定
- 起動時のトラブルシューティング情報
- Vue／Django間のAPI設計詳細
気になる項目があれば、気軽に教えてくださいね！
コメントを残す