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

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

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

# 対象者

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

# Inertiaを使ったルーティング

npm経由でInertia.jsを導入したらルーティングの初期設定がこんな風になっていたので、記憶を整理しつつルーティングの基礎的な内容をまとめていきます。
```php: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メソッドの中身を覗いてみましょう。
```php: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と呼ぶ）を作成して表示させてみます。

```php: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名に渡ります。

```vue: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ページ内の黄色い枠内を編集してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431046/7403ce05-4ce0-d0ac-096c-34867f0f8e8f.png)

**修正前のコード**
```vue: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>
```

**修正後のコード**
```vue:Welcome.vue
<p class="mt-4 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
  {{ test }}
</p>
```

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


先ほどまで英語がびっしり表示されていましたが、変更したことによってこうなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431046/c80cc8b0-b460-fd2d-838d-48c7f2f5fed5.png)

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

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

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

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

言わずもがな先ほどまで学習していた書き方です。
```php: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ができます。

```shell
    php artisan make:controller InertiaTestController --resource
```

InertiaTestController.phpが作成されましたね。
```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 にアクセス

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

### 第２引数の [InertiaTestController::class, 'index']
InertiaTestControllerのindexメソッドを呼び出します。


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

## indexメソッドの処理を書く

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

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

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

```vue: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 にアクセスします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431046/18c17a5d-a75a-f723-90a7-6810bb373382.png)


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