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

Laravel

はじめに

始めは自分用のメモとして残すつもりでしたが、せっかくなら公開して誰かの役に立てればと思い投稿しようと思います。
説明力皆無な私ですが、少しでも分かりやすいように記載していきます。

良ければ覗いていってください。

この記事の対象者

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

Inertiaを使ったルーティング

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

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メソッドの中身を覗いてみましょう。

@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></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に渡されます。

<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ページ内の黄色い枠内を編集してみましょう。
image.png

修正前のコード

<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>

修正後のコード

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

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

先ほどまで英語がびっしり表示されていましたが、変更したことによってWeb.phpから渡した値「文字列のpropsを渡す」が画面に表示されます。
image.png

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

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

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

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

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

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が作成されましたね。

<?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で検索リンクとコントローラーの指定をしましょう。

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

第１引数の /inertia

[http://localhost/inertia](http://localhost/inertia) にアクセス

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

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

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

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

indexメソッドの処理を書く

public function index()
{
	return Inertia::render('Diy', [
		'name' => 'テスト太郎',
		'email' => 'test@test.com',
	]);
}

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

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

<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](http://localhost/inertia)にアクセスします。

image.png

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

コメント

タイトルとURLをコピーしました