chatGPT プロンプト集 Laravel

chatGPT+Laravelを使って簡単な CRUDアプリ作り試してみる

今回は簡単なマスタの登録、修正、削除、一覧をするCRUDアプリをchatGPTを使って作ってみる。

１．chatGPT プロンプト１ 簡単なマスタCRUDの例

#指示書
* laravelでCURDアプリを作る。手順や設定、ソースコードの生成の依頼
* DBはSQLiteを使用
* Laravelのバージョンは12を使用
* PHPのバージョンは8.2を使用
* Windows環境での開発
* Laravelのインストールから、モデル、マイグレーション、コントローラー、ルーティング、ビューの作成までの手順を詳細に記載
* ビューは、Vue.js使用し、フロントエンドはシンプルでレスポンシブデザインなCRUD操作を行う。
* 必要なパッケージのインストールや設定ファイルの編集も含める
* テーブルは、担当者マスタ。テーブルIDは emp、項目IDは id , name , email
* ビューはCRUD詳細なソース生成

#環境
* windows
* php 8.2
* sqlite
* laravel 12
* Vuew.jsを使用し、フロントエンドはシンプルなCRUD操作

#仕様
* laravel new でインストール（vue.js使用）の作成の手順
* laravel 環境.envなど設定の手順
* モデル、マイグレーション作成の手順
* マイグレーション実行（テーブル作成）
* コントローラーとリソースCRUD作成
* ルート設定
* コントローラー編集
* モデルにfillable追加
* ビュー作成。詳細な一覧画面、新規登録・編集画面や削除処理のソースコードを生成
* サーバ起動
* その他、必要な編集などあれば指示ください

chatGPTの回答

以下に、Laravel 12 + Vue.js で担当者マスタ（emp）テーブルのCRUDアプリをWindows上で構築するための詳細手順とコードを提示します。

✅ 1. Laravel プロジェクト作成（Vue対応）
bash
コピーする
編集する
laravel new emp-crud-app --jet --stack=inertia
cd emp-crud-app
Jetstream + Inertia（Vue）を選択しています。

必要なNodeモジュールもインストール：

bash
コピーする
編集する
npm install
npm run dev
✅ 2. .env で SQLite 設定
.env ファイルを編集：

env
コピーする
編集する
DB_CONNECTION=sqlite
DB_DATABASE=${absolute_path_to_your_project}/database/database.sqlite
SQLiteファイル作成：

bash
コピーする
編集する
touch database/database.sqlite
✅ 3. モデルとマイグレーション作成
bash
コピーする
編集する
php artisan make:model Emp -m
生成された database/migrations/xxxx_xx_xx_create_emps_table.php 編集：

php
コピーする
編集する
public function up(): void
{
    Schema::create('emps', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('email')->unique();
        $table->timestamps();
    });
}
マイグレーション実行：

bash
コピーする
編集する
php artisan migrate
✅ 4. コントローラ作成（API）
bash
コピーする
編集する
php artisan make:controller EmpController
app/Http/Controllers/EmpController.php 編集：

php
コピーする
編集する
namespace App\Http\Controllers;

use App\Models\Emp;
use Illuminate\Http\Request;

class EmpController extends Controller
{
    public function index()
    {
        return Emp::all();
    }

    public function store(Request $request)
    {
        return Emp::create($request->validate([
            'name' => 'required|string',
            'email' => 'required|email|unique:emps,email',
        ]));
    }

    public function update(Request $request, Emp $emp)
    {
        $emp->update($request->validate([
            'name' => 'required|string',
            'email' => 'required|email|unique:emps,email,' . $emp->id,
        ]));
        return $emp;
    }

    public function destroy(Emp $emp)
    {
        $emp->delete();
        return response()->json(['message' => 'Deleted']);
    }
}
✅ 5. モデル Emp 編集
php
コピーする
編集する
protected $fillable = ['name', 'email'];
✅ 6. ルーティング設定
routes/web.php にVue用ルート：

php
コピーする
編集する
use Inertia\Inertia;
use App\Models\Emp;

Route::get('/', function () {
    return Inertia::render('Emp/Index');
});
routes/api.php にAPI用ルート：

php
コピーする
編集する
use App\Http\Controllers\EmpController;

Route::get('/emps', [EmpController::class, 'index']);
Route::post('/emps', [EmpController::class, 'store']);
Route::put('/emps/{emp}', [EmpController::class, 'update']);
Route::delete('/emps/{emp}', [EmpController::class, 'destroy']);
✅ 7. Vueコンポーネント作成
resources/js/Pages/Emp/Index.vue

