モデル・コントローラ・ビュー実装で一覧表示まで
✅今回のゴール
- FixedCostモデルを作成し、DBと接続できるようにする
- コントローラを作成してCRUD用メソッドを用意する
- 一覧ページを作成して固定費を表示する
- 共通レイアウトを導入してアプリ全体の見た目を統一する
✅ステップ概要
- モデル作成（
FixedCost）と$fillable設定 - コントローラ作成（
--resourceオプションでCRUDメソッド生成） - ルーティング設定（
Route::resource） - Bladeビュー作成（一覧ページ）
- 共通レイアウト作成（
layouts.app） - 一覧表示
✅モデル作成（FixedCost）と $fillable 設定
モデルがわからない方は下記サイトが分かりやすいので見てみてください～
◇モデル（FixedCost）を作成します。
下記コマンドでモデルが作成できる。
実行コマンド
sail artisan make:model FixedCost
実行すると、app\Modelsディレクトリ配下にFixedCostというファイルが作られているのがわかります。
◇作成されたモデルファイルに$fillableを設定する。
- `$fillable`とは
- 簡単に言うと、更新処理などで`$request->all()`の様に一括代入をする時の脆弱性対策。
下記がとても分かりやすいので参考までに。
今回はid/作成日時/更新日時を$fillable対象から外すように、下記の様に設定
.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Factories\HasFactory;
class FixedCost extends Model
{
use HasFactory;
protected $fillable = [
'year_month',
'rent',
'common_fee',
'parking_fee',
'electricity',
'water',
'gas',
'other',
'memo',
];
}
✅コントローラ作成（--resource オプションでCRUDメソッド生成）
下記コマンドでコントローラ作成。
実行コマンド
sail artisan make:controller FixedCostController --resource
- `--resource` オプションとは
- php artisan make:controller コマンドにつけるオプションで、CRUDに必要な基本的なメソッドを自動生成してくれる機能。
実行後、app\Http\Controllers配下にFixedCostControllerが作成されていることが確認できる。
作成されたFixedCostController.php
class FixedCostController extends Controller
{
public function index() { /* 一覧表示 */ }
public function create() { /* 新規登録フォーム */ }
public function store(Request $request) { /* 新規登録処理 */ }
public function show(string $id) { /* 詳細表示 */ }
public function edit(string $id) { /* 編集フォーム */ }
public function update(Request $request, string $id) { /* 更新処理 */ }
public function destroy(string $id) { /* 削除処理 */ }
}
✅ルーティング設定（Route::resource）
routes/web.phpにFixedCostControllerへのルートを追加
.php
Route::resource('fixed_costs', FixedCostController::class);
✅Bladeビュー作成（一覧ページ）
まずは、resources\viewsディレクトリ配下にfixed_costsフォルダを作成。
fixed_costs配下に、index.blade.phpの名前でbladeファイルを作成。
ファイルにはシンプルに一覧を表示するHTMLを記述。
（ここはとりあえず表示させるだけなのでチャットGPTに作ってもらう）
index.blade.php
@extends('layouts.app')
@section('content')
<h1>固定費一覧</h1>
<table border="1">
<tr>
<th>年月</th>
<th>家賃</th>
<th>共益費</th>
<th>駐車場代</th>
<th>電気代</th>
<th>水道代</th>
<th>ガス代</th>
<th>その他</th>
<th>メモ</th>
</tr>
@foreach ($fixedCosts as $cost)
<tr>
<td>{{ $cost->year_month }}</td>
<td>{{ $cost->rent }}</td>
<td>{{ $cost->common_fee }}</td>
<td>{{ $cost->parking_fee }}</td>
<td>{{ $cost->electricity }}</td>
<td>{{ $cost->water }}</td>
<td>{{ $cost->gas }}</td>
<td>{{ $cost->other }}</td>
<td>{{ $cost->memo }}</td>
</tr>
@endforeach
</table>
@endsection
✅共通レイアウト作成（layouts.app）
同じく、共通レイアウトも作成。
（こちらもとりあえずのモノなのでチャットGPTに作ってもらう）
app.blade.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>固定費管理アプリ</title>
</head>
<body>
<header>
<h1>固定費管理アプリ</h1>
<nav>
<a href="{{ route('fixed_costs.index') }}">一覧</a> |
<a href="{{ route('fixed_costs.create') }}">新規登録</a>
</nav>
</header>
<main>
@yield('content')
</main>
<footer>
<small>© 2025 固定費管理アプリ</small>
</footer>
</body>
</html>
✅一覧表示
A5SQLを使って適当にデータを入れてみる。
http://localhost/fixed_costsへアクセスすると、、、、
表示されました～✨
✅まとめ
モデルとコントローラを作成し、DBと接続できるようにした。
Route::resource を使ってCRUDルートを自動生成した。
一覧ビューを作成し、固定費データを表示できるようにした。