【VSCode】Laravelアプリ 「ショップ買い物」　Cline で自動開発

AI

　前回TwitterModokiアプリで味をしめたので、今回はショップお買い物アプリを生成AIに作成させてみた。その後、自分でも作成する予定。

1. 開発環境の前提

  • ローカルサーバー: XAMPP（Apache, MySQL 起動済み）
  • エディタ: VS Code + 拡張機能「Cline」
  • 作業ディレクトリ: C:\xampp\htdocs\shop_app
  • ローカルURL: http://localhost/shop_app/index.php

2. ディレクトリ構成（ゴール）

Clineに指示を出し、最終的に以下の構成になればOK。

C:\xampp\htdocs\shop_app\
├── config.php        # DB接続設定（PDO）
├── database.sql      # DB・テーブル作成用SQL
├── index.php         # 商品一覧画面
├── cart.php          # カート画面（セッション管理）
├── checkout.php      # お届け先入力画面
└── success.php       # 注文確定・DB保存・セッションクリア

3. Clineへの初期プロンプト（コピペ用）

VSCodeで C:\xampp\htdocs\shop_app フォルダを開き、Clineのチャットに以下を流し込む。

XAMPP（Apache/MySQL）環境で動作するシンプルなECショップの買い物プログラムを自動開発して。

【環境設定】
・言語: PHP 8.x, HTML5, CSS3, JavaScript
・ルートディレクトリ: C:\xampp\htdocs\shop_app
・URL: http://localhost/shop_app/

【実装機能】
1. database.sql: `shop_db` 作成、`products`（商品）、`orders`（注文履歴）、`order_details`（注文明細）のテーブル作成。テストデータ5件のインサートSQL。
2. config.php: PDO接続設定。
3. index.php: 商品一覧（プレースホルダー画像、価格、カートに入れるボタン）。
4. cart.php: $_SESSION を使用したカート管理（数量変更、削除、合計計算）。
5. checkout.php: 購入者情報入力（氏名、住所、電話番号）。
6. success.php: データを orders/order_details に保存し、セッションクリアして完了画面表示。

【進め方】
まずステップ1として `database.sql` を作成し、そこで一度止まって指示を待ってください。

4. データベースの構築（手動作業）

Clineが database.sql を書き出したら、ローカルのMySQLに手動でインポートする。

１．ブラウザで http://localhost/phpmyadmin/ を開く。

２．上部メニューの 「SQL」 タブをクリック。

３．Clineが生成したSQL（以下が基準）を貼り付けて右下の「実行」をクリック。

CREATE DATABASE IF NOT EXISTS `shop_db` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
USE `shop_db`;