vue
コピーする
編集する
<template>
  <div class="p-6">
    <h1 class="text-2xl font-bold mb-4">担当者マスタ</h1>

    <form @submit.prevent="save">
      <input v-model="form.name" type="text" placeholder="名前" class="border p-1 mr-2">
      <input v-model="form.email" type="email" placeholder="メール" class="border p-1 mr-2">
      <button type="submit" class="bg-blue-500 text-white px-2 py-1 rounded">保存</button>
    </form>

    <table class="mt-6 w-full border">
      <thead>
        <tr>
          <th class="border px-2">名前</th>
          <th class="border px-2">メール</th>
          <th class="border px-2">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="emp in emps" :key="emp.id">
          <td class="border px-2">{{ emp.name }}</td>
          <td class="border px-2">{{ emp.email }}</td>
          <td class="border px-2">
            <button @click="edit(emp)" class="text-blue-500 mr-2">編集</button>
            <button @click="remove(emp.id)" class="text-red-500">削除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const emps = ref([])
const form = ref({ name: '', email: '', id: null })

const fetchEmps = async () => {
  const { data } = await axios.get('/api/emps')
  emps.value = data
}

const save = async () => {
  if (form.value.id) {
    await axios.put(`/api/emps/${form.value.id}`, form.value)
  } else {
    await axios.post('/api/emps', form.value)
  }
  form.value = { name: '', email: '', id: null }
  fetchEmps()
}

const edit = (emp) => {
  form.value = { ...emp }
}

const remove = async (id) => {
  await axios.delete(`/api/emps/${id}`)
  fetchEmps()
}

onMounted(fetchEmps)
</script>
✅ 8. Inertia登録（resources/js/app.js）
js
コピーする
編集する
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'

createInertiaApp({
  resolve: name => require(`./Pages/${name}.vue`),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})
✅ 9. 開発サーバ起動
bash
コピーする
編集する
php artisan serve
npm run dev
✅ 備考・追加
認証が必要な場合は、Jetstream認証機能（--teamsあり or なし）を使ってください。

APIリクエストにCSRFトークンを自動付与するよう axios 設定が必要な場合は resources/js/bootstrap.js を編集します。

必要であれば ZIPで一式まとめたり、ステップごとのファイル出力も可能です。ご希望があればどうぞ。

２．chatGPT プロンプト２ 見積ヘッダ、見積明細の1対NのCRUDアプリ

#指示書
* laravelでCURDアプリを作る。手順や設定、ソースコードの生成の依頼
* DBはSQLiteを使用
* Laravelのバージョンは12を使用
* PHPのバージョンは8.2を使用
* Windows環境での開発
* Laravelのインストールから、モデル、マイグレーション、コントローラー、ルーティング、ビューの作成までの手順を詳細に記載
* ビューは、Vue.js使用し、フロントエンドはシンプルでレスポンシブデザインなCRUD操作を行う
* 必要なパッケージのインストールや設定ファイルの編集も含める
* テーブル1は、見積ヘッダ。テーブルIDは estimate_h、項目IDは id , cust_id estimate_date, status, total_amount
* テーブル2は、見積明細。テーブルIDは estimate_b、項目IDは id , lno, item_id , description, quantity, unit_price, amount , estimate_h_id
* 見積ヘッダ(1)、見積明細(N)の1対NのCURDアプリ作りたい
* Bladeビュー作成も、1対Nの詳細なソースを生成してください

#環境
* windows
* php 8.2
* sqlite
* laravel 12
* Vuew.jsを使用し、フロントエンドはシンプルなCRUD操作

#仕様
* laravel new でインストール（vue.js使用）の作成の手順
* laravel 環境.envなど設定の手順
* モデル、マイグレーション作成の手順
* マイグレーション実行（テーブル作成）
* コントローラーとリソースCRUD作成
* ルート設定
* コントローラー編集
* モデルにfillable追加
* ビュー作成。詳細な一覧画面、新規登録・編集画面や削除処理のソースコードを生成
* サーバ起動
* その他、必要な編集などあれば指示ください

chatGPTの回答

以下は、Windows環境でLaravel 12 + SQLite + Vue.js を使い、1対N構造（見積ヘッダ estimate_h：見積明細 estimate_b）のCRUDアプリを構築するための完全な手順とコード例です。

✅ 1. Laravel プロジェクト作成（Vue.js対応）
bash
コピーする
編集する
laravel new estimate-crud-app --jet
cd estimate-crud-app
php artisan jetstream:install inertia
npm install && npm run build
php artisan migrate
Jetstream with Inertia を選ぶことで Vue.js 環境がすぐ整います。

✅ 2. SQLite設定（.env）
.env を以下のように修正：

env
コピーする
編集する
DB_CONNECTION=sqlite
DB_DATABASE=${absolute_path_to}/database/database.sqlite
ファイル作成：

