【Laravel × Vue × Inertia】Bladeばかり触ってたらVueとInertiaを忘れてしまったからまとめる

はじめに

始めは自分用のメモとして残すつもりでしたが、せっかくなら公開して1人だけでも役に立てればと思いQiitaに投稿します。
説明力皆無で有名(?)な私ですが、少しでも分かりやすいように記載していきますので、良ければ覗いていってください。

随時更新していく予定です。

対象者

• 基礎的なプログラミングが書ける・理解している人
• Web周りの基礎知識・スキルがある人
• LaravelとVueを組み合わせてコードを書きたい人

Inertiaを使ったルーティング

npm経由でInertia.jsを導入したらルーティングの初期設定がこんな風になっていたので、記憶を整理しつつルーティングの基礎的な内容をまとめていきます。

web.php

Route::get('/', function () {
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
    ]);
});

Inertia::renderは第一引数にコンポーネント、第二引数にプロパティ配列を渡すことができます。
コンポーネントの呼び出し、かつコンポーネントへプロパティ配列を渡すことで画面側で値を表示させることができます。

renderメソッド

少しrenderメソッドの中身を覗いてみましょう。

src/vendor/inertiajs/inertia-laravel/src/Inertia.php

@method static \Inertia\Response render(string $component, array|\Illuminate\Contracts\Support\Arrayable $props = [])

第１引数：string型の$component

第２引数：array型の$props

ということが分かります。

Inertia::renderの中身

第2引数にセットしているデータについて説明します。

• 'canLogin' => Route::has('login')
  • login という名前のルートが存在するかどうかを確認しています。
    loginルートがあればtrueを、なければfalseをキーへセットします。
• 'canRegister' => Route::has('register')
  • loginと同様に、registerルートの存在を確認し、trueかfalseをキーへセットします。
• 'laravelVersion' => Application::VERSION
  • 現在のLaravelのバージョンを取得し、キーへセットします。
• 'phpVersion' => PHP_VERSION
  • サーバーで動作しているPHPのバージョンをキーへセットします。

これらのように書かれたコードをまとめると
上記でセットされた以下の４つのプロパティ配列をWelcomeコンポーネントに渡しているということになります。

• canLogin
• canRegister
• laravelVersion
• phpVersion

先ほどからちょくちょく出ているWelcomeコンポーネントは
src/resources/js/Pages/Welcome.vueにあります。
その中の<template>を画面にレンダリングしています。

試しに自作プロパティ配列（以後propsと呼ぶ）を作成して表示させてみます。

web.php

Route::get('/', function () {
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
        // ↓追加
        'test' => '文字列のpropsを渡す',
    ]);
});

web.phpで追加した「test」がWelcome.phpの同じprops名に渡ります。

Welcome.vue

<script setup>
import { Head, Link } from '@inertiajs/vue3';

defineProps({
    canLogin: {
        type: Boolean,
    },
    canRegister: {
        type: Boolean,
    },
    laravelVersion: {
        type: String,
        required: true,
    },
    phpVersion: {
        type: String,
        required: true,
    },

    // 自作propsを追加
    // props名：test
    // データ型：String型
    test: {
        type: String,
    },
});
</script>

Welcomeページ内の黄色い枠内を編集してみましょう。

修正前のコード

Welcome.vue

<p class="mt-4 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
  Laravel has wonderful documentation covering every aspect of the framework. Whether you are a newcomer or have prior experience with Laravel, we recommend reading our documentation from beginning to end.
</p>

修正後のコード

Welcome.vue

<p class="mt-4 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
  {{ test }}
</p>

中身の文章をごっそり削除し、代わりに新規追加したtestを入れます。
※この時{{}}を忘れずに

先ほどまで英語がびっしり表示されていましたが、変更したことによってこうなります。

コントローラーからWelcomeコンポーネントを呼び出そう

これまではコントローラーを経由せずにルーティングをしてきましたが、コントローラーを経由してWelcomeコンポーネントを呼び出す方法もあります。

次はその方法について学習していきましょう。

ルーティングから直接Welcomeコンポーネントを呼び出す方法

言わずもがな先ほどまで学習していた書き方です。

web.php

Route::get('/', function () {
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
    ]);
});

コントローラーを経由してから、Welcomeコンポーネントを呼び出す方法

コントローラー作成

以下コマンドを実行することで、App\Http\Controller内に指定した名前のControllerができます。

    php artisan make:controller InertiaTestController --resource

InertiaTestController.phpが作成されましたね。

InertiaTestController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class InertiaTestController extends Controller
{
    /**
     * Display a listing of the resource.
     */
    public function index()
    {
        //
    }

    /**今はindex()のみ使うため省略**/
}

ルーティングのweb.phpで検索リンクとコントローラーの指定をしましょう。

php.web.php

    Route::get('/inertia',[InertiaTestController::class, 'index']);

第１引数の /inertia

http://localhost/inertia にアクセス

注意
アクセス先の/inertiaより前は環境によって異なるので、ご自身の環境に合わせて修正してください。

第２引数の [InertiaTestController::class, 'index']

InertiaTestControllerのindexメソッドを呼び出します。

ロジックは「Diy.vueコンポーネントのpropsにnameとemailを渡して表示させる」という単純なものです。

indexメソッドの処理を書く

InertiaTestController.php

    public function index()
    {
        return Inertia::render('Diy', [
            'name' => 'テスト太郎',
            'email' => '[e-mail]',
        ]);
    }

動作に必要最低限なコードのみ書きました。

コントローラーから渡されたデータを受け取り画面に表示させる

Diy.vue

<script setup>

defineProps({
    // nameというprops名（簡単に言えば変数名と同じようなもの）
    name: {
        // 型はString型
        type: String,
    },
    // emailというprops名
    email: {
        // 型はString型
        type: String,
    },
});

</script>

<template>
    {{ name }}
    <br>
    {{ email }}
</template>

{{ }}の中にprops名を書くことで、受け取ることができます。
そのままだとnameとemailが繋がって表示されてしまうので<br>を挟んで1行ずつ表示させます。

修正が終わったら早速　http://localhost/inertia にアクセスします。

無事にInertiaTestController.phpでコンポーネントに渡した値が画面に表示されました！