CREATE TABLE IF NOT EXISTS `products` (
  `id` INT AUTO_INCREMENT PRIMARY KEY,
  `name` VARCHAR(255) NOT NULL,
  `price` INT NOT NULL,
  `image_url` VARCHAR(255) DEFAULT 'https://via.placeholder.com/150'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

CREATE TABLE IF NOT EXISTS `orders` (
  `id` INT AUTO_INCREMENT PRIMARY KEY,
  `customer_name` VARCHAR(100) NOT NULL,
  `address` TEXT NOT NULL,
  `tel` VARCHAR(20) NOT NULL,
  `total_price` INT NOT NULL,
  `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

CREATE TABLE IF NOT EXISTS `order_details` (
  `id` INT AUTO_INCREMENT PRIMARY KEY,
  `order_id` INT NOT NULL,
  `product_id` INT NOT NULL,
  `price` INT NOT NULL,
  `quantity` INT NOT NULL,
  FOREIGN KEY (`order_id`) REFERENCES `orders`(`id`) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

INSERT INTO `products` (`name`, `price`) VALUES 
('アイテムA', 1200), ('アイテムB', 2500), ('アイテムC', 1800);

5. アプリケーションコードの自動生成

DBインポート後、Clineに「SQLの実行が完了しました。次のステップ（PHPファイル群の生成）に進んでください」と指示。

config.php（ベースライン）

パスワードは空文字。接続エラーが出る場合はここを確認。

<?php
$host = 'localhost'; $dbname = 'shop_db'; $username = 'root'; $password = '';
try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8mb4", $username, $password, [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
        PDO::ATTR_EMULATE_PREPARES => false,
    ]);
} catch (\PDOException $e) {
    die("DB接続失敗: " . $e->getMessage());
}

Clineがファイルを生成・書き込みする際、VS Code上で「Approve（許可）」を求められるので全て承認する。

6. 動作確認・デバッグの詳細手順

プログラムが生成されたら、ブラウザとphpMyAdminを使用して以下のフローに沿って各画面の機能とデータベースの連動性を厳密に検証する。

① 商品一覧画面（index.php）の検証

ブラウザで http://localhost/shop_app/index.php にアクセスする。

  • 表示確認: データベースから取得したダミー商品（アイテムA、B、C）の名前と価格が崩れずに表示されているか。
  • カート追加処理: 任意の商品の数量を選択し、「カートに入れる」ボタンを押す。
  • 挙動の成否: ボタン押下後、ページがリロード、または指定の遷移（cart.php へのリダイレクトなど）が行われ、エラー（404や500、PHPの文字出力）が出ないか。

② カート画面（cart.php）の検証

  • セッション保持の確認: index.php で入れた商品と数量、および小計・合計金額が正しく計算されて表示されているか。
  • 数量変更テスト: 数量の数値を変更（例: 1から3へ）し、更新ボタン等を押した際、合計金額が正しく 単価 × 3 に再計算されるか。
  • 削除テスト: カート内の「削除」ボタンを押し、対象の商品がカートから消え、合計金額が減算されるか。
  • 空カートの挙動: 全ての商品を削除した際、「カートは空です」等のメッセージが表示され、エラーを吐かずに index.php に戻るリンクが機能するか。

③ お届け先入力画面（checkout.php）の検証

カート画面から「購入手続きへ」進む。

  • フォームの表示: 氏名、住所、電話番号の入力欄が正しく表示されているか。
  • 未入力バリデーション（任意）: 空欄のまま送信ボタンを押した際、HTML5の required 属性やPHP側で入力を促すエラーが出るか。
  • データ送信: 適切なテストデータ（例：テスト太郎、東京都…、090…）を入力し、「注文を確定する」を押して次画面へ遷移するか。

④ 購入完了画面（success.php）とDB連動の検証

  • セッションクリアの確認: 「ご注文ありがとうございました」等のメッセージが表示された後、再度 cart.php にアクセスしてカートが完全に空にリセットされているか。
  • データベース（MySQL）のデータ確認:
    1. http://localhost/phpmyadmin/ を開く。
    2. shop_db の orders テーブルを開き、先ほどフォームに入力した「氏名・住所・電話番号・合計金額」が1レコードとして保存されているか確認する（id は自動連番で1になる）。
    3. 次に order_details テーブルを開き、購入した商品の product_id、price、quantity が保存されており、かつ order_id が上記 orders の id と一致しているか（リレーションが正しく組めているか）を確認する。

7. トラブルシューティング（エラー・バグ発生時の対応）

テスト中に想定と異なる挙動をした場合は、以下のログ・コードを確認してClineにそのまま修正を依頼する。

よくあるバグと確認すべきログ

  • 500 Internal Server Error / 画面が真っ白になった場合
    • 確認先: C:\xampp\apache\logs\error.log
    • 対応: ログの最下部（最新行）を確認し、Fatal error: ... in C:\xampp\htdocs\shop_app\... on line XX のようなエラー文をそのままコピーしてClineに「このエラーログが出たので修正して」と投げる。
  • ページを移動するとカートが空になる場合
    • 原因: セッションが開始されていない、またはクッキーが正常に機能していない。
    • 確認箇所: index.php, cart.php, checkout.php, success.php のすべてのファイルの1行目（<?php の直後）に session_start(); が記述されているか確認する。記述が漏れているファイルをClineに指定して「セッションが引き継がれるように修正して」と指示する。
  • データベースに保存されない / SQLエラーが出る場合
    • 原因: プレースホルダのバインドミス、またはテーブルの型・制約（外部キーなど）の不整合。
    • 確認箇所: success.php 内の INSERT INTO 構文。$stmt->execute(...) に渡している配列のキーと、SQL文のプレースホルダ（:customer_name など）が完全に一致しているか。エラー文をClineに渡せば、SQL文とバインド処理を同期するように自動修正される。

コメント