LaravelとInertiaJS使う際の開発の流れメモ（自分用）

Laravel開発の流れ

自分用メモ

前提条件

• Laravel11
• InertiaJS
• PHP8系
• Docker Desktop
• sail
• MariaDB

0. 準備

プロジェクトの作成

sailを使って開発を進める

Terminal

curl -s "https://laravel.build/Project_Name?php=82&with=mariadb" | zsh

コンテナを起動

Docker Desktopがインストールされていること前提。必要なコンテナが全て立ち上がる。

Terminal

./vendor/bin/sail up -d

コンテナを停止

Terminal

./vendor/bin/sail down

localhostにアクセスするとLaravelの初期表示

初期表示

1. マイグレーションファイルの作成

Terminal

./vendor/bin/sail php artisan make:migration create_shops_table

• テーブル名は複数形
• database/migration配下に作成されているか確認。

2. DBに接続できるか確認

Terminal

./vendor/bin/sail php artisan migrate:status

.envファイルを元にGUIツールでも接続できるかも確認する。

DB_DATABASEなどをデフォルトから変更してしまうとアクセス権が付与されていない状態になってしまい、再設定が必要になってしまうので要注意。(DBに入ってアクセス権を付与する必要あり)（場合にに応じてボリュームやキャッシュの削除が必要の可能性あり）

3. 作成したマイグレーションファイルを元にテーブルを作成

Terminal

./vendor/bin/sail php artisan migrate

直前のバージョンに戻したい

Terminal

./vendor/bin/sail php artisan migrate:rollback

• 全てのマイグレーションを戻す：migrate:reset
• 直近の2回分のマイグレーションを戻す：migrate:rollback --step=2

4. Modelの作成

Terminal

./vendor/bin/sail php artisan make:model Shop

モデル名は単数系かつ大文字に注意

カラムへの代入、編集を制御する

許可する

Models/Sample.php

protected $fillable = [
    'name',
    'email',
    'password'
];

許可しない

Models/Sample.php

protected $guarded = [
    'id',
    'timestamp',
];

fillableかguardedを設定する必要がある。fillableを設定するのが一般的だそう。

両方を設定するのは推奨されていないそう。

5. テストデータを作成

Seederを使う

Factoryを準備

どんなテストデータを作成するか内容を定義

Terminal

./vendor/bin/sail php artisan make:factory ShopFactory --model=shop

ファイル名はモデルファイルと合わせたほうがいいかも、
--modelでどのモデルを対応しているか定義している。

例）ShopFactoryファイル

database/factories/ShopFactory.php

public function definition(): array
    {
        return [
            'name' => $this->faker->streetName.' Shop',
            'location' => $this->faker->address,
            'description' => $this->faker->realText(100)
        ];
    }

Faker
ダミーデータ生成に便利なライブラリ詳しくは以下を参照
https://fwhy.github.io/faker-docs/

Seederファイルを記述

database/seeders/DatabaseSeeder.php

public function run(): void
{
    // User::factory(10)->create();

    // User::factory()->create([
    //     'name' => 'Test User',
    //     'email' => '[e-mail]',
    // ]);

    + Shop::factory()->count(10)->create();
}

前述したFactoryファイルを使って10件のダミーデータを作成する

ダミーデータを流し込む

Terminal

./vendor/bin/sail php artisan db:seed

Factoryで定義したダミーデータが挿入される。

5. Contollerにロジックを記述。

Controllerファイルを作成

./vendor/bin/sail php artisan make:controller ShopController

取得ロジックを記述

app/Https/Controllers/ShopController.php

namespace App\Http\Controllers;
+ use Inertia\Inertia;

+ use App\Models\Shop;

class ShopController extends Controller
{
    public function index() {
        $shop = Shop::all();
        //データが取得できているかデバッグして確認
        dd($shops);
        return Inertia::render('Home',[
            'shops' => $shop,
        ]);
    }
}

今回はInertiaを使うのでインポートを忘れず。
関数の中でModelからデータを取得するするのでModelのインポートの必要

6. ルーティングを設定

記述するファイルは routes/web.php

routes/web.php

Route::get('/home', [ShopController::class, 'index'])->name('shop.index');

今回の場合は /home にアクセスしたら ShopControllerのindexメソッドが実装される。

7. デバッグ

app/Https/Controllers/ShopController.php

//データが取得できているかデバッグして確認
+ dd($shops);

基本的にattributes、original、relationsに取得したデータが入っている。

8.　フロントでデータ表示

InertiaJSを使用しているのでjsxファイルで表示を行う。使い方はReactと同じ。

Home.jsx

import React from "react";

const Home = (props) => {
    return (
        <div>
            <h1>ホーム</h1>
            <h2>ショップ一覧</h2>
            <ul>
                {props.shops.map((shop) => (
                    <li key={shop.id}>{shop.name}</li>
                ))}
            </ul>
        </div>
    );
};

export default Home;

propsでバッグエンドのから返却されるデータを受け取り、mapを使って表示をしている。

認証機能を実装

1.プロジェクトにLravel Breezeをインストール

./vendor/bin/sail composer require laravel/breeze --dev

2.BreezeコマンドのInertiaオプションでReactを入れる

./vendor/bin/sail php artisan breeze:install react

3.フロントの依存パッケージをインストール

./vendor/bin/sail npm install

4.フロントを起動

./vendor/bin/sail npm run dev

5.認証に使うテーブルを作成するためにマイグレーションを行う

./vendor/bin/sail php artisan migrate

上記を行うと認証に依存するファイルの追加、削除等が行われてフロントがReactを使用する方に置き換わる