소개

2021년 새해 복 많이 받으세요!
2020년은 여러가지로 코로나에 농락된 해였습니다.
이 역경에 맞서 사회에 공헌되고 있는 모든 여러분에게 경의를 표하겠습니다.
아마 2021년도 변함없는 환경하인 것 같습니다만…

그런데…PHPer의 여러분, Laravel8을 건간 사용합니까?
Laravel8에서는 Laravel Jetstream이라는 UI 라이브러리가 준비되어있어 쉽게 응용 프로그램을 만들 수있게되었습니다.
이 Jetstream은 이전부터 비슷한 것들이 있었지만 더 쉽게 만들 수 있습니다.
CSS를 Bootstarp에서 Tailwind CSS로 변경하고 있어 유연하게 CSS를 사용하여 UI를 만들 수 있습니다.
또한 구현에서 Livewire를 사용하여 Blade를 사용할지 Inertia.js를 사용하여 Vue를 사용할지를 선택할 수 있습니다.
Laravel8을 접한 후 Inertia를 처음으로 알았는데 매우 의미있는 사상으로 편리했기 때문에 그 Inertia에 대해 쓰려고 생각합니다.

Inertia란?

Inertia는 "Modern Monolith (모던 모노리스)"라는 것을 주장하고 있습니다.
마이크로 서비스가 퍼지는 가운데, 모놀리식은 시대 착오인 생각이 드네요.
프런트 엔드 + 백엔드 구성에서는 API를 설계하고 구현하고 프론트에서는 그것을 호출하고 묘사합니다.
Inertia는 "매번 쓰기"를 라이브러리에 흡수하여 구현을 단순화하는 라이브러리입니다.
API 디자인은 필요하지 않으며 API 호출도 필요하지 않습니다.
변수와 라우팅은 백엔드 구현을 기반으로 프런트 엔드 변수 할당 및 라우팅을 생성합니다.
프런트 엔드 + 백엔드의 구성이면서, 서버측 템플릿을 취급하도록(모놀리식인 것처럼), 구현이 가능합니다.
그래서 Modern이면서 Monolith인 것입니다.

구현 샘플

routes/web.php

<?php

use Illuminate\Support\Facades\Route;

// 通常のroutingです。
Route::resource('/user','App\Http\Controllers\UserController');

UserController.php

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Inertia\Inertia;

class UserController extends Controller
{
    public function index()
    {
        // Inertia::renderを呼び出す事で、どのコンポーネントに対して
        // どの変数をセットするかをここできめ、vueにも反映させることができます。
        return Inertia::render(
            'User/Index',
            ['users' => User::all()]
        );
    }

    // show
    // create
    // store
    // edit
    // update
    // destroy
}

resources/js/Pages/User/index.vue

<template>
  <layout title="Users">
    <div v-for="user in users" :key="user.id">
      <inertia-link :href="`/users/${user.id}`">
        {{ user.name }}
      </inertia-link>
      <div>{{ user.email }}</div>
    </div>
  </layout>
</template>

<script>
import Layout from '../Shared/Layout'

export default {
  components: {
    Layout,
  },
  /* Controllerで指定した変数をpropsで受け取るため、同じ変数名を指定します。
    IFはInertiaにおまかせです。
  */
  props: {
    users: Array,
  },
}
</script>

vue 측에서의 라우팅은 Vue Router를 사용하지 않고 Inertia 측에서 받아들입니다.
그 때문에, this.$route.params등은 사용할 수 없고, laravel측으로부터 파라미터는 전달하게 됩니다.
* vue를 만지고 있으면 사용할 수 있는 것이 당연하다고 생각하고 있어, 사용할 수 없고 약간 빠졌습니다…

요약

구현 샘플과 같이 API의 응답시도, 프런트에서 수신하는 측도 평소의 기술은 필요가 없는 것을 알 수 있습니다.
실은 컴퍼넌트의 설계도 어느 정도도 Inertia의 설계에 끌려가기 때문에, 구성이 갖추어져 좋을지도 모릅니다.
단점으로서는, 블랙 박스화해 버리는 것 정도일까요.
단지 프레임워크 자체도 어느 정도 블랙박스화하고 있는 것으로, 그것과 같은 것이라고 생각하면, 신경이 쓰이지 않을 정도의 레벨입니다.
메리트로서는, 「백엔드 템플릿과 비슷한 느낌으로 Vue를 사용할 수 있다」「API 교환의 코드가 극단적으로 줄인다」등입니다.

부디, 모노 모리스 라이브러리 「Inertia」를 사용해 봐주세요.

그럼 올해도 최선을 다합시다!