bash
コピーする
編集する
touch database/database.sqlite
✅ 3. マイグレーション＆モデル作成
見積ヘッダ estimate_h モデル
bash
コピーする
編集する
php artisan make:model EstimateH -m
database/migrations/xxxx_create_estimate_hs_table.php
php
コピーする
編集する
Schema::create('estimate_hs', function (Blueprint $table) {
    $table->id();
    $table->string('cust_id');
    $table->date('estimate_date');
    $table->string('status');
    $table->decimal('total_amount', 10, 2);
    $table->timestamps();
});
見積明細 estimate_b モデル
bash
コピーする
編集する
php artisan make:model EstimateB -m
database/migrations/xxxx_create_estimate_bs_table.php
php
コピーする
編集する
Schema::create('estimate_bs', function (Blueprint $table) {
    $table->id();
    $table->unsignedBigInteger('estimate_h_id');
    $table->integer('lno');
    $table->string('item_id');
    $table->text('description')->nullable();
    $table->integer('quantity');
    $table->decimal('unit_price', 10, 2);
    $table->decimal('amount', 10, 2);
    $table->foreign('estimate_h_id')->references('id')->on('estimate_hs')->onDelete('cascade');
    $table->timestamps();
});
bash
コピーする
編集する
php artisan migrate
✅ 4. モデル編集（リレーション + fillable）
app/Models/EstimateH.php
php
コピーする
編集する
class EstimateH extends Model
{
    protected $fillable = ['cust_id', 'estimate_date', 'status', 'total_amount'];

    public function details()
    {
        return $this->hasMany(EstimateB::class);
    }
}
app/Models/EstimateB.php
php
コピーする
編集する
class EstimateB extends Model
{
    protected $fillable = ['estimate_h_id', 'lno', 'item_id', 'description', 'quantity', 'unit_price', 'amount'];

    public function header()
    {
        return $this->belongsTo(EstimateH::class, 'estimate_h_id');
    }
}
✅ 5. コントローラ作成
bash
コピーする
編集する
php artisan make:controller EstimateController
app/Http/Controllers/EstimateController.php（簡略）
php
コピーする
編集する
class EstimateController extends Controller
{
    public function index()
    {
        return Inertia::render('Estimate/Index', [
            'estimates' => EstimateH::with('details')->get()
        ]);
    }

    public function store(Request $request)
    {
        $estimate = EstimateH::create($request->only(['cust_id', 'estimate_date', 'status', 'total_amount']));

        foreach ($request->input('details', []) as $detail) {
            $estimate->details()->create($detail);
        }

        return redirect()->route('estimates.index');
    }
}
✅ 6. ルーティング設定
routes/web.php
php
コピーする
編集する
Route::get('/estimates', [EstimateController::class, 'index'])->name('estimates.index');
Route::post('/estimates', [EstimateController::class, 'store'])->name('estimates.store');
✅ 7. Vue コンポーネント作成（Inertia.js）
resources/js/Pages/Estimate/Index.vue
vue
コピーする
編集する
<template>
  <div class="p-4">
    <h1 class="text-xl font-bold mb-4">見積一覧</h1>
    <table class="w-full border">
      <thead>
        <tr>
          <th>ID</th>
          <th>顧客ID</th>
          <th>日付</th>
          <th>状態</th>
          <th>金額</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="est in estimates" :key="est.id">
          <td>{{ est.id }}</td>
          <td>{{ est.cust_id }}</td>
          <td>{{ est.estimate_date }}</td>
          <td>{{ est.status }}</td>
          <td>{{ est.total_amount }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
defineProps({ estimates: Array })
</script>
✅ 8. Bladeでの詳細ビュー（任意）
Blade側でも表示したい場合は以下のように作成：

resources/views/estimate_h/index.blade.php
blade
コピーする
編集する
<table>
  <thead><tr><th>ID</th><th>顧客</th><th>状態</th></tr></thead>
  <tbody>
    @foreach($estimates as $est)
      <tr>
        <td>{{ $est->id }}</td>
        <td>{{ $est->cust_id }}</td>
        <td>{{ $est->status }}</td>
      </tr>
    @endforeach
  </tbody>
</table>
✅ 9. 開発サーバ起動
bash
コピーする
編集する
php artisan serve
npm run dev
✅ 10. 必要パッケージ一覧（確認）
bash
コピーする
編集する
composer require laravel/jetstream
npm install vue @vitejs/plugin-vue
🔄 今後の拡張候補
編集・削除ルートの追加

バリデーションルールの追加

コンポーネント分割（EstimateForm.vue, EstimateList.vue）

印刷やPDF出力機能

ご希望があれば以下の項目も提供可能です：

明細も含んだ新規登録フォームのVueテンプレート

API構成（APIリソース形式での分離）

Blade単独構成での完全CRUD画面

続きが必要でしたらご指示ください。